baoyu-design 使用指南

来源：宝玉使用 Claude Design 的实战经验，迁移到本地 baoyu-design skill 使用。

1. 使用 Design System 避免 "AI 味"

问题：AI 生成的设计容易有"AI 味"——千篇一律的圆角、蓝色主色调、过度简化。

解决：绑定一个真实的设计系统。

推荐：Adobe Spectrum 2

• 网址：http://t.cn/AXXwdR7U
• 专业级设计系统，组件丰富，风格克制

设置方法

1. 创建项目时指定 design system
2. 或在 _d_meta.json 中绑定
3. 后续所有设计默认遵循该系统规范

效果：你只需关注布局和交互，视觉风格由设计系统保证。

2. 迭代式开发，不要一次性追求完美

错误做法：

"帮我设计一个完整的阅读器 App，要有收藏、标签、搜索、AI 助手..."

正确做法：

1. 先搭架子："设计一个阅读器的主界面，只包含文章列表和侧边栏"
2. 逐步添加：通过对话一轮轮加功能
3. 局部调整：用 Markup 功能框选修改

原则：先完成，再完美。

3. 多用 Markup 局部修改

Markup 功能

• 框选界面上的特定区域
• 评论指出要修改的地方
• 优点：精准定位，不需要重新描述

Edit 功能

• 手动调整：选中元素，左侧修改树形结构
• 适用：微调字体大小、间距、颜色

局限

• Markup 不能添加附件/截图
• 需要文字描述清楚修改意图

4. 注意上下文管理

问题：左侧对话不是无限上下文，会遗忘早期指令。

解决：

• 新任务 = 新会话
• 不要在同一个会话里切换完全不同的设计任务
• 用 _d_meta.json 和 progress.txt 持久化关键决策

技巧：

• 每轮对话后总结关键约束到文件
• 新会话先读取项目元数据恢复上下文

5. 用 Tweaks 面板快速调整

Tweaks 是一个设置面板，可以调整：

高级用法：

• 界面多时，通过 Tweaks 添加导航
• 快速跳转到特定界面，无需一步步点击

6. 设计也要"抽卡"

现实：LLM 有随机性，设计也是如此。

策略：

• 同一个需求多试几次（3-5 次）
• 保存不同版本，择优或组合
• 参考：http://t.cn/AXa7Vj7q

不要：第一次不满意就放弃，多抽几次卡。

7. 先线框，再高保真

顺序很重要：

线框草图 → 确定布局/交互 → 高保真原型

为什么先线框？

• 线框阶段只关注粗粒度：布局、导航、流程
• 不需要纠结颜色、字体、圆角
• 修改成本低，可快速迭代

线框转高保真的方法

方法 1：基于项目链接

• 把线框项目链接发给 Claude
• 基于草图实现高保真版本

方法 2：生成 PRD（推荐）

1. 让 Claude 基于线框写一份详细 PRD
2. 人工审查补充（比在界面上调整更高效）
3. PRD 作为附件发给新项目，二次创作

PRD 的优势：

• 文本格式，AI 友好
• 好管理版本（git diff）
• 比界面调整更精确

8. PRD + 线框图搭配使用

推荐工作流

1. 手写 PRD（粗糙版）
   ↓ 想到哪写到哪，配合 Chat/Cowork
   
2. 生成线框图原型
   ↓ 反复调整布局/交互，直到满意
   
3. 生成最终 PRD（详细版）
   ↓ 基于确认的线框 + 粗糙 PRD，让 AI 写详细版
   
4. 版本管理 + 开发参考

关键：线框确认后，让 AI 写详细 PRD，人工再补充。这个 PRD 成为开发的标准参考。

9. 设计结果用版本管理

交付物结构

designs/my-project/
├── index.html          # 主界面
├── components/         # 组件
├── styles.css          # 样式系统（颜色、尺寸规范）
├── App.jsx             # React 组件结构
└── data.js             # 数据结构和样例

为什么对 AI 友好？

版本管理流程

# 1. 下载/生成设计稿
# 2. 解压到项目目录
cp -r designs/my-project/* ./design/

# 3. 提交 git
git add design/
git commit -m "design: update reader app layout"

# 4. 后续修改用 git diff 跟踪
git diff design/styles.css

优势：

• git diff 清楚显示设计变更
• AI 可以读取 diff 了解修改内容
• 可回滚到任意版本

10. 把设计稿作为唯一设计源

核心原则：单向同步

Claude Design → Code
     ↑
   先改设计

错误做法：

• 开发时临时改代码
• 设计稿不同步
• 时间一长，两边版本分裂

正确做法：

1. 开发中发现问题 → 先改设计稿
2. 设计稿确认后 → 再改代码
3. 即使临时改代码 → 事后同步回设计稿

长期收益：

• 设计稿始终是最新权威
• 新需求基于设计稿迭代，不基于过期的代码
• 团队协作有统一参考

快速参考：命令速查

相关资源

• 项目地址：https://github.com/jimliu/baoyu-design
• Adobe Spectrum 2：http://t.cn/AXXwdR7U
• 抽卡技巧：http://t.cn/AXa7Vj7q

本指南基于宝玉实战经验整理，适用于 baoyu-design skill 本地使用。