SuperAPI AI 工具集

extract

设计与创作

查看项目

更新于 10-15 20:05

技能介绍

用途:在现有代码库中识别可复用的 UI 模式、组件与设计令牌,抽取并整合到设计系统,方便系统化复用,并同步更新文档。

主要能力:

  1. 发现:定位设计系统、组件库或共享 UI 目录,理解其组件组织、命名约定、令牌结构与文档模式;若无设计系统,先询问再创建。识别重复组件、硬编码值(颜色、间距、字体、阴影)、同一概念的多套实现,以及值得系统化的布局与交互模式。评估复用价值,判断是否被使用 3 次以上、是否提升一致性、维护成本与收益。
  2. 规划:列出待抽取组件、待建令牌、需支持的变体、命名约定与迁移路径。主张增量成长,只抽取当前明确可复用者。
  3. 抽取与丰富:创建带清晰 props API 与合理默认值的组件、按场景提供变体、内置无障碍(ARIA、键盘导航、焦点管理)并附文档与示例;令牌需命名清晰(基础与语义之分)、层级合理并说明使用时机;模式需记录适用场景、代码示例与组合方式。
  4. 迁移:查找所有实例,逐处替换为共享版本,验证视觉与功能一致,删除旧实现。
  5. 文档:将新组件加入组件库,记录令牌用法与取值,补充示例与规范,更新 Storybook 或组件目录。

使用方式与限制:资料未提供具体安装命令或调用步骤,暂未提供。明确禁止的做法包括:抽取一次性、上下文特定的实现而不做泛化;创建过于通用而无用的组件;忽视既有设计系统约定;跳过 TypeScript 类型或 props 文档;为每个值都建令牌(令牌应具语义)。整体定位为设计系统维护类技能。