# ChatGPT 当前界面观察记录

采集时间：2026-05-19  
采集方式：Chrome CDP，后台标签页访问 `https://chatgpt.com/`，提取 DOM、computed style 和截图。  
边界说明：以下是对当前线上页面可观察前端实现的归纳，不代表 OpenAI 内部私有 design system 文档。

## 页面结构

- `nav[aria-label="Sidebar"]`：侧边窄栏，宽约 52px。
- `nav[aria-label="Chat history"]`：聊天历史导航，展开宽约 260px。
- `main`：主工作区，包含欢迎语、composer 和快捷入口。
- `form.group/composer`：输入区容器，当前宽约 768px，高约 56px。
- `textarea[aria-label="Chat with ChatGPT"]`：存在 fallback textarea，当前由富输入层承载主交互。

## 可观察 design tokens / CSS custom properties

| Token | Value | 归纳用途 |
|---|---:|---|
| `--main-surface-primary` | `#fff` | 主表面 |
| `--main-surface-background` | `#fffffff2` | 页面背景 |
| `--sidebar-surface-secondary` | `#ececec` | 侧栏次级表面 |
| `--text-primary` | `#0d0d0d` | 主文本 |
| `--text-secondary` | `#5d5d5d` | 次级文本 |
| `--text-tertiary` | `#8f8f8f` | 弱文本/图标 |
| `--border-light` | `#0d0d0d0d` | 轻边界 |
| `--border-medium` | `#00000026` | 中边界 |
| `--radius-sm` | `.25rem` | 小圆角 |
| `--radius-md` | `.375rem` | 中圆角 |
| `--radius-lg` | `.5rem` | 大圆角 |
| `--radius-4xl` | `2rem` | 胶囊/大容器圆角 |
| `--text-sm` | `.875rem` | 小文本 |
| `--text-base` | `1rem` | 基本文本 |
| `--text-heading-app` | `1.75rem` | 应用级标题 |
| `--font-mono` | `ui-monospace, SFMono-Regular, ...` | 等宽字体 |
| `--selection` | `#007aff` | 文本选择色 |
| `--theme-submit-btn-bg` | `#000` | 发送按钮主题色 |
| `--theme-user-msg-bg` | `#e9e9e980` | 用户消息背景 |
| `--interactive-outline-focus-primary` | `#0d0d0d29` | 焦点外框 |

## 组件与交互观察

- 侧栏按钮：`button[aria-label="Open sidebar"]`，36x36px，8px 圆角。
- 关闭侧栏按钮：`button[data-testid="close-sidebar-button"]`，36x36px，8px 圆角。
- 个人菜单：`[data-testid="accounts-profile-button"]`，role 为 `button`，38x40px，10px 圆角。
- 历史项：链接高度约 36px，使用 `__menu-item` / `hoverable` / `transition-opacity` 等类名。
- 设计语言倾向：高留白、低对比灰阶、系统字体、功能优先、弱品牌化、focus/hover/pressed 状态通过 token 与类组合表达。

## 截图

- `assets/chatgpt-home.png`