这篇文章源于我自己做内容分享一个习惯：分享文章解读分析时，喜欢加一张配图，让观看的朋友可以第一时间了解到重点信息，再选择是否要看全文。而这张配图，作为这篇文字内容的信息卡展示，我是用 AI 模型 + 提示词来做的网页生成。
很多朋友都想了解这个网页生成的提示词，过去一段时间也陆续分享过一些，先发出来给大家参考：
六种提示词生成六种精美网页布局（Bento、卡片、杂志、PPT、视差和互动故事布局）- 解析纳瓦尔的忠告：停止过度思考
DeepSeek有惊喜，Claude最优雅，Gemini最完善 ~ 一句提示词测出 AI 模型网页生成能力，实际效果有差距
构建高效的 AI 智能体: 一段提示词一张信息卡重读 Anthropic 优质典范 AI 智能体文章（附提示词教程）
实测 Gemini Pro 2.5 和 Grok 3 根据文章生成网页信息卡 - 风格: 极简技术风
一段提示词生成美观清晰的MCP信息卡片，看 Gemini Pro2.5、DeepSeek V3、Grok3、Qwen3 同台竞技
今天咱们再针对国内外的闭源和开源模型，重新整理和验证提示词的可用性，包括 ChatGPT、Gemini、Claude、Grok 和 DeepSeek、Kimi、Qwen 和 GLM 等，都要实际跑出效果验证。
设计风格和布局很多，咱们列出几种典型实用的，大家可以自己局部微调提示词，做出更多种效果来。
提示词设计和测试
从这几个维度对设计做约束：
-
宽高比 - 9:16、3:4、1:1、4:3、16:9、2.35:1(公众号文章封面) 等(或明确宽高的像素值)
-
布局样式 - Magazine、Bento Grid、Card-Based、 Tile，这几种都比较适合做信息展示
-
设计颜色 - 深色、浅色、某品牌的主色、信纸色、科技风格、手绘风格、Apple 风格、Notion 风格等 (这里可以根据你的需要来指定，或颜色或特定品牌提示都可以)
-
是否允许对内容做精简提炼 - 是、否
内容和布局的搭配方面，9:16 和 3:4 更适合做信息卡展示、承载更多内容，而 16:9、2.35:1 这种更适合做内容精简后的封面展示 （当然也可以承载更多内容，布局以横向展开） 。
接着咱们先初步形成一个提示词模板，选择 Gemini 来看看效果：
请为以下内容生成一个HTML网页，具体要求如下：
视觉设计：采用{布局样式}风格，{设计颜色}主题，营造现代高端氛围。
字体与排版：
使用超大字体或数字突出核心要点，中文采用大号粗体，强调视觉冲击力。
英文使用小号字体作为点缀，与中文形成比例反差，提升设计层次感。
视觉元素：
融入超大视觉元素（如标题、背景图或装饰）以突出重点，与小型元素形成强烈对比。
使用简洁的勾线风格图形作为数据可视化或配图元素，保持现代感和清晰度。
色彩与效果：
运用高亮色（单色透明度渐变）营造科技感，每种高亮色独立使用，避免不同高亮色之间的渐变混杂。
技术要求：
引入专业图标库（如Font Awesome或Material Icons，通过CDN加载），避免使用emoji作为主要图标。
内容要求：{完整呈现所有内容要点，不省略任何信息 or 可精简内容}
尺寸：内容在{宽高比和宽高尺寸}内完成展示（不需要滚动也能完整展示），内容以中文为主展示。
接着咱们用这篇内容试试 Gemini 2.5 Pro 生成效果：
五个实例看明白！Claude Code 不仅限于写代码，还能成为管理生活的超级助手（附提示词和全文精炼信息卡）
约束条件：3:4、Magazine Layout、浅色 发黄的信纸色、允许内容精简
约束条件：9:16、Magazine Layout、浅色 发黄的信纸色、不允许内容精简
约束条件：16:9、Magazine Layout、浅色 类似信纸色、不允许内容精简
接下来咱们试试其他模型的效果
请为以下内容生成一个HTML网页，具体要求如下：
视觉设计：采用{Magazine Layout}风格，{浅色，类似发黄的信纸色}主题，营造现代高端氛围。
字体与排版：
使用超大字体或数字突出核心要点，中文采用大号粗体，强调视觉冲击力。
英文使用小号字体作为点缀，与中文形成比例反差，提升设计层次感。
视觉元素：
融入超大视觉元素（如标题、背景图或装饰）以突出重点，与小型元素形成强烈对比。
使用简洁的勾线风格图形作为数据可视化或配图元素，保持现代感和清晰度。
色彩与效果：
运用高亮色（单色透明度渐变）营造科技感，每种高亮色独立使用，避免不同高亮色之间的渐变混杂。
技术要求：
引入专业图标库（如Font Awesome或Material Icons，通过CDN加载），避免使用emoji作为主要图标。
内容要求：{完整呈现所有内容要点，不省略任何信息}
尺寸：内容在{1200*1800}区域内完成完整展示（不需要滚动也能完整展示），内容以中文为主展示。
Grok 3
OpenAI o3
Claude Sonnet 4
Kimi K2
GLM-4.5
Qwen3-Coder
一些对比结论
在不同模型的生成效果中，Claude Sonnet 4 是效果最丰富的、Gemini 2.5 Pro 是最稳定指令遵循最好的。这两个也是在布局方面最理想的。
Grok 3 比较偏内容平铺，布局稍弱；OpenAI o3 内容突出效果比较好，不过布局方面也比较一般。
Kimi K2 和 GLM-4.5 整体表现居中，布局较为合理，指令遵循也可以，不过没有太多惊喜。Qwen3-Coder 在颜色搭配上会有跳脱，整理布局也还算合理。
对于内容的字数过多的情况，建议先用 AI 模型做一次提炼再做展示，否则内容会很拥挤，或者 AI 模型会默认以更高的高度来滚动展示，不容易形成静态的信息卡页面。
再来补充一个作为封面的提示词：
适合有标题、有一两句概述的文字内容，比如咱们这篇文章的标题，作为公众号的封面，需要同时满足 2.35:1 的比例，1:1 的缩略图比例，同时有效。
提示词可以是这样：
请为以上文字生成一个 HTML 网页
作为封面展示，浅色、类似信纸色的风格
要求文字足够大足够醒目、有高亮、下划线和马克笔等丰富效果
周边可以加入点缀提升美观度和视觉效果
2.3：1 的宽高比，但要保证中间或左边或右边有一个1:1 的区域，单独有效
这次咱们还是用 Gemini 2.5 Pro 来生成示例：
总结
以上提示词，主要是针对文章、论文等内容，做一定提炼后，作为信息卡展示。如果是其他场景的网页展示、封面展示等，大家可以基于上面的提示词做调整，调整后放到 AI 模型里测试，找到一个稳定复现的结果，再把提示词固定下来复用。
大家还有哪些想实现的页面效果或场景，非常欢迎留言给我，咱们一起探索 🤝