一键生成高质量可视化内容
平时工作学习时经常会遇到下面的问题：
- 制作汇报 PPT 时，需要把工作总结梳理成直观的可视化内容
- 一份相对复杂的文档，需要快速理解其中的内容
- 想要根据产品信息制作一张产品宣传页
这种工作不仅要精炼内容、梳理结构，还要思考怎么呈现比较好的可视化效果，需要耗费大量精力。
借助下面的 prompt，遇到类似网站首页、海报制作、产品宣传页、工作总结或是文档分析等场景，我们可以一键生成多个不同风格、精炼、直观、上档次的可视化内容，量大管饱！这个 prompt 出自藏师傅，原文可以查看：藏师傅的网页生成提示词3.0。
根据[上传文档名称]的内容，生成一个 HTML 动态网页，网页生成的要求是：
1. 使用Bento Grid风格的视觉设计，纯黑色底配合特斯拉红色#E31937作为高亮
2. 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
3. 中英文混用，中文大字体粗体，英文小字作为点缀
4. 简洁的勾线图形化作为数据可视化或者配图元素
5. 运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
6. 模仿 apple 官网的动效，向下滚动鼠标配合动效
7. 数据可以引用在线的图表组件，样式需要跟主题一致
8. 使用 Framer Motion （通过CDN引入）
9. 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
10. 使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
11. 避免使用emoji作为主要图标
12. 不要省略内容要点
以下是我使用这个 prompt 的工作流，同时也让 AI 帮忙总结了15种业界广泛认可且被大量引用的典型风格，方便在 prompt 中使用，也分享给大家。
使用技巧
最直接的方法是将准备好的文档和 prompt 一起提交给大模型，比如豆包或是 DeepSeek，就可以实时查看生成的结果。
现在大模型的多步骤执行能力已经很强了，我们可以在一个 prompt 中指定多种风格，让 AI 一次性生成多个结果，方便我们挑选其中最合适的。
除了提前准备好文档内容，也可以直接指定一个主题，让 AI 自己搜索相关的信息并生成结果。不过这对于模型能力要求很强，我们可以让 AI 先生成主题相关的结果，再手动优化成结构化的内容，这样最后得到的效果会更好。
如果有在使用 cursor 或 trae 类似的 AI IDE 软件，可以将封面生成提示词和各种不同的风格分别保存为单独的 markdown 文件，这样在生成可视化文档时可以快速引用不同的风格。类似如下的文件夹结构：
├── 封面生成 prompt
│ ├── 封面生成提示词.md
│ ├── 内容文档
│ ├── 特斯拉2024年财报.md
│ ├── 风格要求
│ ├── Aurora Gradient Hero.md
│ ├── Cyberpunk Neon.md
│ ├── 3D Interactive.md
│ ├── 封面生成结果
│ ├── 特斯拉2024年财报-Aurora Gradient Hero-1826.md
│ ├── 特斯拉2024年财报-Cyberpunk Neon-0932.md
│ ├── 特斯拉2024年财报-3D Interactive-3829.md
可以参考下面的 prompt，一次性让 AI 根据内容生成多个风格的 HTML 文件，从中选出最合适的：
严格遵守 @封面生成提示词.md 要求， 根据 @特斯拉2024年财报 的内容，同时结合 @Aurora Gradient Hero.md @Cyberpunk Neon.md @3D Interactive.md 这3种风格，分别生成新的 HTML 文件，保存在封面生成结果文件夹中。文件名格式为 公众号标题-风格-四位随机数。
微调技巧
利用这个 prompt 基本上可以生成大体可用的可视化网页，但是其中会有很多细节问题，此时如果让大模型做细微的调整，就像是在抽奖，很可能十次对一次，或是这里对了那里又有问题。
这里就可以利用 Figma 的 腾讯 CoDesign-HemltoDesign 插件，直接复制 HTML 文件源代码，粘贴到插件输入框中，生成可编辑的设计文件，手动调整细节就可以了。
15种适合添加到 prompt 中的主流设计风格
注：以下的内容是由 AI 生成，经我人工核查。但我并非设计专业，如果在设计风格的起源、特征说明等方面有误，请在评论区指出。
科技前卫类设计风格示例
Aurora Gradient Hero - AI工具网站首页
背景信息： 起源于2021年日本设计社区，灵感来自北极光现象。Dribbble平台相关作品超37,000个，已成为现代网页设计标志性风格。
核心特征： 流动极光渐变背景，玻璃态UI元素，发光效果，4K分辨率
适用场景： 科技产品首页、AI工具展示、创意平台
色彩搭配： 极光紫(#8B5CF6)、电蓝(#0EA5E9)、粉红(#EC4899)、青色(#06B6D4)
适用终端： Web桌面端/平板横屏
Aurora Gradient Hero风格在AI工具展示中表现出色，通过流动的极光渐变背景营造出科技感和未来感。设计示例采用了经典的紫蓝粉青色渐变组合，玻璃态的UI元素浮于渐变背景之上，创造出层次丰富的视觉深度。
这种风格特别适合桌面端展示，大屏幕能够充分展现渐变效果的细腻变化和发光元素的动态美感。界面布局采用中心对称设计，主要内容区域使用轻微的毛玻璃效果，既保持了可读性又不失科技美感。
Cyberpunk Neon - 游戏界面设计
背景信息： 1980年代赛博朋克文化复兴，霓虹灯1910年发明。Behance相关项目超10,000个，游戏界面标配。
核心特征： 霓虹发光效果，荧光对比色，故障艺术
适用场景： 游戏UI、科技公司品牌
色彩搭配： 霓虹粉(#FF10F0)、电蓝(#00FFFF)、荧光绿(#39FF14)
适用终端： 高性能设备
Cyberpunk Neon风格通过强烈的霓虹色对比和发光效果，营造出浓郁的赛博朋克氛围。设计示例使用了典型的霓虹粉、电蓝和荧光绿配色方案，配合故障艺术和数字纹理元素。
这种风格需要高性能设备支持，以确保霓虹发光效果和动态元素能够流畅渲染。界面设计采用不规则几何形状和倾斜布局，符合赛博朋克文化的反叛特质和未来主义美学。
3D Interactive - 产品展示网站
背景信息： WebGL 3.0技术普及，Chrome 2025支持WebGPU。Three.js周下载量超200万次，电商转化率提升35%。
核心特征： 立体模型，物理渲染，交互动画
适用场景： 产品展示、虚拟体验
色彩搭配： 空间蓝(#1E40AF)、金属银(#9CA3AF)、科技白(#F8FAFC)
适用终端： 支持WebGL设备
3D Interactive风格通过立体模型和物理渲染效果，创造沉浸式的产品展示体验。设计示例展现了三维空间中的产品模型，配合动态光影和材质反射效果。
这种风格要求WebGL兼容设备，主要适用于桌面端和高端移动设备。界面设计简洁明了，让3D元素成为视觉焦点，通过空间深度和透视效果增强用户的沉浸感体验。
Neo-Futuristic - 未来科技公司网站
背景信息： 1960年代太空时代复兴，NASA 2024设计系统采用。Figma社区3D资源超50万，科技公司采用率TOP5。
核心特征： 流线造型，动态光效，有机曲面
适用场景： 未来科技、创新企业
色彩搭配： 量子紫(#7C3AED)、能量橙(#EA580C)、未来银(#E5E7EB)
适用终端： 高端设备
Neo-Futuristic风格通过流线型造型和有机曲面，展现未来主义的设计语言。设计示例采用了量子紫和能量橙的配色方案，配合动态光效和几何变换。
这种风格适合展示创新科技和前沿产品，通过流动的线条和光影效果营造出时空穿梭的科幻感受。界面布局采用非对称设计，体现未来科技的动态特性。
商务专业类设计风格示例
Bento Grid Layout - SaaS产品功能展示
背景信息： 源自12世纪日本便当盒设计，苹果公司2010年代推广至数字界面。LinkedIn数据显示2024年成为主流网页趋势，模块化布局标准范式。
核心特征： 整齐矩形网格，统一圆角设计，适量留白，现代图标
适用场景： SaaS产品功能展示、服务介绍页面
色彩搭配： 中性灰(#F8F9FA)、品牌蓝(#3B82F6)、白色(#FFFFFF)、深灰(#374151)
适用终端： 全终端响应式
Bento Grid Layout通过整齐的网格化布局，清晰展示SaaS产品的各项功能模块。设计示例采用统一的卡片设计和适度的留白间距，创造出有序且易于理解的信息架构。
这种布局方式具有优秀的响应式特性，能够在不同终端上保持良好的可读性和可用性。每个功能模块都有独立的视觉空间，便于用户快速定位和理解产品功能。
Glassmorphism - 高端品牌官网
背景信息： 2006年Windows Vista首次应用，2020年macOS Big Sur普及。CSS backdrop-filter属性支持率达98%，高端界面标配。
核心特征： 半透明毛玻璃效果，微渐变背景，柔和高光
适用场景： 高端品牌官网、苹果风格应用
色彩搭配： 半透明白(rgba(255,255,255,0.1))、毛玻璃灰(rgba(255,255,255,0.05))
适用终端： iOS/高端移动设备
Glassmorphism风格通过半透明的毛玻璃效果，营造高端奢华的品牌形象。设计示例展现了精致的透明层次和柔和的光影效果，体现苹果式的设计美学。
这种风格特别适合iOS和高端移动设备，能够充分利用现代设备的显示能力。界面设计注重细节质感，通过微妙的渐变和阴影效果提升品牌的高端感知。
Minimalist Clean - 企业官网设计
背景信息： 1960年代极简艺术运动延续，Google Material Design 3.0核心原则。移动端加载速度提升30%。
核心特征： 大量留白，简洁线条，无装饰元素
适用场景： 企业官网、医疗教育平台
色彩搭配： 纯白(#FFFFFF)、浅灰(#F9FAFB)、深灰(#374151)
适用终端： 移动端友好
Minimalist Clean风格通过大量留白和简洁线条，营造专业可靠的企业形象。设计示例采用极简的色彩搭配和规整的布局结构，突出内容的重要性。
这种风格具有优秀的移动端适配性，简洁的设计能够在小屏幕上保持良好的可读性。界面加载速度快，用户体验流畅，符合现代企业网站的专业要求。
Monochromatic Luxury - 奢侈品电商网站
背景信息： 源自古埃及单色壁画，2022年Pantone年度色推动复兴。奢侈品牌采用率提升65%，展现精致层次。
核心特征： 单一色相变化，金属质感
适用场景： 奢侈品电商、艺术画廊
色彩搭配： 深蓝(#1E3A8A)渐变、金色(#D4AF37)点缀
适用终端： 高端移动设备
Monochromatic Luxury风格通过单一色相的丰富变化，展现奢侈品牌的精致质感。设计示例使用深蓝色系的渐变变化，配合金色点缀元素。
这种风格适合高端移动设备展示，能够通过色彩的细腻层次体现品牌的奢华定位。界面设计注重细节处理，通过金属质感和光影效果提升产品的价值感知。
创意表达类设计风格示例
Maximalist Vibrant - 时尚品牌网站
背景信息： 巴洛克时期装饰主义复兴，2024年Pinterest搜索量增长240%。Instagram滤镜使用率TOP3风格。
核心特征： 多色碰撞，复杂层次，图案叠加
适用场景： 时尚品牌、文化创意
色彩搭配： 彩虹色谱、鲜红(#EF4444)/橙(#F97316)/紫(#8B5CF6)
适用终端： 桌面端最佳
Maximalist Vibrant风格通过丰富多彩的色彩碰撞，创造强烈的视觉冲击力。设计示例采用彩虹色谱和复杂的图案叠加，体现时尚品牌的个性和活力。
这种风格在桌面端效果最佳，大屏幕能够承载复杂的视觉元素而不显得杂乱。界面设计采用非对称布局，通过色彩和图形的动态组合创造独特的品牌体验。
Brutalist Bold - 创意机构网站
背景信息： 1950年代建筑运动数字化，Adobe XD 2025新增混凝土纹理库。Behance反传统设计收藏量超50万次。
核心特征： 粗糙质感，不对称布局，原始材料表现
适用场景： 创意机构、先锋艺术
色彩搭配： 混凝土灰(#6B7280)、锈红(#DC2626)、深黑(#1F2937)
适用终端： 大屏幕显示
Brutalist Bold风格通过粗糙质感和不对称布局，展现反传统的设计态度。设计示例使用混凝土灰和锈红色的搭配，配合原始材料的视觉表现。
这种风格适合大屏幕显示，能够充分展现粗犷质感的视觉冲击力。界面设计打破常规网格系统，通过不规则排版和原始材料纹理体现创意机构的先锋精神。
Collage Art - 文化艺术项目网站
背景信息： 1912年毕加索开创现代拼贴，2024年Adobe Express拼贴模板使用量增长180%。Instagram#CollageArt话题超200万条。
核心特征： 图像拼贴，创意组合，手绘元素
适用场景： 艺术项目、文化传播
色彩搭配： 混合对比色，复古色调
适用终端： 创作端优先
Collage Art风格通过图像拼贴和创意组合，营造艺术性强的视觉体验。设计示例融合了摄影、插画和手绘元素，创造丰富的视觉层次。
这种风格特别适合创作端展示，能够充分体现艺术项目的创意内涵。界面设计采用自由拼贴布局，通过不同媒介的组合创造独特的艺术表达。
技术特化类设计风格示例
Neumorphism/Soft UI - 移动应用界面
背景信息： 2019年对抗扁平化设计兴起，融合拟物与扁平元素。Figma社区模板下载量超120万次，适合触控界面。
核心特征： 柔和阴影高光，低对比度，同色系渐变
适用场景： 移动应用按钮、表单组件
色彩搭配： 柔和灰(#F3F4F6)、淡蓝(#DBEAFE)、象牙白(#FFFBEB)
适用终端： 移动端优先
Neumorphism风格通过柔和的阴影和高光效果，创造温和的触控体验。设计示例展现了低对比度的同色系设计和嵌入式按钮效果。
这种风格专为移动端优化，能够在触屏设备上提供直观的交互反馈。界面设计注重触控友好性，通过柔和的视觉层次指导用户的操作行为。
Dark Mode Elegant - 开发工具界面
背景信息： CRT时代默认模式，2019年iOS13/Android10标准化。OLED屏幕可降低40%功耗，护眼模式使用率超78%。
核心特征： 深黑背景，高对比文字，夜间友好
适用场景： 开发工具、专业软件
色彩搭配： 深黑(#0F172A)、纯白(#FFFFFF)、深灰(#1E293B)
适用终端： 全终端支持
Dark Mode Elegant风格通过深色背景和高对比度文字，提供护眼舒适的使用体验。设计示例采用专业的深黑配色和精确的信息布局。
这种风格支持全终端适配，特别适合长时间使用的专业软件。界面设计注重信息的清晰度和操作的便捷性，通过合理的对比度保护用户视力健康。
品牌营销类设计风格示例
Bold Typography - 品牌营销海报
背景信息： 2024年可变字体使用率增长300%，Google Fonts年度报告显示超大字库下载量第一。阅读效率提升40%。
核心特征： 超大字号，对比排版，字体动效
适用场景： 品牌营销、活动海报
色彩搭配： 纯黑(#000000)/纯白(#FFFFFF)对比，品牌色强调
适用终端： 全终端适配
Bold Typography风格将字体作为主要设计元素，通过超大号字体创造强烈的视觉冲击。设计示例展现了戏剧性的文字对比和动态排版效果。
这种风格具有全终端适配能力，大胆的字体设计在各种屏幕尺寸上都能保持强烈的视觉效果。界面设计以文字为核心，通过字体的大小对比和排列方式传达品牌信息。
Retro/Vintage - 传统品牌网站
背景信息： 1920年代装饰艺术复兴，Canva复古模板使用量超1200万次。Nielsen数据显示怀旧营销转化率提升28%。
核心特征： 做旧纹理，经典字体，复古插图
适用场景： 传统品牌、情感营销
色彩搭配： 复古橙(#FB923C)、怀旧黄(#FDE047)、暖米色(#FEF3C7)
适用终端： 移动端情感体验
Retro/Vintage风格通过复古色调和经典字体，营造怀旧的品牌氛围。设计示例采用暖色调配色和1920年代的装饰元素，体现传统品牌的历史底蕴。
这种风格适合移动端情感体验展示，能够通过怀旧元素触发用户的情感共鸣。界面设计融合现代可用性和复古美学，在保持品牌特色的同时确保良好的用户体验。
