# CSS 提取手册
在抓取原始 HTML 后，系统地提取设计令牌。按顺序执行以下层级的工作。
## 第 1 层：CSS 自定义属性（核心）
在 HTML 中搜索 `:root` 块 —— 这些是已经为你完成工作的现有设计系统：
html
:root {
--color-bg: #0a0a0f;
--color-primary: #7c3aed;
--font-sans: 'Inter', sans-serif;
--radius: 12px;
}
获取每个 `--variable` 并对其进行分类：颜色、字体、间距、阴影、圆角、动画。
## 第 2 层：字体导入
查找 `` 块顶部和 `` 标签中的 `@import`：
html
或在 CSS 内部：
css
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700&display=swap');
记录字体族和加载的字重 —— 字重可以告诉你使用了哪些样式（例如，300 = 细体正文，700 = 粗体标题）。
## 第 3 层：Tailwind 配置（如果站点使用 Tailwind）
Tailwind 的标志：类名如 `bg-purple-600`、`text-gray-200`、`rounded-xl`、`shadow-lg`、`backdrop-blur-md`。
如果存在自定义 Tailwind 主题，它可能作为内联脚本出现：
html
tailwind.config = {
theme: {
extend: {
colors: { brand: '#7c3aed' }
}
}
}
对于没有自定义配置的标准 Tailwind 站点，使用视觉截图来识别他们使用的 Tailwind 颜色，然后使用相同的类名进行复制。
## 第 4 层：重复的类模式
扫描 HTML 中相似元素上的重复类组合。这些模式揭示了设计系统：
html
粤公网安备44030002003366号