baoyu-design：用本地 AI Agent 把 Claude Design 的设计能力装进口袋

背景故事：设计效率的最后一公里

每个前端开发者都曾为这个问题头疼过——和产品经理开完会，明明需求已经非常清晰，却还要花大量时间在"画 UI"这件事上。Figma 里画一个简单的登录页需要 20 分钟，写代码又是 30 分钟。更要命的是，产品说"这个按钮再往左挪一点"，你又得在 Figma 和代码之间来回横跳。

2025 年 Claude Design（claude.ai/design）推出后，很多人发现：让 AI 来生成 UI 稿，效率可以提升一个数量级。但问题也随之而来——你必须登录网站、上传需求、等待生成、下载结果，整个流程依然割裂。而且设计稿产出后，如何无缝衔接到代码，依然是一道鸿沟。

baoyu-design 正是来解决这个问题的。它把 Claude Design 背后的设计引擎，封装成一个可以直接跑在本地 AI Agent（Cursor、Claude Code、Codex 等）里的 Skill。不需要网站，不需要订阅，所有产物直接落在你本地的 designs/ 目录里，天然支持版本控制。

它是什么：一套 AI 原生设计工作流

baoyu-design 本质上是一套结构化设计指令库（Agent Skill），而非传统意义上的 UI 组件库或设计系统。它的核心价值在于：用 AI Agent 替代人肉画图。

具体来说，当你把 baoyu-design 安装到本地 Agent 后，只需用自然语言描述你想要的设计稿，Agent 就会：

1. 主动澄清需求 — 先问你"这是什么类型的页面？目标用户是谁？品牌调性？"（这套澄清流程借鉴了专业 UX 设计师的工作方法）
2. 收集设计上下文 — 读取已有的设计系统文件、品牌规范、竞品参考
3. 产出 HTML 交付物 — 生成一个完全自包含的 HTML 文件，包含 CSS、字体、图片，可直接在浏览器中预览

产出的 HTML 不是"截图"，而是真实可交互的网页。你可以在浏览器里点击按钮、填写表单、跳转页面。如果不满意，直接在浏览器 DevTools 里标注元素，告诉 Agent 哪里要改，它会改对应的源码。这条「预览 → 标注 → 修改」的回路，是 baoyu-design 最有价值的设计创新。

Codex（OpenAI 的编程 Agent）集成 baoyu-design 后，可直接在编辑器里完成 UI 设计工作

Claude Design 官网与本地 Agent 使用的是同一套提示词，本地化后能力完全一致

功能矩阵：从线框图到 PPT 一站式覆盖

baoyu-design 内置了 9 大类、数十个子技能，覆盖了设计工作的方方面面：

尤其值得注意的是 Figma 离线解码功能——baoyu-design 可以直接读取 Figma 的 .fig 文件（无需上传到 Figma 云端），将设计稿转换为可编辑的 HTML，这在隐私敏感的企业场景中非常实用。

部署方式：把它装进你的 Agent 里

baoyu-design 不是 Web 应用，没有 Docker 支持，也没有独立的图形界面。它的部署方式就是把 Skill 文件夹复制到本地 Agent 的 skills/ 目录。

安装步骤：

1. 克隆仓库：git clone https://github.com/JimLiu/baoyu-design
2. 复制技能目录：将 skills/baoyu-design/ 整个目录复制到你的 Agent（如 Hermes、Cursor、Claude Code）的 skills 目录下
3. 重启 Agent
4. 在对话中直接说"帮我设计一个登录页"，baoyu-design 就会激活

最佳效果建议搭配 Claude Opus 4.8 使用——这套设计指令非常详尽且要求严格，更强的模型能更忠实地执行设计规范。当然在能力足够的其他模型上也能良好运行。

技术内幕：它是怎么做到的

从代码结构看，baoyu-design 的核心是一个模块化的 Skill 系统：

• SKILL.md — 主技能定义，描述整体设计流程和子技能调用方式
• agents/ — 各 AI Agent（Cursor、Codex、Claude）专用的适配代码
• built-in-skills/ — 内置的数十个子技能定义
• starter-components/ — 开箱即用的设计组件模板
• references/ — 设计系统参考资料
• project-types.json — 各类项目的设计规范

这种"主技能 + 子技能 + 组件库"的三层架构，使得 baoyu-design 既有顶层的设计流程管控，又有足够细粒度的专项能力覆盖。

局限与争议

baoyu-design 的最大局限，是它极度依赖模型能力。 同样的设计指令，Claude Opus 4.8 能生成接近专业设计师水平的作品，但用较弱的模型可能产出粗糙的 HTML。这使得它的效果上限和下限之间存在巨大鸿沟——团队里每个开发者的模型选择不同，产出质量差异会很大。

其次，它产出的主要是前端展示层，而非可维护的业务代码。生成的 HTML 是"设计原型"而非"生产代码"，如果要从原型过渡到可维护的前端架构，依然需要大量工程化工作。

另外，baoyu-design 对中文设计需求的处理能力尚未经过充分验证——它的设计规范和组件模板主要以英文场景为主，中文排版、品牌风格的适配可能需要额外的调优。

行业意义：从"设计工具"到"设计能力"的民主化

baoyu-design 代表了一个重要趋势：设计能力正在从专业工具向通用 AI Agent 迁移。

传统的设计工作流中，"画 UI"是设计师的专属技能。但当 AI Agent 能够理解设计规范、产出可用原型时，"设计"本身变成了一种可以通过提示词调用的能力——就像调用一个 API 函数一样自然。这不仅降低了独立开发者和小型团队的 UI 设计门槛，更重要的是它把"设计迭代"从设计师和开发者的来回沟通，变成了一件可以在本地即时完成的事情。

GitHub 上 4,100+ 的 Stars 印证了社区对这类"AI Native 设计工具"的强烈需求。可以预见，未来会有更多设计引擎被封装成 Agent Skill，设计工作流将深度融入开发者的日常编码过程。

一句话总结： baoyu-design 把 Claude Design 的设计引擎打包成 AI Agent Skill，让你在本地编辑器里用自然语言完成从线框图到高保真原型的全流程设计，产物是可直接预览的自包含 HTML，天然支持版本控制和二次编辑。