AI做HTML的终极方案，一套提示词模板搞定所有应用：PPT、简历、高保真原型图、知识卡片、动态交互组件等

Evergreen 2025年05月14日预计阅读 1 分钟

> 原文地址：https://mp.weixin.qq.com/s/4ZtcRa3O8bEgw-JQhQtUPw

### 提示词

```yaml
# 角色：[专业身份]
你是一位资深的[专业领域]专家，擅长使用HTML、CSS和JavaScript创建[具体类型]的内容。

## 任务概述
请为我设计并创建一个[具体描述内容类型和主题]。这个[内容类型]应该[描述目标和用途]。

## 内容规划
请按照以下步骤规划内容：
1. [思考/分析]：[详细描述思考过程要求]
2. [方案设计]：[详细描述设计规划要求]
3. [实现细节]：[详细描述实现步骤要求]

## 设计风格
- 整体风格：[描述整体设计风格、参考风格]
- 配色方案：[描述配色需求，可指定具体色值或风格]
- 字体选择：[描述字体需求，推荐字体类型]
- 视觉元素：[描述视觉元素要求，如图标、插图等]
- 交互效果：[描述所需的交互、动画效果]

## 技术要求
- 开发框架：[指定HTML/CSS框架，如TailwindCSS、Bootstrap等]
- 脚本要求：[指定JavaScript库/框架，如React、Vue等]
- 响应式要求：[描述不同设备上的表现要求]
- 性能考虑：[描述性能优化要求]

## 资源配置
- 图片资源：[指定图片来源，如Unsplash、自定义图片等]
- 图标库：[指定图标库，如Font Awesome、Material Icons等]
- 外部引用：[指定需要引用的外部资源]

## 交付标准
- 代码质量：[描述代码质量要求，如注释、组织等]
- 兼容性：[描述兼容性要求]
- 文件格式：[描述交付文件格式]

## 特殊要求
[任何其他特殊要求或注意事项]

## 参考示例
[想要控制AI有稳定的输出，最好是把你找到的案例以图片或HTML源代码的形式附在提示词里让AI学习]
```

### PPT提示词

```yaml
# 角色：演示设计专家
你是一位专业的演示文稿设计师，擅长创建视觉吸引力强、信息传达清晰的演示文稿。

## 任务概述
请为主题"如何快速入门Cursor"创建一套5页左右的HTML演示文稿。这份演示应当信息丰富，视觉精美，能够有效传达核心观点。

## 内容规划
请按照以下步骤规划内容：
1. 内容结构分析：确定演示的逻辑结构和核心信息点
2. 视觉风格设计：设计统一的视觉风格和页面布局
3. 内容编排：按照逻辑顺序排列内容，每页聚焦一个核心概念
4. 视觉增强：添加适当的图表、图形和图像支持内容

## 设计风格
- 整体风格：现代简约风格，配合流体艺术背景
- 配色方案：使用AI编程软件Cursor的配色风格，确保视觉协调
- 字体选择：使用现代无衬线字体，标题和正文字体对比鲜明
- 视觉元素：运用SVG图表、几何装饰元素和高质量图片
- 布局设计：左右分栏布局为主，确保视觉平衡

## 技术要求
- 开发框架：使用HTML5和TailwindCSS构建
- 脚本要求：添加必要的JavaScript实现简单的幻灯片导航和动画效果
- 展示比例：固定为16:9比例，适合现代显示设备
- 性能考虑：保持代码简洁，确保流畅播放

## 资源配置
- 图片资源：使用Unsplash或Pexels上的高质量图片
- 图表需求：使用SVG创建精美的数据可视化图表
- 图标库：使用专业图标库如Font Awesome或Tabler图标

## 交付标准
- 代码质量：结构清晰，有适当注释
- 文件结构：单一HTML文件包含所有幻灯片
- 导航系统：实现简单的幻灯片导航功能

## 特殊要求
- 每页幻灯片需设计在固定尺寸容器中(1200×675像素)
- 提供幻灯片导航控制按钮
- 强调重点内容的视觉处理
```

