用途:识别可复用的模式、组件与设计令牌,将其提取并整合进设计系统,实现系统性复用。
主要能力:发现阶段会定位设计系统、组件库或共享 UI 目录,理解其组件组织与命名约定、设计令牌结构、文档模式及导入导出约定;识别重复组件、硬编码值(颜色、间距、字体、阴影)、不一致变体以及值得系统化的布局、组合与交互模式;评估复用价值,判断是否使用 3 次以上或可能复用、能否提升一致性、是通用还是特定上下文、维护成本与收益。
使用方式:先制定提取计划,明确要提取的组件、要创建的令牌、需支持的变体、命名约定与迁移路径;再构建改进后的可复用版本,组件需有清晰 props API 与合理默认值、适配不同场景的变体、内置无障碍支持(ARIA、键盘导航、焦点管理)及文档示例,令牌需有清晰命名(原始与语义)、层级组织与使用说明,模式需记录适用场景、代码示例与变体组合;随后迁移,查找所有实例、系统性替换、充分测试视觉与功能一致性、删除死代码;最后更新设计系统文档、组件库、令牌用法、示例与 Storybook 或组件目录。
限制与注意:若不存在设计系统,需先询问再创建,并了解首选位置与结构;设计系统应增量成长,只提取当前明确可复用的内容;不要提取一次性、特定上下文的实现而不做泛化,不要创建过于通用而无用的组件,不要忽略既有设计系统约定,不要跳过 TypeScript 类型或 props 文档,不要为每个值都创建令牌(令牌应有语义含义)。