AI 团队

Appearance

产品原型还原度对比（Prototype Diff） ​

产品原型与现有应用差异对比、确认、实现和验证的 AI 研发 playbook。

Playbook 代码库：http://75.101.196.174/fangxing/ai-playbooks

把产品原型（HTML 原型、Figma 导出 HTML、原型 URL 或截图目录）和一个正在运行的 Web 应用逐页对比，生成差异基准文档，人工确认后再实施代码改造，并完成响应式、DOM、测试和 MR 说明的验证。提供 Codex skill 与 Claude Code command 两种实现。

适用场景 ​

  • 产品提供了 HTML 原型、Figma 导出 HTML、原型 URL 或截图目录。
  • 团队已有一个运行中的 Web 应用。
  • 需要逐页对比原型与当前实现。
  • 需要生成差异基准文档。
  • 需要人工确认后再实施代码改造。
  • 需要验证响应式、DOM、测试和 MR 说明。

核心原则

原型决定目标体验，当前系统决定真实实现方式。

能力概览 ​

  • Codex skill：完整工作流与参考资料。
  • Claude Code command：初版 slash command prompt。
  • 安装说明：README 一步步接入。
  • 实践案例：Ghome 项目使用示例。

效果示例 ​

扫描结果 · 覆盖率量化指标 —— 用量化指标衡量原型的还原程度。

覆盖率量化指标示例

扫描结果 · 页面差异详情 —— 逐页列出原型与当前实现的差异点。

页面差异详情示例

Codex 交互过程 —— 在 Codex 中驱动整个对比流程。

Codex 交互过程示例

适用框架 ​

不限定 Next.js，可用于任何有明确路由和运行入口的 Web 项目：

  • Next.js
  • React + Vite
  • Vue + Vite
  • Nuxt
  • UniApp
  • 其他有明确路由和运行入口的 Web 项目

推荐输入 ​

text
原型入口：docs/ghome-20260522.html
当前站点：http://localhost:3000
代码库路径：当前 workspace
页面范围：原型覆盖的主页面
输出目录：docs/prototype-diff/20260522
验证命令：typecheck / test / build

快速开始 ​

Codex

text
使用 prototype-diff-implementation skill，对 docs/ghome-20260522.html 和当前本地站点 http://localhost:3000 进行原型差异扫描，先生成路由映射和首页差异基准，不要直接改代码。

Claude Code

text
/prototype-diff 原型=docs/ghome-20260522.html 当前站点=http://localhost:3000 输出=docs/prototype-diff/20260522 范围=首页 不要直接改代码