SuperAPI AI 工具集

design-extract

设计与创作

查看项目

更新于 10-16 01:36

技能介绍

用途:Design extract 属于设计系统迁移流程中的前置环节。资料指出,散落在仓库各处的设计 token(CSS、主题文件、Tailwind 配置、styled-components 辅助函数、SCSS partials)需要先被抽取到统一的 token 包中,token-map 才能将其映射到当前 OD 设计系统。该环节的输入被刻意设计为通用形态,因此同一环节既服务于代码迁移,也服务于 Figma 迁移。

输入形式包括:来自 code-import 的 code/index.json(代码迁移场景);来自 figma-extract 的 figma/tree.json(Figma 迁移场景);或一整个截图图片文件夹(tune-collab 快速调优流程)。

输出:在 project-cwd/code/tokens.json 写入包含 colors[]、typography[]、spacing[]、radius[]、shadow[] 的 token 包。每个 token 条目包含 kind、name(可选来源名)、value(规范值)、sources[](如 styles/global.css:42)、usage[](如 Header.tsx)。sources 与 usage 作为审计线索,供 token-map.unmatched.json 在目标 token 无法匹配时引用。

完成条件与异常处理:当 code/tokens.json 存在时该环节完成。空的 token 包会发出警告事件但不会中止流程,token-map 会跳过其映射阶段来处理空情况。

限制与约束:JSX 字面量中的硬编码十六进制颜色(如 color: '#fff')也按 token 处理,需以 kind:'color' 和合成名称记录,避免被忽略。Tailwind 工具类扫描必须针对当前主题对调色板引用去重,不得把 bg-blue-500 和 bg-blue-600 合并为同一个 token。该环节由 apps/daemon/src/plugins/atoms/design-extract.ts 中的 daemon runner 实现,具体安装或调用命令资料未提供。