design-system-extractor

文件位置： 此技能中的所有 Python 文件均位于 tools/ 文件夹： .agents/skills/design-system-extractor/tools/ ├── design_system_extractor.py ├── extract_tokens.py └── requirements.txt

必需流程：

# Navigate to the tools folder
cd .agents/skills/design-system-extractor/tools/

# Install dependencies (first time only)
pip install -r requirements.txt

# Run the Python pre-processor
python design_system_extractor.py <URL>

Python 脚本的作用： 步骤 A：HTML 清理

• 移除所有 <svg>、<path>、<script>、<noscript>、<iframe>、<style> 标签
• 移除 base64 数据（src="data:image..."）
• 仅保留结构：<header>、<main>、<section>、<h1>-<h6>、<p>、<a>、<button> 和 CSS 类

步骤 B：提取外部 CSS

• 识别 <head> 中的 <link rel="stylesheet"> 标签
• 获取 .css 文件
• 使用正则表达式仅提取：
  • :root { ... } 块（占设计令牌的 90%）
  • @font-face 规则
  • 重要的全局类（.btn、.card、.container、h1, h2, h3）

步骤 C：检测工具类框架

• 检测 Tailwind 模式：text-[16px]、bg-[#RRGGBB]、leading-tight
• 间距模式：m-4、p-8、gap-16、w-full
• 排版：font-bold、text-xl、tracking-wide

</data_collection_and_sanitization>

<data_analysis> 使用 Python 返回的 JSON 进行分析：

颜色：

• 优先使用 CSS 变量（:root）中的颜色
• 如果不存在 :root，则使用在 HTML/Tailwind 中检测到的颜色
• 分类为：品牌色、黑色、白色、灰色（浅/中/深/文本/弱化/社交）
• 检测渐变和不透明度
• 记录每种颜色的用途（CTA、文本、背景、边框）

排版：

• 从 CSS 变量或 @font-face 获取 font-family
• 如果使用 Google Fonts，则从 HTML 的 <link> 标签中提取
• 字号：超大（130px）、主视觉（86px）、展示（66px）、h1-h6、正文、小号
• 字重：400、500、600、700
• 行高：紧凑（0.94）、较紧（1.03）、正常（1.2）、宽松（1.25）、疏松（1.65）
• 字间距：最紧（-0.05em）、紧（-0.035em）、正常（-0.03em）、宽（0.175em）

间距：

• 以 4px 为单位
• 间距系统：1（4px）、2（8px）、4（12px）、6（16px）、8（20px）、10（24px）、16（40px）、24（60px）、40（90px）、75（150px）、100（200px）、125（250px）
• 容器宽度：最大（1920px）、内容（1400px）、窄（1360px）、小（1200px）、文本（800px）、紧窄（780px）

</data_analysis>

<component_catalog> 使用 Python 检测到的组件并加以扩展：

按钮（至少 4 种类型）：

• 主要按钮：品牌色背景、胶囊形圆角（100px）、高度 40px
• 标签按钮：灰色背景、胶囊形圆角、悬停/激活状态
• 链接：仅文本，带有动画箭头后缀
• FAB：固定位置、backdrop-filter、脉冲动画
• 内边距、border-radius、字号、字重、过渡效果

卡片（至少 3 种类型）：

• 项目卡片：含图像的媒体内容、正文、标题、副标题
• 合作伙伴卡片：左侧图片、右侧正文、最大宽度 310px
• 面板卡片：索引号、标题、副标题及分隔线
• 边框（15-20px 圆角）、阴影、悬停效果、图像宽高比

</component_catalog> 表单：

• 文本框：带动画的下划线、大号标签、高度 56px
• 选择框：下划线 + 尾部箭头
• 文件框：虚线边框、拖放样式
• 复选框：带勾选标记的自定义控件
• 输入框样式、标签、验证状态、焦点状态

导航：

• 带过渡效果的粘性页眉
• 徽标 + 水平菜单 + CTA 按钮
• 带箭头动画的下拉菜单
• 基于滚动的位置的颜色变化

</component_catalog>

<assets_and_media> 对视觉沉浸感至关重要：

• 从网站捕获并使用真实图片 URL（原始徽标、横幅、个人资料照片、卡片图片）。
• 生成的 HTML 必须在 标签和组件背景中使用这些“真实素材”。如果原始网站使用了丰富的图像，不要只使用纯色。
• 这样可以确保生成的文档具有原始网站的外观和感觉。

图片：

• 从 src 中提取 URL（始终使用网站上的原始 URL）
• 识别格式（WebP、JPG、PNG、SVG）
• 记录宽高比（例如，卡片的 padding-top 为 55%）
• 记录圆角和效果（悬停缩放等）

图标和徽标：

• 在侧边栏和页眉中插入原始网站徽标的确切 URL。
• 图标库（FontAwesome、Material、Phosphor、自定义 SVG）
• 样式（填充、轮廓、双色调）
• 尽可能提取内联 SVG，或使用原始 URL

</assets_and_media>

<animations_and_interactions>

• 过渡时长：快速（0.15s）、正常（0.25s）、缓慢（0.5s）
• 计时函数：ease-smooth cubic-bezier(0.65, 0.05, 0.36, 1)
• 关键帧动画：心跳、淡入淡出、滑动、缩放、脉冲、滚动字幕
• 基于滚动的动画（GSAP、ScrollMagic、AOS）
• 悬停效果：transform、opacity、background-color </animations_and_interactions>

<grid_and_layout>

• 容器最大宽度
• 网格系统（CSS grid、flexbox）
• 断点（1024px、768px）
• 间隙和槽宽
• Z-index 层级：基础（1）、下拉菜单（2）、页眉（3）、粘性元素（10）、固定元素（55）、遮罩层（100） </grid_and_layout>

<anti_hallucination_guidelines> 重要：为避免编造数据：

严格依据 Python 返回的 JSON 数据设置设计令牌。

如果网站使用了大量压缩的类名（.a、.b、.c），且没有映射 CSS：

• 通过分析数值模式推断设计系统
• 使用行业默认值（4px 网格、1.25 字号比例）

绝不要编造分析数据中不存在的颜色或字体。

如果缺少信息，请使用默认值，并注明为“默认”。

不得留空占位符：不要留下 [URL] 或通用灰色图片；务必始终将从网站提取的真实图片、照片和徽标 URL 注入 HTML。文档应当看起来像真实网站的一部分。 </anti_hallucination_guidelines>

<output_format> HTML 文件（design_pattern.html） 仅生成最终 HTML 代码。代码前后均不得添加说明。 使用以下模板，并将 [Site Name]、#HEX 和 value 占位符替换为实际提取的属性。 重要：替换所有占位符，例如 , <img src="[URL]>，或文字“LOGO”，并使用从网站捕获的真实图片 URL。 完整保留所有 CSS 样板代码，仅修改 :root 块。 <html_template>

• Foundations
• Colors
• Typography
• Spacing
• Icons
• Components
• Buttons
• Cards
• Forms
• Navigation
• Badges & Chips
• Patterns
• Numbers & Stats
• Awards
• Footer
• Animations

设计系统

[Site Name] 的完整设计系统文档——通过对官方网站进行逆向工程提取。

颜色

调色板以 [brand color] 为主要强调色， 与黑色、白色和灰色调形成对比。

品牌颜色

品牌颜色

[#HEX]

行动号召、链接、图标、悬停状态

CSS 变量

:root {
--color-brand: [#HEX];
--color-brand-hover: [#HEX];
--color-black: #000000;
--color-white: #FFFFFF;
--color-gray-light: #EEEEEE;
--color-gray-medium: #CDCDCD;
--color-gray-text: #9A9A9A;
--color-gray-dark: #7B7B7B;
--color-gray-muted: #575757;
--color-gray-social: #CBCBCB;
}

排版

排版使用 [Font Name] 字体，字重范围为 400 至 700。 字体系统的特点是负字间距和紧凑的行高。

超大标题

font-size: 130px

line-height: 0.94

letter-spacing: -0.05em

font-weight: 700

间距

间距系统以 4px 为单位。 主要区块之间相隔 200px，左右内边距为 90px。

间距 1

4px

图标

所有图标都是自定义内联 SVG，不依赖外部库。 它们使用 currentColor 从上下文继承颜色。

图标名称

自定义 SVG

按钮

按钮采用胶囊形圆角（100px）、 快速过渡效果（0.15s）和清晰的悬停状态。

主按钮

按钮

.ds-btn-primary {
background: var(--color-brand);
color: #FFFFFF;
border-radius: 100px;
height: 40px;
padding: 0 20px;
font-size: 14px;
font-weight: 600;
}

卡片

卡片用于展示项目、合作伙伴和信息。 卡片采用浅色背景、15-20px 圆角，并带有细微的悬停效果。

项目卡片

标题

副标题

合作伙伴卡片

合作伙伴名称

客户端

面板卡片

01

服务

描述

表单

表单元素简约，聚焦时会显示动态下划线， 并采用大号粗体标签。

文本字段

姓名

选择框和文件上传

+

上传文件

拖放文件或点击

我同意

导航

导航栏采用粘性定位，滚动时颜色平滑过渡。 下拉菜单会延迟 0.25s 显示。

• 链接
• 下拉菜单

行动号召

徽章和标签

标签用于标记、筛选和分类。 它们采用胶囊形状，并具有清晰的悬停和激活状态。

标签 1 标签 2 已激活

数字和统计数据

醒目的大号数字用于突出统计数据和成就。 使用超大字体（130px）和负字间距。

150+

项目

已完成

奖项

奖项列表在悬停时会显示动态下划线。 设计简洁，条目之间以细微分隔。

奖项名称

2025

页脚

页脚采用深色背景，搭配白色和灰色文字。 采用 4 列网格，包含链接和联系信息。

[email protected]

服务

• 服务 1

© 2026 品牌

动画

动画细腻优雅，使用 GSAP 和 ScrollMagic 实现基于滚动的效果。

淡入

滑动

缩放

脉冲

关键帧动画

@keyframes heartbeat {
0%, 20%, 40%, 100% { transform: scale(1); }
10%, 30% { transform: scale(1.1); }
}

@keyframes pulse {
0%, 100% {
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(0,0,0, 0.1);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 50px rgba(0,0,0, 0);
}
}

</html_template> </output_format>

<validation_checklist> 交付前，请核对： 设计令牌：

已提取所有主色（品牌色、黑色、白色及至少 6 种灰色）

已识别字体系列，并从 Google Fonts 导入

完整的字体大小比例（至少 10 个级别：mega、hero、display、h1-h6、body）

已记录行高（tight、snug、normal、relaxed、loose）

已记录字间距（tighter、tight、normal、wide）

完整的间距系统（至少 10 个值）

已定义容器宽度

圆角系统（sm、md、lg、full、pill）

已记录阴影

过渡效果（fast、normal、slow）及缓动函数

</validation_checklist> Z-index 层级

组件与视觉元素：

真实的站点徽标和图片已注入最终 HTML（没有空占位符）

至少 4 种按钮类型（primary、chip、link、fab）

至少 3 种填充了真实提取图片的卡片类型（项目、合作伙伴、面板）

表单元素（文本框、选择框、文件框、复选框）

导航示例（带真实徽标、菜单和 CTA 的粘性导航栏）

带有不同状态的徽章和芯片

图标文档（内联 SVG）

数字与统计数据，使用超大字号

带动画的奖项列表

页脚示例（4 列）

展示动画（淡入、滑动、缩放、脉冲）

结构：

:root 中的 CSS 变量（涵盖所有类别）

可正常使用的侧边栏导航

滚动进度指示器

平滑滚动导航

滚动时激活导航项

响应式（媒体查询：1024px、768px）

每个部分都包含代码示例

实用工具类（边距、颜色、文本对齐） </validation_checklist>

<required_tools>

Python 3.x — 用于预处理

requests — 用于 HTTP 请求的 Python 库

beautifulsoup4 — 用于解析 HTML 的 Python 库

write — 用于创建 HTML 文件

位置：所有文件均位于此技能的 tools/ 目录中。 </required_tools>

<usage_example> 用户输入： “从此网站提取设计系统：https://example.com”

执行流程：

进入 tools 文件夹并安装依赖项： cd .agents/skills/design-system-extractor/tools/ pip install -r requirements.txt

运行 Python 预处理程序： python design_system_extractor.py https://example.com

分析返回的 JSON： { "url": "https://example.com", "fonts": ["Inter", "Roboto"], "css_variables": { "color-brand": "#0070F3", "color-black": "#000000" }, "colors": ["#0070F3", "#000000", "#FFFFFF"], "components": [ {"type": "button", "count": 5}, {"type": "card", "count": 12} ], "images": ["https://example.com/logo.png", "https://example.com/banner.jpg"] }

使用提取的数据生成 HTML，将 <img> 标签替换为 JSON 中的真实图片 URL。

将文件保存为 design_pattern.html

交付时附上主要元素（颜色、字体、组件和生成的文件）的摘要。 </usage_example>

<section_templates>

颜色卡片模板

字体项目模板

间距项目模板

图标卡片模板

按钮卡片模板

.ds-btn-type {
  background: #XXX;
  color: #XXX;
  border-radius: 100px;
  height: 40px;
  font-size: XXpx;
  font-weight: 600;
}

项目卡片模板

  <img src="[REAL IMAGE URL FROM SITE]" alt="项目">

合作伙伴卡片模板

  <img src="[REAL IMAGE URL FROM SITE]" alt="合作伙伴">

面板卡片模板

表单元素模板

数字统计模板

奖项条目模板

动画卡片模板

代码块模板

.class {
  property: value;
}

实用类 .ds-mb-0 { margin-bottom: 0; } .ds-mb-8 { margin-bottom: var(--space-8); } .ds-mb-16 { margin-bottom: var(--space-16); } .ds-mb-24 { margin-bottom: var(--space-24); } .ds-mb-40 { margin-bottom: var(--space-40); }

.ds-text-brand { color: var(--color-brand); } .ds-text-gray { color: var(--color-gray-text); } .ds-text-center { text-align: center; }

.ds-bg-black { background-color: var(--color-black); } .ds-bg-white { background-color: var(--color-white); } .ds-bg-gray { background-color: var(--color-gray-light); } </section_templates>

<best_practices> 始终使用 CSS 变量以保持一致性 始终将网站上的真实图片（徽标、横幅、卡片照片）注入生成的 HTML，使其成为与原网站一致的视觉目录，作为网站的实际组成部分 始终记录各个状态（悬停、活动、聚焦、禁用） 在每个章节中始终包含代码示例 保持与原始设计一致 使用描述性令牌名称（brand、gray-light 等） 记录响应式断点（1024px、768px） 使用计时函数添加动画和过渡效果 遵循布局结构：侧边栏 + 主内容 实现滚动进度指示器 添加平滑滚动和活动导航 使用实用类设置边距和颜色 至少包含 10 个间距级别 记录排版的行高和字间距 创建至少 4 种按钮类型和 3 种卡片类型，并填充真实媒体内容 </best_practices>

<required_css_structure> 基础布局 .ds-layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }

.ds-sidebar { position: sticky; top: 0; height: 100vh; background-color: var(--color-black); color: var(--color-white); padding: var(--space-40) var(--space-24); overflow-y: auto; }

.ds-main { padding: var(--space-50) var(--space-75); max-width: var(--container-max); }

.ds-title { font-size: var(--text-mega); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }

.ds-subtitle { font-size: var(--text-5xl); font-weight: var(--font-weight-medium); color: var(--color-gray-text); }

章节 .ds-section { margin-bottom: var(--space-100); }

.ds-section-title { font-size: var(--text-5xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-40); padding-bottom: var(--space-16); border-bottom: 3px solid var(--color-brand); display: inline-block; }

.ds-section-description { font-size: var(--text-lg); color: var(--color-gray-text); margin-bottom: var(--space-40); max-width: var(--container-text); }

滚动指示器 .ds-scroll-indicator { position: fixed; top: 0; left: 0; height: 3px; background-color: var(--color-brand); z-index: var(--z-fixed); width: 0%; transition: width 0.1s; } </required_css_structure>

<setup_and_metadata> Python 依赖项： 使用前安装：

# Navigate to the tools folder
cd .agents/skills/design-system-extractor/tools/

# Install dependencies
pip install -r requirements.txt

或直接安装：

pip install requests beautifulsoup4

requirements.txt：

requests>=2.31.0
beautifulsoup4>=4.12.0

位置：此技能中的 tools/requirements.txt。

版本信息： 版本：2.0.0（使用 Python 优化） 最后更新：2026-03-19

v2.0 改进：

• Python 预处理 — 防止上下文窗口溢出
• HTML 清理 — 移除 SVG、脚本和 base64
• 选择性 CSS 提取 — 聚焦于 :root，忽略其余内容
• Tailwind 检测 — 从实用工具类推断令牌
• 防止幻觉 — 采用严格准则，防止生成虚构数据
• 优化输出 — 仅生成 HTML，并注入真实图片

文件结构：

.agents/skills/design-system-extractor/
├── SKILL.md                        # This skill (you are here)
└── tools/
    ├── design_system_extractor.py  # Main Python script
    ├── extract_tokens.py           # Standalone CSS token extractor
    ├── requirements.txt            # Python dependencies
    └── README.md                   # Tools documentation

重要提示：始终从 tools/ 文件夹运行 Python 脚本：

cd .agents/skills/design-system-extractor/tools/
python design_system_extractor.py <URL>

</setup_and_metadata>