extract

识别可复用的模式、组件和设计令牌，然后将它们提取并整合到设计系统中，以便系统性地复用。

探索

分析目标区域，找出可提取的内容：

1. 查找设计系统：定位设计系统、组件库或共享 UI 目录（搜索“design system”“ui”“components”等）。了解其结构：

   • 组件组织方式和命名约定
   • 设计令牌结构（如有）
   • 文档模式
   • 导入／导出约定

   至关重要：如果不存在设计系统，请先询问，再创建。首先了解首选位置和结构。

2. 识别模式：查找以下内容：

   • 重复使用的组件：多次使用的相似 UI 模式（按钮、卡片、输入框等）
   • 硬编码的值：应设为令牌的颜色、间距、排版和阴影
   • 不一致的变体：同一概念的多种实现（例如 3 种不同的按钮样式）
   • 可复用的模式：值得系统化的布局模式、组合模式和交互模式

3. 评估价值：并非所有内容都应该提取。请考虑：

   • 是否已使用 3 次以上，或很可能会复用？
   • 系统化处理能否提升一致性？
   • 这是通用模式，还是特定场景下的模式？
   • 维护成本与收益相比如何？

规划提取方案

制定系统化的提取方案：

• 要提取的组件：哪些 UI 元素应成为可复用组件？
• 要创建的令牌：哪些硬编码值应成为设计令牌？
• 要支持的变体：每个组件需要支持哪些变体？
• 命名约定：组件名、令牌名和属性名应符合现有模式
• 迁移路径：如何重构现有用法，使其采用新的共享版本

重要：设计系统应循序渐进地扩展。现在只提取明确可复用的内容，而不是所有未来可能复用的内容。

提取并完善

构建经过改进、可复用的版本：

• 组件：创建设计良好的组件，并具备以下特点：

  • 清晰的属性 API 和合理的默认值
  • 针对不同使用场景提供适当的变体
  • 内置无障碍支持（ARIA、键盘导航、焦点管理）
  • 提供文档和使用示例

• 设计令牌：创建令牌，并确保具备以下特点：

  • 命名清晰（原始令牌与语义令牌）
  • 层级和组织结构合理
  • 说明每个令牌的使用场景

• 模式：编写模式文档，并包含以下内容：

  • 该模式的适用场景
  • 代码示例
  • 变体和组合方式

切勿：

• 提取未经泛化的一次性、特定场景实现
• 创建过于通用、毫无实用价值的组件
• 忽略现有设计系统约定进行提取
• 跳过完善的 TypeScript 类型定义或属性文档
• 为每个值都创建令牌（令牌应具有语义意义）

迁移

将现有用法替换为新的共享版本：

• 查找所有实例：搜索已提取的模式
• 系统性替换：更新每处用法，使其采用共享版本
• 全面测试：确保视觉和功能表现一致
• 删除无用代码：移除旧实现

编写文档

更新设计系统文档：

• 将新组件添加到组件库
• 说明令牌的用法和值
• 添加示例和指南
• 更新 Storybook 或组件目录

请记住：优秀的设计系统是一个不断发展的系统。随着模式逐渐显现，及时提取、认真完善并持续维护。