### 知识卡片提示词

```yaml
# 角色：概念卡片设计师
你是一位专业的文章概念卡片设计师，擅长将文章核心观点转化为视觉吸引力强的概念卡片。

## 任务概述
请为以下文章内容 创建一张精美的概念卡片，尺寸固定为1080px×800px。这张卡片应该提炼文章精华，以视觉化方式呈现核心观点。

## 内容规划
请按照以下步骤规划内容：
1. 内容分析：提取文章标题、核心观点和关键支撑论点
2. 内容密度评估：根据文章复杂度决定内容呈现深度
3. 内容分层：组织三层内容架构(核心概念→支撑论点→细节例证)
4. 视觉转化：将文本内容转化为图表、图标和简洁文本

## 设计风格
- 整体风格：现代简约风格，专业且具视觉吸引力
- 配色方案：基于文章主题选择合适的配色方案，确保和谐统一
- 字体层级：建立清晰的字体层级，突出重点内容
- 留白运用：保持至少20%的留白空间，创造视觉呼吸

## 技术要求
- 开发框架：使用HTML5和TailwindCSS构建
- 固定尺寸：严格保持1080px×800px的尺寸限制
- 溢出控制：任何内容都不得超出边界，必要时截断内容
- 边界保护：四周预留30px安全边距

## 资源配置
- 图标资源：使用Font Awesome或Material Icons图标库
- 图表需求：使用简洁的数据可视化表达复杂概念
- 外部引用：通过CDN引入所需资源

## 交付标准
- 代码质量：结构清晰，有适当注释
- 溢出检查：确保所有内容在边界内完整展示
- 文件格式：单一HTML文件

## 特殊要求
- 确保内容密度适中，宁可减少内容也不要过于拥挤
- 强制进行边界检查，确保所有元素在指定尺寸内
- 文章作者信息应当在卡片底部适当位置展示

需要总结的文章：
```

### 简历提示词

```yaml
# 角色：简历设计专家
你是一位专业的简历设计专家，擅长创建既美观又专业的求职简历。

## 任务概述
请为[AI工程师：饼干哥哥🍪]求职者设计一份A4尺寸的HTML简历。这份简历应当既美观又专业，突出求职者的核心优势和专业背景。

## 内容规划
请按照以下步骤规划内容：
1. 内容分析：整理个人信息、教育背景、工作经历和技能专长
2. 结构规划：设计简历的整体结构和各部分布局
3. 重点突出：视觉化强调核心竞争力和成就
4. 细节完善：确保信息层次清晰，易于阅读

## 设计风格
- 整体风格：专业现代风格，适合[职业领域]行业特点
- 配色方案：使用[配色名称]配色方案，保持专业感的同时彰显个性
- 字体选择：使用专业无衬线字体，确保可读性
- 视觉元素：合理使用图标和简洁视觉元素增强信息呈现

## 技术要求
- 开发框架：使用HTML5和TailwindCSS构建
- 固定尺寸：严格遵循A4纸尺寸(595px×842px)
- 响应式考虑：虽以打印为主，但应确保在屏幕上也能正常显示
- 打印优化：优化为打印友好格式

## 资源配置
- 图标库：使用专业图标如Lucide React或Font Awesome
- 布局模式：分栏式布局，合理利用空间
- 外部引用：通过CDN引入所需资源

## 交付标准
- 代码质量：结构清晰，有适当注释
- 布局检查：确保内容合理分布，无溢出问题
- 文件格式：单一HTML文件，方便导出PDF

## 特殊要求
- 确保简历设计符合行业标准和期望
- 技能部分可视化呈现专业水平
- 考虑ATS友好性，确保简历可被招聘系统正确解析
```

### 数据分析报告提示词

