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