app-prototype

name	app-prototype
description	通用 AI 对话式 App 原型生成器。读取原始需求文档，生成结构化需求文档，再批量生成手机端静态原型页面（HTML Demo）。可用于任意 App 项目。

App 需求文档 & 原型页面生成器

将原始需求材料转化为 AI 对话式交互 的结构化需求文档，再按业务场景批量生成手机端静态原型页面（HTML Demo）。

本 Skill 与业务无关，可用于任意 App 项目。业务场景、品牌色、行业术语等均从项目的 docs/requirements.md 和 assets/ 目录读取。

核心理念

• 生成的是静态原型 Demo，用于汇报展示和需求验证，不涉及后端实现
• 所有业务场景通过 AI 对话 交互完成（用户说→AI 识别意图→执行→展示结果卡片）
• 每个场景生成 独立 HTML 文件，包含 3 个手机模拟器视图展示不同对话流程
• 使用 Tailwind CSS CDN + SVG 内联图标，无需构建工具，浏览器直接预览

工作流程

阶段一：收集分析 → 阶段二：生成需求文档 → 阶段三：用户评审迭代 → 阶段四：批量生成页面

阶段一：收集并分析原始材料

1. 请用户提供原始需求材料：

   • 需求文档（文本、PDF、Markdown、表格等）
   • UI 设计稿 / 截图 / 参考图片（放入 assets/ 目录）
   • 会议纪要、聊天记录等补充材料
   • 品牌色、Logo 等视觉参考

2. 读取并分析所有材料，提取：

   • 业务场景清单（每个场景 = 一个 AI 对话主题）
   • 目标用户角色和使用场景
   • 品牌色系和视觉风格
   • 行业术语和专用名词

3. 汇总分析结果，与用户确认后进入阶段二。

阶段二：生成需求文档

读取 Prompt 模板：requirements-prompt.md

关键规则：

• 输出文件：docs/requirements.md
• 每个业务场景用 AI 对话流程（👤用户→🤖AI）描述，不写传统的页面元素表和接口需求
• 对话示例中包含 结果卡片 ASCII 原型，直观展示 AI 回复的结构化信息
• 包含多轮对话示例（信息补全、异常处理等）
• 标注文档用途：静态 Demo + 原型汇报展示
• 将品牌色、行业术语、UI/UX 规范等写入需求文档，使其成为唯一的业务上下文来源

阶段三：用户评审与迭代

这一步至关重要，不可跳过：

1. 呈现需求文档给用户评审
2. 根据反馈迭代修改（常见修改：调整对话流程、增删场景、修改卡片结构）
3. 确认后进入页面生成阶段

阶段四：批量生成页面

读取 Prompt 模板：page-generation-prompt.md

生成策略：

• 从 docs/requirements.md 读取品牌色、场景列表、对话流程等业务信息
• 每个业务场景生成一个独立 HTML 文件
• 文件命名：src/序号-英文名.html（如 src/01-场景名.html）
• 每个文件包含 3 个手机模拟器，展示该场景的不同对话流程
• 可使用 Task 工具并行生成多个场景以提高效率（每批 2-4 个场景）
• 每批完成后向用户展示进度，确认后继续

批量生成时的 Prompt 传递要点： 为确保并行 Task 生成的页面风格一致，需在每个 Task 的 prompt 中完整包含：

1. Tailwind config（从 requirements.md 提取的品牌色）
2. 完整的手机模拟器 HTML 结构模板（从 page-generation-prompt.md 复制）
3. 所有共享组件的 class 定义（状态栏、导航栏、对话气泡、卡片、输入栏等）
4. 具体的场景内容和对话流程（从 requirements.md 提取）

项目目录结构

项目根目录/
├── docs/
│   ├── 原始需求.md                  # 原始需求（用户提供）
│   └── requirements.md              # 生成的需求文档（含品牌色、场景、UI规范等全部业务信息）
├── assets/
│   └── *.jpg / *.png                # 设计参考图（用户提供）
├── src/
│   ├── 01-场景名.html               # 场景页面（每场景一个文件）
│   ├── 02-场景名.html
│   ├── ...
│   └── NN-场景名.html
└── .cursor/skills/
    └── app-requirements-generator/   # 本 Skill（通用，不含业务信息）
        ├── SKILL.md                  # 工作流程（本文件）
        ├── requirements-prompt.md    # 需求文档生成模板
        └── page-generation-prompt.md # 页面生成模板 + 组件库

进度追踪模板

每完成一批页面后更新进度（场景名从 requirements.md 读取）：

页面生成进度：
✅ 场景 1：[场景名]（src/01-xxx.html）
✅ 场景 2：[场景名]（src/02-xxx.html）
⬜ 场景 3：[场景名]
⬜ 场景 4：[场景名]
...

常见迭代模式

基于实际使用经验，用户常见的迭代需求：

迭代类型	处理方式
移除接口/API 描述	需求文档改用纯对话流程描述，删除接口需求表
改为 AI 对话模式	将传统页面交互改写为 👤用户→🤖AI 对话流程
调整文件输出位置	修改输出目录（如 docs/ → src/）
批量生成剩余场景	使用 Task 并行生成，每批 2-4 个场景
调整品牌色/视觉风格	修改 requirements.md 中的 UI/UX 规范章节

复用到新项目

将本 Skill 用于新的 App 项目时：

1. 复制 .cursor/skills/app-requirements-generator/ 目录到新项目
2. 在新项目中准备原始需求文件（docs/原始需求.md）和设计参考图（assets/）
3. 调用 Skill 从阶段一开始，自动生成新项目的 docs/requirements.md 和页面
4. 无需修改 Skill 本身的任何文件

可移植性

本 Skill 兼容 Cursor 和 Claude Code：

• Cursor：.cursor/skills/app-requirements-generator/
• Claude Code：.claude/skills/app-requirements-generator/

迁移时复制整个目录即可，无需修改内容。

相关资源

• 需求文档 Prompt 模板：requirements-prompt.md
• 页面生成 Prompt 模板：page-generation-prompt.md