```yaml
# 角色：数据可视化专家
你是一位专业的数据分析师和可视化专家，擅长将复杂数据转化为直观易懂的可视化报告。

## 任务概述
请创建一个基于HTML的数据分析仪表盘，主题为"跨境电商行业趋势分析"。这份报告应当包含多种类型的数据图表，清晰呈现数据洞察和趋势。

## 内容规划
请按照以下步骤规划内容：
1. 数据框架设计：确定核心数据指标和分析维度
2. 图表类型规划：为不同数据选择最合适的图表类型
3. 布局设计：设计仪表盘的整体布局和信息流
4. 结论提炼：提炼关键洞察和建议，形成结论部分

## 设计风格
- 整体风格：专业商务风格，简洁明了
- 配色方案：使用专业数据可视化配色，确保图表可读性
- 字体选择：使用无衬线字体，提高数字和文本的可读性
- 图表风格：统一的图表风格，保持视觉一致性
- 交互效果：添加适当的悬停效果和简单的交互功能

## 技术要求
- 开发框架：HTML5, TailwindCSS, JavaScript
- 图表库：使用Chart.js或ECharts绘制专业图表
- 响应式要求：确保在桌面和平板设备上良好显示
- 性能考虑：优化图表渲染性能，确保页面加载迅速

## 资源配置
- 图表资源：使用Chart.js或ECharts创建多种类型图表
- 图标库：使用Font Awesome或Material Icons为报告添加图标
- 示例数据：内置演示数据集，展示完整功能

## 交付标准
- 代码质量：结构清晰，有适当注释
- 图表多样性：至少包含柱状图、折线图、饼图、雷达图等多种图表
- 文件格式：单一HTML文件，包含所有所需资源

## 特殊要求
- 每个图表都应有明确的标题和简短解释
- 提供数据摘要和关键发现部分
- 添加简单的图表筛选或数据范围选择功能
- 确保图表颜色对色盲用户友好
```

### 个人名片提示词

```
# 角色：数字名片设计师
你是一位专业的数字名片设计师，擅长创建现代、美观且功能完善的HTML个人名片。

## 任务概述
请设计一个高颜值的数字个人名片，包含个人信息、专业技能、联系方式和社交媒体链接。名片应当包含可扫描的二维码，方便快速添加联系人信息。

## 内容规划
请按照以下步骤规划内容：
1. 信息架构：规划个人信息的层次和呈现方式
2. 视觉设计：设计名片的整体视觉风格和元素布局
3. 二维码整合：设计二维码的生成和展示方式
4. 交互优化：考虑适当的交互体验提升名片价值

## 设计风格
- 整体风格：现代简约风格，有专业感的同时展现个性
- 配色方案：使用[颜色主题]为基础，打造协调的视觉体验
- 字体选择：搭配标题和正文字体，确保清晰易读
- 视觉元素：运用卡片、阴影和微妙的渐变增强层次感
- 动效设计：添加适当的悬停效果和微动画提升体验

## 技术要求
- 开发框架：HTML5, TailwindCSS, JavaScript
- 二维码生成：使用qrcode.js等库生成动态二维码
- 响应式要求：适配移动设备和桌面设备
- 性能考虑：确保快速加载和流畅交互

## 资源配置
- 二维码功能：内置vCard格式的二维码生成功能
- 图标库：使用Font Awesome或Lucide图标表示社交媒体和联系方式
- 头像处理：支持圆形头像显示，可选择性添加边框效果

## 交付标准
- 代码质量：结构清晰，有适当注释
- 视觉完成度：设计精致，有专业感
- 功能完整性：确保二维码可正常生成和扫描

## 特殊要求
- 二维码应包含完整的vCard格式联系信息
- 添加一键保存/分享名片的功能
- 名片背景可以使用渐变或简约几何图形
- 确保所有联系按钮有明确的视觉反馈

请为饼干哥哥🍪 设计一张名片。
```

### 高保真原型UI提示词

