前端和体验设计视角下的 Design System 手册

Front-end × UIUX × Design Language

前端和体验设计视角下的 Design System 手册

本手册以 ChatGPT 为示例对象，把设计系统拆成可命名、可引用、可实现、可治理的完整模块。每个核心名词同时给出英文、中文规范名称、设计语言叫法和前端叫法。

7层级：原则、品牌、基础、tokens、组件、模式、治理

64+核心术语：英中名称、设计叫法、前端叫法、引用关系

8行业来源：W3C、WCAG、Material、Carbon、USWDS 等

1ChatGPT 示例系统：从可观察页面反推公开层 design system

范围与证据

Design System 不是 UI Kit，也不是组件库。它是把产品体验决策沉淀成设计资产、代码资产、行为规范、内容规范和治理机制的系统。这里的 ChatGPT 版本是“可观察设计系统”，不声称代表 OpenAI 内部私有文档。

资料类型

公开行业规范、一手设计系统文档、当前 ChatGPT 页面 DOM/CSS 观察、手册作者的专业归纳。

时间范围

行业资料按 2026-05-19 可访问版本引用；ChatGPT 页面采集于 2026-05-19。

使用方式

行业资料用于划分模块和术语边界；ChatGPT 观察用于示例，不复制私有实现。

行业共识可以压缩成一句话：设计系统是 reusable design decisions 的运行机制，组件库只是其中的代码化结果。

Design System 的逐级结构

从上到下，设计系统应从“为什么这样设计”逐级落到“页面怎么组成、代码怎么引用、谁来维护”。每一层都引用上一层，并为下一层提供约束。

1. Strategy体验战略
目标、人群、场景、价值承诺

2. Principles设计原则
一致性、效率、信任、安全

3. Brand品牌语言
语气、人格、视觉识别

4. Foundations基础规范
颜色、字体、空间、动效

5. Tokens设计变量
primitive、semantic、component

6. Components组件
结构、状态、变体、API

7. Patterns体验模式
任务流、页面模板、治理

划分规则

能否被多处复用：只出现一次的是页面设计，多处复用才进入系统。
是否有语义：`#0d0d0d` 是 primitive，`text.primary` 是 semantic，`button.label.primary` 是 component token。
是否承担行为：只有样式是 foundation，有交互状态和可访问性要求才是 component。
是否跨组件协同：登录、搜索、对话、错误恢复属于 pattern，不应塞进单个组件。

引用关系

strategy
  -> principles
    -> brand language
      -> foundations
        -> primitive tokens
          -> semantic tokens
            -> component tokens
              -> component props and states
                -> patterns
                  -> product flows
                    -> governance and release

核心术语矩阵

下表把设计语言、设计工具和前端工程里的同一概念对齐。实际团队应把这一张表放进 design system 首页，避免设计和开发说同一个词却指不同对象。

