# WorkBuddy 设计规格(逆向实测)

> 来源:用户提供的 WorkBuddy 全屏截图(2668×1571 物理像素,约 1708 逻辑 px)
> 方法:逐区域像素采样 + 色块边界检测 + 文字带高度测量
> 脚本:`tools/workbuddy-spec.py`、`tools/workbuddy-spec2.py`

---

## 1. 颜色(全部实测,非估计)

| 用途 | 色值 | H / S / L | 说明 |
| --- | --- | --- | --- |
| **侧栏底** | `#E4ECE5` | 127 / 17% / 91% | |
| **侧栏选中行** | `#D5E5D6` | 126 / 24% / 87% | 比侧栏底深 4 个百分点,一眼可辨 |
| **主区底** | `#F5F8F5` | 120 / 18% / 97% | 几乎白,只带一丝绿 |
| **用户气泡 / 附件卡片** | `#E9F1E9` | 120 / 22% / 93% | 同一个色 |
| **输入框卡片** | `#FFFFFF` | — | 纯白,是全界面最亮的地方 |
| 正文 | ≈ `#1A2418` | — | 最暗像素 `#0B1705`,取近黑带一丝绿 |
| 次要文字 | ≈ `#5E615D` | — | "已完成 26s" 这类 |
| 时间戳 | ≈ `#707B73` | — | 侧栏右侧的日期 |
| 分组标题 | ≈ `#7A8078` | — | "置顶 (12)""任务 (29)" |
| 输入框占位 | ≈ `#6D6D6D` | — | 中性灰,不带绿 |

**关键洞察:整张图的绿色饱和度全在 17~24% 之间。** 高于这个区间就会"太绿"。

> 第一版我的配色做到了 32~47%,是它的两倍,这就是"突兀感强"的量化原因。

**层级阶梯只有三级:**
```
输入框 #FFFFFF  (最亮)
   ↓
主区   #F5F8F5
   ↓
侧栏   #E4ECE5      气泡/卡片 #E9F1E9 夹在中间
   ↓
选中行 #D5E5D6  (最深)
```

---

## 2. 几何(实测)

| 元素 | 测量值 |
| --- | --- |
| 侧栏宽度 | ≈ 345 px |
| **侧栏行高** | **40 px**(文字带中心间距 39~41,极匀) |
| **选中行高度** | **36 px**(y 559→595) |
| 侧栏分组间距 | 约 109~138 px(组标题上方留白很大) |
| **用户气泡圆角** | **15 px**(实测) |
| 用户气泡尺寸 | 854 × 87 px |
| **输入框卡片圆角** | **42 px**(实测,抗锯齿会略微高估;实际观感约 28~32) |
| 输入框尺寸 | 928 × 164 px |
| 附件卡片 | 892 × 80 px,圆角较小 |
| 消息区最大宽度 | ≈ 928 px(和输入框对齐) |

---

## 3. 字号(按文字带高度估算)

| 位置 | 字高 | 推断 font-size |
| --- | --- | --- |
| 侧栏导航项 | 15 px | **14~15 px** |
| 侧栏分组标题 | 12 px | **12 px** |
| 主区大标题 | 18 px | **18 px** |
| 回答正文 | 17 px | **15~16 px** |
| 元信息(已完成 Xs) | — | **12~13 px** |
| 输入框占位 | — | **14 px** |

---

## 4. 结构(从截图直读)

### 侧栏(从上到下)

```
┌─ 应用头 ────────────────────────┐
│ WorkBuddy            [发现应用 ⌄] │  ← 名字加粗 15px;副标题 v5.8.2 极小灰字
│ v5.8.2                           │     右侧是个淡绿 pill 按钮
├─ 导航(每行 40px)────────────────┤
│ ⊕ 新建任务                       │
│ ⏱ 助理  [BETA]                   │  ← 小徽章
│ ⚙ 专家技能连接器                  │
│ ⏰ 定时任务                       │
│ ▤ 资料库                         │
│ ⊞ 更多                  灵感      │  ← 右侧灰字提示
├─────────────────────────────────┤
│ 置顶 (12)                        │  ← 12px 灰字,上方大留白
│ 小说数据化设计        8月27日     │  ← 标题左、日期右(11-12px 灰)
│ 收起                             │
├─────────────────────────────────┤
│ 任务 (29)                        │
│ ▌全球视野与市场晨报   6分钟前     │  ← 选中:淡绿 pill #D5E5D6,圆角,高 36px
│ 日程自动化            44分钟前    │
│ ...                              │
│ 空间 (4)                         │
├─ 底部 ──────────────────────────┤
│ (头像) 魔法水车          🔔  ⧉   │
└─────────────────────────────────┘
```

**注意:侧栏和主区之间没有明显分隔线** —— 全靠底色差 `#E4ECE5` vs `#F5F8F5`。

### 主区

```
┌──────────────────────────────────────────┐
│ ← 全球视野与市场晨报        🔍 ↗ ▣        │  ← 标题 18px + 右侧图标按钮
├──────────────────────────────────────────┤
│                    ┌────────────────────┐ │
│                    │ 用户消息气泡        │ │  ← #E9F1E9 圆角 15px,右对齐
│                    └────────────────────┘ │
│                                          │
│ (圆头像) WorkBuddy                        │  ← 角色头
│ 已完成 26s >                              │  ← 12-13px 灰
│                                          │
│ 正文正文正文……                            │  ← 15px
│                                          │
│ ┌──────────────────────────────────────┐ │
│ │ ▣ 2026-10-15 全球视野晨报.md    12 KB │ │  ← 附件卡 #E9F1E9
│ └──────────────────────────────────────┘ │
│                                          │
│ 查看所有产物 (1) >                        │
│ ⧉ 👍 👎 🔊 ↻ ↗ ⋯   共消耗 1.51  🤖V4.1  │  ← 操作行,图标灰
├──────────────────────────────────────────┤
│ ╭──────────────────────────────────────╮ │
│ │ 今天帮你做些什么? @添加上下文 /调用技能 │ │  ← 白色大圆角卡
│ │                                      │ │
│ │ ＋  ⚠允许完全访问⌄      🤖V4.1-Flash 🎤 ⏎│ │  ← 底部工具行
│ ╰──────────────────────────────────────╯ │
│            内容由 AI 生成,请核实重要信息    │  ← 极小灰字
└──────────────────────────────────────────┘
```

---

## 5. 设计原则(从上面数据反推)

1. **饱和度天花板 24%** —— 任何底色不超过它。
2. **只做"浅底 + 深字",不用边框分块** —— 侧栏/主区之间没有线,靠底色差。
3. **层级靠亮度,不靠颜色** —— 四个层级全是同一个绿系,只是 L 值 87/91/93/97。
4. **焦点用形状而非颜色** —— 输入框是纯白大圆角卡,靠"最亮 + 最大圆角"跳出,不是靠彩色。
5. **文字偏中性** —— 正文近黑,次要/时间戳是中性灰(`#707B73`、`#6D6D6D`),不带明显绿。
6. **行高统一 40px** —— 侧栏节奏完全均匀。