一、多轮对话 Prompt 迭代示例（5 个高频场景）

场景 1：React 数据表格开发

• 第一轮（基础需求）：“用 React 18 + Ant Design 写一个数据表格，展示用户 ID、姓名、手机号、注册时间，支持分页”
• 第二轮（补充功能）：“新增按姓名模糊搜索、按注册时间筛选（日期选择器），分页保留，仍用 Ant Design 组件”
• 第三轮（优化细节）：“上一轮的搜索功能没有防抖，添加 300ms 防抖，表格行 hover 时高亮，注册时间格式化为‘YYYY-MM-DD HH:mm’”

场景 2：Vue 表单验证

• 第一轮（基础需求）：“用 Vue 3 + VeeValidate 写一个注册表单，含账号、密码、确认密码”
• 第二轮（补充验证）：“账号要求 6-12 位字母 + 数字，密码 8-16 位含大小写 + 特殊字符，确认密码与密码一致，添加实时校验提示”
• 第三轮（优化交互）：“上一轮的错误提示颜色太淡，改为红色 #FF4400，按钮点击后滚动到第一个错误字段，保留所有验证规则”

场景 3：JS 工具函数开发

• 第一轮（基础需求）：“写一个 JavaScript 函数，实现数组对象按指定字段排序（升序 / 降序）”
• 第二轮（补充功能）：“支持数字、字符串、日期类型的字段排序，添加参数说明，兼容 ES5”
• 第三轮（修复问题）：“上一轮的日期排序未处理时间戳格式，补充支持时间戳（毫秒 / 秒），附 3 个不同类型的使用示例”

场景 4：移动端页面适配

• 第一轮（基础需求）：“用 React + Tailwind CSS 写一个移动端商品详情页，含标题、价格、图片、加入购物车按钮”
• 第二轮（补充样式）：“图片支持左右滑动预览，价格红色加粗，按钮固定在底部（占满宽度），适配 375px/750px 设计稿”
• 第三轮（优化体验）：“上一轮的滑动图片没有指示器，添加圆点指示器（当前页高亮），按钮点击时添加按压效果，图片懒加载”

场景 5：小程序列表优化

• 第一轮（基础需求）：“微信小程序原生写一个文章列表，展示标题、封面图、发布时间、阅读量”
• 第二轮（补充功能）：“标题最多 2 行省略，封面图懒加载，发布时间格式化为‘1 小时前’‘1 天前’，支持下拉刷新”
• 第三轮（修复问题）：“上一轮的下拉刷新没有终止逻辑，补充：无更多数据时显示‘已到底部’，阅读量添加千分位（如 1,234），保留原有样式”

二、前端 Prompt 工程思维导图（可视化核心要点）

可复制以下代码到md格式文件，然后导入xmind软件自动生成思维导图：

## 一、核心原则
- 明确三要素：技术栈+需求+约束
- 指定输出格式
- 优先级排序
## 二、基础模板
- 代码生成：技术栈+功能+样式+格式
- 问题排查：报错+环境+代码+期望
- 优化/咨询：原始信息+目标+限制
## 三、避坑要点
- 拒绝模糊描述
- 不遗漏关键上下文
- 不贪多求全
## 四、进阶技巧（多轮对话）
- 每轮补充1-2个关键需求
- 引用历史上下文
- 保留核心约束
- 无效迭代及时重写
## 五、高频约束词
- 兼容性：ES5/移动端/浏览器版本
- 样式：框架/自定义规范
- 代码：TS类型/注释/规范

思维导图使用说明

• 核心逻辑：从 “原则→模板→避坑→进阶” 层层递进，覆盖从基础到复杂的 Prompt 设计场景
• 适用场景：快速梳理需求、检查 Prompt 完整性，避免遗漏关键信息
• 扩展方式：可根据自身技术栈（如 React/Vue/ 小程序）补充专属约束词和模板

「PNG 图片格式思维导图」以及针对「特定前端技术栈（如 React/Vue/ 小程序）」单独整理专属 Prompt 方案