把 Claude Design 搬到本地编辑器：baoyu-design 让 Cursor/Codex 也能画 UI

📅 2026年06月09日 · 技术

项目一句话

baoyu-design 把 Anthropic 官方的 Claude Design 设计引擎打包成了一个本地 Agent Skill，让你在 Cursor、Claude Code、Codex 等任意支持文件输出的编程代理里，直接生成 UI 设计稿。

不需要访问 claude.ai/design，也不需要额外订阅。所有产物——UI 原型、交互稿、线框图、落地页、仪表盘、移动端界面、演示幻灯片——都以独立 HTML 形式留在你自己的仓库里。

它能做什么

• UI Mockups：高保真界面原型，直接可用。
• Interactive Prototypes：带交互的可点击原型。
• Wireframes：快速草图，适合前期沟通。
• Landing Pages / Dashboards / Mobile Apps：常见页面类型都有对应模板思路。
• Slide Decks：把 PPT 也做成自包含 HTML。

和官方 Claude Design 的区别

核心设计引擎相同，差别在于运行位置和工作流集成：

• 本地运行：数据不出本机，项目文件直接在仓库里，方便 Git 版本控制。
• 编辑器集成：不用在浏览器和 IDE 之间切换，设计稿和代码在同一个上下文。
• 代理通用：只要是能写文件的代理都能用，不绑定特定产品。

作者建议使用 Opus 4.8 以获得最佳效果。项目 MIT 协议，README 提供中英文文档。

适合谁

如果你日常用 Cursor / Claude Code 做开发，又经常需要给自己或产品出 UI 原型，这个 Skill 能让你「描述需求 → 拿到可交互 HTML」一气呵成，省去 Figma 和代码之间反复翻译的成本。

参考来源

• JimLiu/baoyu-design — GitHub