用途:识别可复用模式、组件和设计令牌,并将其提取、整合进设计系统,以实现系统化复用。
主要能力: 发现——定位设计系统、组件库或共享 UI 目录(可 grep "design system"、"ui"、"components"),理解组件组织与命名约定、令牌结构、文档模式、导入导出约定;识别重复组件、硬编码值、不一致变体及可复用模式;评估是否使用 3 次以上或可能复用。 规划——列出待提取组件、待创建令牌、需支持的变体、命名约定与迁移路径。 提取与丰富——创建带清晰 props API、合理默认值、变体、无障碍支持(ARIA、键盘导航、焦点管理)和文档示例的组件;创建命名清晰(原始 vs 语义)、层级分明并有使用说明的令牌;记录模式的使用时机、代码示例与组合方式。 迁移——查找所有实例,系统替换为共享版本,测试视觉与功能一致性,删除死代码。 文档——将新组件加入组件库,记录令牌用法与值,添加示例与指南,更新 Storybook 或组件目录。
使用方式:通过上述五个阶段推进。若不存在设计系统,需先询问再创建,并了解首选位置与结构。设计系统应增量成长,只提取当前明确可复用的部分。
限制与禁止事项:不得提取一次性、特定上下文实现而不做泛化;不创建过于通用而无用的组件;不忽略既有设计系统约定;不跳过 TypeScript 类型或 props 文档;不为每个值都创建令牌,令牌应具有语义含义。提醒:好的设计系统是活的系统,需在模式出现时提取、审慎丰富并持续维护。