🔨 原型之王 · PRD到高保真原型工作流

原型不是「照着PRD画页面」，而是「把PRD每条需求翻译成可视化的、可交互的、可评审的产品实物」。 8 Phase 流水线 + 自动化验收门禁 ≥95%，从文档到可点击原型，30+ 页面 30 分钟并行搞定。

---

🔥 你在经历的痛点

做过原型的人都知道：

#	痛点	后果
1	页面画出来了，按钮全点不动	评审演示当场翻车，「页面存在 ≠ 功能完成」
2	「100% 覆盖」是口头承诺	子 Agent 只实现了 60% 功能点，无人验证
3	每个原型一套样式	Token 不统一，评审说「像三个团队做的」
4	只有理想态，没有空态/加载态/报错态	数据一空页面就崩，演示穿帮
5	Mock 数据写死在每个函数里	改数据改 20 个文件，空态/极限态没法切换
6	评审意见记了一堆，改完不知道改没改	无标注无追踪，返工靠记忆
7	30+ 页面手工做要 3 天	交付周期拖垮项目，需求都冻结了原型还没出

根因：原型当「画图」做，而不是当「产品」做。

---

💡 这个仓库怎么解决

原型是产品实物，不是画皮。

每个按钮必须有 handler，每个弹窗必须有内容，每个状态必须有覆盖——用自动化验收脚本兜底，用 ≥95% 门禁拦交付，拒绝「我感觉」式自查。

一句话：把 PRD 当代码编译，把原型当产品验收。

---

✨ 核心亮点

1️⃣ 8 Phase 流水线：从文档到交付，颗粒度到按钮级

P0 前置检查 → P1 结构化清单 → P2 架构规划 → P3 设计系统
→ P4 页面实现 → P5 Mock数据 → P6 自动化验收 → P7 评审走查 → P8 交付

P1 是灵魂：checklist.yaml 细化到每个操作按钮——每个模块必须回答三层验收：

1. List — 数据在哪展示？（表格/卡片/树）→ 空白页 = 未完成
2. Detail — 点击一行能看到什么？（详情弹窗/新页面）→ 详情点不开 = 未完成
3. Action — 用户能做什么？（新增/编辑/删除/审核）→ 按钮无响应 = 未完成

三个答案不全，模块不能算「done」。这就是为什么这个流程交付的原型评审通过率远超手工原型。

2️⃣ 10 道自动化验收门禁：G1-G10，≥95% 才放行

cd my-project/prototype && python3 scripts/verify-prototype.py

门禁	检查项	一句话说明
G1	模态框完整性	每个 showModal('xxx') 必须有对应 id 元素
G2	函数完整性	每个 onclick 必须有函数定义
G3	页面路由完整性	每个 data-page 必须有对应 id
G4	事件处理完整性	每个 data-action 必须有 case
G5	按钮无遗漏	每个 <button> 必须有 handler
G6	Emoji 使用率	≤20%，不滥用图标
G7	Token 引用	HTML 必须引用 design-tokens.css
G8	字号合规	正文≥14px / 表格≥13px / 标签≥12px
G9	空态/加载态覆盖	每个列表页必须有空态+加载态
G10	运营看板可统计	看板页存在 + 指标数据一致 + 口径可统计

子 Agent 说「100% 覆盖」不可信——只认验证脚本输出。 ≥95% 通过才允许交付，不足则列出失败项返回修复。

3️⃣ 组件 6 态全覆盖，不再「只有理想态」

每个组件覆盖 6 种状态：

理想态（有数据） → 空态（无数据引导） → 加载态（骨架屏）
→ 报错态（网络错误） → 极限态（超长文本/1000条分页） → 成功态（操作Toast）

评审时切数据源就能演示所有状态——不用改一行页面逻辑。

4️⃣ 统一 Mock 数据池，改数据改一处

禁止在每个函数里写死数据。data/mock-data.js 统一数据池：

var MOCK = {
  entities: { list: [...], emptyList: [], longList: [...] },  // 每域三态
  getEntityById: function(id) { ... },
};

• 同一实体跨页面数据一致（订单号→车辆→质检→结算 关联字段一致）
• 金额计算真实可验证（公式写在注释里）
• 空态/极限态只需切换数据源，不改页面逻辑

5️⃣ 30+ 页面大规模并行：30 分钟交付 36 页/7 域

Native JS SPA（零 CDN 依赖，双击可运行）+ 子 Agent 并行：

① 主Agent建基（壳+Token+Mock+路由，5min）
② 并行子Agent按域生成 pages-*.js（每域10-15min）
③ 组装验证（node --check + headless截图健康检查）

截图健康检查判据（1 秒判断成败）：

• 100-200KB 且各不相同 → ✅ 正常渲染
• 全部等大且 18-20KB → ❌ JS 渲染失败（语法/服务器问题）
• 全部等大且 30-40KB → ⚠️ 只有布局壳（页面函数未注册）

60+ 页超大规模还有 Python Generator 路径（references/python-generator-monolithic.md），正则验证 + node --check，无需 headless 环境。

6️⃣ 评审标注模式：R/L/D 三键，评审意见直接落原型

在 HTML 末尾注入 review-mode.js：

