AI产品的设计系统构建方法论

原创灵阙教研团队

B 基础进阶 | 约 10 分钟阅读更新于 2026-02-28

AI 导读

AI产品的设计系统构建方法论 Design Tokens、组件库与模式库的工程化实践 1. 为什么 AI 产品需要专属设计系统 AI 产品的界面有别于传统 Web 应用。对话式交互、流式输出、不确定性反馈、多模态内容混排等特性，使得通用的 UI 库（如 Material UI、Ant Design）无法直接满足需求。一个面向 AI 产品的设计系统，必须在基础组件之上，建立一套专为 AI...

AI产品的设计系统构建方法论

Design Tokens、组件库与模式库的工程化实践

1. 为什么 AI 产品需要专属设计系统

AI 产品的界面有别于传统 Web 应用。对话式交互、流式输出、不确定性反馈、多模态内容混排等特性，使得通用的 UI 库（如 Material UI、Ant Design）无法直接满足需求。一个面向 AI 产品的设计系统，必须在基础组件之上，建立一套专为 AI 交互模式设计的模式层。

通用设计系统:                    AI 产品设计系统:
+--------------------+          +--------------------+
| 组件 (Button等)     |          | AI 模式层           |
+--------------------+          | (对话/流式/不确定性) |
| 令牌 (Color等)      |          +--------------------+
+--------------------+          | 组件层              |
                                | (通用 + AI 专用)     |
                                +--------------------+
                                | 令牌层              |
                                | (品牌 + AI 语义)     |
                                +--------------------+

1.1 AI 产品的独特设计挑战

挑战	传统应用	AI 产品
输出确定性	输入确定，输出确定	输入相同，输出可能不同
等待体验	通常 < 1 秒	可能 5-30 秒（推理时间）
内容类型	预定义字段	动态混合（文本/代码/图片/表格）
交互模式	表单/列表/导航	对话/提示词/反馈循环
信任传达	一般不需要	必须建立（AI 可能犯错）
可解释性	不需要	用户需要理解 AI 决策过程

2. 设计系统三层架构

2.1 第一层：Design Tokens（设计令牌）

设计令牌是设计系统的原子单位，将视觉决策编码为可复用的键值对。

令牌层级:
+---------------------------+
| 全局令牌 (Global)          |
| blue-500: #3B82F6         |
| spacing-4: 16px           |
| radius-md: 8px            |
+---------------------------+
         |
         v
+---------------------------+
| 语义令牌 (Semantic)        |
| color-primary: {blue-500} |
| spacing-md: {spacing-4}   |
| radius-card: {radius-md}  |
+---------------------------+
         |
         v
+---------------------------+
| 组件令牌 (Component)       |
| btn-bg: {color-primary}   |
| card-radius: {radius-card}|
| chat-bubble-padding: 12px |
+---------------------------+

AI 产品的语义令牌扩展：

{
  "ai": {
    "color-thinking": "#8B5CF6",
    "color-confidence-high": "#22C55E",
    "color-confidence-medium": "#F59E0B",
    "color-confidence-low": "#EF4444",
    "color-citation": "#2563EB",
    "color-code-bg": "#1E293B",
    "color-streaming-cursor": "#3B82F6",
    "animation-thinking-pulse": "1.5s ease-in-out infinite",
    "animation-stream-fade": "150ms ease-out",
    "spacing-message-gap": "16px",
    "spacing-bubble-padding": "12px 16px",
    "radius-bubble": "16px",
    "radius-bubble-tail": "4px"
  }
}

2.2 第二层：组件库

AI 产品的组件可以分为三类：

通用组件（可复用现有 UI 库）：

组件	来源	定制程度
Button	通用	低（令牌覆盖即可）
Input	通用	中（需要扩展为 Prompt Input）
Card	通用	低
Avatar	通用	低
Tooltip	通用	低
Modal	通用	低

AI 专用组件（需要从头构建）：

组件	功能	关键设计点
ChatBubble	对话气泡	区分用户/AI，支持多模态内容
StreamingText	流式文本	逐字显示 + 光标动画
ThinkingIndicator	思考中状态	脉冲动画 + 预计时间
CodeBlock	代码展示	语法高亮 + 复制按钮 + 语言标签
CitationCard	引用卡片	来源链接 + 可信度标记
ConfidenceBar	置信度指示	色彩梯度 + 数值
PromptInput	提示词输入	多行 + 附件 + 快捷操作
FeedbackWidget	反馈组件	赞/踩 + 文字反馈
ModelSelector	模型选择器	模型对比 + 能力标签
TokenCounter	Token 计数	实时计数 + 限额警告

复合模式（由多个组件组合）：

ChatConversation:
+------------------------------+
| [ModelSelector]               |
+------------------------------+
| [ChatBubble: user]            |
| [ChatBubble: ai]              |
|   [StreamingText]             |
|   [CodeBlock]                 |
|   [CitationCard]              |
| [ChatBubble: user]            |
| [ThinkingIndicator]           |
+------------------------------+
| [PromptInput]                 |
| [TokenCounter] [FeedbackWidget]|
+------------------------------+

