baoyu-design

在 AI 辅助设计日益普及的今天，如何平衡云端能力的强大与本地数据的隐私？baoyu-design 提供了一个完美的解决方案。它将 Claude Design（claude.ai/design 背后的设计引擎）打包成一个可移植的 Agent Skill，让你能在 Cursor、Claude Code、Codex 等本地编码助手中，直接获得专业级的 UI/UX 设计能力。无需上传文件，无需额外订阅，所有高保真原型、设计系统及交付物均生成并保留在你的本地仓库中。

核心亮点：本地化、专业化、可控化

1. Claude Design 引擎本地运行

• 同等工艺标准：复用 claude.ai/design 的方法论与产出格式，生成精致的 UI 稿、可交互原型、线框图、落地页及仪表盘。
• 自包含 HTML：所有产物均为单文件或结构化 HTML，可直接在浏览器预览、纳入 Git 版本控制或部署上线。

2. 离线解析 Figma .fig 文件

• 无需账号/API：内置解码器可直接读取本地 .fig 文件，无需 Figma 账号或 API Token。
• 资产提取与重组：自动盘点页面、组件和变量，将 SVG/PNG 资产原样提取，并按语义重新分组组件、整理 Token CSS，生成带规范卡片和品牌指南 README 的设计系统。

3. “所指即所得”的可视化迭代

• 紧凑编辑回路：利用 Agent 自带的网页预览（如 Cursor Browser），在实时预览中直接点选元素，通过自然语言指令（如“把这个按钮改成蓝色”）修改源码。
• 精准控制：相比云端工具的模糊描述，本地预览+DevTools 标注让二次编辑更加直观、精准。

4. 强大的设计系统管理

• 多系统绑定：支持同时导入多个设计系统（如 Fluent 2, Chakra UI），指定主系统决定整体观感，其余系统贡献特定组件。
• 视觉契约：一旦绑定，Agent 将严格使用系统内的 Token、字体和组件，禁止自创样式，确保设计一致性。
• 本地副本同步：设计系统以锁定版本副本形式存储在 _ds/ 目录下，确保项目可移植、可复现。

功能全景

快速开始

1. 前置条件

• 本地 Agent：Cursor, Claude Code, Codex, Cline 等。
• 模型推荐：Claude Opus 4.8（因 Skill 指令冗长且要求高，强模型效果最佳）。
• 环境：Node.js (用于安装), Python 3 (用于本地预览服务器)。

2. 安装 Skill

方式 A：使用 skills CLI (推荐)

# 全局安装，对所有项目生效
npx skills add JimLiu/baoyu-design -g

# 或仅安装到当前项目
npx skills add JimLiu/baoyu-design

方式 B：直接链接触发
在 Agent 对话中发送：

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

3. 使用示例

生成高保真方案：

“帮我设计一个冥想 App 设置页面的 3 个高保真方案。”

导入 Figma 并构建设计系统：

“读取 ./design-kit.fig 文件，将其转换为一个完整的设计系统，并基于此设计一个登录页。”

可视化迭代：
在 Agent 启动的 localhost 预览页面中，点击某个按钮，输入：

“把这个按钮的圆角改大，背景色换成品牌主色，并添加一个微弱的阴影。”