1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | baoyu-design |
| 作者/维护者 | Jim Liu（宝玉，独立开发者，社区项目，非 Anthropic 官方出品） |
| 来源链接 | https://github.com/JimLiu/baoyu-design |
| 许可证 | MIT（GitHub API 验证） |
| GitHub Stars | 2,686（GitHub API 实测） |
| Forks | 199（GitHub API 实测） |
| 最新版本 | v1.1.1（2026-06-22 发布，仓库 CHANGELOG 实测） |
| 安装方式 | npx skills add JimLiu/baoyu-design（Vercel Labs 出品的 npx skills 通用安装器） |
项目自述名称为「baoyu-design」（与 README 标题一致），与正式名称相同。
2. 功能介绍与亮点
baoyu-design 把 claude.ai/design 网页版背后的设计生成引擎（Claude Design）搬到本地，包装成一个可被任意具备文件读写能力的 coding agent 调用的 Agent Skill。核心能力：根据自然语言描述生成 UI 原型、交互式 demo、线框图、着陆页、仪表盘、移动端界面与幻灯片，产物是自包含单文件 HTML，全部落盘在项目仓库内，不经过网页版、不需要上传。
亮点：①支持导入设计系统（Design System），可基于已有 Figma 本地 .fig 文件重建同一套设计语言，官方说明该导入流程完全离线，不需要 Figma 账号或 MCP；②内置实时预览，可直接在预览页面点选元素并用自然语言描述修改，触发针对性的二次编辑；③支持本地 PPT 导出与预览标注；④在 Cursor、Codex Agent 等多个 agent 上验证可用，安装脚本会按检测到的 agent 自动放置到正确目录。
3. 适用场景
固定分类：前端与设计。
面向需要快速产出可视化设计稿、又不想为此单独订阅 claude.ai/design 或来回复制粘贴的前端开发者、产品经理与独立开发者：给客户提交着陆页初稿、给团队评审 App 界面草图、把已有 Figma 设计系统本地化后批量生成新页面等场景，都可以在编辑器内一次性完成，产物即用即改。
4. 跨 Agent 兼容性
- Claude Code：✅ 原生支持——README 明确将其列为首选目标 agent，
npx skills add ... --agent claude-code为官方推荐安装路径，且效果与官方模型（推荐 Opus 4.8）绑定说明 - Codex：✅ 支持——README 明确列出
--agent codex安装选项，并单独提及 Codex Agent 内置的浏览器预览与标注工具可配合本技能的 PPT 预览功能使用 - OpenClaw：❓ 未验证——已抓取的 README 与安装脚本未提及 OpenClaw，仅泛化表述“适用于任意具备文件读写能力的 coding agent”，无法确认是否有针对性适配
- Hermes Agent：❓ 未验证——同上，抓取材料中未出现该生态的相关表述
5. 推荐理由
baoyu-design 把 claude.ai/design 这套完整的设计生成方法论搬进了本地编辑器：不用另开网页、不用订阅、产物直接是项目里的 HTML 文件，改动可以像改代码一样版本化管理。对已经在用 Claude Code 或 Codex 写代码、又经常要临时出一版 UI 原型或演示稿的用户来说，省掉了“写代码 - 切到设计工具 - 再粘回来”的来回切换成本。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | 2,686 星 / 199 fork（GitHub API 实测）；作者宝玉在中文 AI 社区有较高辨识度（同一作者另有 baoyu-translate 等项目），但本项目本身未见多平台独立讨论 |
| 可用性 | 9 | npx skills add 一条命令即可安装，支持按 agent 自动适配路径；README 含英/中双语文档与更新日志；最近一次代码推送为 2026-07-09，维护活跃；无强制付费依赖，纯本地运行 |
| 安全性 | 9 | 见下方检查清单 |
安全检查清单逐项：①执行的是本地 Node.js 脚本（如 compile-design-system.mjs、build-preview.mjs），作用范围限定在生成/校验/预览设计文件，未见越权的系统级操作 ②默认不联网外发数据——生成过程为纯本地文件读写；GitHub 集成（拉取设计源仓库）与 Figma 导入均为可选功能，且官方说明 Figma 导入“完全离线，无需账号或 MCP” ③不要求任何 API Key 或账号注册，可选的 GitHub 集成复用用户本机已有的 gh 登录态，不单独存储凭据 ④抓取到的 SKILL.md 与 README 中未发现面向执行者的可疑指令或提示注入迹象 ⑤作者信誉良好——同一作者另有 baoyu-skills（含 baoyu-translate 等）项目，无不良记录 ⑥MIT 许可证明确 ⑦维护活跃，最近推送与最新版本发布（v1.1.1，2026-06-22）均在近一个月内
综合评分：8.3（三项均值）
7. 跟同类 Skills 相比的优势
| 名称 | Star | 定位 | 与 baoyu-design 的差异 |
|---|---|---|---|
| baoyu-design（本次推荐） | 2,686 | 本地复刻 claude.ai/design 网页版能力，聚焦 UI 原型/demo/幻灯片等“产品设计”类产物 | 定位最贴近网页版 Claude Design 的原始体验，输出以自包含 HTML 单文件为主，改动可直接版本化 |
| html-anything（nexu-io） | 7,837 | 更大体量的 HTML 生成套件，内含约 75 个子 skill，覆盖杂志、演示稿、海报、小红书/推特卡片、数据报告等 9 类“呈现形式”，支持一键导出到微信/X/知乎 | 覆盖面远宽于单一的产品设计场景，代价是学习与选择成本更高；面向的是“任意 HTML 呈现物”而非专注 UI/产品设计 |
| effective-html（plannotator） | 1,382 | 面向架构图、技术方案、流程图等“文档类”HTML 产物 | 定位是工程文档与图示，而非 UI 原型/界面设计，二者互补而非直接竞争 |
差异化总结：三者都以“用 agent 生成自包含 HTML”为共同技术路线，但服务的产物类型不同——baoyu-design 对标网页版 Claude Design 做产品/界面设计，html-anything 走“全场景呈现物”的广度路线，effective-html 专精技术文档与图示。
8. 用户评价
该技能目前在第三方平台尚无经核实的具名用户评价。作者本人在 X（Twitter）上持续发布功能更新说明（如设计系统导入、Figma 本地文件导入等），可作为版本迭代节奏的参考，但不构成独立第三方评价。
9. 其他补充
仓库提供英文与简体中文两份 README/CHANGELOG，面向中文用户的文档完整度较好。作者在同一账号下还维护 baoyu-skills（含 baoyu-translate 等），两个项目相互独立，非同一 skill 的不同版本。
10. 安装使用方式
# 安装到当前项目（自动识别 agent）
npx skills add JimLiu/baoyu-design
# 全局安装
npx skills add JimLiu/baoyu-design -g
# 指定安装到特定 agent
npx skills add JimLiu/baoyu-design --agent claude-code
npx skills add JimLiu/baoyu-design --agent codex
npx skills add JimLiu/baoyu-design --agent cursor也可以直接把仓库地址粘贴进对话框，让 agent 自行拉取加载。安装后无需重启，在 Claude Code 中可用自然语言描述设计需求触发，或显式输入 /baoyu-design；agent 会追问细节并把产物生成到项目下的 designs/ 目录。
11. 注意事项
- 官方建议搭配 Claude Opus 4.8 使用以获得最佳产出质量；使用能力较弱的模型时效果可能打折扣
- PPT 导出依赖本地 Node.js 构建环境，通过网页版 claude.ai/design 无法使用该功能
- 这是一个独立社区项目，README 中明确声明“不隶属于、也未获得 Anthropic 官方认可”
- OpenClaw、Hermes Agent 生态下的兼容性未见官方说明，如需在这两个平台使用建议先小范围验证