baoyu-design 是宝玉JimLiu把 claude.ai/design 的设计引擎打包成了一个开源 Agent SkillGitHub 上 1700 Stars。你不需要会写代码不需要会用 Figma只需要用自然语言告诉它你想要什么它就能生成一个自包含的 HTML 文件——点开就是一个能交互的原型。它能做的事情比你想象的多UI 高保真设计不是粗糙的线框图是带颜色、字体、间距的真实界面可交互原型按钮能点、页面能跳、弹窗能弹开发拿到就能看懂交互逻辑演示文稿一句话生成 PPT 风格的方案展示支持导出 PPTX可编辑和截图两种模式移动端原型手机界面、平板界面都能做带设备外框Figma 导入支持导入 .fig 文件不用从零开始安装就一行命令npx skills add JimLiu/baoyu-design装完之后在 Cursor、Claude Code 或者其他 70 多种支持的 AI 编程工具里直接用就行。宝玉本人推荐搭配 Claude Opus 使用效果最好。整个工具基于 MIT 协议开源代码完全公开没有任何使用限制。说白了它就是一个「用嘴巴做设计」的工具——你负责想清楚要什么它负责把想的东西变成看得见、点得了的原型。baoyu-design 工具能力全景图用之前 vs 用之后用之前 接到一个「会员中心改版」的需求你先花 2 小时写 PRD——需求背景、用户故事、功能清单一个都不能少。再花 1 小时用 Figma 画线框图再花半小时截图贴到文档里。整个流程下来半天没了。而且线框图是静态的开发拿到之后还要反复确认「这个按钮点了跳哪里」「这个弹窗是底部弹出还是居中」。你当时心里肯定想这活儿我干了三年了怎么还是这么慢用之后 你打开 Claude Code输入一句话「帮我做一个会员中心页面包含个人信息、订单列表、优惠券、积分商城入口风格偏简约商务」。3 分钟后一个可交互的原型就出来了。点「订单列表」真的能跳转点「优惠券」真的弹出详情。直接把这个 HTML 文件发给开发他打开浏览器就能看到完整的交互逻辑。时间对比半天 → 10 分钟。更关键的是交互逻辑不再靠文字描述开发看到的就是最终效果沟通成本砍掉一大半。你不需要懂 AI你只需要会打字。传统PRD流程 vs baoyu-design 工作流对比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」出来的效果会偏通用不够贴合你的实际需求。另外生成的原型里图片是占位图真实项目需要替换。建议先用一个简单页面练手熟悉之后再拿真实需求跑。3 步上手流程图跟传统方式比差在哪直接上对比维度 写 PRD 画线框图 baoyu-design耗时 半天到一天 10-15 分钟产出物 文档 静态图 可交互原型沟通效率 开发要反复确认交互细节 直接看原型所见即所得修改成本 改文档 改图 重新截图 改一句话重新生成上手门槛 需要会 Figma 或 Axure 会打字就行导出格式 Word/PDF 图片 HTML/PPTX/PDF最核心的差异不是速度是沟通方式的改变。以前你写「点击购物车图标弹出购物车面板展示已选商品列表」——这段话开发看了要脑补设计师看了要确认产品自己写了还要检查有没有遗漏。现在你直接给一个能点的原型所有人看到的是同一个东西理解成本为零。说实话它不能完全替代 PRD——复杂的业务规则、边界条件、异常流程这些还是得用文字写清楚。但「先出一个可交互原型再基于原型补充文档细节」这个工作流比「先写文档再画原型」高效太多了。码哥推荐 把 baoyu-design 当成你的「第一稿工具」。快速出原型 → 团队评审 → 基于反馈补充 PRD 细节。不是替代你思考是把思考的结果最快呈现出来。 你现在做产品方案的流程是怎样的A. 先写 PRD 文档再画原型B. 直接用 Figma 画原型不写 PRDC. 用 AI 工具辅助但还是以文档为主D. 还没试过用 AI 做产品方案评论区说说码哥猜选 A 的人最多 FAQQ生成的原型质量怎么样能直接给客户看吗A基础质量不错布局和交互逻辑都能达到中等偏上的水平。但默认是通用风格没有你们公司的品牌色和设计规范。如果是给内部团队对需求用完全够给客户看的话建议先跑一遍确认大方向没问题后再微调细节。Q需要会写代码吗A完全不需要。你只需要用自然语言描述需求它自己生成 HTML。安装过程也是复制一行命令的事。唯一需要的「技术操作」就是启动一个本地预览服务一行 Python 命令。Q免费的吗Abaoyu-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 头疼的可以直接把这个发给他。
