使用 baoyu-design 在本地将 Claude Design 作为 Agent Skill 运行
在本地将 Claude Design 作为 Cursor、Claude Code 等工具的 Agent Skill 运行。生成精美的 UI 模型、原型和线框图，输出为自包含的 HTML 文件。
什么是 baoyu-design？
baoyu-design 将 claude.ai/design 背后的设计引擎打包成一个可移植的 Agent Skill。你无需依赖 Anthropic 托管的网站，只需将这个技能放入你的本地编码代理——Cursor、Claude Code、Codex 或 70 多个兼容代理中的任何一个——就能在编辑器内获得同样高质量的设计输出。
结果：精美的 UI 模型、交互式原型、线框图、落地页、仪表盘、移动应用和幻灯片——全部生成为 自包含的 HTML 文件，存放在你的仓库中。无需网站、无需单独订阅、无需上传步骤。
为什么要在本地运行？
摆脱网站依赖
你可以在不离开编辑器的情况下获得 claude.ai/design 绝大部分功能。同样的方法、同样的工艺标准、同样的输出格式——但完全本地化。
与 Opus 4.8 配合最佳
这个技能是一份冗长且要求严格的设计简报。模型越强大，效果越好。搭配 Claude Opus 4.8 可获得最佳输出，但在其他强大模型上也能良好运行。
通过指向而非描述进行迭代
由于交付物是在 localhost 上提供的纯 HTML，你可以利用代理内置的浏览器预览和元素注释工具（Cursor Browser / DevTools、Claude Preview 或 Codex Browser）。在实时预览中指向一个按钮，说出你想要更改的内容，代理就会编辑底层源代码——这是一个紧密的、可视化的二次编辑循环，在网站上很难实现。
一切归你所有
输出文件存放在 designs/<project>/ 目录下，作为自包含的 HTML 文件，你可以进行版本控制、分叉、导出或发布。没有供应商锁定。
它可以制作什么
该技能驱动一个完整的设计流程——澄清问题 → 收集设计上下文 → 生成一个或多个 HTML 交付物 → 预览和验证。它内置了 24 个技能 和一组现成的组件脚手架。
| 领域 | 内置技能 |
|---|---|
| 核心设计 | 高保真设计 · 交互式原型 · 线框图 · 前端美学方向 |
| 幻灯片 | 制作幻灯片 · 演讲者备注 |
| 移动与动效 | 移动原型 · 动画视频 · 音效 |
| 设计系统 | 创建设计系统 · 设计组件 (.dc.html) · 使其可调整 |
| 导出与交接 | 独立 HTML · PDF · PPTX (可编辑) · PPTX (截图) · 发送到 Figma · 发送到 Canva · 交接给 Claude Code |
| AI 资产与集成 | Gemini 图像生成 · 从原型调用 Claude · 读取 PDF |
入门组件（位于 starter-components/）让代理免于从头开始编写基础内容：iOS / Android / macOS / 浏览器框架、平移缩放设计画布、幻灯片舞台、时间轴动画引擎、调整面板和可填充图像插槽。
工作原理
该技能是纯 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/ # 24 个专业提示（幻灯片、移动、导出等）
└── starter-components/ # 设备框架、幻灯片舞台、画布、动画引擎等
当你请求设计时，代理读取 SKILL.md，从 system-prompt.md 加载核心方法论，检测它是在 Cursor、Claude Code、Codex Agent 还是通用的文件能力框架中运行，并在存在匹配的参考文档时读取它。然后它只拉取任务所需的特定内置技能。这种拆分使工艺规则与工具无关，同时每个环境都能解析自己的工具来提问、预览、截图和验证。
快速开始
前提条件
- 一个本地代理——Cursor、Claude Code、Codex，或安装程序支持的 70 多个代理中的任何一个（Cline、Roo Code、GitHub Copilot 等）。Cursor、Claude Code 和 Codex 在技能内部拥有一流的工具参考。
- 选择 Claude Opus 4.8 作为模型，以获得最佳效果。
- Node.js（用于运行下面的
npx安装程序）。Python 3 对于本地预览服务器也很方便。
安装
推荐——使用 skills CLI。 npx skills（来自 Vercel Labs）读取此仓库，找到 skills/baoyu-design/，并将其放入检测到的代理的正确文件夹中：
# 安装到当前项目（自动检测你的代理）
npx skills add JimLiu/baoyu-design
# …或全局安装，适用于每个项目
npx skills add JimLiu/baoyu-design -g
# 明确指定目标代理
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 add JimLiu/baoyu-design --list
它会安装到 Claude Code 的 .claude/skills/ 目录和 Cursor/Codex 风格代理的 .agents/skills/ 目录（添加 -g 参数可安装到 ~/ 级别的用户目录）。
替代方案——将仓库 URL 交给你的代理。 不想安装任何东西？将 URL 粘贴到聊天中，让代理自己获取技能：
Read https://github.com/JimLiu/baoyu-design and follow its skills/baoyu-design/SKILL.md to design a settings screen for a meditation app.
代理会克隆或获取仓库，加载 SKILL.md，然后继续执行——非常适合一次性使用。
使用
技能安装（或获取）后，只需用自然语言描述一个设计任务——它会根据描述自动激活：
Design 3 hi-fi variations of a settings screen for a meditation app.
在 Claude Code 中，你也可以使用 /baoyu-design 显式触发它；在 Codex 中，当技能可用时，提及 $baoyu-design。代理会问几个澄清问题，在 designs/ 下构建 HTML，并通过 localhost 预览。在实时预览中指向任何元素并说出要更改的内容——代理会编辑底层源代码，实现快速、可视化的二次编辑。
预览服务器
交付物通过 HTTP 预览（多文件原型无法从 file:// 加载）。代理通常会为你启动它；要手动运行：
python3 -m http.server 4311 --directory designs
# 然后打开 http://localhost:4311/<project>/<file>.html
设计系统
除了单次模型外，该技能还可以将整个项目约束到一个 设计系统——一个品牌的令牌、字体、组件和完整 UI 工具包的版本化捆绑包。系统位于 designs/ 下，与你的项目并列：使用 创建设计系统 内置技能创建一个，或放入一个预构建的系统。一旦系统存在，两个流程可以让任何项目使用它。
导入现有设计系统
当你开始设计时，代理会询问保存位置以及要使用的设计系统——它会发现 designs/ 下的每个系统并列出它们，因此你可以选择无（自由设计）、一个或多个。提前指定一个名称，它会跳过菜单：
Design a settings screen using the Fluent 2 design system.
对于你选择的每个系统，代理会将一个自包含、版本固定的副本同步到你的项目中的 _ds/<slug>/ 目录，将其 CSS 和组件包连接到页面，并在项目的 _d_meta.json 中记录绑定。这个本地副本使项目保持可移植和可重现——没有任何内容超出文件夹范围，重新运行导入是稍后拉取更新的方式。选择多个系统，其中一个成为主系统——它拥有整体外观并赢得任何令牌冲突，而其他系统提供特定组件。
使用导入的设计系统
一旦系统被绑定，它就像一个具有约束力的视觉契约，而不是一个松散的建议：每个屏幕都使用系统的真实令牌、字体、间距和组件构建，代理不会发明系统外的颜色或样式。如果系统提供了起点——现成的屏幕或组件——你可以从一个起点开始新设计，而不是从空白开始。
绑定会随项目一起移动。稍后重新打开项目时，代理读取 _d_meta.json，重新加载系统，并继续以相同风格设计——无需重新选择。之后，你可以刷新系统以拉取更新、添加另一个系统、交换哪个是主系统，或完全移除一个系统。
示例提示
- "使用此截图中的品牌设计 3 个高保真定价页面变体。"
- "原型化一个可工作的引导流程——真实状态、过渡、表单验证。"
- "根据这份 PRD 为工程全员大会制作一个 10 页的幻灯片。"
- "为移动端费用追踪器首页构思几个线框图布局。"
- "从代码库重新创建 composer UI，然后导出为独立 HTML。"
- "使用我们的设计系统构建一个仪表盘，从其分析屏幕开始。"
为了获得最佳效果，请提供设计上下文——截图、UI 工具包、Figma 链接或代码库。从真实上下文开始是提升质量的最大杠杆；如果你不提供，技能会主动询问。
致谢与许可
本项目重新打包了 Claude Design，这是 Anthropic 为 claude.ai/design 提供支持的设计技能，使其能够在本地代理上运行。这是一个独立的社区项目，与 Anthropic 无关，也未获得 Anthropic 的认可。
由 Jim Liu 宝玉 重新打包和维护。基于 MIT 许可 发布。