夜雨聆风上周一早上，领导说要周三前交一个新功能的产品方案。你打开文档，准备写 PRD——需求背景、用户故事、功能清单、流程图、原型线框图……光是想清楚怎么组织这些内容，半天就过去了。
不是你效率低，是这类工作本来就会吃时间。
你旁边那个同事，10 分钟后拿着一个能点、能跳转、能在手机上滑的可交互原型去跟开发对需求了。开发看完直接说「明白了」，连会都没开。
差距不在能力，在工具。
baoyu-design 是什么，能帮你做什么
baoyu-design 是宝玉（JimLiu）把 claude.ai/design 的设计引擎打包成了一个开源 Agent Skill，GitHub 上 1700+ Stars。你不需要会写代码，不需要会用 Figma，只需要用自然语言告诉它你想要什么，它就能生成一个自包含的 HTML 文件——点开就是一个能交互的原型。
它能做的事情比你想象得多：
UI 高保真设计：不是粗糙的线框图，是带颜色、字体、间距的真实界面 可交互原型：按钮能点、页面能跳、弹窗能弹，开发拿到就能看懂交互逻辑 演示文稿：一句话生成 PPT 风格的方案展示，支持导出 PPTX（可编辑和截图两种模式） 移动端原型：手机界面、平板界面都能做，带设备外框 Figma 导入：支持导入 .fig 文件，不用从零开始
安装就一行命令：
npx skills add JimLiu/baoyu-design装完之后，在 Cursor、Claude Code 或者其他 70 多种支持的 AI 编程工具里直接用就行。宝玉本人推荐搭配 Claude Opus 使用，效果最好。整个工具基于 MIT 协议开源，代码完全公开，没有任何使用限制。
说白了，它就是一个「用嘴巴做设计」的工具——你负责想清楚要什么，它负责把想的东西变成看得见、点得了的原型。
用之前 vs 用之后
用之前： 接到一个「会员中心改版」的需求，你先花 2 小时写 PRD——需求背景、用户故事、功能清单，一个都不能少。再花 1 小时用 Figma 画线框图，再花半小时截图贴到文档里。整个流程下来，半天没了。而且线框图是静态的，开发拿到之后还要反复确认「这个按钮点了跳哪里」「这个弹窗是底部弹出还是居中」。你当时心里肯定想：这活儿我干了三年了，怎么还是这么慢？
用之后： 你打开 Claude Code，输入一句话：「帮我做一个会员中心页面，包含个人信息、订单列表、优惠券、积分商城入口，风格偏简约商务」。3 分钟后，一个可交互的原型就出来了。点「订单列表」真的能跳转，点「优惠券」真的弹出详情。直接把这个 HTML 文件发给开发，他打开浏览器就能看到完整的交互逻辑。
时间对比：半天 → 10 分钟。更关键的是，交互逻辑不再靠文字描述，开发看到的就是最终效果，沟通成本砍掉一大半。你不需要懂 AI，你只需要会打字。
3 步上手，今天就能用
第一步：安装技能
确保你电脑上有 Node.js（没有的话去官网下一个），然后一行命令搞定：
npx skills add JimLiu/baoyu-design如果你用的是 Cursor，加个参数：npx skills add JimLiu/baoyu-design --agent cursor；用 Claude Code 就加 --agent claude-code。安装过程大概 30 秒，不需要任何配置。
第二步：启动本地预览服务
原型生成后需要一个本地服务来预览。打开终端，运行：
python3 -m http.server 4311 --directory designs然后浏览器打开 http://localhost:4311，你生成的所有原型都在这里。这个服务只在本地运行，不需要联网，也不需要部署。
第三步：用自然语言描述你要什么
在你的 AI 编程工具里，直接说。描述越具体，出来的效果越贴合你的需求。举个例子：
“「帮我设计一个电商 App 的商品详情页，要有商品图片轮播、价格显示、规格选择（颜色和尺码）、加入购物车按钮、底部固定的操作栏（客服、收藏、加购、立即购买），风格偏简约，参考小米商城。」
它会生成一个 HTML 文件到 designs/ 目录下。打开就是成品——按钮能点、页面能跳、弹窗能弹。
“避坑提醒： 第一次用的时候，描述尽量具体——把页面包含哪些模块、大概什么风格说清楚。太笼统的描述（比如「做个 App」）出来的效果会偏通用，不够贴合你的实际需求。另外，生成的原型里图片是占位图，真实项目需要替换。建议先用一个简单页面练手，熟悉之后再拿真实需求跑。
跟传统方式比，差在哪？
直接上对比：
最核心的差异不是速度，是沟通方式的改变。以前你写「点击购物车图标，弹出购物车面板，展示已选商品列表」——这段话开发看了要脑补，设计师看了要确认，产品自己写了还要检查有没有遗漏。现在你直接给一个能点的原型，所有人看到的是同一个东西，理解成本为零。
说实话，它不能完全替代 PRD——复杂的业务规则、边界条件、异常流程这些还是得用文字写清楚。但「先出一个可交互原型，再基于原型补充文档细节」这个工作流，比「先写文档再画原型」高效太多了。
码哥推荐： 把 baoyu-design 当成你的「第一稿工具」。快速出原型 → 团队评审 → 基于反馈补充 PRD 细节。不是替代你思考，是把思考的结果最快呈现出来。
“💬 你现在做产品方案的流程是怎样的？
A. 先写 PRD 文档，再画原型 B. 直接用 Figma 画原型，不写 PRD C. 用 AI 工具辅助，但还是以文档为主 D. 还没试过用 AI 做产品方案 评论区说说，码哥猜选 A 的人最多 😂
FAQ
Q：生成的原型质量怎么样，能直接给客户看吗？A：基础质量不错，布局和交互逻辑都能达到中等偏上的水平。但默认是通用风格，没有你们公司的品牌色和设计规范。如果是给内部团队对需求用，完全够；给客户看的话，建议先跑一遍，确认大方向没问题后再微调细节。
Q：需要会写代码吗？A：完全不需要。你只需要用自然语言描述需求，它自己生成 HTML。安装过程也是复制一行命令的事。唯一需要的「技术操作」就是启动一个本地预览服务（一行 Python 命令）。
Q：免费的吗？A：baoyu-design 本身是开源免费的（MIT 协议）。但它依赖 Claude API，所以你需要有 Claude 的使用额度。如果你已经订阅了 Claude Pro/Max，直接用就行。
Q：跟 Figma 比，哪个更适合产品经理？A：定位不同。Figma 是专业设计工具，适合设计师做精细设计和团队协作；baoyu-design 是 AI 原型生成工具，适合产品经理快速把想法变成可交互的东西。如果你的需求是「快速出方案跟开发对齐」，baoyu-design 更快；如果你的需求是「做出最终交付物给设计师细化」，Figma 更合适。两者可以配合用——先用 baoyu-design 出原型确认方向，再交给设计师用 Figma 精修。
说到底
产品经理的核心价值从来不是写文档，是做判断——判断用户要什么、优先做什么、不做什么。baoyu-design 这类工具的意义，是把「把想法变成可见的东西」这个环节从半天压缩到 10 分钟，让你把更多时间花在真正重要的事情上。
这个工具 1700+ Stars 不是没有原因的。你今天就可以装一个，拿手头最紧急的需求跑一遍，看看效果。下一篇你想看什么？最近有几个选题在排队：用 baoyu-design 做移动端原型并导出 PPTX 给领导汇报、AI 辅助写周报的真实体验、产品经理必备的 5 个 AI 工具。
来评论区投个票，码哥按呼声最高的来写。说实话，公众号算法越来越不按常理出牌了。把码哥字节设为星标，至少保证你能收到更新，不会错过。
身边有产品经理同事在为写 PRD 头疼的，可以直接把这个发给他。
