写完 PRD，还要等设计师出图、等开发做原型？有没有更高效的方式？prd-html-skill 是一个开源的 AI 技能，它能把你的 Markdown 格式 PRD 直接转换成可点击、可验收、可离线交付的多页 HTML 交互原型。本文深度拆解这个项目的设计哲学和实现方案，看看它是如何让产品经理实现"需求即原型"的全流程自动化。
一、为什么需要"PRD 转原型"？
- 需求评审时：口头描述功能，开发一脸懵，"你说的这个跳转逻辑我没听懂"
- 原型制作时：Axure/Figma 拖拽半天，结果只是个高保真图片，不能真正点击交互
- 交付时：原型文件发来发去，版本混乱，开发不知道看哪个版本
prd-html-skill 的出现，正是为了解决这个痛点——让 AI 帮你把 PRD 文档直接"翻译"成可交互的网页原型。
Github: github.com/wenhui426/p…
二、核心理念：Markdown 是唯一事实源
这个项目最让我眼前一亮的设计哲学是："Markdown 是需求的唯一事实源，HTML 是根据 Markdown 生成的交互产物"。
这是什么意思？
简单说：改需求只改 Markdown，HTML 由 AI 重新生成。
需求文档（Markdown） → AI 生成 → 交互原型（HTML）
↑ ↓
└──── 修改需求时只改这里 ────────┘
这种设计解决了传统原型制作的最大问题：人工同步必然过期。当你在 Axure 里改了一个按钮文案，还要记得同步到 PRD 文档里，否则两边就会不一致。
三、核心功能：三件套 + 门禁机制
3.1 三件套：每个项目必建
prd-html-skill 要求每个项目必须建立三个核心文件：
| 文件 | 作用 | 为什么重要 |
|---|---|---|
_导航地图.md | 页面清单 + 跳转关系 + 优先级 | 骨架先定，页面间才不会断链 |
_公共规范.md | 项目级 design token | 所有页面从同一份 token 取样式 |
XX-页面名.md | 每页一个规格文件 | 生成单元，一屏看完 |
举个例子：假设你在做一个工单管理系统，导航地图会列出所有页面：
登录页 → 工单列表 → 工单详情 → 新建工单
有了这个地图，AI 生成的每个页面都知道"下一个页面是哪个"，跳转链接才不会断。
3.2 生成前门禁：三扇门都过才开工
这是项目最严谨的设计之一。每生成一页 HTML 前，必须过三扇门：
- 规范门：本页规范是否已经用户确认？样式是否取自公共规范 token？
- 导航门：本页跳转目标是否都已在导航地图登记？
- 工程门：没有引入框架/构建工具吧？（纯 HTML+CSS+JS）
**为什么这么严格？**因为常见的问题都是"生成后返工"：
- 页面风格漂移（规范没统一）
- 断链（导航没规划）
- 过度工程（引入了不需要的框架）
门禁把这些问题拦在生成前，而不是生成后才发现。
3.3 每页验收清单：8 条检查项
生成每页后，必须过 8 条验收清单：
- 能打开（无报错）
- 布局对（对照 spec，字段无缺漏）
- 跳转通（所有入口跳转目标有效）
- 状态齐（空态/加载/成功/错误）
- 风格统一（样式取自公共规范 token）
- 视觉签名（体现标志性元素）
- 不落 AI 默认脸（不是千篇一律的模板）
- 文案基调（用户视角命名、主动语态）
这种逐页验收的设计，确保了每页质量，而不是最后整体检查时才发现问题。
四、技术架构：一个 AI 技能的优雅实现
prd-html-skill 不是一个传统的代码项目，而是一个 AI 技能（Skill）——它定义了一套 AI 工具应该遵循的工作流程和规范。
4.1 目录结构
prd-html/
├── SKILL.md # 工作流 + 选型逻辑 + 门禁 + 规则
├── assets/ # 通用模板（共享一份）
│ ├── 导航地图模板.md
│ ├── 页面spec模板.md
│ └── 公共规范-通用.md
├── design-specs/ # 设计规范库
│ ├── index.md # 规范清单
│ ├── 后台-通用.md
│ └── APP-通用.md
├── references/ # 执行细节（渐进披露）
│ └── 单文件交付.md
└── evals/ # 评估
4.2 设计规范扩展机制
项目内置了两套设计规范：后台管理类和 APP 移动端。但更重要的是，它支持用户自定义扩展：
通用 token 骨架 + 选定的类型规范 + 项目色板 = 项目专属公共规范
用户可以通过截图、设计文档或口头描述生成新规范，存入 design-specs/ 并登记。后续开工时，新规范会出现在选型清单中。
这就像给 AI 装了一个"设计记忆"——你告诉它"我要用 Ant Design 风格"，它会记住并在后续所有页面中应用。
4.3 单文件交付：离线也能看
项目最终会生成一个可离线打开的单文件 HTML：
原型名-完整交互原型.html
这个文件包含了所有页面、样式、脚本和 mock 数据，一个文件就能在浏览器里跑起来。对于需求评审、方案演示非常友好——不用装任何软件，发个文件就能看。
五、创新亮点：值得借鉴的设计思想
5.1 不许猜：需求不明确就停下来问
这是项目最让我感动的设计原则之一。当需求不明确时，skill 会标记 [NEEDS CLARIFICATION: 具体问题] 并停下来问用户，不擅自假设。
为什么这么重要？因为猜错一个字段，返工的是整个页面；猜错的成本远高于问一句。
5.2 每批 1-2 页：控制上下文
项目规定每次只生成 1-2 个页面，而不是一次性生成 30 页。这是因为一次塞 30 页 spec 会上下文爆炸，质量崩。
这种"渐进式生成"的设计，确保了每页质量。
5.3 不引入工程化：原型不是生产代码
项目明确要求：纯 HTML+CSS+JS 单文件，无框架、无构建工具、无 npm。
这是一个非常清醒的判断。很多原型工具会引入 React/Vue 等框架，看起来很"专业"，但其实增加了复杂度。原型的核心目的是验证需求，不是展示技术能力。
六、适用场景与局限性
适合场景
- 产品经理：快速生成可点击原型，用于需求评审
- 创业团队：没有设计师时，快速验证产品想法
- 个人项目：独立开发者快速搭建产品原型
- 教学演示：展示产品设计流程
当前局限
- 不是生产级代码：输出是体验级原型，不是生产级前端工程
- 像素级还原受限：对像素级视觉还原、复杂动效有要求时，需使用其他工具
- AI 依赖：需要配合 AI 工具使用（如 Claude、GPT 等）
Github: github.com/wenhui426/p…
七、总结：AI 时代的产品设计新范式
prd-html-skill 不仅仅是一个"PRD 转 HTML"工具，它展示了 AI 在产品设计领域的新可能：
- 需求即原型：Markdown 作为唯一事实源，HTML 自动同步
- 质量可控：生成前门禁 + 逐页验收，确保一致性
- 渐进式交付：每批 1-2 页，控制上下文，保证质量
- 离线友好：单文件交付，评审演示无需网络
如果你是产品经理，或者经常需要做原型演示，prd-html-skill 值得一试。
关注
如果这篇文章对你有帮助，欢迎关注公众号，获取更多技术深度分析和开源项目拆解。