English / 中文规范名称	设计语言中叫什么	前端中叫什么	划分规则与引用关系	ChatGPT 示例
Design System设计系统	体验和视觉决策体系	组件库 + token 包 + 文档站 + 发布流程	覆盖原则、资产、组件、模式、治理，不等于 UI Kit。	ChatGPT 的侧栏、composer、消息、工具入口、可访问标签与 token 共同构成可观察系统。
Design Language设计语言	品牌化体验语法	全局 CSS、主题、组件默认值	决定系统的性格，引用品牌与原则。	克制、中性、高留白、低干扰、任务优先。
Design Principles设计原则	体验判断准则	PR / 评审 checklist	用于解决冲突，不直接等同样式。	减少认知负担、让输入优先、错误可恢复、隐私可信。
Foundation基础规范	颜色、字体、空间、栅格、图标、动效	CSS variables、base styles、utility classes	不依赖具体组件，是组件的原料层。	`--text-primary`、`--radius-lg`、系统字体、侧栏宽度。
Design Token设计令牌 / 设计变量	可命名设计决策	CSS custom property、JSON token、theme variable	按 W3C DTCG 应具备 name、value、type，可分组和引用。	`--main-surface-primary: #fff`。
Primitive Token原始令牌	基础值 / 色阶 / 尺寸阶梯	`color.gray.900`、`space.4`	不带用途，只描述值。	`#0d0d0d`、`.5rem`。
Semantic Token语义令牌	有用途的视觉角色	`text.primary`、`surface.default`	引用 primitive，跨主题不改名只改值。	`--text-primary`、`--border-light`。
Component Token组件令牌	组件局部样式角色	`button.primary.bg`、`composer.radius`	引用 semantic，用于组件内部精调。	`--theme-submit-btn-bg`、composer 胶囊圆角。
Alias / Reference别名 / 引用	token 指向另一个 token	`{color.gray.900}`、`var(--text-primary)`	保证主题切换和批量替换。	按钮图标色引用 `icon.primary`。
Theme主题	一组 token 值集合	`data-theme`、theme object	token 名称稳定，值随主题变化。	默认浅色、深色、高对比、品牌色模式。
Mode模式	亮暗、密度、平台、语言模式	media query、CSS layer、runtime context	主题处理视觉，模式处理上下文。	桌面宽屏侧栏展开，移动端底部/抽屉模式。
Component组件	可复用 UI 单元	React/Vue/Web Component	必须有 anatomy、variants、states、props、a11y、tokens。	SidebarItem、IconButton、Composer、MessageBubble。
Anatomy组件结构	部件拆解	DOM slots / subcomponents	说明容器、图标、标签、辅助文本、动作区。	Composer = container + input + tool buttons + submit。
Variant变体	组件类型	prop / enum / class modifier	变体改变用途或优先级，不只是颜色。	Button: icon、primary、ghost、danger。
State状态	默认、悬停、聚焦、按下、禁用、加载、错误	pseudo-class、ARIA state、state machine	状态必须能被键盘、触控和辅助技术触达。	侧栏项 hover 展示更多操作，focus 有 ring。
Pattern体验模式	跨组件任务解法	composition、route pattern、workflow	由多个组件协作完成一个可复用任务。	新建对话、切换模型、上传文件、错误重试。
Template页面模板	页面级布局骨架	layout component、route shell	固定信息架构和响应式行为。	Chat workspace = sidebar + top bar + main + composer。
Content Design内容设计	语气、标签、错误文案、空状态	message catalog、i18n key	所有可见文案都应有语义、语气和翻译策略。	“What are you working on?”、工具入口标签。
Accessibility可访问性	包容性体验规范	semantic HTML、ARIA、keyboard test	按 WCAG 2.2 和组件级用例验收。	`aria-label="Chat history"`、`aria-label="Open sidebar"`。
Design Asset设计资产	Figma library、icon、illustration	SVG package、asset pipeline	资产必须有命名、版本、授权和引用方式。	工具图标、侧栏图标、账户头像。
API Contract组件接口契约	设计属性和可配置项	props、events、slots、types	前端必须能表达设计变体、状态和内容槽位。	`Composer({ value, disabled, tools, onSubmit })`。
Governance治理机制	贡献、审核、发布、废弃	RFC、semver、changelog、CI	保证系统长期不失控。	新增工具入口前先评估是否复用现有 Button/Menu。

逐项定义示例库

这一段专门补齐“看得懂、做得出”的部分：每个术语都给设计师可直接理解的视觉样本，同时给前端能落地的 token、props、CSS 或 JSON 参数。真实团队可以把这些卡片拆成 Figma component spec、Storybook stories 和代码包文档。

Token 引用关系

W3C DTCG 把 token 标准化为可交换数据。实际工程中，最稳的层级是 primitive → semantic → component → component instance。不要让业务页面直接引用原始色值。

primitive.gray.975#0d0d0d

semantic.text.secondary引用灰阶，用于次要文本

semantic.sidebar.surface引用灰阶，用于侧栏表面

component.message.user.bg用户消息背景

{
  "color": {
    "gray": {
      "975": { "$type": "color", "$value": "#0d0d0d" }
    },
    "text": {
      "primary": { "$type": "color", "$value": "{color.gray.975}" },
      "secondary": { "$type": "color", "$value": "#5d5d5d" }
    },
    "composer": {
      "submitBg": { "$type": "color", "$value": "{color.text.primary}" }
    }
  },
  "radius": {
    "lg": { "$type": "dimension", "$value": "0.5rem" },
    "pill": { "$type": "dimension", "$value": "2rem" }
  }
}

:root {
  --primitive-gray-975: #0d0d0d;
  --text-primary: var(--primitive-gray-975);
  --text-secondary: #5d5d5d;
  --composer-submit-bg: var(--text-primary);
  --radius-lg: .5rem;
  --radius-pill: 2rem;
}

.composer {
  border-radius: var(--radius-pill);
  color: var(--text-primary);
}

type ComposerProps = {
  value: string;
  placeholder?: string;
  disabled?: boolean;
  tools?: ComposerTool[];
  tone?: "default" | "creative" | "research";
  onSubmit: (value: string) => void;
};

Foundations 基础层

基础层是组件之前的公共语言。Atlassian、Carbon、USWDS 等成熟系统都把颜色、字体、空间、栅格、内容、可访问性和视觉资产放在 foundations 或 elements 中。

Color / 颜色

色板、语义色、状态色、对比度、主题映射。前端落地为 color tokens 与 CSS variables。

Typography / 字体排印

字族、字阶、字重、行高、段落、代码字体。前端落地为 text styles、utility class。

Spacing / 间距

空间刻度、内外边距、堆叠距离、密度。前端落地为 spacing scale。

Grid / 栅格

