十分钟出原型的 Codex Skill
baoyu-design 能力简介
✅
baoyu-design 是宝玉（JimLiu）开源 Agent Skill，你不需要会写代码，不需要会用 Figma，只需要用自然语言告诉它你想要什么，它就能生成一个自包含的 HTML 文件——点开就是一个能交互的原型。
baoyu-design 工具能力全景图
41%
三步上手交互原型
59%
•
UI 高保真设计：不是粗糙的线框图，是带颜色、字体、间距的真实界面
•
可交互原型：按钮能点、页面能跳、弹窗能弹，开发拿到就能看懂交互逻辑
•
演示文稿：一句话生成 PPT 风格的方案展示，支持导出 PPTX（可编辑和截图两种模式）
•
移动端原型：手机界面、平板界面都能做，带设备外框
安装就一行命令：npx skills add JimLiu/baoyu-design
快速上手教程
第一步：安装技能
确保你电脑上有 Node.js，然后一行命令搞定：
npx skills add JimLiu/baoyu-design
如果你用的是 Cursor，加个参数：npx skills add JimLiu/baoyu-design --agent cursor；用 Claude Code 就加 --agent claude-code。安装过程大概 30 秒，不需要任何配置。
第二步：启动本地预览服务
原型生成后需要一个本地服务来预览。打开终端，运行：
代码块
JavaScript
python3 -m http.server 4311 --directory designs
然后浏览器打开 http://localhost:4311，你生成的所有原型都在这里。这个服务只在本地运行，不需要联网，也不需要部署。
第三步：用自然语言描述你要什么
在你的 AI 编程工具里，直接说。描述越具体，出来的效果越贴合你的需求。举个例子：
“「帮我设计一个电商 App 的商品详情页，要有商品图片轮播、价格显示、规格选择（颜色和尺码）、加入购物车按钮、底部固定的操作栏（客服、收藏、加购、立即购买），风格偏简约，参考小米商城。」
它会生成一个 HTML 文件到 designs/ 目录下。打开就是成品——按钮能点、页面能跳、弹窗能弹。
“避坑提醒： 第一次用的时候，描述尽量具体——把页面包含哪些模块、大概什么风格说清楚。太笼统的描述（比如「做个 App」）出来的效果会偏通用，不够贴合你的实际需求。另外，生成的原型里图片是占位图，真实项目需要替换。建议先用一个简单页面练手，熟悉之后再拿真实需求跑。
跟传统方式比，差在哪？
#veAMVVDpJRHn text { white-space: pre; }#veAMVVDpJRHn .fb0 { stroke: var(--N900-FG, 0.15); }#veAMVVDpJRHn .fb0 {stroke: rgba(31,35,41, 0.15)}#veAMVVDpJRHn .fx0 { stroke-miterlimit: 10; }#veAMVVDpJRHn .fx0 {stroke-miterlimit: 10}#veAMVVDpJRHn .fa1 { fill: rgb(187, 191, 196); }#veAMVVDpJRHn .fa1 {fill: rgb(187, 191, 196)}#veAMVVDpJRHn .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#veAMVVDpJRHn .fx1 {font-style: normal}#veAMVVDpJRHn .fx2 { text-anchor: middle; }#veAMVVDpJRHn .fx2 {text-anchor: middle}#veAMVVDpJRHn .fx3 { dominant-baseline: central; }#veAMVVDpJRHn .fx3 {dominant-baseline: central}#veAMVVDpJRHn .fx4 { stroke: none; }#veAMVVDpJRHn .fx4 {stroke: none}#veAMVVDpJRHn .fc0 { fill: var(--text-caption); }#veAMVVDpJRHn .fc0 {fill: #646a73}#veAMVVDpJRHn .fa2 { fill: var(--text-link-disabled); }#veAMVVDpJRHn .fa2 {fill: rgb(187, 191, 196)}#veAMVVDpJRHn .fa3 { fill: rgb(245, 247, 250); }#veAMVVDpJRHn .fa3 {fill: rgb(245, 247, 250)}#veAMVVDpJRHn .fx5 { font: 700 18px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#veAMVVDpJRHn .fx5 {font-style: normal}#veAMVVDpJRHn .fx6 { text-anchor: start; }#veAMVVDpJRHn .fx6 {text-anchor: start}#veAMVVDpJRHn .fx7 { dominant-baseline: alphabetic; }#veAMVVDpJRHn .fx7 {dominant-baseline: alphabetic}#veAMVVDpJRHn .fc1 { fill: rgb(103, 116, 137); }#veAMVVDpJRHn .fc1 {fill: rgb(103, 116, 137)}#veAMVVDpJRHn .fx8 { font: 400 13px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#veAMVVDpJRHn .fx8 {font-style: normal}#veAMVVDpJRHn .fc2 { fill: rgb(0, 0, 0); }#veAMVVDpJRHn .fc2 {fill: rgb(0, 0, 0)}#veAMVVDpJRHn .fb1 { fill: var(--N900-FG, 0.15); }#veAMVVDpJRHn .fb1 {fill: rgba(31,35,41, 0.15)}#veAMVVDpJRHn .fb2 { fill: rgb(225, 230, 240); }#veAMVVDpJRHn .fb2 {fill: rgb(225, 230, 240)}#veAMVVDpJRHn .fa4 { fill: var(--bg-body); }#veAMVVDpJRHn .fa4 {fill: #fff}ABC1234567维度写 PRD + 画线框图baoyu-design耗时产出物沟通效率修改成本上手门槛导出格式半天到一天文档 + 静态图开发要反复确认交互细节改文档 + 改图 + 重新截图需要会 Figma 或 AxureWord/PDF + 图片10-15 分钟可交互原型直接看原型，所见即所得改一句话重新生成会打字就行HTML/PPTX/PDF
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 精修。