2.3 第三层：模式库（Pattern Library）

模式是针对特定用户任务的完整交互方案：

模式	描述	包含组件
对话模式	多轮对话交互	ChatBubble + PromptInput + History
生成模式	长内容生成（文章/代码）	StreamingText + ProgressBar + Preview
探索模式	数据分析/可视化	ChartPanel + QueryInput + InsightCard
审核模式	AI 输出人工审核	DiffView + ApproveButton + EditPanel
配置模式	模型/参数配置	ModelSelector + SliderGroup + PresetPanel

3. 组件设计规范

3.1 ChatBubble 组件

interface ChatBubbleProps {
  role: 'user' | 'assistant' | 'system';
  content: MessageContent;      // 文本/代码/图片/混合
  timestamp?: Date;
  status?: 'sending' | 'sent' | 'error' | 'streaming';
  avatar?: AvatarConfig;
  actions?: BubbleAction[];     // 复制/重试/编辑/反馈
  citations?: Citation[];
  confidence?: number;          // 0-1
}

type MessageContent =
  | { type: 'text'; text: string }
  | { type: 'code'; language: string; code: string }
  | { type: 'image'; src: string; alt: string }
  | { type: 'table'; headers: string[]; rows: string[][] }
  | { type: 'mixed'; blocks: MessageContent[] };

视觉规范：

用户气泡:                     AI 气泡:
+-------------------+         +-------------------+
| 右对齐             |         | 左对齐             |
| 主色调背景         |         | 浅灰/白色背景      |
| 白色文字           |         | 深色文字           |
| 圆角: 16px         |         | 圆角: 16px         |
| 右下圆角: 4px      |         | 左下圆角: 4px      |
+-------------------+         +-------------------+
                              | [操作栏: 复制|编辑|反馈] |
                              +-------------------+

3.2 StreamingText 组件

interface StreamingTextProps {
  text: string;
  isStreaming: boolean;
  speed?: 'fast' | 'normal' | 'slow';  // 字符显示速度
  cursor?: boolean;                     // 显示闪烁光标
  onComplete?: () => void;
}

/* 流式光标动画 */
.streaming-cursor::after {
  content: '|';
  color: var(--ai-color-streaming-cursor);
  animation: blink 0.8s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* 新文字淡入效果 */
.stream-char {
  animation: stream-fade-in var(--ai-animation-stream-fade) ease-out;
}

@keyframes stream-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

3.3 ThinkingIndicator 组件

简洁版:              详细版:
[...]                正在分析您的问题...
(脉冲动画)           [=====>------] 预计 5 秒
                     模型: Claude Sonnet

/* 三点脉冲动画 */
.thinking-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ai-color-thinking);
  animation: thinking-pulse 1.4s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinking-pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

4. 设计系统工程化

4.1 目录结构

design-system/
  tokens/
    global.json           # 颜色/字号/间距原始值
    semantic.json          # 语义映射
    component.json         # 组件级令牌
    ai.json               # AI 专用令牌
    themes/
      light.json
      dark.json
  components/
    primitives/            # 基础组件
      Button/
        Button.tsx
        Button.stories.tsx
        Button.test.tsx
        Button.tokens.json
      Input/
      Card/
    ai/                    # AI 专用组件
      ChatBubble/
      StreamingText/
      ThinkingIndicator/
      PromptInput/
      CodeBlock/
      ConfidenceBar/
    patterns/              # 复合模式
      ChatConversation/
      GenerationPanel/
      ReviewWorkflow/
  styles/
    tokens.css            # CSS 自定义属性
    base.css              # 基础样式
    utilities.css         # 工具类
  docs/
    getting-started.md
    design-principles.md
    component-catalog.md
  tools/
    token-transform.js    # 令牌转换工具
    icon-generator.js     # 图标生成
    theme-preview.js      # 主题预览

4.2 令牌构建管线

