上周一清晨，领导要求周三前提交一份新功能的产品方案。你打开文档准备撰写PRD——需求背景、用户故事、功能清单、流程图、原型线框图……光是理清这些内容的组织方式，大半天便悄然流逝。

并非你效率不足，而是这类工作天然就极度耗费时间。

而你身旁的同事，10分钟后便拿着一个可点击、可跳转、能在手机上滑动浏览的可交互原型去与开发对齐需求。开发人员看后直接表示「明白了」，连会议都省去了。

差距并不在于个人能力，而在于所使用的工具。

baoyu-design 是什么？AI原型设计工具能为你做什么

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协议开源，代码完全公开，无任何使用限制。

简而言之，它是一个「用语言驱动设计」的工具——你负责明确需求，它负责将想法转化为看得见、点得着的可交互原型。

使用前后对比：AI原型设计工具带来的效率革命

使用前： 接到一个「会员中心改版」需求，你需要先花费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细节。它并非替代你思考，而是将思考结果以最快速度呈现出来。

常见问题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并非没有原因。你今天就可以安装一个，用手中最紧急的需求跑一遍，亲自体验效果。