这周 AI 圈真是炸开了锅，信息量大到爆炸！刚围观完 Google I/O 2025 大会的各种神仙打架，AI 新应用、新模型层出不穷。

最近昆仑万维又面向全球发布了天工超级智能体 Skywork Super Agents，目前我还没有深度体验，不过已经看了几篇 AI 圈大佬们的评测文章了，确实有不少惊艳的地方。

AI 发展太快，现在每周都有海量的新资讯、新产品涌现。

最头疼的是如何从这些铺天盖地的信息茧房里，快速抓取到最核心、最关键的一手消息，掌握最新的AI动态？

更进一步，如果想把这些宝贵的AI资讯和酷炫的新产品分享给更多人，干巴巴的长文大部分人都很难阅读下去，比如下面的小米发布会文章，信息量很大。

一个设计精美、重点突出、又能快速生成的分享网页，绝对能让你的信息传播效率和吸引力瞬间拉满！

藏老师 & 向阳乔木在公众号分享了不少网页制作的提示词，特别是首次接触 Bento Grid 风格，很适合产品发布/财报/技术分享等网页场景。

学习一个新知识就是不断实践和优化的过程，受他们的启发，用 Bento Grid 风格尝试了下面几个场景（均来自本周资讯）：

Google I/O 2025 大会

百度 2025 Q1 财报

昆仑万维发布天工超级智能体 Skywork Super Agents

小米 15 周年战略新品发布会

实话说 Bento Grid 风格和产品发布，简直绝配！分享给朋友，引来一阵好评！好奇这么酷炫的图片怎么做的？

今天就来揭晓一下答案，不需要请设计大神，不需要懂代码，纯小白也能操作，顺便分享一下我的制作心得。

网页制作完整版教程

我这里选择在 Cursor 中演示，高频使用比较方便。朋友们可以选择 Google AI Studio 或者 Google Gemini 官网都可以。

1.整理文章内容，准备完整版提示词 2.在AI工具/网页中输出提示词，开始制作网页

制作完整提示词

提示词核心部分来自藏老师分享，感谢启发！

我这里是选择直接从公众号获取最新资讯，需要安装 fetch MCP ，如何安装推荐大家看看我之前的文章：xxx。

如果不知道 MCP 如何配置或者配置异常，最简单的方案是直接复制文章内容即可。

下面是整理好的完整提示词：

先调用 fetch_fetch_txt mcp 获取文章：https://mp.weixin.qq.com/s/xirh10CmkmNGQGm841PmzA

基于小米15周年战略新品发布会的的关键信息，帮我用类似苹果发布会PPT的Bento Grid风格的视觉设计生成一个中文动态网页展示，具体要求为：

1. 尽量在一页展示全部信息，背景为白色、文字和按钮颜色为纯黑色，高亮色使用小米橙，银灰色作为辅助色。
2. 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
3. 网页需要以响应式兼容更大的显示器宽度比如1920px及以上
4. 中英文混用，中文大字体粗体，英文小字作为点缀
5. 简洁的勾线图形化作为数据可视化或者配图元素
6. 运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
7. 数据可以引用在线的图表组件，样式需要跟主题一致
8. 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
9. 使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
10. 避免使用emoji作为主要图标
11. 不要省略内容要点

最终文件请保存到当前目录下，文件名规则是：风格_报告名。