baoyu-design 开源 AI 设计工具，Claude Design 本地平替
baoyu-design是什么
baoyu-design 是宝玉开源的项目，把 claude.ai 的设计引擎打包成可移植的 Agent Skill，让 Cursor、Claude Code、Codex 等 70 多个本地 Agent 直接生成高保真 UI 稿、原型、幻灯片、设计系统和数据仪表盘。生成的产物是本地纯文件，可进 Git 版本控制；支持局域网多角色协作与版本历史，提供 DeepSeek Harness 插件。
baoyu-design的主要功能
- 幻灯片生成（claude-slides） ：自然语言生成整套幻灯片，本地编辑器支持放映、改字、拖拽，可导出 PDF/HTML/PPTX。
- 多画板设计画布（claude-design） ：并排管理多个画板，可播放交互原型，导出 HTML/PDF/PNG。
- 设计系统构建（claude-design-system） ：生成 tokens、品牌手册和组件预览，编辑器中可直接浏览编辑颜色、字体与组件。
- 数据仪表盘（claude-dashboard） ：把 CSV/TSV/JSON 数据集变成实时图表页面，每个数字可追溯到原始数据行。
- 图表设计指南（dataviz） ：Agent 画任何图表前必读的规范，保证配色可读、色盲友好。
- 预览点选编辑 ：在 Agent 的浏览器预览里点选元素直接提修改意见，自动定位源码修改。
- 局域网协作 ：一键生成按角色区分的局域网链接，无需账号可加入协作。
如何使用baoyu-design
- 准备环境 ：装好 Node.js 20+，并确保本地有 Cursor、Claude Code、Codex 等任一 Agent。
- 安装技能 ：运行 npx skills add JimLiu/baoyu-design ，CLI 会自动检测 Agent 并把技能装到对应目录。
- 选择模型 ：在 Agent 中把模型设为 Claude Opus 5.5 以获得最佳设计效果。
- 提出需求 ：用自然语言描述想要的产物，如帮我做一套季度汇报幻灯片，或直接输入 /claude-slides 、 /claude-design 等斜杠命令点名技能。
- 等待生成 ：Agent 会在 designs/slug/ 目录下生成文件并启动本地编辑器，把 http://127.0.0.1 地址给你。
- 预览编辑 ：在浏览器中打开编辑器，可点选元素修改、拖拽排版、放映原型，改动会实时保存回文件。
- 协作分享 （可选）：运行 artifact.mjs share designs/slug 生成局域网链接，团队成员按角色加入编辑或评论。
- 版本管理 （可选）：产物是普通文件，可直接用 Git 提交、分支和 PR 管理设计稿。
- 导出交付 ：在编辑器中一键导出为 PDF、HTML、PPTX 或 PNG，交给客户或用于演示。
baoyu-design的项目地址
- GitHub仓库 ：https://github.com/JimLiu/baoyu-design
baoyu-design的核心优势
- 完全本地化运行 ：把 claude.ai 的设计引擎搬到本地 Agent，产物直接落在自己仓库，不被云端锁定。
- Agent 生态通用 ：Cursor、Claude Code、Codex、Cline 等 70 多个 Agent 装上即用，不受单一平台限制。
- 产物即源码 ：生成的是自包含 HTML 等纯文件，可直接进 Git 版本控制、PR 和项目仓库。
- 设计开发零切换 ：同一会话内设计稿可直接交给 Agent 实现功能，无需导出上传。
- 指哪改哪 ：在浏览器预览中点选元素即可让 Agent 精准修改，比云端版来回切换编辑器高效数倍。
- 局域网多人协作 ：一键生成按角色区分的局域网链接，无需账号登录。
baoyu-design的同类竞品对比
对比维度 | baoyu-design（本地版） | claude design（云端版）
| 对比维度 | baoyu-design（本地版） | claude design（云端版） |
|---|---|---|
| 运行方式 | 本地 Agent（Cursor/Claude Code 等 70+）内运行 | 必须在 claude.ai 网站内使用 |
| 产物归属 | 本地仓库纯文件（HTML/JSON），完全自主 | 存于 Anthropic 云端服务器 |
| 二次编辑 | 预览中点选元素，Agent 自动改源码 | 需在 Artifact 编辑器手动改，再回对话描述 |
| 版本历史 | 完整记录人、时间、行级差异，可一键恢复 | 无系统级版本历史，靠会话回溯 |
| 协作方式 | 局域网链接按角色（编辑/评论/浏览）协作，无需账号 | 仅支持分享 Artifact 链接查看 |
| 模型选择 | 理论任意模型，推荐 Opus 5.5 | 仅限 Claude 系列模型 |
| 成本 | 开源免费，复用现有 Agent 额度 | 需 Claude 订阅 |
| 工程衔接 | 同仓库可被 Agent 直接继续开发，零导出 | 需手动下载导出再导入项目 |
| 上手门槛 | 需装 Node.js + 技能，有配置成本 | 打开网站即用，零安装 |
baoyu-design的应用场景
- 产品原型设计 ：产品经理或独立开发者用自然语言快速生成高保真 App 界面和可交互原型，开会前半小时出 3 版方案供评审挑选。
- 路演与汇报幻灯片 ：创业者或职场人把 PRD、财报数据丢给 Agent，几分钟生成一套设计规范的季度汇报或融资路演 deck，直接导出 PPTX/PDF 使用。
- 数据看板搭建 ：运营或分析师将 CSV/JSON 业务数据交给 claude-dashboard，自动生成实时更新的数据仪表盘，每个指标可下钻追溯到原始数据行。
- 设计系统沉淀 ：团队把零散的设计决策整理成带品牌手册的 design-system，通过 Git 仓库分发给所有项目，保证多产品线视觉统一。
相关工具
与本文相关的 AI 工具
