从需求文档到可演示UI/原型Skill
一、痛点：从需求到原型，效率卡在哪？
平时经常要写方案PPT需要一些初步原型：从一沓原始需求、会议纪要、设计参考图，到一份结构清晰的需求文档，再到能拿去向领导、客户展示的原型页面，中间往往要经历好几轮「需求梳理 → 文档撰写 → 原型设计」的反复修改。
👍
•
需求文档：既要结构化，又要体现 AI 对话流程，传统模板很难兼顾
•
原型页面：每个业务场景都要画、要排、要统一风格，手工工作量巨大
•
一致性：品牌色、交互规范、组件风格，稍不注意就会跑偏
二、App 原型生成器 Skill
App 原型生成器（app-prototype）是一个基于 Cursor/Claude Code 的通用 Skill，专门解决上述问题：
👍
•
输入：原始需求文档（Markdown、表格、会议纪要）+ 设计参考图（截图、设计稿）
•
输出：结构化需求文档（含品牌色、场景、UI 规范）+ 每个业务场景一个独立 HTML 静态原型页面
核心特点：
👍
AI 对话式交互所有业务场景都以「用户说 → AI 识别意图 → 执行 → 展示结果卡片」的对话流程描述，而非传统页面元素表
静态 Demo生成的 HTML 适合汇报展示和需求验证，不涉及后端实现
业务无关Skill 本身不含任何业务信息，品牌色、场景、术语等均从项目的需求文档和资源目录读取，可复用到任意 App 项目
三、项目目录结构：一眼看懂输入与产出
使用本 Skill 时，项目目录建议如下组织：
•
docs/
原始需求.md 由用户提供，requirements.md 由 Skill 生成，内含品牌色、场景、UI 规范等全部业务信息
•
../assets/用户提供的设计参考图（.jpg / .png）
•
src/按业务场景生成的 HTML 原型页面，每场景一个文件（如 01-考勤.html、02-请假.html …）
•
.cursor/skills/app-prototype/Skill 自身文件，包括工作流程、需求生成模板、页面生成模板等
清晰的分工：用户提供原始材料和设计参考，Skill 负责生成结构化的需求文档和可演示的原型页面。
四、AI 对话式原型长什么样？用示例说话
需求文档和原型都围绕 AI 对话 展开。每个场景在页面中表现为：对话界面 + 对话中嵌入的操作结果卡片。
下图展示了「会议预定」「发送消息」「未读总结」「群发通知」等典型场景的 AI 对话流程：
这些截图正是由 Skill 根据需求文档自动生成的 HTML 原型，每个场景包含 3 个手机模拟器视图（正常流程、多轮对话、扩展场景），可在浏览器中直接预览。
五、一次运行，19 个场景页面自动产出
在确认需求文档无误后，Skill 可以按场景批量生成 HTML 文件，无需逐个手工绘制。
如上图，src/ 目录下会生成一系列以 序号-场景名.html 命名的文件，例如：
•
考勤、请假、会议日程、消息、邮件、待办、差旅、航班、通讯录、值班、通知、写作、车位、搜索、薪资等
每个文件都是可独立打开的 HTML 页面，使用 Tailwind CSS CDN + SVG 内联图标，无需构建工具，浏览器直接打开即可演示。
六、工作流程：四个阶段，一气呵成
代码块
Plain Text
阶段一：收集分析 → 阶段二：生成需求文档 → 阶段三：用户评审迭代 → 阶段四：批量生成页面
阶段一用户提供原始需求、设计参考、品牌色等，AI 分析并提取场景清单、目标用户、品牌色系、行业术语
阶段二按模板生成 docs/requirements.md，每个场景用 AI 对话流程描述，含结果卡片 ASCII 原型
阶段三至关重要，用户评审需求文档，根据反馈迭代（调整流程、增删场景、修改卡片结构等）
阶段四从需求文档读取场景和品牌配置，按场景批量生成 src/01-xxx.html … src/NN-xxx.html
用户评审环节不可跳过，这是保证需求文档质量、避免批量生成后大规模返工的关键。
七、如何在新项目中复用？
将 .cursor/skills/app-prototype/ 目录复制到新项目
在新项目中准备 docs/原始需求.md 和 ../assets/ 下的设计参考图
调用 Skill，从阶段一开始，自动生成新项目的 docs/requirements.md 和页面
无需修改 Skill 本身的任何文件
Skill 兼容 Cursor 和 Claude Code，迁移时复制整个目录即可。
八、小结
•
输入：原始需求 + 设计参考图
•
输出：结构化需求文档 + 按场景批量生成的 HTML 原型
•
特点：AI 对话式交互、静态 Demo、业务无关、可复用
如果你正在做 AI 对话类 App 的原型或需求梳理，不妨试试 App 原型生成器 Skill，让从需求到可演示原型的过程，真正「一气呵成」。
skill开源地址：