用途:给定一个在线网站 URL,提取其设计系统并输出 DESIGN.md,供编码智能体构建与源站风格一致的新 UI。流程为:发现页面 → 提取令牌 → 采集组件 → 捕捉观感 → 合成 → 校验 → 输出 DESIGN.md。
主要能力:通过浏览器内提取获取 CSS 自定义属性与计算样式,映射为颜色、字体、圆角、间距、组件等 YAML 令牌;按页面类型(首页、定价、登录、博客、品牌页)采样组件与状态(悬停、聚焦);支持浅色/深色双主题;用官方 linter 做质量门禁。
前置依赖:playwright-cli 需在 PATH 中,安装命令为 npm install -g @playwright/cli@latest 然后 playwright-cli install --skills(需 Node.js 18+);需要可访问的 Firecrawl 实例用于页面发现;npx 用于按需拉取 @google/design.md linter。若 Firecrawl 不可达会回退到 playwright 链接发现,覆盖较薄;若 npx 不可用则跳过 lint 并注明。
常用参数:<url> 必填;--pages 默认 5;--pages-list 指定页面;--no-screenshots 跳过观感阶段;--theme 可选 auto/light/dark/both;--out 指定输出目录;--no-lint 跳过校验。
输出:单主题输出 DESIGN.md,双主题输出 DESIGN.light.md 与 DESIGN.dark.md;截图与原始令牌等中间产物放在 raw/ 下。校验命令为 npx -y @google/design.md lint "<out>/DESIGN.md"。
限制:不虚构颜色或组件,仅捕获页面实际暴露的内容;截图仅用于说明文字,不用于读取令牌值;若站点无设计系统、Firecrawl 不可用或 lint 被跳过,会在报告中说明降级情况。