PM 原型生成与走查 (Prototype Generator + Walkthrough)
概述
把"需求 → 原型 → 审查"合并为一个闭环：接收产品需求（文档 / 截图 / 一句话 / 参考 URL），先主动澄清需求与捕获设计风格，生成带交互的中保真 HTML 原型，再自动做两步走查（功能走查 + HTML 语言走查，发现问题即刻自修复），交付交互 HTML 与解释文档；在你确认 HTML 无误后，才产出可导入墨刀的格式。
本 skill 已内置原型审查能力（功能走查 + HTML 语言走查），不再依赖独立审查 skill 或编排器。
设计资源引用
| 文件 | 用途 | 何时加载 |
|---|---|---|
references/design-system.md |
色值/字体/间距/圆角/组件样式 + 「无 AI 味道」风格基线 | 每次生成前必读，规划阶段确定设计令牌 |
references/interaction-patterns.md |
列表/表单/弹窗/Tab/导航等交互模式库 | 规划页面交互时必读 |
references/walkthrough-checklist.md |
功能走查 + HTML 语言走查检查项与严重程度 | 阶段4 走查前必读 |
输入来源与类型
| 来源 | 说明 |
|---|---|
| 文档 | PRD / Word / Markdown，用 Read 读取 |
| 截图 / 参考设计 / 参考网站 | 用 Read 分析布局/组件/色彩/间距；URL 用 WebFetch 或预览渲染 |
| 一句话描述 | 纯文字需求，进入阶段1 主动澄清 |
| 参考 URL | 用 WebFetch 获取页面结构，提取视觉风格作为约束（非照搬） |
工作流程
阶段1 · 需求澄清（主动抛出，捕获设计风格）
目标：把"文档/截图/一句话"撑成可生成的结构化需求，并确定视觉基调。
- 分析输入，提取已有信息：页面线索、功能点、数据字段、用户流程、参考视觉特征。
- 主动抛出（不要只被动问），用一份结构化澄清稿输出：
- 场景假设：列出 2–4 个你理解的核心用户场景（如"运营在后台录入密封点并查看统计"）。
- 功能清单：候选功能点（按页面归组，标 P0/P1）。
- 需求细节问题：一次性集中提出 5–8 个针对性问题（如"列表默认排序字段？""是否需要批量导入？""权限分几类？"），避免来回追问。 - 捕获设计 / 风格要求：明确询问是否有指定要求——品牌主色、辅助色、字体、信息密度（B 端密 / C 端疏）、风格关键词（如"克制专业""轻量活泼"）。
- 若用户已给：记录为本次设计约束，进入阶段2 落成设计令牌。
- 若用户未给：声明"本次采用默认『无 AI 味道』基线（见 design-system.md 风格基线）"，不擅自套用套路化视觉。 - 等待用户确认澄清稿（补充/纠偏/给风格）后再进阶段2。
阶段2 · 规划（待你确认）
- 输出原型规划：
- 页面清单（页面名 + 核心功能 + 优先级，表格）
- 页面跳转关系（如：列表页 → 点"新建" → 表单弹窗 → 提交 → 返回列表）
- 共用组件（导航栏 / 侧边栏 / 底部）
- 设计令牌：主色、中性色、密度、圆角/阴影基调（来自阶段1 约束或默认基线）
- 目标形态：PC 端（内容区 ≤960px 居中）还是移动端（430px 居中），或兼顾 - 等待用户确认规划后再写代码。
阶段3 · 生成 HTML 原型
文件结构决策
| 条件 | 输出形式 |
|---|---|
| 页面数 ≤ 2 且交互简单 | 单文件 HTML（CSS/JS 内联） |
| 页面数 ≥ 3 或有复杂交互 | 多文件（index.html + style.css + script.js + pages/） |
| 用户明确指定 | 遵循用户要求 |
编码规范
- 设计系统：严格使用
references/design-system.md（含无 AI 味道基线）。 - 交互模式：优先复用
references/interaction-patterns.md。 - CSS：4px 间距基准；PC ≤960px 居中，移动端 430px 居中（
.mobile-frame）；单文件内联、多文件独立.css。 - JS：仅原生 JS，无框架；交互含显隐、tab、弹窗、表单校验；单文件用 hash/
display切换，多文件用<a href>。 - 图片：SVG 占位或 CSS 绘制，禁外链。
- 墨刀兼容性（硬性）：标准 HTML5 标签；禁任何外部 CDN / 外链字体 / 外链图片 / 外链脚本；多文件
index.html在 zip 根目录、相对路径。
必须覆盖的页面元素
- [ ] 顶部导航（Logo + 主导航 + 用户区）
- [ ] 面包屑（≥2 级页面）
- [ ] 主要内容区
- [ ] 空状态（列表为空）
- [ ] 加载状态（异步处）
- [ ] 表单错误提示（如有表单）
- [ ] 真实字段名与示例数据，不写 lorem ipsum
阶段4 · 走查（自动 + 自修复）
加载 references/walkthrough-checklist.md，对生成结果做两步审查：
① 功能走查（对照阶段1 需求）
- 场景覆盖：阶段1 的每个场景是否都有可走通路径。
- 功能完整：功能清单中 P0/P1 是否都有对应 UI 与交互。
- 边界态：空/加载/错误/无权限状态是否齐备。
- 流程正确：跳转关系与规划一致，主流程可完整走通。
- 数据真实：无占位假文，字段命名贴合业务。
② HTML 语言走查（代码质量与观感）
- 语义化：header/nav/main/section 而非 div 堆砌。
- 无外部依赖：无 CDN / 外链字体 / 外链脚本 / 外链图片（墨刀兼容）。
- 无 AI 味道：未出现渐变 hero、玻璃拟态、滥用大圆角+大柔影、居中留白堆砌、emoji 当图标、假插画、无意义装饰动画等套路（除非用户明确要求）。
- 可访问基础：img 有 alt、label 关联、焦点可见、颜色非唯一信息载体。
- 代码整洁：类名一致、无死代码、相对路径正确（多文件 zip）。
处理：发现 P0/P1 立即修复并重验；P2/P3 记录进阶段5 交付的走查结论。修复后再次预览确认。
阶段5 · 交付
- 交付交互 HTML：preview 打开，供你查看体验。
- 交付解释文档（Markdown，每次必带），结构：
- 一、功能解释：页面清单 + 每页核心功能与交互路径 + 覆盖的需求点。
- 二、设计思路：为何这样布局/配色/信息层级；如何对齐业务场景与密度；与默认「无 AI 味道」基线或你指定风格的对应关系。
- 三、走查结论：功能走查 + HTML 语言走查的发现与已修复项；残留 P2/P3 优化项列出。 - 明确提示：请确认 HTML 是否符合预期；确认后我再产出墨刀导入包。
阶段6 · 确认闸口 → 墨刀导出（硬规则）
等待你明确回复「HTML 没问题 / 可以了 / 确认」后，才进入墨刀导出。
若你提出修改，回到阶段3 改完、重走阶段4、再交付确认，绝不提前打包墨刀文件。
- 打包：单文件直传；多文件将整个目录（index.html + style.css + script.js + pages/ + assets/）打包为 zip，index.html 在根目录。
- 墨刀导入步骤（附给用户）：墨刀 → 新建项目 → 选「HTML 导入」→ 上传 HTML（多文件传 zip）→ 导入后可补交互动效/标注。
- 输出包：
Output:
- prototype_files: <HTML 路径列表 或 zip 路径>
- file_structure: <单文件/多文件>
- page_count / page_list
- explanation_doc: <解释文档路径>
- modao_import: <直传 / zip + 导入步骤>
流程纪律
- [ ] 是否先经用户确认需求澄清稿（阶段1）再规划？
- [ ] 是否先经用户确认规划（阶段2）再写代码？
- [ ] 阶段4 是否执行了两步走查并自修复 P0/P1？
- [ ] 是否交付了交互 HTML + 解释文档（阶段5）？
- [ ] 是否在 HTML 未确认前停在闸口、未提前打包墨刀？
- [ ] 无明确风格要求时，是否声明并套用了「无 AI 味道」默认基线？