tokens/*.json
     |
     v
+--------------------+
| Style Dictionary   |  (或 Cobalt UI / Figma Tokens)
| 令牌转换引擎        |
+--------------------+
     |
     +---> CSS Custom Properties   (Web)
     |       :root { --color-primary: #3B82F6; }
     |
     +---> TypeScript Constants    (JS 引用)
     |       export const colorPrimary = '#3B82F6';
     |
     +---> Tailwind Config         (Tailwind 集成)
     |       theme.extend.colors.primary: '#3B82F6'
     |
     +---> Figma Variables         (设计工具同步)
     |
     +---> Swift / Kotlin          (移动端)

// style-dictionary 配置
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'styles/',
      files: [{
        destination: 'tokens.css',
        format: 'css/variables',
        options: { outputReferences: true }
      }]
    },
    ts: {
      transformGroup: 'js',
      buildPath: 'dist/',
      files: [{
        destination: 'tokens.ts',
        format: 'javascript/es6'
      }]
    },
    tailwind: {
      transformGroup: 'js',
      buildPath: 'dist/',
      files: [{
        destination: 'tailwind-tokens.js',
        format: 'custom/tailwind'
      }]
    }
  }
};

4.3 组件开发工作流

设计 (Figma)
    |
    v
令牌提取 (Figma Tokens 插件)
    |
    v
令牌同步 (Style Dictionary)
    |
    v
组件开发 (React/Vue + Storybook)
    |
    v
视觉回归测试 (Chromatic / Percy)
    |
    v
文档生成 (Storybook Docs)
    |
    v
发布 (npm 包)

5. 响应式与自适应策略

5.1 AI 产品的布局断点

断点	宽度范围	AI 布局策略
移动端	< 640px	全屏对话，隐藏侧栏
平板	640-1024px	可折叠侧栏，对话为主
桌面	1024-1440px	对话 + 侧栏并排
宽屏	> 1440px	对话 + 侧栏 + 预览面板

5.2 对话布局适配

/* 移动端: 全宽气泡 */
@media (max-width: 640px) {
  .chat-bubble {
    max-width: 90%;
  }
  .prompt-input {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

/* 桌面: 限制气泡最大宽度 */
@media (min-width: 1024px) {
  .chat-bubble {
    max-width: 680px;
  }
  .chat-container {
    display: grid;
    grid-template-columns: 1fr 320px;  /* 对话 + 侧栏 */
  }
}

6. 可访问性集成

6.1 AI 特有的可访问性需求

需求	实现方式
流式文本对屏幕阅读器友好	aria-live="polite" + 完成后通知
思考状态可感知	role="status" + aria-busy="true"
代码块可导航	语义化标记 + 键盘复制
置信度可感知	数值 + 颜色 + 文字描述
对话历史可遍历	列表语义 + 快捷键跳转

<!-- 流式文本的无障碍标记 -->
<div
  role="log"
  aria-label="AI 回复"
  aria-live="polite"
  aria-atomic="false"
>
  <p>正在生成回复...</p>
  <!-- 流式内容在这里累积 -->
</div>

<!-- 思考状态 -->
<div role="status" aria-busy="true" aria-label="AI 正在思考">
  <span class="thinking-dots" aria-hidden="true">
    <span></span><span></span><span></span>
  </span>
  <span class="sr-only">AI 正在处理您的请求，请稍候</span>
</div>

7. 版本管理与治理

7.1 语义化版本

设计系统版本策略:
  MAJOR (主版本): 破坏性变更（令牌重命名/删除组件）
  MINOR (次版本): 新增组件/令牌/功能
  PATCH (补丁):   Bug 修复/样式微调

示例:
  v1.0.0 -> v1.1.0: 新增 StreamingText 组件
  v1.1.0 -> v1.2.0: 新增暗色主题
  v1.2.0 -> v1.2.1: 修复 ChatBubble 在移动端的溢出
  v1.2.1 -> v2.0.0: 令牌命名规范重构

7.2 设计系统健康度指标

指标	目标	衡量方式
组件覆盖率	> 80%	产品中使用设计系统组件的比例
令牌覆盖率	> 90%	硬编码值 vs 令牌引用
一致性评分	> 85%	视觉回归测试通过率
文档覆盖率	100%	每个组件都有 Storybook 文档
无障碍评分	>= AA	axe 自动检测通过率
使用满意度	> 4/5	开发者季度调研

8. AI 设计系统的差异化模式

8.1 信任建立模式

可信度指示器:
  高置信度:   [====] 95%  (绿色)
  中置信度:   [===.] 72%  (黄色)
  低置信度:   [==..] 45%  (红色) + "建议人工核实"

来源引用:
  [1] 引用来源标记 -> 悬停显示来源详情

免责声明:
  "AI 生成内容，可能存在错误，请核实关键信息。"
  (固定底部，不可隐藏)

8.2 渐进式披露模式

第一层: 简要回答
  "本季度营收增长 45%。"

第二层: 展开详情（点击展开）
  "Q1: 2300万 → Q4: 4500万，其中..."

第三层: 原始数据（弹出面板）
  [完整数据表格 + 图表]

第四层: AI 推理过程（折叠区域）
  "我根据以下数据得出结论: ..."

9. 工具链推荐

工具	用途	集成方式
Figma + Figma Tokens	设计 + 令牌管理	插件
Style Dictionary	令牌构建	CLI/Node
Storybook	组件文档 + 开发	Dev Server
Chromatic	视觉回归测试	CI
axe-core	无障碍自动测试	CI + IDE
Tailwind CSS	样式实现	Build
Radix UI	无障碍基础组件	依赖
Framer Motion	动画引擎	依赖

10. 实施路线图

阶段	时间	目标
基础搭建	第 1-2 周	令牌体系 + 5 个核心组件 + Storybook
AI 组件	第 3-4 周	ChatBubble + StreamingText + ThinkingIndicator
模式库	第 5-6 周	对话模式 + 生成模式
主题化	第 7 周	暗色主题 + 品牌定制
文档化	第 8 周	完整文档 + 使用指南 + 最佳实践

Maurice | maurice_wen@proton.me