概述
定义 Lucid UI 的视觉设计规范，确保 AI Agent 平台的一致性体验。
核心设计哲学
基于 Monogent Logo 的双面设计（德谟克利特 vs 柏拉图），定义双主题系统：
🔷 Rational 理性蓝
- 色值：
#3B82F6
- 代表：效率、精准、计算
- 冷色调科技蓝
- 适用：数据展示、列表、用户指令、主按钮
🔶 Sentient 感性金
- 色值：
#D4A012
- 代表：感性、思维、概率
- 暖色调智慧金
- 适用：AI 思考状态、重要提示、创意场景
场景色调决策原则
| 场景 |
色调 |
理由 |
| Agent 列表 |
Rational 蓝 |
结构化数据展示，效率、精准 |
| 用户消息气泡 |
Rational 蓝 |
发出指令是精准的 |
| Agent 消息气泡 |
灰底 (gray-100) |
中性，靠头像区分不同 Agent |
| Agent 思考中 |
Sentient 金 |
思考是概率、推理、感性的过程 |
| 主按钮 |
Rational 蓝 |
行动是确定性的 |
| 警告/重要提示 |
Sentient 金 |
需要人关注和思考 |
| 错误状态 |
Error 红 |
通用语义 |
1. Agent 身份表达
| 要素 |
规范 |
理由 |
| 头像形状 |
圆形，40px |
社交软件标准，微信/Slack/Discord 都是圆形 |
| 头像尺寸 |
sm: 32px, md: 40px, lg: 48px |
列表用 sm，对话用 md，详情用 lg |
| 名字字重 |
font-medium (500) |
够突出但不抢眼 |
| 名字颜色 |
gray-900 |
高对比，清晰可读 |
| 状态指示器 |
12px 圆点，右下角，白色描边 |
绿色在线/灰色离线/金色忙碌 |
2. 消息气泡
| 要素 |
Human |
Agent |
| 位置 |
右侧 |
左侧 |
| 背景色 |
rational-500 (蓝) |
gray-100 |
| 文字色 |
white |
gray-900 |
| 圆角 |
16px，右下 4px |
16px，左下 4px |
| 最大宽度 |
70% |
70% |
| 头像 |
不显示（自己发的） |
显示在左侧 |
多 Agent 区分：靠头像 + 名字，不靠颜色。保持 Agent 气泡都是 gray-100，避免花哨。
3. 状态表达
| 状态 |
视觉 |
| Thinking |
三个点脉冲动画，sentient-500 (金色) |
| Streaming |
竖线光标闪烁，gray-400 |
| Error |
气泡左侧红色竖条，error-500 |
Thinking 用金色 — 这是 Sentient 主题的核心应用场景，AI 在"思考"正是感性时刻。
4. @Mention 样式
| 要素 |
规范 |
| 背景 |
rational-100 (浅蓝) |
| 文字 |
rational-600 |
| 圆角 |
4px |
| 内边距 |
px-1 |
| 交互 |
hover 时 rational-200 |
5. 视觉示意
┌─────────────────────────────────────────────────┐
│ ○ DefaultClaudeAgent ● │ ← 绿点表示在线
├─────────────────────────────────────────────────┤
│ │
│ ┌──────┐ ┌────────────────────────┐ │
│ │ 头像 │ │ Agent 回复内容 │ │ ← 左侧，灰底
│ └──────┘ │ 这是 @Sean 要求的... │ │
│ └────────────────────────┘ │
│ │
│ ┌────────────────────────┐ ┌──────┐ │
│ │ 用户消息 │ │ 隐藏 │ │ ← 右侧，蓝底白字
│ └────────────────────────┘ └──────┘ │
│ │
│ ┌──────┐ ┌──────────┐ │
│ │ 头像 │ │ ● ● ● │ │ ← 金色脉冲动画
│ └──────┘ └──────────┘ │
│ │
├─────────────────────────────────────────────────┤
│ 📷 📎 │ 输入消息... @ │ ➤ │
└─────────────────────────────────────────────────┘
交付物
设计原则回顾
- 白色基底：拒绝深色主题
- 双主题：Rational (蓝) + Sentient (金)
- 拒绝紫色：不跟风 AI 紫色渐变
- 清晰优先：Lucid = 清晰明澈
