没有专职UI设计师？这个开源Skill让普通人自己搞定UI，快进来拿
兄弟们，今天聊一个能帮团队省钱的东西 —— baoyu-design。目前GitHub上已经2500多Star，完全开源免费。
这玩意到底是啥
宝玉（JimLiu）这个老哥，把Anthropic官方的Claude Design引擎完整打包成了一个本地Agent Skill。你不需要开Figma、不需要学设计工具、不用额外订阅，在Cursor或Claude Code这些IDE里，用中文描述你想要什么界面，它直接给你生成一个能点能跳的HTML原型。
说白了就是：把你的设计外包费，省了。
为什么说它帮你省钱
用它之前：
- 外包一个产品原型：最低500-2000块，还得来回改
- 招一个实习设计师：月薪至少5000起，还只是画线框图
- Figma专业版订阅：每人每月$20，团队一年下来不少钱
用了baoyu-design之后：
- 安装费用：0
- 生成原型的时间：10分钟
- 修改成本：改一句描述重新生成
- 如果是小团队，这一下省下的钱够吃一年猪脚饭
核心产出是HTML文件，存本地、进Git、随便改。一个命令的事，比请人画便宜太多了。
工作原理
整个技能就是纯 Markdown 加几个 JSX/JS 脚手架 —— 无需构建、无需运行时。
skills/baoyu-design/
├── SKILL.md # 入口 —— 编排整个流程
├── system-prompt.md # 设计方法论与工艺标准（唯一事实来源）
├── references/
│ ├── claude.md # Claude Code 的工具映射
│ ├── cursor.md # Cursor 的工具映射
│ └── codex.md # Codex Agent 的工具映射
├── built-in-skills/ # 专项子技能（幻灯片、移动端、导入、导出……）
└── starter-components/ # 设备外壳、幻灯片舞台、画布、动画引擎……
当你提出设计需求时，Agent 会读取 SKILL.md，从 system-prompt.md 加载核心方法论，判断自己运行在 Cursor、Claude Code、Codex Agent，还是一个通用的可读写文件 harness；如果有匹配的参考文档，就读取对应文档，然后只按需载入这次任务用得到的子技能。这种拆分让「工艺规则」与具体 Agent 无关，而每个环境各自去解析自己的工具来完成「提问」「预览」「截图」「校验」。
上手教程：从0到第一个原型
前置条件：
- 一个本地 Agent —— Cursor、Claude Code、Codex
- Node.js（用于运行下面的 npx 安装器）
- Python 3 跑本地预览服务器
第一步：安装（一行命令）
npx skills add JimLiu/baoyu-design
如果你用Cursor，加个参数更精准：
npx skills add JimLiu/baoyu-design --agent cursor
整个过程30秒，不需要任何配置。
第二步：启动本地预览
python3 -m http.server 4311 --directory designs
然后浏览器打开http://localhost:4311，生成的原型都在这里。这个服务只在本地，完全离线可用。
第三步：提需求
在你的AI编程工具里，输入需求：
“帮我生成一个冥想App的设置页面，包含声音、主题、通知三个模块，风格简洁，浅色背景。”
等几分钟，一个完整的HTML文件就躺在designs/目录里了。
它到底能做出什么样的设计
baoyu-design内置了29个子技能，覆盖了常见的设计需求：
- 高保真UI：不是那种粗糙的线框图，是带颜色、字体、间距的完整界面
- 可交互原型：按钮能点、页面能跳、弹窗能弹
- 演示文稿PPT：一句话生成PPT风格的方案展示，还能导出成可编辑的PPTX
- 移动端界面：自动套上iOS或Android设备外壳
-
从Figma导入：如果你有
.fig文件，丢进去直接离线解析，不用登录Figma
这些能力放在外包市场，任何一项都值几百块。现在全免费。
避坑提醒（都是实战踩过的坑）
-
描述要具体：第一次用的时候，别只说“帮我做个App”。要说清楚页面包含哪些模块、什么风格。描述越细，生成的东西越接近你想要的。
-
图片是占位图：生成的原型里图片都是占位图，真实项目需要自己替换。这不影响功能演示，但如果是给投资人看，建议先把关键图片换上。
-
先从简单页面练手：别一上来就生成整个App。先拿一个登录页或设置页试水，熟悉之后再跑复杂需求。
它跟花钱的方案比，差在哪
| 维度 | 外包/招设计师 | baoyu-design |
|---|---|---|
| 花费 | 几百到几千不等 | 0 |
| 耗时 | 1-3天 | 10分钟 |
| 产出物 | 设计稿/PSD | 可交互HTML |
| 修改成本 | 反复沟通改稿 | 改描述重新生成 |
| 学习门槛 | 设计师专业技能 | 会打字就行 |
说实话，复杂项目还是需要专业设计师介入。但对于创业团队验证想法、快速出原型、给投资人演示、产品经理对需求这些场景，baoyu-design够用，而且够快、够便宜。
适合谁用
- 创业团队：预算有限，没有专职设计师，需要快速把想法变成可演示的东西
- 产品经理：想自己快速验证交互逻辑，不用等设计师排期
- 独立开发者：做个人项目，不想因为设计环节耽误进度
- 程序员：想绕过设计环节直接开干，不想跟UI扯皮
说到底
以前搞设计是要花钱的。要么花钱招人，要么花钱订阅工具，要么花钱外包。
现在有一个开源工具，2500多人给它点了Star，完全免费，装在你的电脑上就能用。它不一定能替代专业设计师，但绝对能让没有专职设计师的团队把UI这件事跑起来。
项目地址：https://github.com/jimliu/baoyu-design
省下的设计费，给自己加个鸡腿不香吗？
感觉对您有帮助的，免费关注点一波呗🤪
评论
发表评论