用AI画了一年原型图后，我做了这个 Skill
这一年都用 AI 画原型，它给带来至少 10 倍的效率提升。
过去一年我都在用 AI 画原型，它给带来至少 10 倍的效率提升。
想想以前用 Axure 拖拖拽拽两天，终于画完原型，评审会上大家一顿输出，回来又改。改完在开发过程中，还得再改，每个产品的工作至少有50%都花在这上面，非常浪费。
画原型这个技能当你掌握后，有任务来，就是重复搬砖..搬砖….技能不会再有提升，画原型让产品这个工作变得无趣。
但，如果这都交给 AI 来做。
流程就变成了这样：
一张图片复刻你的产品
→ 用自然语言描述需求
→ AI 直接在复刻的产品上输出设计
→ 评审会收集修改意见
→ 把意见发给 AI，输出原型和设计文档。
全程不需要任何拖拖拽拽。全靠 AI 实现。而且都是高保真的。几分钟打磨一张图，半天完成几十个页面不是梦。
现在我把上面原型绘制的流程做成了 Skill 。
我用这个 Skill 复刻了一个 bilibili 产品，看下面对话。
左侧是让 AI 根据网站复刻，整体效果差点意思，于是又发了截图，进行优化（右侧对话）
然后就有了复刻后的 bilibili 页面👇
参考下原版👇，除了图片，布局、文字、各种元素都是一致的。
这个复刻的产品并非一个简单的 HTML 页面，它是用 Next.js+TwindCSS 构建的本地项目，直接跑在浏览器里。
你对这个项目地代码拥有绝对的掌握权，可以随心所欲的修改，增加，删减各种页面、按钮、交互。
有了页面还不够。必须得有设计文档，而且要和页面有互动，这才算是完整的产品设计。
看页面👇右下角有一个设计文档的按钮，点击会显示每一次你用 AI 在这个页面下设计新功能。
它基于你和 AI 的对话，根据你提供的设计文档模板出一个PRD。
这一切都封装在一个 skill 里。
全程原型图+设计文档，都用自然语言对话实现。
Skill 的安装可以直接跳转文末获取，下面讲解这个 Skill 的实现逻辑。
01 产品经理不再需要设计工具
如果你作为产品，还在用设计工具画原型，请务必认识到这是在走弯路。
产品经理完全不需要 Axure 和 Figma 这样的工具了。
原型工具是把你脑子里的想法可视化，让团队对齐认知。
AI 现在完全能做到这一点，而且做得更快、保真度更高、还能自动生成设计文档。
代码和内容是 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 提高生产力。
💬 本文评论区已开启，但暂无读者留言。
本文转载自微信公众号，如有侵权请联系删除。
- 标题: 用AI画了一年原型图后，我做了这个 Skill
- 作者: lxiol
- 创建于 : 2026-05-08 21:47:19
- 更新于 : 2026-05-12 16:32:44
- 链接: https://blog.lxiol.cn/2026/05/08/用AI画了一年原型图后我做了这个-Skill/
- 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。