用Codex画了30天原型图后，我蒸馏了这个 Skill
左侧是让 AI 根据网站复刻，整体效果差点意思，于是又发了截图，进行优化（右侧对话）
然后就有了复刻后的 biibili 页面👇全程原型图+设计文档，都用自然语言对话实现。
50%
50%
01 产品经理不再需要设计工具
AI 现在完全能做到这一点，而且做得更快、保真度更高、还能自动生成设计文档。
代码和内容是 AI 最擅长生成的。
传统流程里，你需要学工具、拖组件、调样式、写交互说明，每一步都在消耗你的时间和精力。产品经理最核心的能力从来不是"画图"，而是"想清楚"问题和解决方案。
02 这个 Skill 做了什么
在没有使用这个 skill 的时候，我是用下面两种方法制作原型的：
方法一：把产品截图发给 AI，让它输出 HTML，然后在这个 HTML 上编辑，加个按钮、改个提示语。
方法二：把产品复刻成本地 Next.js 工程，好处是可以复用，下次画原型时还能在这个框架下修修补补。
现在有了 Skill，我把这两种方式合并成了一个。
你只需要发送一张图片或一个网站地址，在 Chrome 中打开该网站，AI 就能将其复刻到本地。
再基于这个复刻的工程文件，用自然语言描述你想要的变化，AI 可以交付原型图+设计文档。
简单说一下这个 Skill 的工作流程，总共五步。
第一步：用户提供网页地址或截图。启动 Skill 后，Claude 会请求你提供目标网页的 URL 或界面截图。
第二步：Chrome 自动化像素级捕获。Claude 调用 Chrome 浏览器自动化工具——导航、读取页面树、截图、JS 提取样式—，采集页面的完整结构、配色、字体、间距和组件信息。若 Chrome 不可用，自动回退到 WebFetch + 视觉知识。
第三步：构建并交付项目。自动创建 Next.js 14 + Tailwind CSS 项目，构建完成后自动在浏览器启动。
第四步：对比优化。交付后 Claude 邀请你对比原页面与克隆效果。你可以发送对比截图或文字反馈，Claude 逐轮修正，直到满意为止。
第五步：功能迭代 + 设计文档生成。每次新增功能或修改页面，Claude 同步输出代码变更与 Markdown 格式的设计文档。
03 设计文档和原型融为一体
传统工作流里，原型是一份文件，PRD 是另一份文件。改了原型忘了改文档。
开发同学对着过期的设计文档写代码，结果跟原型对不上，又得返工。
这个 Skill 彻底解决了这个问题。
设计文档直接显示在前端界面里，与功能融合在一起。
页面右下角有一个浮动按钮，点一下就能展开设计文档面板，整个交互体验非常顺滑。每次修改前端页面的时候，设计文档也会同步更新。
打开原型页面，既能看到交互效果，又能直接查阅设计说明，再也不用两边来回翻了。方便自己查看，也方便开发查看。
04 不只是产品经理的工具
这个 Skill 不只是画原型用的。
它的核心能力是：参考一个网站，在本地完整搭建其工程文件，做出一个和目标网站一模一样的产品。
所谓工程文件，就是一个代码仓库，可本地部署也可在 github 托管。
如果你看到一个喜欢的网站，直接用这个 skill 帮你复刻。
找一个类似产品的页面作为参考，AI 帮你搭好前端框架，你再往里填业务逻辑。
这个 skill 是你 vibe coding 的起点，当你拥有一个产品的前端框架，接下来实现其后端逻辑就变得简单了。
05 怎么用？
Skill 就是一个文件夹，把它安装到你常用的 Agent 工具就能使用。
最简单的安装方式：告诉你的 AI
"帮我安装这个 Skill：https://github.com/zephyrwang6/protodesign"
推荐使用Claude 的 Cowork、codex，效果更好，对于要复刻的网站，一定先在浏览器里打开，方便 Agent 操作你的 Chrome 浏览器获取页面。
06 对未来的一点畅想
做这个 Skill 的过程中，我一直在想一件事：
如果我能直接拿到生产环境的代码，复刻产品就不需要了。
产品经理能直接基于生产代码做设计，在提给开发测试来评审。
那么如果用户有编辑代码的权限呢？
是不是每个人都能定制化自己的产品了。
现在很多SAAS 产品开始 CLI 化，飞书前两天刚这么做了而且还开源了，用户拿到 CLI 的能力，就可以随意调用产品功能，也可以基于 CLI 的能力自组装一个定制化的界面。
不再通过统一的界面操作产品不是未来，是现在就能实现了。
当 Agent 可以接管代码甚至直接访问产品功能时，产品经理的价值还有什么？
有一点我非常确信产品经理最不稀缺的能力就是“把需求画出来”。
稀缺的能力是把团队有限资源放在最该做的事上：判断优先级、定义目标、拿到商业结果。
把用户需求转成产品功能，只是表层动作；更关键的是先回答三件事：
1 现在的核心问题是什么？
2 现在做是否时机正确？
3 做完能否提升业务价值？
随着 AI 发展更成熟需求会越来越多，有需求就需要产品经理，AI 不会替代产品经理，但会重排产品能力结构：
低阶执行被自动化，高阶能力被放大。
从初级到高级的路径会变短，“画图仔”会减少；
但洞察、分析、决策、协同与领导力，会成为产品岗位的硬要求。
另外，我还做了一个更轻量的 Skill，把图片直接转成 HTML，更适合轻量化的需求设计。
关于产品经理相关的 skill 我还有各类流程图绘制的 Skill、需求文档编写 Skill、产品评审团 Skill、PM 数据分析 Skill、用例编写 Skill、问卷调研设计 Skill等等。
这些 Skill 还在优化，会优先和订阅社群的朋友们分享，感兴趣的可以订阅我的 AI 生产力专栏，加入社群，和更多小伙伴一起用 AI 提高生产力。