baoyu-design Skill：把 Claude Design 能力完整迁移到本地 AI Agent 的设计神器

Skill超级捕获手 技术创作者 2026-08-02 15 阅读

baoyu-design 把 Claude Design 的能力完整迁移到本地 AI 编程 Agent 中——不需要 claude.ai/design 网站，不需要订阅，在编辑器里直接生成高保真 UI 原型、交互原型、线框图、着陆页、数据看板、手机 App 界面和幻灯片，全部输出为自包含的 HTML 文件。截至 2026-08-02 在 GitHub 获 2,996 star，上线不足两个月即成为 Claude Code / Cursor / Codex 圈的热门设计工具。

功能与原则

baoyu-design 本身是一个 Claude Skill（技能包），内置 20+ 个设计子技能，覆盖从需求澄清到最终交付的完整流程。它不依赖任何网站或在线服务，所有生成物都落在本地仓库的 designs/ 目录下，可以直接 version、fork 或部署。

核心设计原则：
– 本地优先：不把设计资产放在第三方网站，全部留存在本地项目目录
– 模型适配：最佳搭配 Claude Opus 4.8，也兼容其他主流编程 Agent
– 指代式迭代：通过 Agent 内置浏览器预览，指向具体元素说”改成 XX”，Agent 直接改源码——无需重新描述设计
– 多格式输出：HTML / PDF / PPTX（可编辑）/ MP4 / Figma / Canva

认可度

  • GitHub star：2,996（截至 2026-08-02）
  • Forks：216
  • 上线时间：2026 年 6 月 7 日，两个月内逼近 3k star，增速极快
  • GitHub Trending 期间曾登上多个编程 Agent 话题榜
  • 在 Claude Code、Cursor、Codex 社区被多位 KOL 推荐

链接

GitHub：https://github.com/JimLiu/baoyu-design

原作者

@JimLiu — 独立开发者，专注 AI 原型设计工作流。baoyu-design 是其在 Claude Design 本地化方向上的开源实践，文档含中英双语 README。

介绍

Claude Design 是 claude.ai/design 网站提供的 AI 设计引擎，能根据自然语言描述生成完整的 UI 界面。baoyu-design 将这一能力打包为一个可注入本地 Agent 的 Skill——在 Claude Code、Cursor、Codex 或任何支持 Skill 的编程 Agent 中安装后，说一句”帮我做一个阅读类 Mac 应用”，Agent 就会走完从需求澄清、设计方案到生成 HTML 原型的全流程。

它的核心价值在于”所见即所得 + 本地可控”。生成物是自包含 HTML，可以在 localhost 预览、Agent 用内置浏览器工具直接审查、还可以指向具体元素做迭代修改。相比在网站上传 prompt 等结果，本地工作流更高效，也更适合想把结果直接放进自己代码库的场景。

技能包内置 20+ 子技能，分类极细：Hi-fi 设计、交互原型、线框图、着陆页、手机 App、幻灯片、数据可视化、3D 对象、水彩插画、Figma 导入、PPT 导出等。每个子技能都有独立的 prompt 逻辑和质量检查标准，不是简单包装而是一套完整的设计方法论。

特点

  • 无需网站订阅：所有能力通过本地 Agent 交付，零额外费用
  • 20+ 内置设计子技能：覆盖 UI、原型、线框、动效、数据可视化、文档、3D 等全品类
  • 多格式导出：HTML / PDF / PPTX / MP4 / 发送至 Figma / Canva，交付灵活
  • Figma 文件离线解码：支持直接导入 .fig 文件，不需要 Figma 账号
  • 指代式迭代：用 Agent 的浏览器预览功能指哪改哪，迭代效率极高
  • 中英双语文档：英文 README + 简体中文版，中国开发者友好

使用方法

安装（最简方式，直接把仓库链接甩给 Agent）：

在 Claude Code / Codex 中说：
"Install this skill for me: https://github.com/JimLiu/baoyu-design"

Agent 会自动 clone 并配置到 skills 目录。

手动安装：

git clone https://github.com/JimLiu/baoyu-design.git
cd baoyu-design
ln -s "$(pwd)" ~/.claude/skills/baoyu-design  # Claude Code
# 或
ln -s "$(pwd)" ~/.codex/skills/baoyu-design   # Codex

使用示例：

安装后直接说自然语言设计需求：

Build a Reader Mac app that helps me read and save articles better.
All data is stored locally.

Agent 会自动走完：需求澄清 → 设计上下文收集 → 生成 HTML 原型 → 预览验证。生成物在 designs/ 目录下，可用 Agent 内置浏览器预览。

使用场景与人群

适用场景：
– 需要快速产出 UI 原型但不想开设计软件的产品经理 / 设计团队
– 想在编程 Agent 内完成”设计→代码→预览”闭环的前端开发者
– 需要给客户或团队演示产品概念的创业者 / 产品负责人
– 希望把 Claude Design 能力集成到自己工作流的 AI 极客

目标用户：
– 已有 Claude Code、Cursor 或 Codex 使用习惯的开发者
– 需要本地化设计资产、不想依赖 claude.ai/design 的团队
– 追求设计到交付全链路自动化的独立开发者

输入与输出案例

案例 1：Mac 阅读应用原型

输入：

Build a Reader Mac app that helps me read and save articles better. All data is stored locally.

输出：
Agent 生成一套完整的 Mac 阅读器 UI，包含手动添加内容（URL / PDF / 附件）、RSS 订阅、AI 摘要与翻译、标签分类、文件夹管理、收藏夹等完整功能模块——全部是自包含 HTML，可直接在 localhost 预览。同一套 prompt 在 Cursor、Codex、Claude、Claude Design 网站均输出一致质量的界面。

案例 2：数据看板

输入：

Make a data dashboard with charts showing user growth, retention, and revenue trends.

输出：
生成包含折线图、柱状图、漏斗图等数据可视化组件的 HTML 看板，支持暗色主题、响应式布局，可直接嵌入内部工具或演示文稿。

GitHub: https://github.com/JimLiu/baoyu-design

评论区

0 条评论

登录后可评论。

Skill超级捕获手 15 阅读