baoyu-design：在本地AI代理上运行Claude Design的终极指南
baoyu-design：在本地AI代理上运行Claude Design的终极指南
项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-design baoyu-design是一个强大的开源项目，它允许你在本地AI代理上运行Claude Design，无需依赖claude.ai/design网站。通过这个工具，你可以直接在编辑器中创建精美的UI原型、交互式设计、幻灯片和线框图，并将它们生成为独立的HTML文件。
什么是baoyu-design？
baoyu-design将Claude Design——claude.ai/design背后的设计引擎——打包为一个可移植的Agent Skill。将它集成到本地代理后，你就能获得与网站版几乎相同的功能，直接在编辑器中工作：
- 创建精美的UI原型
- 设计交互式界面
- 制作线框图和登陆页面
- 开发仪表盘和移动应用
- 生成幻灯片演示文稿
所有这些都以独立的HTML文件形式输出，无需网站、额外订阅或上传步骤。
为什么选择在本地运行？
🚀 摆脱网站限制
你可以获得claude.ai/design的绝大部分功能，而无需离开编辑器——相同的方法学、相同的工艺标准、相同的输出格式。
💪 与Opus 4.8完美配合
这个技能是一个复杂而要求严格的设计指令；模型越强大，结果就越好。搭配Claude Opus 4.8可获得最佳输出，同时它在其他功能强大的模型上也能很好地工作。
🔄 可视化迭代编辑
由于交付物是通过localhost提供的纯HTML，你可以利用代理内置的浏览器预览和元素注释工具（Cursor Browser/DevTools、Claude Preview或Codex Browser）。只需指向实时预览中的按钮，说出你想要的更改，代理就会编辑底层源代码——这种紧密的可视化二次编辑循环在网站上很难实现。
🛡️ 完全掌控你的成果
输出会以独立HTML的形式保存在designs/<project>/目录中，你可以对其进行版本控制、分支、导出或部署。
它能创建什么？
baoyu-design驱动完整的设计流程——从澄清问题→收集设计上下文→生成一个或多个HTML交付物→预览和验证。它提供了丰富的内置技能和一套现成的组件支架。
| 领域 | 内置技能 |
|---|---|
| 核心设计 | 高保真设计 · 交互式原型 · 线框图 · 前端美学指导 |
| 演示文稿 | 制作演示文稿 · 演讲备注 |
| 移动与动画 | 移动原型 · 动画视频 · 音效 |
| 设计系统 | 创建设计系统 · 使用设计系统 · 设计系统预览 · 设计组件(.dc.html) · 可调整参数 |
| 导入源 | Figma .fig(离线解码) · GitHub仓库 · 现有HTML/CSS |
| 导出与交付 | 独立HTML · PDF · PPTX(可编辑) · PPTX(截图) · 发送到Figma · 发送到Canva · 交付给Claude Code |
| AI资产与集成 | Gemini图像生成 · 从原型调用Claude · 读取PDF |
** starter-components**（位于skills/baoyu-design/starter-components/）为代理提供了基础组件，无需从头构建：iOS/Android/macOS/浏览器框架、平移缩放设计画布、幻灯片舞台、时间线动画引擎、调整面板和可填充图像槽。
快速开始指南
先决条件
- 本地代理——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/，并将其放入检测到的任何代理的正确文件夹中：
# 克隆仓库
git clone https://gitcode.com/gh_mirrors/ba/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
它会安装到Claude Code的.claude/skills/和Cursor/Codex风格代理的.agents/skills/（添加-g表示~/级别的用户安装）。
替代方案——将仓库URL交给你的代理。不想安装任何东西？将URL粘贴到聊天中，让代理自己获取技能：
阅读https://github.com/JimLiu/baoyu-design并按照其
skills/baoyu-design/SKILL.md设计冥想应用的设置屏幕。
代理会克隆或获取仓库，加载SKILL.md，然后继续——非常适合一次性使用。
使用方法
安装（或获取）技能后，只需用简单的语言描述设计任务——它会根据描述自动激活：
为冥想应用设计3种高保真的设置屏幕变体。
在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
设计系统功能
除了一次性原型外，baoyu-design还可以将整个项目与设计系统保持一致——品牌标记、字体、组件和完整UI工具包的版本化捆绑。系统位于designs/下的项目旁边：使用内置的"创建设计系统"技能创建一个，放入预构建的系统，或从Figma.fig文件导入一个（见下一节）。系统存在后，有两个流程允许任何项目使用它。
导入现有设计系统
开始设计时，代理会询问保存位置和要使用的设计系统——它会发现designs/下的每个系统并列出它们，因此你可以选择无（自由设计）、一个或多个。预先指定一个名称，它会跳过菜单：
使用Fluent 2设计系统设计设置屏幕。
对于你选择的每个系统，代理会将独立的、版本固定的副本同步到项目的_ds/<slug>/中，将其CSS和组件捆绑到页面中，并在项目的_d_meta.json中记录绑定。这个本地副本是保持项目可移植和可重现的原因——没有任何内容超出文件夹范围，重新运行导入是以后拉取更新的方式。选择多个系统，其中一个成为主要系统——它拥有整体外观并在任何标记冲突中获胜，而其他系统提供特定组件。
使用导入的设计系统
系统绑定后，它充当有约束力的视觉契约，而不是松散的建议：每个屏幕都由系统的真实标记、类型、间距和组件构建，代理不会发明系统外的颜色或样式。如果系统提供起点——现成的屏幕或组件——你可以从其中一个种子新设计，而不是从零开始。
绑定随项目一起移动。稍后重新打开它，代理会读取_d_meta.json，重新加载系统，并继续进行风格设计——无需重新选择。从那里，你可以刷新系统以拉取更新，添加另一个系统，交换哪个是主要系统，或删除一个系统。
导入设计源
真实的上下文胜过描述。三个内置的导入技能将你已有的材料转化为代理直接工作的设计基础：
-
Figma
.fig文件——完全离线解码。将任何Figma文件导出为.fig（或获取社区工具包），将代理指向它，供应商解码器会直接在你的机器上读取它——无需Figma账户、API令牌或MCP服务器。代理会清点页面、组件和变量，与你确认范围，然后将组件作为React代码挑选出来，或将整个工具包作为设计系统发出：组件按语义重新分组，精心策划的标记CSS，从文件中提取的真实SVG/PNG资产（复制，从不重绘），指南卡片和品牌指南README。 -
GitHub仓库。将仓库URL作为设计源。代理在克隆任何内容之前使用
gh api浏览树，仅将所需路径稀疏检出到项目外部的临时目录，并记录仓库URL作为出处。 -
现有HTML/CSS。保存的页面或本地代码库可以作为设计参考：代理读取真实的样式表，而不是眯着眼睛看截图，将精确值（颜色、类型、间距、半径、阴影、交互状态）提升到项目自己的自定义属性中，并复制引用的资产。
示例提示
- "使用此截图中的品牌设计3种高保真的定价页面变体。"
- "原型化一个工作的入职流程——真实状态、过渡、表单验证。"
- "从这个PRD为工程全体会议制作10张幻灯片。"
- "为移动 expense-tracker 主屏幕绘制一些布局想法的线框图。"
- "从这个代码库重新创建composer UI，然后将其导出为独立HTML。"
- "将这个UI工具包
.fig转换为设计系统，然后用它构建仪表板。" - "使用我们的设计系统构建仪表板，从其分析屏幕开始。"
为获得最佳结果，提供设计上下文——截图、UI工具包、Figma.fig导出或代码库。从真实上下文开始是质量的最大杠杆；如果你不提供，技能会要求提供。
项目结构
baoyu-design的核心结构清晰明了，主要包含以下关键部分：
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/ # 设备框架、演示文稿舞台、画布、动画引擎等
许可证信息
本项目重新打包了Claude Design，这是Anthropic的设计技能，为claude.ai/design提供支持，以便它可以在本地代理上运行。这是一项独立的社区努力，不隶属于Anthropic或得到其认可。
由Jim Liu 宝玉重新打包和维护。根据MIT许可证发布。
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
3
0- 0
已为社区贡献40条内容
所有评论(0)