背景回顾
过去两年，我一直在用大模型辅助前端原型开发。提示词从最初的几行，一路迭代到如今的300多行，经历了无数次“执行 → 填坑 → 优化”的循环。今天，我想完整复盘这7次关键迭代——不仅记录AI如何越变越聪明，也希望能为正在探索提示工程的你，提供一份可复用的实战参考。
提示词的历次变更
初版：简单描述，风格混乱
初版提示词相对简单，就是非常经典的提示词结构：角色、目标、要求
【角色】你是一位资深的全栈开发工程师和UI/UX设计师，擅长快速将产品需求转化为可交付的HTML演示页面。【任务】根据用户提供的**具体需求描述**，生成一个完整的、单文件的HTML Demo页面。该页面应精准体现需求核心，代码规范，无错误，在主流浏览器中打开即可正确显示和交互。【输出要求】**风格**：代码注释清晰，风格采用'商务风格'，蓝色主题。**内容** - 添加适当的模拟数据，使页面看起来更真实。在Trae中创建了该智能体后，该智能体也能正常生成页面。但问题很快暴露：每次不同需求生成的页面样式风格完全不统一。同样是管理类页面，输入框大小、按钮大小、是否显示小图标、图标风格、表格风格等五花八门，根本不统一。
第二版：引入设计规范，提升一致性
于是我在提示词中新增了“设计规范”章节，从技术栈、色彩、组件、交互、代码等方面进行约束。例如：
CSS框架：使用 Tailwind CSS卡片组件：白色背景，1px灰色边框，4px圆角，20px内边距交互规范：所有可交互元素应有明显的 hover 状态变化Toast提示系统：封装 showToast(message, type) 函数，替代原生 alert布局细节：页面主体推荐使用 flex h-screen 结构（侧边栏固定 + 主内容区 flex-1 overflow-auto）经过这版修改，新页面输出的统一性有了很大改观。但同类型页面仍有差距——比如有的输入框 label 在上方，有的在左侧。
第三版：按页面场景分类，结构模板化
针对这个问题，我将页面拆分为5种类型，每种有各自的结构说明和示例页面，要求模型先分类再生成。
**管理类页面**（任务配置、API配置等）：1. 页面标题和描述2. 操作区（新增按钮、导入/导出等）3. 筛选区（搜索框、下拉选择等）4. 数据展示区（表格）5. 分页控件同时补充结构要求：
- 开头：必须引入 Tailwind CSS 3.4.3 和 Font Awesome 4.7.0 的 CDN
- 主体：根据页面类型选择对应结构模板（附典型页面地址）
- 结尾：包含必要的 JavaScript 逻辑，封装良好，无全局变量污染
- 导航更新：同步更新 index.html 中的菜单链接
新页面的整体样式和风格明显与已有页面统一了。
第四版：强化质量标准，避免重复犯错
实际页面生成后仍会报错，且总是重复犯一些之前犯过的错误。于是增加了质量标准部分：
必须有：
- 技术栈明确：HTML5 + Tailwind CSS 3.4.3 + 原生 JavaScript（ES6+）
- 色彩体系标准化：主色调 #409EFF
- 功能细节量化：hover 反馈、进度提示、操作反馈
- UI/UX 描述具体：语义化 HTML，核心模块带注释
- 代码可运行：主流浏览器直接打开即可正确显示
- 错误预防机制：使用事件委托处理动态内容
不能有：
- 模糊技术要求（如“使用现代框架”）
- 未经验证的外部依赖
- 冗长解释性文字
- 危险操作（如未经验证删除 DOM 节点）
- null 引用错误（如 Cannot set properties of null）
每条都是血的教训。
第五版：增加强制检查机制
虽然定制了质量规范，但是大模型还是经常修改完代码后就直接执行，或者有些生成内容和规范不相符。为了限制大模型的行为，后面又追加了## 强制检查机制
检查流程：
- HTML 生成/修改完成 →
- 使用规则文件校验 →
- 浏览器打开验证 →
- 校验通过
检查内容：
- 是否使用指定 Tailwind CSS 版本（3.4.3）
- 是否遵守文件备份规则
虽然不能100%避免错误，但显著减少了重复问题。
第六版：完善代码修改安全规范
后来又出现严重问题：使用 write 重写页面时异常中断，导致已调整很久的内容丢失；或修改代码顾前不顾后，结构异常。
于是追加了：
代码修改安全规范：
- 修改前必须创建备份（如 filename_backup.html）
- 优先局部编辑，避免全局替换
- 修改后必须检查浏览器 Console 是否有 JS 错误
代码修改流程：
- 需求确认 →
- 文件备份 →
- 依赖分析（搜索 JS 是否引用待删元素）→
- 局部修改 →
- 功能验证 →
- 清理备份
常见错误预防：
- ❌ 直接删除“没用”的 HTML 元素
- ✅ 先搜索 JS 引用，再决定是否删除
示例对比：
- ❌ “帮我写一个登录页面的HTML代码。”（过于宽泛）
- ✅ “请生成一个响应式登录页面……技术栈：HTML5 + Tailwind CSS v3（CDN）+ 原生JavaScript……”（具体、可执行）
第七版：增强数据真实性
整体样式风格基本稳定后，发现模拟数据仍有常识性问题，例如“发送短信次数3.7次”。
于是在设计规范中增加：
数据与内容增强规范：
- 人员：使用中文姓名（如王强、刘敏），头像用 https://i.pravatar.cc/150?img=x
- 字段语义推断：如 connected=false 时 duration=0
- 业务场景推断：有“重试”按钮 → 需生成失败数据
- 常识性约束：时间在合理范围（如最近30天），覆盖正常/异常/边界场景
至此，提示词整体结构基本定型，后续只是在个别章节进行补充即可。
后续规划
后续打算将这个提示词转换为一个skill，并将页面风格等提取出来，可以动态加载不同主题的样式，以便灵活运用到不同的项目中。