列、槽、断点、内容最大宽度、布局容器。前端落地为 layout primitives。

Radius / 圆角

容器、按钮、卡片、胶囊、浮层圆角。前端落地为 radius tokens。

Elevation / 层级

阴影、描边、遮罩、z-index、浮层堆叠。前端落地为 shadow tokens 和 portal 规则。

Motion / 动效

时长、缓动、进入退出、反馈、减少动效。前端落地为 animation tokens。

Iconography / 图标

图标网格、描边粗细、语义、可点击热区。前端落地为 SVG sprite 或 icon package。

Content / 内容

术语、语气、按钮文案、错误、空状态、国际化。前端落地为 i18n keys。

Accessibility / 可访问性

键盘、焦点、对比度、名称角色值、目标尺寸。前端落地为 a11y tests。

Data Viz / 数据可视化

图表色、图例、空值、异常、标注。前端落地为 chart tokens。

Localization / 本地化

语言长度、RTL、日期、货币、语气差异。前端落地为 locale adapters。

Components 组件层

组件不是“画出来的一个按钮”，而是同时包含结构、变体、状态、内容、行为、token、可访问性、测试和版本的可复用契约。

What are you working on?

Chat with ChatGPT

Create an image Write or edit Look something up

组件文档必须包含的信息

Purpose / 用途：组件解决什么用户问题，何时不要用。
Anatomy / 结构：容器、图标、文本、辅助信息、动作区、槽位。
Variants / 变体：尺寸、层级、强调程度、平台差异、密度。
States / 状态：default、hover、focus、active、disabled、loading、error、selected。
Props / 接口：属性、事件、slot、默认值、受控/非受控模式。
Tokens / 变量：组件 token 引用哪些 semantic token。
A11y / 可访问性：role、name、keyboard、focus order、screen reader 文案。
Testing / 测试：视觉回归、交互、键盘、移动端、暗色模式。

ChatGPT 组件清单示例

Navigation

Sidebar、Rail、HistoryItem、ProjectItem、Menu、ProfileButton。

Conversation

MessageBubble、AssistantMessage、UserMessage、ReasoningBlock、Citation、CodeBlock。

Composer

PromptInput、SubmitButton、ToolButton、AttachmentTray、ModelPicker、SuggestionChip。

Feedback

Toast、InlineError、LoadingSkeleton、Progress、RegenerateAction。

Creation Tools

ImageAction、CanvasAction、SearchAction、FileUpload、VoiceInput。

Trust & Safety

SystemNotice、SensitiveActionConfirm、PolicyHint、PrivacyLabel。

Patterns 模式层

Pattern 是跨组件的用户任务解法。Material 将组件按目的分类，USWDS 强调 pattern guidance，成熟系统不会把复杂任务流压进单个组件。

Onboarding / 首次使用

空白状态、能力示例、隐私说明、渐进披露。

Prompting / 输入任务

输入、补全、工具选择、附件、提交、撤销。

Conversation / 对话流

消息生成、停止、重试、引用、上下文管理。

Error Recovery / 错误恢复

网络失败、权限不足、模型不可用、文件失败。

Progressive Disclosure / 渐进披露

高级工具、长输出、推理细节、来源展开。

Trust / 信任建立

来源、限制说明、数据使用提示、敏感操作确认。

Keyboard / 键盘效率

快捷键、焦点恢复、命令菜单、历史导航。

Responsive / 响应式

桌面侧栏、移动抽屉、触控目标、输入区固定。

Internationalization / 国际化

多语言文本长度、CJK 排版、RTL、地区格式。

以 ChatGPT 建立可代表性的设计系统

如果把 ChatGPT 抽象成 design system，核心不是“聊天页面”，而是“人和模型协作的工作台”。因此系统必须覆盖输入、对话、工具、上下文、信任、创作资产和多模态任务。

设计语言定位

品牌人格：冷静、可靠、低姿态、高能力。
视觉策略：弱品牌色，强调内容和输入，使用灰阶与高留白降低压力。
交互策略：用户输入始终是主动作，工具以 chips、菜单和图标逐步浮现。
系统策略：状态透明、错误可恢复、上下文可管理、隐私边界明确。

前端系统定位

Design tokens：颜色、圆角、文本、边界、交互状态全部 token 化。
Composable components：导航、消息、composer、工具入口可组合。
State machines：生成中、停止中、失败、重试、上传、权限请求需要清晰状态机。
Runtime adaptation：按模型能力、账号权限、设备宽度和语言环境动态调整。

