过去一年，我在实践中发现了一个现象：产品经理花在原型绘制上的时间占比高达50%，但这些时间的价值密度极低。
用Axure拖拽两天完成原型，评审后又是一轮轮的修改，开发过程中还要继续调整。这个循环里，产品经理变成了"拖拽工具人"，重复机械的工作让这个岗位本身变得无趣。
问题的根源不在工具，而在工作流本身。当AI足够成熟时，我意识到：产品经理根本不需要再学Axure或Figma这样的设计工具。
我基于这个认知，打造了一个Skill，彻底改变了我的原型工作方式。从自然语言对话到完整的高保真原型+设计文档交付，整个流程的效率提升了10倍以上。
一、产品经理已经不需要设计工具
这个结论听起来激进，但逻辑很清晰：
设计工具的本质作用就是把脑子里的想法可视化，帮助团队对齐认知。AI现在完全能做到这一点，而且做得更快、保真度更高、还自动生成设计文档。
代码和内容是AI最擅长的领域。传统流程需要你：学工具 → 拖组件 → 调样式 → 写交互说明，每一步都在消耗时间和精力。现在只需用自然语言告诉AI要什么，它就能实现。
一个具体对比：
| 维度 | 传统Axure/Figma流程 | AI Skill流程 |
|---|---|---|
| 完成原型耗时 | 2-3天 | 15-30分钟 |
| 修改方式 | 重新调整组件、布局、样式 | 发送反馈截图或文字，AI自动修正 |
| 学习成本 | 需掌握工具操作 | 只需表达清楚需求 |
| 设计文档 | 单独维护，易过期 | 与原型实时同步 |
| 代码交付 | 纯视觉，无可复用代码 | 完整Next.js项目，可本地运行修改 |
产品经理最核心的能力从来不是"画图"，而是"想清楚"问题和解决方案。工具只是载体。
二、五步完成产品设计
第一步：提供参考源
用户提供网页URL或界面截图。启动Skill后，Claude会请求你提供目标网页的地址或现有产品的截图。
第二步：自动化采集页面数据
Claude调用Chrome浏览器自动化工具，完成以下操作：
- 导航至目标页面 → 读取完整的页面DOM树
- 像素级截图捕获 → 自动提取样式信息（配色、字体、间距、组件）
- 若Chrome不可用，自动回退到WebFetch + 视觉识别方案
这个步骤保证了复刻的结构完整性和视觉准确性。
第三步：本地项目构建与交付
基于采集到的页面数据，Skill自动创建：
- 完整的Next.js 14项目框架
- 使用Tailwind CSS进行样式管理（便于后续修改）
- 自动在浏览器启动项目运行
这不是简单的HTML文件，而是一个完整的本地代码仓库，你对所有代码拥有绝对掌控权。
第四步：对比优化迭代
交付后，Claude邀请你对比原页面与复刻效果。可以：
- 发送原版和复刻版的对比截图
- 用文字描述不满意的地方
- Claude逐轮修正，直到达到预期
实际案例：我用此Skill复刻了Bilibili产品首页。
初次复刻后，整体效果接近但细节有差
于是发送了对比截图，Skill自动识别差异并优化。
最终布局、文字、配色、间距等所有元素都与原版一致。
第五步：功能迭代与设计文档生成
每次新增功能或修改页面，Skill同步输出：
- 更新的代码文件变更
- Markdown格式的设计文档
- 自动保持原型与文档的实时同步
三、设计文档不再是独立文件
传统工作流的一个核心痛点：原型是一份文件，PRD是另一份文件。
改了原型忘了改文档，开发对着过期的设计文档写代码，结果跟原型对不上，又得返工。
这个Skill彻底改变了这个逻辑。设计文档直接嵌入前端界面，不是静态的markdown，而是与功能融为一体的交互式文档。
具体表现为：
- 页面右下角有一个浮动按钮，点击展开设计文档面板
- 每次修改前端页面，设计文档自动同步更新
- 打开原型既能看交互效果，又能直接查阅设计说明，不用两边来回翻
- 开发、设计、产品三方都基于同一份动态文档工作
这样的设计大幅降低了信息断层风险，提高了团队协作效率。
四、这个Skill不只是画原型
Skill的核心能力是：参考一个网站，在本地完整搭建其工程文件，生成一个代码级的复刻版本。
这意味着它的用途远不只原型设计：
1. 竞品分析与快速学习
看到一个喜欢的网站？直接用Skill复刻到本地，获得完整的前端代码。无需猜测他们的技术栈或设计逻辑，代码直观呈现。
2. 快速原型 → 完整产品的跳板
传统流程：设计原型 → 开发从零开始写代码。现在流程：用Skill生成前端框架 → 开发直接填充业务逻辑。这被称为"Vibe Coding"——基于参考网站的框架代码进行迭代开发，大幅缩短初期研发周期。
3. 内部系统快速搭建
企业内部系统往往需要快速迭代。用一个现有系统的截图，Skill可以快速复刻框架，产品经理立即在此基础上进行功能调整和迭代。
4. 设计参考库的自动化建立
团队可以复刻多个优秀产品的页面，建立内部的设计参考库和代码库，加速后续项目的设计决策。
五、安装与使用
Skill本质上是一个文件夹，安装到常用的Agent工具即可使用。
最简单的安装方式：
告诉你的AI助手：
"帮我安装这个Skill：https://github.com/zephyrwang6/protodesign"
- 推荐使用Claude的Cowork或Codex，兼容性和效果更好
- 对于要复刻的网站，一定先在浏览器里打开，方便AI通过浏览器自动化工具获取完整页面信息
- 提供对比反馈时，直接发送截图更高效，AI能更准确地理解视觉差异
六、产品经理角色的重排
做这个Skill的过程中，我一直在思考一个问题：如果AI能直接拿到生产环境代码，或用户拥有编辑代码的权限，产品经理的价值在哪里？
现在很多SAAS产品已经开始CLI化。飞书前不久开源了CLI工具，用户拿到命令行能力后，可以随意调用产品功能，甚至自组装定制化界面。不再通过统一UI操作产品，已经是现在就能实现的事。
但有一点我非常确信：产品经理最不稀缺的能力就是"把需求画出来"。稀缺的能力是：
- 把团队有限资源放在最该做的事上（优先级判断）
- 清晰定义目标和成功指标（目标设定）
- 最终拿到商业结果（结果驱动）
把用户需求转成产品功能，只是表层动作。更关键的是先回答三个问题：
- 现在的核心问题是什么？（问题诊断）
- 现在做是否时机正确？（时机判断）
- 做完能否提升业务价值？（价值评估）
随着AI能力越来越成熟，需求会越来越多，但AI不会替代产品经理，而是重排产品能力结构：
- 低阶执行（画图、写文案、制作文档）被自动化
- 高阶能力（洞察、分析、决策、协同、领导力）被放大
- 从初级到高级的路径会变短，"画图仔"会减少
- 但战略思维、商业敏感度、团队协同能力，会成为产品岗位的硬要求
产品经理不会被淘汰，但岗位的能力要求会升级。你要么向上走（决策层面），要么被自动化取代。
总结
从我的实践来看，AI Skill对产品经理工作的改变不是简单的效率提升，而是工作方式的根本转变。
当原型和设计文档不再是消耗精力的"拖拽工作"，产品经理就有更多精力聚焦在真正高价值的事——理解用户、发现问题、定义策略、驱