SuperAPI AI 工具集

extract-design

设计与创作

查看项目

更新于 10-16 02:33

技能介绍

用途:将现有视觉识别系统反向工程为符合 google-labs-code/design.md 规范的 DESIGN.md 文件(YAML 令牌前置元数据加 Markdown 说明),便于其他智能体据此重建同一视觉识别。适用请求包括从 HTML 文件提取设计系统、把在线 URL 或截图转为 DESIGN.md、从 Figma/Webflow 导出或静态站点反向工程令牌。

主要能力:每个来源产出一个 DESIGN.md;不同设计分别输出并用 DESIGN-<source-slug>.md 命名,默认放在来源同目录。前置元数据按 name、description(可选)、colors、typography、rounded、spacing、components 顺序书写,值须符合规范类型(Color = #hex,Dimension = <num>px|em|rem,Typography = 对象)。正文含 Overview、Colors、Typography、Layout、Elevation & Depth、Shapes、Components、Do's and Don'ts,顺序固定;来源无信号的分节可跳过。

使用方式:对 HTML/CSS 来源运行 python3 scripts/extract_primitives.py <path-to-html-or-css> [more-paths...],从技能目录运行或加安装路径前缀;该脚本只做数据采集,输出按频率排序的候选清单,需归一化为令牌系统,不可直接粘贴。在线 URL 用 WebFetch 或 Playwright MCP 抓取;截图先读图再视觉描述;非 HTML 来源跳过脚本。随后参考 references/spec.md 规范、references/extraction-heuristics.md 启发式以及 references/example-*.md 校准文风。校验时可选用 npx @google/design.md lint <output-path>。

局限:令牌须有来源证据,不得编造;组件应引用令牌而非字面值;颜色应压缩为小调色板;一个视觉识别对应一个 DESIGN.md,不合并不兼容系统;是否使用官方 linter 为可选项。其他收费、平台与效果等资料暂未提供。