ChatGPT 信息模块	设计语言名称	前端名称	必须记录的信息
Chat Workspace / 对话工作台	主任务画布	`AppShell`, `ConversationLayout`	侧栏、主区、composer、顶部栏、响应式断点、焦点恢复。
Composer / 输入器	意图输入中心	`Composer`, `PromptInput`	占位文案、快捷工具、附件、发送、停止、键盘行为、错误。
Message / 消息	内容承载单元	`Message`, `MessageBlock`	角色、流式生成、引用、代码、图片、操作、反馈。
Tool Entry / 工具入口	能力发现入口	`ToolChip`, `ActionMenu`	能力名称、图标、权限、禁用原因、结果回填。
Conversation History / 历史	记忆导航	`HistoryNav`, `HistoryItem`	分组、搜索、重命名、删除、溢出菜单、隐私提示。
Model & Mode / 模型与模式	能力档位	`ModelPicker`, `ModeSwitch`	模型名、能力说明、成本、不可用状态、默认策略。
Trust Layer / 信任层	边界与透明度	`SafetyNotice`, `SourceCitation`	来源、政策提示、敏感数据、免责声明、确认弹窗。
Creation Surface / 创作表面	生成结果编辑区	`Canvas`, `ArtifactPanel`	版本、编辑、导出、撤销、权限、协作。

完整信息模块清单

一个能代表 ChatGPT 级产品的 design system，至少要包含以下模块。少了其中任何一类，都会在跨团队、跨平台、跨主题、跨版本时产生不可控成本。

Vision / 愿景
Product Principles / 产品体验原则
Brand Voice / 品牌语气
Visual Identity / 视觉识别
Accessibility Policy / 可访问性政策
Content Style Guide / 内容风格指南
Terminology / 术语库
Localization / 本地化规范
Design Tokens / 设计令牌
Theme & Modes / 主题与模式
Color / 颜色系统
Typography / 字体排印
Spacing / 间距系统
Grid & Layout / 栅格布局
Radius & Border / 圆角边界
Elevation / 层级阴影
Motion / 动效系统
Iconography / 图标系统
Illustration / 插画系统
Sound & Haptics / 声音与触感
Data Visualization / 数据可视化
Component Library / 组件库
Component API / 组件接口
Component Anatomy / 组件结构
Variants / 变体
States / 状态
Interaction Patterns / 交互模式
Page Templates / 页面模板
Product Flows / 产品流程
AI Patterns / AI 交互模式
Prompt Patterns / 提示词交互模式
Error Patterns / 错误模式
Empty & Loading / 空与加载状态
Privacy & Safety / 隐私安全
Design Assets / 设计资产
Figma Library / Figma 库
Code Packages / 代码包
Documentation Site / 文档站
Contribution Model / 贡献机制
Review Workflow / 审核流程
Versioning / 版本管理
Deprecation / 废弃策略
Release Notes / 发布说明
Quality Gates / 质量门禁
Adoption Metrics / 采用度指标
Support Channel / 支持渠道

治理与交付

设计系统真正的成本不是第一版搭建，而是版本演进。顶级系统需要把设计评审、代码发布、文档更新、可访问性测试和废弃策略绑定成同一个流程。

Proposal / 提案

新增组件或 token 前先写 RFC：问题、替代方案、影响范围、迁移成本。

Design Review / 设计评审

检查原则、内容、可访问性、视觉一致性、跨平台适配。

Engineering Review / 工程评审

检查 API、性能、SSR、包体积、状态机、测试覆盖。

Release / 发布

语义化版本、changelog、迁移指南、设计库同步。

Adoption / 采用

统计组件使用率、重复实现、废弃组件引用和异常覆盖。

Sunset / 废弃

标记 deprecated、提供替代、自动 codemod、设置移除版本。

验收口径

设计侧：Figma 组件、变量、文案、状态、响应式和可访问性说明完整。
前端侧：token 包、组件包、类型定义、Storybook/文档示例、单测和视觉回归完整。
体验侧：覆盖真实用户任务，不只覆盖静态页面。
治理侧：有 owner、版本、废弃策略、采用指标和反馈入口。

参考资料明细

以下资料用于支撑本手册的模块划分、术语边界和工程落地方式。内部采集文件位于本任务目录的 `sources/`。

W3C Design Tokens Format Module 2025.10：用于 token、group、alias/reference、composite token 和跨工具交换格式。
W3C WCAG 2.2：用于可访问性目标、成功标准和组件验收要求。
Google Material Components overview：用于 design system 组成和组件按目的分类。
Atlassian Design System Foundations：用于 foundations 模块划分。
IBM Carbon Themes：用于 theme、token、role、value 的关系。
U.S. Web Design System：用于 components、patterns、tokens、utilities 与 guidance 关系。
Adobe Spectrum Design Data：用于 component API schema、tokens、registry、states、variants、glossary。
Figma Components, styles, and shared libraries：用于设计工具侧 components、styles、libraries 与命名实践。
本地 ChatGPT 观察记录：用于 ChatGPT 当前可见界面结构和 token 示例。
本地行业参考资料记录：用于本手册引用资料归档。