快捷键	功能
R	评审标注 — 每个元素标注属性引用（data-page/data-action）
L	骨架屏加载态 — 表格替换为灰色动画条
D	恢复真实数据

评审会直接看着标注走查，不再「凭感觉」。

7️⃣ 30+ 条实战陷阱库：前人踩过的坑，全在里面

WORKFLOW.md 收录了从真实项目（84 页/107 页原型）沉淀的全部陷阱，最致命的有：

• NodeList.forEach 浏览器兼容性 — 某些浏览器静默失败导致导航空白，排查了整天才发现一行代码。SPA 导航一律用 for 循环。
• data-action 大小写静默失效 — 43 个按钮 42 个失效，事件委托必须大小写容错
• 孤儿页面 — 有 HTML 无导航入口，交付前 comm 对比页面清单与导航清单
• statusTag 映射缺失 — 新状态值未加颜色映射，全部渲染为灰色
• 嵌套入口套娃 — 子原型内禁止重复外层入口
• Toast 模拟永不通过 — 按钮必须对应真实数据操作，验收脚本拦截

每一条都是真金白银的返工换来的，用这个流程等于站在前人的肩膀上。

---

🚀 使用引导

10 秒开始（最快路径）

# 克隆仓库
git clone https://github.com/kangedy/prototype-king.git
cd prototype-king

# 打开示例原型直接看效果
open example/index.html              # 订单管理后台完整示例
open examples/super-todo-list/       # AI待办清单交互原型

标准流程（有 PRD 时）

# 前提：已有一份符合 prd-king 10章标准的 PRD

# 1. 创建工作目录
mkdir -p my-project/prototype && cd my-project/prototype

# 2. 复制工作流文件
cp -r <path-to-prototype-king>/* ./

# 3. 按 WORKFLOW.md 的 8 Phase 执行
open WORKFLOW.md

# 4. Phase 6: 运行自动化验收（≥95% 门禁）
python3 scripts/verify-prototype.py

按身份使用

你的身份	怎么做
AI Agent 用户（Hermes/Codex/OpenClaw）	安装 skill → 说「根据PRD做原型」→ 自动走 8 Phase
产品经理（评审）	按 R 键开评审标注，逐页走查，意见直接记原型上
前端开发（要交付物）	看 verify-prototype.py 输出，失败项逐个修复，≥95% 再交付
独立开发者（单干）	用 example/ 当起点，改 Token + Mock 数据 + 页面，比从零写快 3 倍

AI Agent 安装

# Codex
codex skills install kangedy/prototype-king

# Hermes Agent
mkdir -p ~/.hermes/skills/product/prototype-king/
cp -r * ~/.hermes/skills/product/prototype-king/
# → 说「根据PRD做原型」

完整使用链路

prd-king 写PRD → prototype-king 转原型 → verify-prototype.py 交付验收
      ↓                ↓                        ↓
  10章标准          8 Phase 流水线            ≥95% 门禁

交付前自检（1 分钟）

□ 自动化验收 ≥95% 通过（verify-prototype.py）
□ 每个按钮有 handler，无 Toast 模拟
□ 每个列表页有空态+加载态
□ 同一实体跨页面数据一致
□ 正文≥14px / 表格≥13px / 标签≥12px
□ 无孤儿页面（导航条目数 = 页面数）
□ JS 语法通过 node --check

---

📂 目录结构

prototype-king/
├── SKILL.md                          ← Codex/Hermes skill 安装入口
├── WORKFLOW.md                       ← 8 Phase 工作流（完整版，含全部陷阱清单）
├── references/                       ← 17个参考文件
│   ├── design-system-tokens.md       ← 6大设计体系Token对照
│   ├── ant-design-5-tokens.md        ← Ant Design 5.x 完整Token
│   ├── spa-crud-architecture.md      ← 数据驱动SPA CRUD架构（PAGE_ENTITY_MAP模式）
│   ├── prototype-iteration-pitfalls.md ← 原型迭代致命陷阱（显隐切换三原则）
│   ├── python-generator-monolithic.md  ← 60+页超大规模Python生成器
│   └── ...（详见 WORKFLOW.md 参考文件表）
├── scripts/verify-prototype.py       ← 自动化验收脚本（G1-G10，≥95%门禁）
├── example/                          ← 订单管理后台完整示例（HTML+Mock+Token）
├── examples/super-todo-list/         ← AI待办清单交互原型示例
└── CHANGELOG.md

🔗 配套项目

项目	链接	功能
prototype-king（本仓库）	https://github.com/kangedy/prototype-king	PRD→原型工作流 — 8 Phase + 自动化验收
prd-king	https://github.com/kangedy/prd-king	PRD写作标准 — 10章模板+设计体系+校验脚本

---

🧑‍💻 贡献

欢迎 PR、Issue、讨论。主要贡献方向：

• 更多示例原型（examples/ 目录）
• 新设计体系 Token 参考
• verify-prototype.py 新检查项

---

📜 开源协议

MIT License。可自由使用、修改、商用。

---

🙏 致谢

• Nous Research — Hermes Agent 技能系统
• Ant Design / Element Plus / TDesign / Arco Design / Semi Design / NutUI — 优秀的设计体系