在你的编码 agent 里本地运行 Claude Design

claude.ai/design 画出的 agent UI 高保真稿是同类中最好的之一，但成果留在网站上，离你的仓库很远。baoyu-design 把这套设计引擎重新打包成可移植的 Agent Skill，让你本地的 agent 产出同样水准的结果——而且每个产物都以自包含 HTML 的形式留在你的项目里。

为什么这个 Skill 重要

这个 skill 是社区对 Claude Design——claude.ai/design 背后的设计引擎——的重新打包，由 Jim Liu（宝玉）维护，README 声明它与 Anthropic 无隶属关系、也未获其背书。本地化之后能覆盖网站的大部分能力：精致的高保真 UI 稿、可交互原型、线框图、落地页、仪表盘、移动应用和幻灯片。因为交付物是跑在 localhost 上的普通 HTML，你可以用「指」的方式迭代：在 agent 的实时预览里点中一个元素，说要改什么，agent 就去改底层源码——这种紧凑的视觉二轮修改在网站上很难做到。README 建议搭配 Claude Opus 4.8 以获得最佳输出。

安装

README 推荐的路径是 Vercel Labs 的 skills CLI，它会探测你的 agent 并把 skill 放进正确的目录：

# Install into the current project (auto-detects your agent)
npx skills add JimLiu/baoyu-design

# …or install globally, for every project
npx skills add JimLiu/baoyu-design -g

# Target a specific agent explicitly
npx skills add JimLiu/baoyu-design --agent claude-code

Claude Code 装到 .claude/skills/，Cursor/Codex 类 agent 装到 .agents/skills/。安装器需要 Node.js；预览服务器用 Python 3 更方便。更新走同一个 CLI：

npx skills update baoyu-design -g -y

更新后重启 Claude Code 或新开一个 agent 会话，刷新后的文件才会加载。一次性使用也可以完全不安装：把仓库 URL 粘进对话，让 agent 去读 skills/baoyu-design/SKILL.md。

实战：设计一个设置页

1. 用自然语言描述任务——skill 会按描述自动激活。在 Claude Code 里也可以用 /baoyu-design 显式触发；Codex 里提 $baoyu-design。

为冥想 App 设计一个设置页的 3 个高保真方案。

2. agent 先问几个澄清问题，加载设计方法论，然后在 designs/<project>/ 下生成 HTML，并通过 localhost 预览。
3. 在 agent 的浏览器工具（Cursor Browser / DevTools、Claude Preview 或 Codex Browser）里打开预览，点中任意元素说改什么——agent 直接改源码，二轮修改很快。预览服务器通常由 agent 代启；手动启动的命令是：

python3 -m http.server 4311 --directory designs

幻灯片值得单独跑一次：让 skill 把一份 PRD 做成 10 页 deck，它会以自包含 HTML 页面加 deck 舞台的形式构建。页面元素可以带 data-anim 构建动画，说一句「export this to PPTX」就能得到可编辑的 PowerPoint——动画以原生 PowerPoint 动画的形式到达，不是烤死的像素。这个导出由一个驱动无头 Chromium 的本地 CLI 完成，在 Claude Code 里首次使用前需要一次性的构建。

技巧

• 给它设计上下文——一张截图、一个 UI kit、一份 Figma .fig 导出，或一个代码库。README 称从真实上下文出发是质量上最大的单一杠杆；你不提供的话 skill 也会主动要。
• Figma 导入完全离线解码 .fig 文件：不需要 Figma 账号、API token 或 MCP 服务器。
• 设计系统以绑定契约的方式工作：项目绑定某个系统后，agent 用该系统真实的 token 和组件来构建，不会发明系统外的颜色。
• 预置组件省去手搓基础件——设备与浏览器外壳、设计画布、deck 与图表舞台、调整面板。
• 导出路线覆盖独立 HTML、PDF、可编辑或截图版 PPTX、MP4 视频，以及 Figma、Canva 等交接目标。

何时不用这个 Skill

这是社区的重新打包，不是 Anthropic 的产品——如果你想要带内置工具的官方托管体验，它重新打包的对象 claude.ai/design 就是出处。弱模型会比较吃力：README 把这个 skill 描述为一份又长又苛刻的设计任务书，并推荐 Opus 4.8。另外多文件原型要通过 HTTP 预览，file:// 打不开，即便快速看一眼也要用预览服务器。

查看 排行榜 了解更多 skill。