SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场design-system

design-system

设计与创作

查看项目

更新于 10-16 09:10

技能介绍

用途

Design System Extractor 用于分析已有的网站、HTML 文件或截图，并将其中的视觉语言综合为一份语义化设计系统，输出为 DESIGN.md 文件。该输出针对 design-loop 技能和通用页面生成进行了优化。

适用场景包括：

  • 基于现有网站的视觉语言启动新项目
  • 为从未正式记录过的网站补写设计系统文档
  • 在运行 design loop 之前准备 .design/DESIGN.md
  • 从客户现有网站提取品牌规范
  • 为多页项目创建一致性文档
  • 从 Google Stitch 项目提取设计令牌

主要能力

该技能可提取并组织以下设计信息：

  • 颜色：优先从 CSS 自定义属性（如 :root 或 @theme 块）、Tailwind 配置、内联样式、Tailwind 类中查找，最后才借助截图近似判断。每条颜色会判定其角色：Primary（按钮、链接、激活态、品牌元素）、Background（body 或 html 背景）、Surface（卡片、容器、浮层）、Text Primary（标题、正文）、Text Secondary（说明、元数据、弱化文本）、Border（分隔线、输入框与卡片边框）、Accent（徽章、通知、高亮）。
  • 排版：字体族（Google Fonts link、@import、font-family）、标题字重、正文基准字号、行高、字距。
  • 组件：按钮（形状、颜色、内边距、悬停态）、卡片（背景、边框、阴影、圆角、内边距）、导航（吸顶/静态、背景处理、激活指示）、表单（输入框样式、聚焦环、标签位置）、Hero 区块（布局模式、叠加处理、CTA 位置）。
  • 间距与布局：最大内容宽度、区块内边距、网格系统（列数与间距）、留白风格（紧凑、均衡、宽松或夸张）。

使用方式

流程按以下步骤进行：

  1. 确定来源：向用户询问在线 URL、本地 HTML 文件、截图图片、现有项目或 Google Stitch 项目之一。
  2. 提取原始设计数据：
    • 在线 URL 使用 Playwright CLI（如 playwright-cli -s=design open {url}、playwright-cli -s=design screenshot --filename=.design/screenshots/source-desktop.png），并提取完整 HTML，同时以 375px 宽度截取移动端截图（playwright-cli -s=design resize 375 812），最后关闭会话。
    • 本地 HTML 文件直接读取并从源码提取设计令牌。
    • 仅截图时进行视觉分析，需在输出中标注颜色提取为近似的限制。
    • Google Stitch 项目在安装 @google/stitch-sdk 并设置 STITCH_API_KEY 后，通过 SDK 获取屏幕 HTML 与设计主题。
  3. 分析设计令牌：从 HTML/CSS 源码提取颜色、排版、组件与间距布局信息。
  4. 综合为自然语言：DESIGN.md 应以语义化自然语言描述设计并辅以精确数值，例如把 rounded-xl 写成“柔和圆角（12px）”，把 shadow-md 写成“带扩散阴影的轻微抬升”，把 #1E40AF 写成“深邃海洋蓝（#1E40AF）用于主要操作”，把 py-16 写成“宽松的区块间距，留有呼吸空间”。
  5. 写入 DESIGN.md：输出到 .design/DESIGN.md 或用户指定的路径，遵循 design-loop 技能 references/site-template.md 中的 DESIGN.md 模板，关键小节包括：视觉主题与氛围、调色板与角色、排版、组件样式、布局原则、面向生成的设计系统说明（用于 baton 提示词的可复制块）。
  6. 校验准确性：若浏览器自动化可用，用提取出的设计系统生成一个小测试区块（卡片＋按钮＋标题）并与原图截图对比，调整不匹配的数值。
  7. 向用户报告：给出提取令牌摘要（颜色数量、字体、组件模式）、生成的 DESIGN.md 位置、标记为近似的令牌（用 ⚠️ 标注）以及对人工复核的建议（如截图颜色、模糊的排版）。

Google Stitch 的 designTheme 对象可直接提供结构化令牌，例如：

{
  "colorMode": "DARK",
  "font": "INTER",
  "roundness": "ROUND_EIGHT",
  "customColor": "#40baf7",
  "saturation": 3
}

映射关系：colorMode → 主题（明/暗）、font → 排版字体族、roundness → 组件圆角（ROUND_EIGHT = 8px，ROUND_SIXTEEN = 16px 等）、customColor → 主品牌色、saturation → 色彩饱和度（1–5 级）。完整调色板需从生成 CSS 中下载并分析 HTML 获取，因为 Stitch 主题对象只包含主色。

限制与注意事项

  • 仅有截图时，颜色提取为近似值，无法精确得到十六进制颜色，需在输出中明确标注该限制。
  • Tailwind 网站最容易处理，其配置块包含全部信息；Google Fonts 链接可提供精确的字体族与字重；CSS 自定义属性较为可靠，代表有意设定的设计令牌；内联 Tailwind 类需要解释映射到角色。
  • 暗色模式需检查 .dark 类覆盖或 prefers-color-scheme 媒体查询。
  • 多页面处理：先分析首页（通常包含最完整的设计语言），再抽查 2–3 个内页以确认一致性，在组件样式小节记录页面特定覆盖；若页面差异过大，需询问用户以哪个页面作为规范来源。
  • 常见错误包括：只罗列原始 CSS 值而不做语义描述；遗漏暗色调色板；忽略组件模式（仅列颜色不够）；未包含第 6 节（可复制生成块）；将截图近似颜色视为精确值而不作标注。

暂未提供的信息

资料未说明该技能的收费、价格、平台支持范围或具体效果指标。