baoyu-design

环境要求

• 已安装 Node.js，可执行 npx 命令（skills CLI 依赖）
• 支持 Agent Skill 的 AI 编程工具：Cursor、Claude Code、Claude Desktop、Codex 等
• 建议搭配 Claude Opus 4.8 等强模型以获得最佳设计效果

安装与启动步骤

1. 1检查运行环境

   确认本机已安装 Node.js 且 npx 可用，这是安装 skills CLI 的前提。README 未给出具体版本要求。

   node -v

   复制

2. 2安装技能到当前项目

   使用 Vercel Labs 的 skills CLI，它会读取本仓库、找到 skills/baoyu-design/ 并自动放入所检测到的 Agent 对应目录。

   npx skills add JimLiu/baoyu-design

   复制

3. 3全局安装（可选）

   在命令后加 -g 参数安装到全局，之后所有项目都能使用该技能；项目级安装则只对当前项目生效。

   npx skills add JimLiu/baoyu-design -g

   复制

4. 4免安装直接使用

   不想安装时，把仓库地址直接粘贴到对话里，让 Agent 自行拉取并读取 SKILL.md 完成一次性使用。

   Read https://github.com/JimLiu/baoyu-design and follow its `skills/baoyu-design/SKILL.md` to design a settings screen for a meditation app.

   复制

5. 5重启 Agent 会话

   安装或更新完成后，重启 Claude Code 或新建一个 Agent 会话，否则可能仍加载旧的技能文件。

6. 6用自然语言生成设计稿

   直接描述需求即可生成 UI 稿、原型、线框图、落地页、仪表盘、移动端应用与幻灯片，产物为自包含 HTML，输出到 designs/<项目名>/。

7. 7更新技能版本

   更新时 CLI 会提示安装范围；项目级更新加 -p -y，全局更新加 -g -y，upgrade 是同义别名。

   npx skills update baoyu-design -p -y

   复制

如何确认成功

在 Agent 会话中提出设计需求后，能在 designs/<项目名>/ 下生成自包含 HTML 文件，并可在本地 localhost 预览、标注修改。

常见问题

注意事项

• 安装或更新后务必重启 Claude Code 或新建会话，否则可能读取到旧版本技能文件。
• 技能会长期占用上下文，建议搭配能力较强的模型使用以取得更好设计产出。
• 迭代修改可直接在浏览器预览中点选元素并说明改动，Agent 会改对应的 HTML 源码。