Claude Code Desktop App — UI 设计规范
本文档面向设计图生成，包含完整的配色方案、布局尺寸、组件规格和页面交互逻辑。
可直接用于 AI 设计工具或设计师参考。
一、设计风格概述
1.1 整体风格
- 设计语言: 现代简约，暖色调，类 Notion/Linear 风格
- 背景色: 白色/米白色为主，非纯白（偏暖）
- 圆角: 大圆角风格（8-12px），卡片和输入框更大（12-16px）
- 阴影: 微妙的阴影，仅用于浮层和下拉菜单
- 字体: 系统字体栈（-apple-system, SF Pro, Segoe UI, Inter）
- 图标风格: 线条图标，1.5px 线宽，圆角端点
- 品牌色: 橙色
rgb(215,119,87) — Claude 品牌橙
1.2 吉祥物 (Clawd)
- 像素风格小动物（类似小螃蟹/外星生物）
- 主体颜色:
rgb(215,119,87) (Claude 橙)
- 8bit 像素风格，大约 64x64px 像素尺寸
- 两个黑色方形眼睛
- 四条短腿
- 背景: 透明或
rgb(0,0,0) (clawd_background)
二、配色方案
2.1 Light 主题（默认主题，截图使用的主题）
品牌与核心色
| Token |
色值 |
用途 |
claude |
rgb(215,119,87) |
品牌橙，主色调，吉祥物颜色 |
claudeShimmer |
rgb(245,149,117) |
品牌橙浅色，闪烁动画 |
permission |
rgb(87,105,247) |
权限蓝，权限模式标识 |
permissionShimmer |
rgb(137,155,255) |
权限蓝浅色 |
autoAccept |
rgb(135,0,255) |
自动接受紫，Auto 模式标识 |
planMode |
rgb(0,102,102) |
计划模式青，Plan 模式标识 |
fastMode |
rgb(255,106,0) |
快速模式橙 |
文本色
| Token |
色值 |
用途 |
text |
rgb(0,0,0) |
主文本（黑色） |
inverseText |
rgb(255,255,255) |
反色文本（白色） |
inactive |
rgb(102,102,102) |
不活跃文本（深灰） |
subtle |
rgb(175,175,175) |
次要文本（浅灰） |
suggestion |
rgb(87,105,247) |
建议文本（蓝紫） |
语义色
| Token |
色值 |
用途 |
success |
rgb(44,122,57) |
成功（绿色） |
error |
rgb(171,43,63) |
错误（红色） |
warning |
rgb(150,108,30) |
警告（琥珀色） |
merged |
rgb(135,0,255) |
已合并（紫色） |
Diff 色
| Token |
色值 |
用途 |
diffAdded |
rgb(105,219,124) |
添加行背景（浅绿） |
diffRemoved |
rgb(255,168,180) |
删除行背景（浅红） |
diffAddedDimmed |
rgb(199,225,203) |
添加行弱化（极浅绿） |
diffRemovedDimmed |
rgb(253,210,216) |
删除行弱化（极浅红） |
diffAddedWord |
rgb(47,157,68) |
添加的单词（中绿） |
diffRemovedWord |
rgb(209,69,75) |
删除的单词（中红） |
背景色
| Token |
色值 |
用途 |
userMessageBackground |
rgb(240,240,240) |
用户消息气泡背景 |
userMessageBackgroundHover |
rgb(252,252,252) |
用户消息悬停 |
messageActionsBackground |
rgb(232,236,244) |
消息操作栏背景 |
bashMessageBackgroundColor |
rgb(250,245,250) |
Bash 命令背景 |
memoryBackgroundColor |
rgb(230,245,250) |
记忆块背景 |
selectionBg |
rgb(180,213,255) |
文本选中背景 |
边框色
| Token |
色值 |
用途 |
promptBorder |
rgb(153,153,153) |
输入框边框 |
promptBorderShimmer |
rgb(183,183,183) |
输入框边框闪烁 |
bashBorder |
rgb(255,0,135) |
Bash 块边框（粉色） |
Agent 专用色
| Token |
色值 |
red |
rgb(220,38,38) |
blue |
rgb(37,99,235) |
green |
rgb(22,163,74) |
yellow |
rgb(202,138,4) |
purple |
rgb(147,51,234) |
orange |
rgb(234,88,12) |
pink |
rgb(219,39,119) |
cyan |
rgb(8,145,178) |
其他
| Token |
色值 |
用途 |
rate_limit_fill |
rgb(87,105,247) |
速率限制进度条填充 |
rate_limit_empty |
rgb(39,47,111) |
速率限制进度条空白 |
briefLabelYou |
rgb(37,99,235) |
用户标签蓝 |
briefLabelClaude |
rgb(215,119,87) |
Claude 标签橙 |
2.2 Dark 主题
品牌与核心色
| Token |
色值 |
用途 |
claude |
rgb(215,119,87) |
品牌橙（同 Light） |
claudeShimmer |
rgb(235,159,127) |
品牌橙浅色 |
permission |
rgb(177,185,249) |
权限蓝紫 |
autoAccept |
rgb(175,135,255) |
自动接受紫 |
planMode |
rgb(72,150,140) |
计划模式青绿 |
fastMode |
rgb(255,120,20) |
快速模式橙 |
文本色
| Token |
色值 |
text |
rgb(255,255,255) |
inverseText |
rgb(0,0,0) |
inactive |
rgb(153,153,153) |
subtle |
rgb(80,80,80) |
suggestion |
rgb(177,185,249) |
语义色
| Token |
色值 |
success |
rgb(78,186,101) |
error |
rgb(255,107,128) |
warning |
rgb(255,193,7) |
背景色
| Token |
色值 |
userMessageBackground |
rgb(55,55,55) |
userMessageBackgroundHover |
rgb(70,70,70) |
messageActionsBackground |
rgb(44,50,62) |
bashMessageBackgroundColor |
rgb(65,60,65) |
memoryBackgroundColor |
rgb(55,65,70) |
selectionBg |
rgb(38,79,120) |
Diff 色
| Token |
色值 |
diffAdded |
rgb(34,92,43) |
diffRemoved |
rgb(122,41,54) |
diffAddedWord |
rgb(56,166,96) |
diffRemovedWord |
rgb(179,89,107) |
2.3 应用 UI 表面色（从截图提取）
截图中使用的 Light 主题 UI 表面色:
| 区域 |
颜色 |
说明 |
| 应用背景 |
#FFFFFF |
纯白 |
| 侧边栏背景 |
#FAF9F7 |
暖白/米白 |
| 侧边栏选中项 |
#F0EDE8 |
暖灰 |
| 导航项悬停 |
#F5F3EF |
极浅暖灰 |
| 主内容区背景 |
#FFFFFF |
纯白 |
| 输入框背景 |
#FFFFFF |
纯白 |
| 输入框边框 |
#E5E3DE |
浅灰 |
| 输入框圆角 |
16px |
大圆角 |
| 分隔线 |
#E5E3DE |
浅灰 |
| 状态栏背景 |
#FAF9F7 |
暖白 |
| 按钮背景(主要) |
#3D3D3D |
深灰/黑色 |
| 按钮文字(主要) |
#FFFFFF |
白色 |
| 按钮背景(次要) |
#FFFFFF |
白色 |
| 按钮边框(次要) |
#E5E3DE |
浅灰 |
| 下拉菜单背景 |
#FFFFFF |
白色 |
| 下拉菜单阴影 |
0 4px 12px rgba(0,0,0,0.1) |
微妙阴影 |
| 用户消息气泡 |
#F5F0E8 |
暖米色 |
| Info 横幅背景 |
#F5F3EF |
浅暖灰 |
三、排版规范
3.1 字体栈
--font-family-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
--font-family-mono: "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Monaco, "Courier New", monospace;
3.2 字号层级
| 层级 |
字号 |
行高 |
字重 |
用途 |
| H1 |
24px |
32px |
700 (Bold) |
页面标题（如 "Scheduled tasks"） |
| H2 |
18px |
24px |
600 (SemiBold) |
区段标题 |
| H3 |
16px |
22px |
600 |
对话框标题、组件标题 |
| Body |
14px |
20px |
400 (Regular) |
正文文本 |
| Small |
13px |
18px |
400 |
次要文本、时间戳 |
| Caption |
12px |
16px |
400 |
标签、描述、提示文本 |
| Tiny |
11px |
14px |
500 (Medium) |
Badge、状态标签 |
| Code |
13px |
18px |
400 |
代码块内文本 |
3.3 文本颜色层级
| 层级 |
Light 色值 |
Dark 色值 |
用途 |
| Primary |
#000000 |
#FFFFFF |
标题、正文 |
| Secondary |
#666666 |
#999999 |
次要信息 |
| Tertiary |
#AFAFAF |
#505050 |
占位符、禁用 |
| Accent |
rgb(87,105,247) |
rgb(177,185,249) |
链接、强调 |
| Brand |
rgb(215,119,87) |
rgb(215,119,87) |
品牌元素 |
四、布局规格
4.1 整体布局
┌───────────────────────────────────────────────────────────┐
│ Title Bar (40px) │
├─────────────┬─────────────────────────────────────────────┤
│ │ │
│ Sidebar │ Main Content Area │
│ (280px) │ (flex: 1) │
│ │ │
│ │ │
│ │ │
│ │ │
│ │ │
│ │ │
├─────────────┴─────────────────────────────────────────────┤
│ Status Bar (36px) │
└───────────────────────────────────────────────────────────┘
| 区域 |
尺寸 |
说明 |
| Title Bar |
高 40px |
固定，不可滚动 |
| Sidebar |
宽 280px |
固定宽度，可调整（最小 240px，最大 400px） |
| Main Content |
flex: 1 |
自适应填充剩余空间 |
| Status Bar |
高 36px |
固定，常驻底部 |
| 最小窗口尺寸 |
900 x 600px |
|
| 推荐窗口尺寸 |
1280 x 800px |
|
4.2 间距系统
| Token |
值 |
用途 |
space-1 |
4px |
最小间距 |
space-2 |
8px |
紧凑间距 |
space-3 |
12px |
标准间距 |
space-4 |
16px |
舒适间距 |
space-5 |
20px |
区块间距 |
space-6 |
24px |
大区块间距 |
space-8 |
32px |
区段间距 |
space-10 |
40px |
页面边距 |
4.3 圆角规范
| 元素 |
圆角 |
| 按钮 |
8px |
| 输入框 |
12px |
| 对话输入框 |
16px |
| 卡片/面板 |
12px |
| 下拉菜单 |
12px |
| 模态框 |
16px |
| Avatar |
50% (圆形) |
| Badge |
4px |
| Tooltip |
8px |
五、组件设计规格
5.1 Title Bar（标题栏）
┌─────────────────────────────────────────────────────┐
│ ● ● ● ← → │ Chat Cowork [Code] │ │
└─────────────────────────────────────────────────────┘
| 元素 |
规格 |
| 高度 |
40px |
| 背景 |
白色 #FFFFFF |
| 底部分隔线 |
1px solid #E5E3DE |
| 红绿灯按钮 |
左偏移 12px，垂直居中 |
| 红绿灯尺寸 |
12px 圆形，间距 8px |
| 导航箭头 |
尺寸 20px，灰色 #666666，hover 变深 |
| 标签页 |
居中对齐 |
| 标签页字号 |
14px, 字重 500 |
| 活跃标签 |
背景 #F0EDE8，圆角 8px，padding 6px 12px |
| 非活跃标签 |
无背景，色 #666666 |
| 标签间距 |
4px |
┌──────────────┐
│ + New session │ ← 导航项
│ ⏰ Scheduled │
│ │
│ All projects ▾│ ← 项目过滤
│ ─────────────│
│ Today │ ← 时间分组标题
│ ○ Session 1 │ ← 会话项
│ ● Session 2 │ ← 选中项
│ │
│ Previous 7d │
│ ○ Session 3 │
└──────────────┘
| 元素 |
规格 |
| 宽度 |
280px |
| 背景 |
#FAF9F7 (暖白) |
| 右侧分隔线 |
1px solid #E5E3DE |
| 内边距 |
上下 12px，左右 12px |
| 导航项高度 |
36px |
| 导航项 padding |
8px 12px |
| 导航项字号 |
14px |
| 导航项图标 |
18px，与文字间距 10px |
| 导航项悬停 |
背景 #F5F3EF，圆角 8px |
| 导航项选中 |
背景 #F0EDE8，字重 500 |
| 项目过滤器高度 |
32px |
| 分组标题 |
12px, 字重 600, 色 #999999, uppercase |
| 分组标题上边距 |
16px |
| 会话项高度 |
36px |
| 会话项 padding |
8px 12px 8px 20px |
| 选中指示器 |
左侧 4px 宽圆形点，色 #000000 |
| 选中背景 |
#F0EDE8 |
5.3 Status Bar（状态栏）
┌──────────────────────────────────────────────────────────────┐
│ [N] nanmi │ ⬇ ⇅ │ 🐙 Repo/name 🔀 main □worktree Local▾ │
│ Max plan │ │ │
└──────────────────────────────────────────────────────────────┘
| 元素 |
规格 |
| 高度 |
36px |
| 背景 |
#FAF9F7 |
| 顶部分隔线 |
1px solid #E5E3DE |
| 内边距 |
0 12px |
| 用户 Avatar |
28px 圆形 |
| 用户名字号 |
13px, 字重 500 |
| 订阅标签 |
11px, 色 #999999 |
| 仓库名 |
13px, 带 GitHub 图标 |
| 分支名 |
13px, 带分支图标 |
| Worktree 复选框 |
14px |
| Local/Remote |
13px 下拉，带 ▾ |
| 分隔符 |
1px solid #E5E3DE，垂直 |
5.4 对话输入框
┌─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┐
│ │
│ 🐙 (Clawd 吉祥物) │
│ │
│ ┌────────────────────────────────────────────────┐ │
│ │ Find a small todo in the codebase and do it │ │
│ │ │ │
│ │ ┌─────────────────┐ ┌──────────────┐│ │
│ │ │+ ⚙ Ask perms ▾ │ │Opus 4.7 1M ▾ 🎤││
│ │ └─────────────────┘ └──────────────┘│ │
│ └────────────────────────────────────────────────┘ │
└─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┘
| 元素 |
规格 |
| 输入框外边距 |
水平 auto（居中），最大宽度 720px |
| 输入框圆角 |
16px |
| 输入框边框 |
1px solid #E5E3DE |
| 输入框 focus 边框 |
1px solid #999999 |
| 输入框 padding |
16px 16px 48px 16px |
| placeholder 色 |
#AFAFAF |
| placeholder 字号 |
14px |
| 底部工具栏高度 |
36px |
| 底部工具栏 padding |
0 8px |
+ 按钮 |
24px, 圆角 6px, hover 背景 #F5F3EF |
| 权限选择器 |
字号 13px, 左对齐 |
| 权限图标 |
16px |
| 模型选择器 |
字号 13px, 右对齐 |
| 麦克风图标 |
20px, 最右侧 |
5.5 权限模式下拉菜单
┌──────────────────────────────────────┐
│ ⚙ Ask permissions ✓ │
│ Always ask before making changes │
│──────────────────────────────────────│
│ </> Auto accept edits │
│ Automatically accept all file edits│
│──────────────────────────────────────│
│ 📋 Plan mode │
│ Create a plan before making changes│
│──────────────────────────────────────│
│ ⚠ Bypass permissions │
│ Accepts all permissions │
└──────────────────────────────────────┘
| 元素 |
规格 |
| 宽度 |
320px |
| 背景 |
#FFFFFF |
| 圆角 |
12px |
| 阴影 |
0 4px 16px rgba(0,0,0,0.12) |
| 边框 |
1px solid #E5E3DE |
| 选项高度 |
56px |
| 选项 padding |
12px 16px |
| 选项标题 |
14px, 字重 500, 色 #000000 |
| 选项描述 |
12px, 色 #999999 |
| 选项图标 |
18px, 左侧 |
| ✓ 标记 |
右侧, 色 #000000 |
| 选项间分隔线 |
1px solid #F0EDE8 |
| 选项 hover |
背景 #F5F3EF |
5.6 模型选择器下拉菜单
┌──────────────────────────────────┐
│ Opus 4.7 │
│ Most capable for ambitious work │
│──────────────────────────────────│
│ Opus 4.7 1M ✓ │
│ Most capable for ambitious work │
│──────────────────────────────────│
│ Sonnet 4.6 │
│ Most efficient for everyday... │
│──────────────────────────────────│
│ Haiku 4.5 │
│ Fastest for quick answers │
│══════════════════════════════════│
│ Effort │
│──────────────────────────────────│
│ Low │
│ Medium ✓ │
│ High │
│ Max │
└──────────────────────────────────┘
| 元素 |
规格 |
| 宽度 |
300px |
| 背景 |
#FFFFFF |
| 圆角 |
12px |
| 阴影 |
0 4px 16px rgba(0,0,0,0.12) |
| 模型项高度 |
52px |
| 模型名字号 |
14px, 字重 500 |
| 模型描述字号 |
12px, 色 #999999 |
| 分隔线(模型/Effort) |
1px solid #E5E3DE |
| "Effort" 标签 |
12px, 字重 600, 色 #999999 |
| Effort 项高度 |
36px |
| Effort 字号 |
14px |
| ✓ 标记 |
右侧, 色 #000000 |
5.7 消息气泡
用户消息
┌──────────────────────┐
│ 分析下这个项目 │
└──────────────────────┘
| 属性 |
规格 |
| 对齐 |
右对齐 |
| 背景 |
#F5F0E8 (暖米色) |
| 圆角 |
16px（左上 16px，右上 4px，右下 16px，左下 16px） |
| 最大宽度 |
70% 容器宽度 |
| 字号 |
14px |
| 字色 |
#000000 |
| padding |
10px 14px |
| margin-bottom |
12px |
AI 回复消息
| 属性 |
规格 |
| 对齐 |
左对齐 |
| 背景 |
无（透明） |
| 最大宽度 |
100% |
| 字号 |
14px |
| 字色 |
#000000 |
| padding |
0 16px |
| margin-bottom |
16px |
| Markdown |
使用标准 Markdown 渲染 |
5.8 折叠区段
┌──────────────────────────────────────────────────┐
│ ▸ Initialized your session │
│ Ran a hook on session startup │
│ { "hookSpecificOutput": { ... │
│ │
│ ▸ 探索配置和基础设施 │
│ │ Agent 探索项目整体结构 │
│ │ Bash · 3 tool calls │
│ │ Agent 探索核心业务代码 │
│ │ Bash · 2 tool calls │
│ │ Agent 探索配置和基础设施 │
└──────────────────────────────────────────────────┘
| 元素 |
规格 |
| 折叠标题 |
14px, 字重 500 |
| 折叠图标 |
▸ (收起) / ▾ (展开), 12px |
| 左侧竖线 |
2px 宽, 色 #E5E3DE |
| 子项缩进 |
24px |
Agent 标签 |
12px, 字重 500, 背景 #F0EDE8, 圆角 4px, padding 2px 6px |
Bash · N tool calls 标签 |
12px, 色 #666666 |
| 子项间距 |
4px |
| 区段间距 |
8px |
5.9 加载状态
✦ Crafting... 13s · ↓ 531 tokens
| 元素 |
规格 |
| ✦ 图标 |
16px, 色 rgb(215,119,87), 闪烁动画 |
| 状态文本 |
14px, 色 rgb(215,119,87), 字重 500 |
| 计时器 |
13px, 色 #999999 |
| Token 计数 |
13px, 色 #999999 |
| 闪烁周期 |
1.5s ease-in-out |
5.10 Agent Teams 面板
当对话中创建 Agent Teams 时，消息列表下方出现 Team 状态栏和成员标签。
┌──────────────────────────────────────────────────────────┐
│ [消息列表...] │
│ │
│ ▸ Team: ui-backend-dev (3 members) │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ ● session-dev ● config-dev ○ features-dev │ │
│ │ running completed running │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ─────── Viewing: session-dev transcript ────────── │
│ │
│ [该成员的独立消息流] │
│ > 正在读取 sessionStorage.ts... │
│ Agent 探索会话存储 │
│ Bash · 2 tool calls │
│ │
│ [← Back to Leader] │
└──────────────────────────────────────────────────────────┘
| 元素 |
规格 |
| Team 状态栏高度 |
32px |
| Team 状态栏背景 |
#F5F3EF |
| Team 名称 |
13px, 字重 600 |
| 成员数量 |
13px, 色 #999999 |
| 成员标签容器 |
flex row, gap 8px, padding 8px 12px |
| 成员标签 |
圆角 6px, padding 4px 10px, 字号 12px, 字重 500 |
| 成员标签背景(默认) |
#F0EDE8 |
| 成员标签背景(选中) |
Agent 专用色（半透明 15%） |
| 成员标签边框(选中) |
2px solid Agent 专用色 |
| 状态指示器 |
左侧 6px 圆点 |
| Running 指示器 |
色 rgb(202,138,4) (黄), 闪烁动画 |
| Completed 指示器 |
色 rgb(44,122,57) (绿), 实心 |
| Failed 指示器 |
色 rgb(171,43,63) (红), 实心 |
| Idle 指示器 |
色 #CCCCCC (灰), 空心 |
| 分隔线("Viewing...") |
1px solid #E5E3DE, 上下 8px margin |
| "Viewing" 标签 |
12px, 色 #999999, 居中 |
| Back 按钮 |
13px, 色 rgb(87,105,247), 左对齐, cursor pointer |
| Teammate transcript |
与主消息列表相同的渲染规则 |
Agent 颜色分配 (来自 src/utils/theme.ts):
| 颜色名 |
Light 色值 |
用于标签边框和背景色 |
| red |
rgb(220,38,38) |
第 1 个 agent |
| blue |
rgb(37,99,235) |
第 2 个 agent |
| green |
rgb(22,163,74) |
第 3 个 agent |
| yellow |
rgb(202,138,4) |
第 4 个 agent |
| purple |
rgb(147,51,234) |
第 5 个 agent |
| orange |
rgb(234,88,12) |
第 6 个 agent |
| pink |
rgb(219,39,119) |
第 7 个 agent |
| cyan |
rgb(8,145,178) |
第 8 个 agent |
5.11 Scheduled 页面
┌──────────────────────────────────────────┐
│ Scheduled tasks [+ New task]│
│ │
│ Run tasks on a schedule or whenever │
│ you need them. Type /schedule in any │
│ existing session to set one up. │
│ │
│ ┌─────┐ │
│ │ ⏰ │ │
│ └─────┘ │
│ No scheduled tasks yet. │
└──────────────────────────────────────────┘
| 元素 |
规格 |
| 页面 padding |
32px 40px |
| 标题字号 |
24px, 字重 700 |
| 描述字号 |
14px, 色 #666666 |
| 空状态图标 |
48px, 居中 |
| 空状态文本 |
14px, 色 #999999, 居中 |
+ New task 按钮 |
背景 #3D3D3D, 色 #FFFFFF, 圆角 8px, padding 8px 16px |
5.12 New Scheduled Task 模态框
┌──────────────────────────────────────────────┐
│ New scheduled task │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ ℹ Local tasks only run while your │ │
│ │ computer is awake. │ │
│ └──────────────────────────────────────┘ │
│ │
│ Name * │
│ ┌──────────────────────────────────────┐ │
│ │ daily-code-review │ │
│ └──────────────────────────────────────┘ │
│ │
│ Description * │
│ ┌──────────────────────────────────────┐ │
│ │ Review yesterday's commits... │ │
│ └──────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ Look at the commits from the last │ │
│ │ 24 hours. Summarize what changed, │ │
│ │ call out any risky patterns... │ │
│ │ │ │
│ │ ⚙ Ask permissions ▾ Opus 4.7 1M ▾ │ │
│ │ [📁 Select folder] □worktree │ │
│ └──────────────────────────────────────┘ │
│ │
│ Frequency │
│ ┌──────────────────────────────────────┐ │
│ │ Daily ▾ │ │
│ └──────────────────────────────────────┘ │
│ ┌─────────┐ │
│ │ 09:00 │ │
│ └─────────┘ │
│ Scheduled tasks use a randomized delay... │
│ │
│ [Cancel] [Create task] │
└──────────────────────────────────────────────┘
| 元素 |
规格 |
| 模态框宽度 |
560px |
| 模态框圆角 |
16px |
| 模态框阴影 |
0 8px 32px rgba(0,0,0,0.15) |
| 遮罩层 |
rgba(0,0,0,0.5) |
| 模态框 padding |
24px |
| 标题字号 |
20px, 字重 700 |
| Info 横幅 |
背景 #F5F3EF, 圆角 8px, padding 12px 16px |
| Info 图标 |
ℹ, 16px, 色 #666666 |
| Label 字号 |
14px, 字重 500 |
| 必填标记 |
*, 色 #E53E3E |
| 输入框 |
高 40px, 圆角 8px, 边框 1px #E5E3DE |
| Prompt 输入框 |
最小高 120px, 圆角 12px |
| 频率下拉 |
高 40px |
| 时间选择器 |
宽 80px, 高 36px, 圆角 8px, 边框 1px #E5E3DE |
| 注释文本 |
12px, 色 #999999 |
| Cancel 按钮 |
背景 #FFFFFF, 边框 1px #E5E3DE, 色 #000000 |
| Create task 按钮 |
背景 #3D3D3D, 色 #FFFFFF |
| 按钮间距 |
8px |
| 按钮 padding |
8px 20px |
| 按钮圆角 |
8px |
5.13 活跃会话标题栏
Analyze project structure and codebase ▾ ▷ Preview ▾
| 元素 |
规格 |
| 标题字号 |
14px, 字重 500 |
| 标题色 |
#000000 |
| ▾ 图标 |
12px, 色 #999999 |
| Preview 按钮 |
字号 13px, 边框 1px #E5E3DE, 圆角 6px, padding 4px 10px |
| 区域高度 |
44px |
| 底部分隔线 |
1px solid #F0EDE8 |
六、交互状态规范
6.1 按钮状态
| 状态 |
主要按钮 |
次要按钮 |
| 默认 |
bg #3D3D3D, fg #FFFFFF |
bg #FFFFFF, border #E5E3DE |
| Hover |
bg #2D2D2D |
bg #F5F3EF |
| Active |
bg #1D1D1D |
bg #E5E3DE |
| Disabled |
bg #D0D0D0, fg #999999 |
bg #F5F3EF, fg #CCCCCC |
| Loading |
显示 spinner，文字不变 |
同上 |
6.2 输入框状态
| 状态 |
规格 |
| 默认 |
border #E5E3DE |
| Focus |
border #999999, box-shadow 0 0 0 3px rgba(153,153,153,0.1) |
| Error |
border rgb(171,43,63), box-shadow 0 0 0 3px rgba(171,43,63,0.1) |
| Disabled |
bg #F5F3EF, border #E5E3DE, 文字色 #CCCCCC |
6.3 导航项状态
| 状态 |
规格 |
| 默认 |
透明背景, 色 #666666 |
| Hover |
bg #F5F3EF, 色 #000000 |
| Active/选中 |
bg #F0EDE8, 色 #000000, 字重 500 |
6.4 下拉菜单项状态
| 状态 |
规格 |
| 默认 |
透明背景 |
| Hover |
bg #F5F3EF |
| 选中 |
右侧 ✓ 标记, 色 #000000 |
6.5 会话列表项状态
| 状态 |
规格 |
| 默认 |
透明背景 |
| Hover |
bg #F5F3EF |
| 选中 |
bg #F0EDE8, 左侧实心圆点 |
七、动画规范
7.1 过渡动画
| 动画 |
属性 |
时长 |
缓动 |
| 按钮悬停 |
background-color |
150ms |
ease |
| 导航项切换 |
background-color |
200ms |
ease-out |
| 下拉菜单展开 |
opacity + transform(Y) |
200ms |
ease-out |
| 下拉菜单收起 |
opacity + transform(Y) |
150ms |
ease-in |
| 模态框弹出 |
opacity + scale |
250ms |
cubic-bezier(0.16,1,0.3,1) |
| 模态框关闭 |
opacity + scale |
200ms |
ease-in |
| 折叠/展开 |
height |
200ms |
ease-out |
| 遮罩层 |
opacity |
200ms |
ease |
7.2 特效动画
| 动画 |
描述 |
| Clawd 吉祥物 |
像素眨眼动画，间隔 3-5s |
| ✦ 闪烁 |
opacity 0.4 ↔ 1.0，周期 1.5s |
| Spinner |
旋转 360°，周期 1s，linear |
| Shimmer |
品牌色 ↔ shimmer 色，周期 2s，ease-in-out |
八、页面交互流程
8.1 新会话流程
用户点击 "New session"
→ 侧边栏选中 "New session"
→ 主内容区显示 Code 空状态页
→ 用户在输入框输入 prompt
→ 按 Enter 发送
→ 创建新会话，侧边栏添加会话项
→ 主内容区切换到活跃会话页
→ 显示用户消息气泡
→ 显示 AI 加载状态 (✦ Crafting...)
→ AI 回复逐步流式渲染
→ 工具调用时显示折叠块
→ 需要权限时弹出权限请求对话框
→ 用户批准/拒绝 → 继续/终止工具执行
8.2 定时任务创建流程
用户点击侧边栏 "Scheduled"
→ 主内容区显示 Scheduled 页面
→ 用户点击 "+ New task"
→ 弹出 "New scheduled task" 模态框
→ 填写 Name, Description, Prompt, 选择 Frequency/Time
→ 选择权限模式和模型
→ 点击 "Create task"
→ 模态框关闭
→ 任务列表中显示新任务
8.3 权限模式切换流程
用户点击权限模式图标 (⚙)
→ 展开下拉菜单
→ 用户选择新模式（如 "Plan mode"）
→ 下拉菜单关闭
→ 权限图标更新为新模式图标 (📋)
→ 如果选择 "Bypass permissions"，弹出安全确认对话框
→ 用户确认后切换
8.4 模型切换流程
用户点击模型名称 (Opus 4.7 1M)
→ 展开下拉菜单（模型列表 + Effort 等级）
→ 用户选择新模型
→ 或调整 Effort 等级
→ 下拉菜单关闭
→ 模型选择器显示更新
→ 后续对话使用新模型
8.5 会话切换流程
用户在侧边栏点击历史会话
→ 该会话高亮选中
→ 主内容区加载该会话的消息历史
→ 滚动到最新消息
→ 输入框恢复为空/上次未发送的草稿
8.6 Agent Teams 流程
对话中 AI 调用 TeamCreate
→ 消息列表下方出现 Team 状态栏
→ 显示 Team 名称 + 成员标签列表
→ 各成员标签显示 ● running（黄色闪烁）
用户点击某个成员标签
→ 消息列表切换到该成员的 transcript
→ 显示 "Viewing: {name} transcript" 分隔线
→ 实时渲染该 agent 的消息流（工具调用、文本）
→ 底部显示 "← Back to Leader" 按钮
成员完成任务
→ 对应标签变为 ● completed（绿色实心）
→ Leader 视图收到 task-notification 消息
用户点击 "← Back to Leader"
→ 返回 Leader 的主对话流
→ Team 状态栏依然可见
九、响应式适配
9.1 窗口尺寸断点
| 断点 |
宽度 |
布局变化 |
| 紧凑 |
< 900px |
侧边栏可折叠，浮层显示 |
| 标准 |
900-1440px |
侧边栏固定 280px |
| 宽屏 |
> 1440px |
侧边栏可拉宽至 400px |
9.2 侧边栏折叠
- 窗口 < 900px 时，侧边栏默认折叠
- 可通过汉堡菜单图标展开
- 展开时覆盖在主内容区上方
- 点击主内容区或按 ESC 关闭
十、图标清单
| 用途 |
图标 |
说明 |
| New session |
+ |
加号，创建新会话 |
| Scheduled |
⏰ |
时钟 |
| Ask permissions |
⚙ |
齿轮 |
| Auto accept |
</> |
代码符号 |
| Plan mode |
📋 |
剪贴板 |
| Bypass |
⚠ |
警告三角 |
| 添加附件 |
+ |
圆形加号 |
| 语音输入 |
🎤 |
麦克风 |
| 停止生成 |
⏹ |
方形停止 |
| 折叠 |
▸ |
右三角 |
| 展开 |
▾ |
下三角 |
| GitHub |
🐙 |
GitHub logo |
| Git 分支 |
🔀 |
分支图标 |
| 前进 |
→ |
右箭头 |
| 后退 |
← |
左箭头 |
| 选中 |
✓ |
勾选 |
| 信息 |
ℹ |
圆形 i |
| Agent Running |
● |
6px 圆点，闪烁 |
| Agent Completed |
● |
6px 实心绿点 |
| Agent Failed |
● |
6px 实心红点 |
| Back to Leader |
← |
左箭头 + 文本 |