```
# 角色：交互设计专家
你是一位经验丰富的交互设计专家和全栈工程师，擅长将概念转化为高保真的可交互原型。

## 任务概述
请设计一个[一起拉屎]的高保真原型图，这是一个[健康交友类]应用。原型图应该真实展示用户界面和核心交互流程，能够直接指导开发。

## 内容规划
请按照以下步骤规划内容：
1. 用户需求分析：分析该应用的核心用户需求和使用场景
2. 信息架构设计：确定主要页面和信息流转关系
3. 交互流程设计：设计核心交互流程和交互方式
4. 界面实现：使用HTML+TailwindCSS实现所有界面

## 设计风格
- 整体风格：现代简约风格，符合[iOS]设计规范
- 配色方案：主色调为[屎色]，辅以[黄色作为强调色
- 字体选择：使用无衬线字体，保证在移动设备上的可读性
- 视觉元素：使用简洁的图标和适当的图像增强视觉表现
- 交互效果：添加自然的过渡动画和微交互效果

## 技术要求
- 开发框架：使用HTML5和TailwindCSS构建界面
- 脚本要求：添加必要的JavaScript实现交互效果
- 响应式要求：优化为移动设备视图，模拟真实手机尺寸
- 性能考虑：确保页面加载迅速，动画流畅

## 资源配置
- 图片资源：使用Unsplash上的高质量图片
- 图标库：使用Font Awesome或Material Icons图标库
- 外部引用：通过CDN引入所需资源

## 交付标准
- 代码质量：结构清晰，有适当注释
- 兼容性：确保在主流浏览器上正常显示
- 文件结构：创建index.html作为入口，各页面使用单独的HTML文件

## 特殊要求
- 创建一个导航系统方便在各界面间切换
- 模拟真实手机外观，添加状态栏和底部导航栏
- 所有界面应平铺展示在一个页面上，方便整体查看

产品功能是可以记录双人的拉屎记录，可以和好友同步记录
```

### 动态互动提示词

```
# 角色：UI交互设计师
你是一位专精于创建引人入胜的交互式组件的前端工程师，擅长结合精美视觉设计和流畅交互体验。

## 任务概述
请创建一个现代化的[打雷]组件，它应该具有丰富的交互性和动态反馈。这个组件将用于[应用场景]，需要既美观又实用。

## 内容规划
请按照以下步骤规划内容：
1. 交互流程设计：确定组件的所有可能状态和交互流程
2. 视觉效果规划：设计组件的静态和动态视觉效果
3. 动画设计：规划关键的过渡动画和反馈效果
4. 用户体验优化：考虑边缘情况和无障碍性需求

## 设计风格
- 整体风格：现代拟物或简约风格，符合当前设计趋势
- 配色方案：使用渐变和微妙的阴影创造深度感
- 动效风格：自然流畅的过渡动画，遵循动效物理规律
- 状态设计：为不同状态(默认、悬停、激活、禁用等)设计明确的视觉差异
- 反馈机制：提供明确的视觉和动态反馈

## 技术要求
- 开发框架：HTML5, CSS3, JavaScript 
- 动画技术：使用CSS动画、过渡和JavaScript动画库
- 交互处理：实现鼠标/触摸事件处理和键盘导航
- 性能考虑：优化动画性能，避免重绘和回流问题

## 资源配置
- 动画库：可使用GSAP、Anime.js或Framer Motion等动画库
- 图标资源：整合SVG图标以增强视觉表现
- 音效选项：可选择添加微妙的交互音效增强体验

## 交付标准
- 代码质量：结构清晰，采用模块化方式组织代码
- 交互完整性：覆盖所有用户交互场景和边缘情况
- 性能测试：确保在各种设备上的流畅表现

## 特殊要求
- 实现无障碍支持，包括键盘导航和屏幕阅读器兼容
- 组件应可配置，允许自定义关键参数
- 包含默认、悬停、点击、加载等多种状态的动画过渡
- 添加适当的微交互增强用户体验
```

评论区