JimLiu/baoyu-design · 上手攻略
- 仓库：JimLiu/baoyu-design
- 链接：https://github.com/JimLiu/baoyu-design
- 分类：AI 设计 · Agent Skill
- 作者：Tom
- 更新：2026-07-23
是什么
baoyu-design 是一个可移植的 Agent Skill（技能包），它把 Claude 官方网页版 claude.ai/design 的设计引擎完整复刻为本地编辑器内的 AI 工作流。装入 Cursor、Claude Code、Codex 或任何支持 skills 的本地 Agent 后，你用自然语言描述需求，Agent 就会按照 Claude Design 的方法论和工艺标准，产出自包含的 HTML 设计稿、可交互原型、线框图、落地页、仪表盘、移动 App 界面或幻灯片——全部不依赖任何网站或外部订阅，产物留在你自己的仓库里。
解决什么问题
- 想用 Claude Design 但不想绑网页：不需要 claude.ai/design 订阅，不需要上传，所有流程在本地 Agent 里完成。
- 设计交付物不归你所有：官方网站的产出物在云端，这个技能的产物落盘在
designs/目录下，完全属于你。 - 设计 → 代码的来回迭代慢：通过"指着实时预览说改什么"的视觉回路，比粘贴截图或描述改动快得多。
- 没有设计功底但需要 UI 稿：给 Agent 一套方法论和设计系统，它就能产出质量远超高保真线框图的最终稿。
- 幻灯片/原型要做但不想开设计软件：直接让 Agent 出 HTML，可导出 PPTX/Markdown，可全屏演示。
快速安装
前置：Node.js（跑 npx skills 安装器），推荐 Claude Opus 4.8 作为模型。
方式一：skills CLI（推荐）
# 安装到当前项目（自动检测 Agent 类型）
npx skills add JimLiu/baoyu-design
# 全局安装（所有项目）
npx skills add JimLiu/baoyu-design -g
# 指定具体 Agent
npx skills add JimLiu/baoyu-design --agent claude-code
npx skills add JimLiu/baoyu-design --agent cursor
npx skills add JimLiu/baoyu-design --agent codex
# 更新
npx skills update baoyu-design
方式二：直接把 URL 发给 Agent
不想安装？在对话里粘贴仓库地址，Agent 会自行 clone/fetch 并按 SKILL.md 执行：
阅读 https://github.com/JimLiu/baoyu-design 并按照其中的
skills/baoyu-design/SKILL.md，帮我设计一个冥想 App 的设置页面。
技能默认装到 .claude/skills/（Claude Code）或 .agents/skills/（Cursor/Codex 风格）。
核心用法
直接用自然语言提设计需求
安装完成后，在 Agent 对话里直接说：
帮我设计一个冥想 App 设置页面的 3 个高保真方案。
Agent 会：
1. 问几个澄清问题（可选）
2. 收集设计上下文
3. 在 designs/ 下生成 HTML
4. 通过 localhost 预览
视觉迭代（核心优势）
在实时预览里（Cursor Browser / Claude Preview / Codex Browser），直接指着某个按钮说"把这个改成蓝色"或"这个间距太小"，Agent 就会去改对应的 HTML 源码——这是 Claude Design 方法论的精髓：用「指」代替「描述」。
手动起预览服务：
python3 -m http.server 4311 --directory designs
# 打开 http://localhost:4311/<项目名>/<文件名>.html
绑定设计系统
可以让项目遵循某个设计系统（品牌 token + 组件库）：
# 第一次设计时指定
用 Fluent 2 设计系统，帮我设计一个设置页面。
系统由 Agent 从 Figma .fig 文件导入，或用"创建设计系统"子技能自己搭。绑定后每个页面都会用系统的真实 token，不会自创系统外的颜色。
内置子技能（按需激活）
| 类别 | 子技能 |
|---|---|
| 核心设计 | Hi‑fi design、Interactive prototype、Wireframe |
| 幻灯片 | Make a deck、Speaker notes |
| 移动与动效 | Mobile prototype、Animated video、Sound effects |
| 设计系统 | Create design system、Use design system |
| 导入源 | Figma .fig 解码、GitHub repo、现有 HTML/CSS |
| 导出 | 独立 HTML、PDF、PPTX（可编辑/截图）、MP4、Figma、Canva |
| AI 素材 | Gemini 图像生成、Call Claude from prototype、Read PDF |
幻灯片导出 PPTX（本地 CLI）
# 首次使用前构建（需要 Node + Playwright）
cd skills/baoyu-design/agents/gen-pptx
npm install && npx playwright install chromium && npm run build
# 之后 Agent 自动调用，或在对话里说
导出 PPTX
两种 PPTX 模式： - 可编辑（editable）：原生 PowerPoint 对象，文字/形状/图片可继续编辑，构建动画也一并导出。 - 截图（screenshots）：每页一张高清 PNG，像素级还原，不可编辑。
典型适用场景
| 场景 | 技能用法 |
|---|---|
| 产品经理快速出 UI 稿给开发 | Hi‑fi design，绑定内部设计系统 |
| 创业团队做落地页/仪表盘原型 | Interactive prototype，直接导出 HTML |
| 工程师想让 AI 代做 UI 迭代 | 指着预览说改动，Agent 改源码 |
| 快速做一套幻灯片并导出 PPTX | Make a deck → 导出 PPTX |
| 把 Figma UI Kit 导入成代码组件 | Figma .fig 导入 → 生成设计系统 |
| 移动 App 原型验证 | Mobile prototype，导出可交互 HTML |
| 把 PRD 做成工程全员会幻灯片 | Make a deck，绑定项目上下文 |
坑与注意
- 模型越强效果越好：这是一个冗长且要求高的设计指令，Claude Opus 4.8 效果最佳；较弱的模型也能用但产出质量下降。
- PPTX 导出依赖 Playwright：首次导出前必须 build gen-pptx CLI（含 Chromium 安装），没有 Node 环境则无法自动触发。
- 多文件原型需要 HTTP 预览：
file://协议无法加载多文件原型，必须起http.server，通常 Agent 会自动起，但自己要清楚端口。 - Figma .fig 文件离线解码：导入 .fig 时不需要 Figma 账号，但文件必须先从 Figma 导出为
.fig格式。 - 设计系统绑定是约束：一旦绑定，项目就会强制遵循系统的 token，不支持"大部分遵循但个别自创"——想自由设计就跳过绑定。
- 技能文件需重启才刷新：更新 skills 后，Claude Code 需重启、Claude Code 新会话才会加载新文件。
与同类对比
| 工具 | 输出格式 | 依赖网站 | 设计系统 | PPTX 导出 | 集成 Agent |
|---|---|---|---|---|---|
| baoyu-design | HTML（自包含）/ PDF / PPTX / MP4 | ❌ | ✅ Figma 导入 + 自建 | ✅ 可编辑 | ✅ Cursor/Codex/Claude Code |
| claude.ai/design | HTML（云端） | ✅ | ✅ | ❌ | ❌ |
| Figma（AI） | Figma 原型 | ✅ | ✅ | ✅ | ❌ |
| Galileo AI | Figma 插件 | ✅ | ❌ | ❌ | ❌ |
| Locofy | 前端代码 | ❌ | 部分 | ❌ | 部分 |
baoyu-design 的独特价值在于把 Claude Design 方法论本地化，同时支持 70+ Agent（通过 skills CLI），并真正做到产出物归你、零云依赖。
一句话推荐结论
如果你想在自己的编辑器里用 AI 做设计——不需要 claude.ai/design 订阅，不需要上传，产物留在本地，绑定设计系统，直接导出可编辑 PPTX——baoyu-design 是目前最完整的本地 AI 设计工作流。