技能介绍

解决传统原型工具的语境断层问题

在移动应用开发初期，产品需求往往散落在会议纪要、聊天截图和零散的文档中。使用 Figma 或传统原型工具时，设计师需要手动将这些碎片信息转化为界面元素，不仅耗时，且容易丢失业务上下文。更关键的是，当产品形态转向「AI 对话式交互」时，传统的页面线框图很难准确表达「用户输入→AI 识别意图→执行→展示结果卡片」的动态过程。开发者和业务方在评审时，往往看着静态的线框图一头雾水，无法感知真实的交互体验。

从需求文档到静态 Demo 的自动化流水线

app-prototype 技能专为解决上述痛点而生，它将繁琐的原型设计转化为结构化的文档生成与前端页面渲染过程。

核心工作流程分为四个阶段：

材料收集与分析：读取用户提供的原始需求、UI 参考图及品牌资料，提取业务场景清单、目标用户角色和视觉风格。
生成对话式需求文档：摒弃传统的接口需求表，改用 👤用户→🤖AI 的对话流程来描述业务逻辑。文档中内嵌结果卡片的 ASCII 原型，并包含多轮异常处理示例，同时将品牌色、行业术语等全局上下文固化到 docs/requirements.md 中。
用户评审与迭代：这是确保需求准确性的关键卡点，确认文档无误后才进入页面生成阶段。
批量生成 HTML 原型：基于 page-generation-prompt.md 模板，为每个业务场景生成独立的 HTML 文件（如 src/01-场景名.html）。每个文件内置 3 个手机模拟器视图，展示不同的对话分支流程。通过并行 Task 工具，每批可高效生成 2-4 个场景。

在技术实现上，生成的页面直接采用 Tailwind CSS CDN 和 SVG 内联图标，无需任何构建工具，浏览器打开即可预览。

适用边界与工程实践建议

需要注意的是，该技能生成的是纯静态原型 Demo，仅适用于汇报展示和需求验证阶段，完全不涉及后端逻辑与真实数据交互。

在将该技能复用到新项目时，只需复制对应的 Skill 目录，并在项目中准备好 docs/ 下的需求文件和 assets/ 下的设计参考。由于它兼容 Cursor 和 Claude Code，迁移时无需修改任何配置。如果在评审后需要调整品牌色或对话流程，只需修改 requirements.md 中的相关章节并重新触发生成即可。对于高度依赖复杂手势或自定义渲染引擎的特殊 UI 组件，目前的静态 HTML 可能无法完美还原，仍需设计师进行后期微调。