SuperAPI AI 工具集

extract-design-system

设计与创作

查看项目

更新于 10-16 01:34

技能介绍

用途:给定一个线上 URL,运行 9 阶段流水线,提取网站完整设计系统(设计令牌 + 精选组件目录,含组件结构、变体、悬停/聚焦状态与区块模式),输出到 .design_systems/<domain>-YYYYMMDD/(域名点号转连字符)。输出包布局与 AGENTS.md 消费模板见 references/output-bundle-spec.md。

流水线:URL → 1 发现 → 2 令牌 → 3 组件扫描 → 4 聚类+精选 → 5 提炼 → 6 状态 → 7 区块 → 8 综合 → 9 校验。

前置条件:需 playwright-cli 在 PATH(npm install -g @playwright/cli@latest 后 playwright-cli install --skills,需 Node.js 18+);需可访问的 Firecrawl 实例(用于页面发现,不可达时回退到 playwright 链接发现,覆盖较薄);需 npx 拉取 @google/design.md 做质量门禁,不可用则跳过 lint。若代理沙箱限制网络或文件系统,需放行相关出站调用。file:// URL 被 playwright-cli 阻止,本地 HTML 需用 python3 -m http.server <port> 提供并事后按 PID 关闭。

主要参数:<url> 必填;--pages 默认 5;--theme 默认 auto(light/dark/both);--no-screenshots 默认开启;--out 默认 .design_systems/<domain>-YYYYMMDD/;--max-components 默认 12;--components-only 复用同域已有令牌与 DESIGN 文本,仅重跑 3–9 阶段;--single-file 额外输出 design-system.full.md。输出目录已存在时会询问(覆盖/带日期同级目录/中止),不会静默处理。

输出包包含 DESIGN.md、AGENTS.md、components/COMPONENTS.md 与 HTML 及 gallery.html、tokens/design-tokens.json(DTCG)、eval/fixtures.json 与 checklists.md、screenshots/ 及 raw/ 等。第 9 阶段需通过 lint、gallery 无控制台错误、eval 自测全部通过、完整性四项门禁后才报告。

限制:需外部工具与网络;Firecrawl 不可达时页面覆盖变薄;lint 不可用时跳过;对模糊映射(如哪个变体是 primary)置信度低于 95% 时会先询问;子代理须顺序执行。具体效果与收费信息暂未提供。