把 Claude Design 装进你的编辑器：一个开源技能，让你在 Cursor/Claude Code 里直接做高保真设计

如果你用过 claude.ai 上的「设计」功能，应该记得那种体验：用自然语言描述一个界面，它直接给你生成可交互的 HTML 原型，还能在浏览器里实时预览修改。

但问题是——你得一直开着那个网页。上传截图、手动下载产物、把文件拖回项目目录……设计稿和代码之间隔了一层。

今天推荐的项目 baoyu-design（宝玉设计），把 Claude Design 的设计引擎打包成一个可移植的 Agent Skill，让你直接在本地编辑器里拥有同样的能力。

这是什么？

一个 Agent Skill，让你的 Cursor、Claude Code、Codex 甚至任何文件型 Agent，在本地拥有 claude.ai/design 绝大部分的设计能力。

安装之后，你在编辑器里说一句「帮我设计一个冥想 App 的设置页面，出 3 个高保真方案」，Agent 就会自动激活设计流程——问澄清问题 → 收集上下文 → 生成自包含 HTML → 启动本地预览服务器。所有产物都在你的 designs/ 目录下，可以纳入版本控制。

它能做什么？

项目内置了 24 个子技能，覆盖了从设计到交付的完整链路：

举个例子：你正在开发一个健身 App，需要给投资人看 UI 稿。直接告诉 Cursor：

「帮我设计 3 个健身 App 首页的高保真方案，要 iOS 风格。」

baoyu-design 会加载设备外壳组件（iOS 手机框），生成 3 套带真实内容的 HTML 页面，启动预览服务器。你在浏览器里点选某个按钮，说「改成紫色」，Agent 就去改源码——指哪改哪，不用重新生成一整套。

技术原理

这个项目的设计很巧妙，值得拆开来看。

整个技能就是纯 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/   # 设备外壳、画布、动画引擎

核心思路是分层：

这种设计的妙处在于：设计方法论是稳定的，每个 Agent 只要实现自己的工具映射，就能复用同一套设计能力。Anthropic 官方没做这件事，社区做出来了。

快速上手

安装

一行命令（需要 Node.js）：

class="language-bash">npx skills add JimLiu/baoyu-design

会自动检测你用的是 Cursor、Claude Code 还是 Codex，装到对应的 skills 目录。

如果不想安装任何东西，直接把仓库链接发给 Agent：

阅读 https://github.com/JimLiu/baoyu-design 并按照其中的 SKILL.md，帮我设计一个记账 App 的设置页面。

Agent 会抓取技能然后开工，临时用一次非常方便。

使用

装好后直接说需求：

帮我设计一个番茄钟 App 的 3 个高保真方案，要有深色模式。

Agent 会问几个澄清问题（目标用户？品牌色？），然后在 designs/ 下生成 HTML 并自动启动预览服务器。

核心交互方式：在 localhost 预览里直接点选元素，告诉 Agent 想改什么——比如「把卡片圆角从 12px 改成 20px」——Agent 会直接改源码刷新预览。这是一个闭环的「指哪改哪」体验。

局限

同类对比

baoyu-design 最大的优势是所有产物留在你的项目里——不存在「设计稿是一回事，代码是另一回事」的割裂感。

个人看法

这个项目最打动我的不是它能生成多好看的设计（虽然确实好看），而是架构思路：把一个封闭的网页功能解构成「工艺标准 + 工具映射 + 可插拔子技能」的本地技能包。

这实际上揭示了一个趋势：AI Agent 的能力边界正在从「理解代码」扩展到「理解设计」。以前要让 Agent 做出好东西，得写详细的 prompt 描述每个像素；现在用一个 skill 就能定义整套设计方法论。

Jim Liu 宝玉在社区里一直活跃，这次做的 baoyu-design 质量很高——README 有中英文双语，技能文件结构清晰，甚至为不同的 Agent 准备了各自的工具参考文档，细节到位。

⭐⭐⭐⭐ 推荐给所有用 Cursor/Claude Code 做前端的开发者。

项目地址：https://github.com/JimLiu/baoyu-design

作者：Jim Liu 宝玉，MIT 许可证。这是一个独立的社区项目，将 Anthropic 的 Claude Design 重新打包为本地技能包，与 Anthropic 无隶属关系。