extract-site

提取 将任何网站转换为完整的设计系统文档，或在设计令牌格式之间转换（DESIGN.md、tokens.json、variables.css、theme.css）。

内容

目的与背景

• 目的： 从公开网站提取设计系统（颜色、排版、间距、圆角、阴影、组件 + 状态），生成文档/令牌（DESIGN.md、preview.html、tokens.json、variables.css、theme.css）；或在这些令牌格式之间转换。
• 触发条件（何时使用）： 两种触发模式 — 模式 1 使用明确的 rico 前缀命令（rico DESIGN.md [url]、rico tokens [url]、rico 全部输出 [brand]、rico 把 DESIGN.md 转为 tokens…），模式 2 使用自然语言（“为 linear.app 创建 DESIGN.md”、“从 stripe.com 提取设计令牌”…）。使用场景：需要为现有网站创建设计系统文档 · 提取令牌以便实现 · 转换令牌格式 · 为某个品牌创建可视化设计系统参考页面。
• 非目标： 不会将整个页面重建为可运行的代码（像素级还原）——这属于 /web-clone 模式 B（重建），请参阅“模式 3：完整克隆”；不会将主题应用到用户的网站（这属于 rico-ui-ux-themes，请参阅 FAQ）；不会提取需要登录的页面。

心智模型

URL（或现有令牌文件）→ 收集视觉数据（截图 + DevTools）→ 语义令牌（颜色 · 排版 · 间距 · 圆角 · 阴影）→ 组件 + 状态 → 品牌风格 + 应做事项/避免事项 → 输出文件存入 themes/{brand-slug}/。格式转换 = 解析源文件 → 生成目标文件，跳过收集步骤。

输入与输出约定

	字段	是否必需？	含义
输入	有效的公开 URL	是（格式转换除外）	extract DESIGN.md <url>
输入	源令牌文件	格式转换时必需	例如：将现有的 DESIGN.md 转为 tokens.json
输入	标志 --theme=light|dark、--depth=basic|full、--components-only、--tokens-only、--mobile-first、--desktop-first	否	调整提取范围
输出	themes/{brand-slug}/DESIGN.md + preview.html	默认	风格参考 + 独立预览页面
输出	tokens.json / variables.css / theme.css	根据命令	DTCG · CSS 自定义属性 · Tailwind v4 @theme
输出	报告文件 llmwiki/wiki/sources/draft/DDMMYY-<ten>.md	是（无产物时除外）	参见“交付”部分

规则与功能

• RULE-01（必须）：缺少令牌类别时 → 跳过对应章节并注明缺失项（绝不编造数值）。
• RULE-02（必须）：存在多个主题（浅色/深色）时 → 询问用户要记录哪个主题；提供单独的 dark/ 子目录。
• RULE-03（必须）：页面需要登录时 → 聚焦于公开的营销页面。
• RULE-04（必须）：要将完整网站克隆为可运行代码时 → 转到 /web-clone 模式 B，不在此技能中执行（唯一规范来源，避免偏差）。
• RULE-05（建议）：每类列出 7–8 条应做事项/避免事项，并引用具体令牌；品牌风格部分写 5–8 句设计评述。
• 功能：读取公开网页（截图 + 读取 CSS/计算样式）；将文件写入 themes/{brand-slug}/ 和 wiki 草稿。

失败边界

• URL 无效/非公开 → 澄清并请求公开 URL；页面需要登录 → 在公开的营销页面上进行部分提取。
• 网站同时提供浅色/深色主题 → 提取前澄清要选择哪个主题。
• 无法提取某类令牌 → 部分提取：跳过该项并明确注明缺失，不编造数值。
• 要求重建为代码 → 超出范围，转到 /web-clone。

使用方式

主要工作流

步骤	类型	输入	操作	输出/退出	失败/下一步
W01	判断	用户请求	确定模式（rico 命令 / 自然语言）+ 输出（工作流 1–4）+ 品牌 slug	工作流类型	重建代码 → /web-clone；多个主题 → 澄清
W02	操作	URL	收集视觉数据：hero 截图、导航、CTA、卡片、字体排版、页脚；DevTools CSS 变量、@font-face、计算样式	原始数据	SPA/CSS 压缩 → 边缘情况
W03	判断	原始数据	提取设计令牌（颜色、字体排版、间距、圆角、阴影）	令牌集	分组缺失 → 记录缺口
W04	判断	页面 + 令牌	记录组件的所有状态；品牌语气；注意事项和禁忌	DESIGN.md 内容	—
W05	操作	令牌	按工作流在 themes/{brand-slug}/ 中生成文件	输出文件	—
W06	操作	结果	输出报告草稿 + 索引 + 日志（见交付项）	草稿	0 个产物 → 跳过

各步骤详情（W01–W06 的事实来源）：请参阅下方的“工作流 1–4”和随附的参考部分，原样复制自旧版本。

分支

ID	类型	条件	行为	跳过 / 失败	汇合
B01	用户可选	rico tokens / rico variables / rico theme.css / rico preview	工作流 2：仅生成一种格式	—	W06
B02	用户可选	rico 全部输出 [brand]	工作流 3：生成全部 5 个文件	—	W06
B03	条件必需	输入为现有令牌文件（rico 把 DESIGN.md 转为 tokens）	工作流 4：解析源文件 → 生成目标格式，跳过 W02	源文件不存在 → 澄清	W05
B04	条件必需	网站采用多主题 light/dark	询问主题；dark 差异明显 → 建议使用 themes/{brand}-dark/	用户选择一个主题 → 仅处理该主题	W03
B05	恢复	SPA / 客户端渲染或 CSS 压缩	使用 view-source + 网络面板 / DevTools 计算样式	仍然无法获取 → 记录缺口	W03

验证和停止

需要人工目视检查：令牌有真实的观察来源（不编造），preview.html 可通过 file:// 打开，tokens.json 符合带有 $description 的 DTCG。所选工作流的所有文件都已生成或缺口已明确记录后即可停止。

示例

• 正向： rico DESIGN.md https://linear.app → themes/linear/DESIGN.md + themes/linear/preview.html，Linear 网站采用明显不同的 dark 主题 → 先询问主题，建议使用 themes/linear-dark/。
• 边界/失败：“将 stripe.com 完全克隆为可运行的 Next.js” → 不提取令牌；转到 /web-clone Mode B。网站未显示任何阴影 → DESIGN.md 中省略 Shadows 部分并记录缺口，不编造数值。

参考 — 输入约定

网站提取

extract DESIGN.md

必需：

• 有效的公开 URL

可选标记：

• --theme=light|dark
• --depth=basic|full
• --components-only
• --tokens-only
• --mobile-first
• --desktop-first

参考 — 此技能可以做什么？

核心功能

1. 网站转设计系统 - 输入任意网站 URL，提取其设计令牌、颜色、字体排版、间距、阴影和组件样式
2. 多种输出格式 - 生成 DESIGN.md、preview.html、tokens.json (DTCG)、variables.css 和 theme.css (Tailwind v4)
3. 格式转换 - 在任何受支持的格式之间转换（例如，将 DESIGN.md 转为 tokens.json，将 variables.css 转为 DESIGN.md）
4. 视觉预览 - 生成独立的 preview.html 页面，展示整个设计系统

使用场景

• 需要为现有网站编写设计系统文档
• 想要提取设计令牌以供实现
• 需要在不同设计令牌格式之间转换
• 想要获取品牌设计系统的视觉参考页面

---

参考 — 触发方式

此技能支持两种触发模式：

模式 1：显式命令（rico 前缀）

命令	输出
rico DESIGN.md [url]	DESIGN.md + preview.html（默认）
rico preview [url]	仅 preview.html
rico tokens [url]	仅 tokens.json
rico variables [url]	仅 variables.css
rico theme.css [url]	仅 theme.css
rico 全部输出 [brand]	全部 5 个文件
rico 把 DESIGN.md 转为 tokens	格式转换

模式 2：自然语言

Create a DESIGN.md for linear.app
Extract design tokens from stripe.com
Generate a preview for github.com
Analyze GitHub's design system

---

参考 — 模式 3：Full-Clone — 重建为可运行代码

extract-site 默认生成 设计系统（token → DESIGN.md/css/json）。当用户想要将整个页面重建为可运行的代码（像素级还原，例如 Next.js + shadcn）时，这已不再是 extract-site 的工作——请切换到 /web-clone Mode B（重建）。该技能是 recon → 组件规范 → 并行构建器 → 视觉差异 QA 流程的唯一权威来源（从 ai-website-cloner-template 精简而来，MIT）。在 2026-07-23 之前，这个流程曾在两个技能中重复编写；现已合并到 web-clone，避免一方修改而另一方未同步造成偏差。

---

参考 — 输出结构

所有生成的文件都保存在 themes/{brand-slug}/ 目录中：

themes/{brand-slug}/
├── DESIGN.md         # Full style reference (default output)
├── preview.html      # Visual design system preview (default output)
├── tokens.json       # DTCG format design tokens
├── variables.css     # CSS custom properties
└── theme.css         # Tailwind v4 @theme

---

参考 — 工作流

工作流 1：生成 DESIGN.md + 预览（默认）

User: rico DESIGN.md https://linear.app
    ↓
Step 1: Gather visual data
  • Screenshot hero, nav, CTAs, cards, typography, footer
  • Inspect DevTools for CSS variables, @font-face, computed styles
    ↓
Step 2: Extract design tokens
  • Colors → semantic tokens (canvas, surface-1, ink, accent-blue, etc.)
  • Typography → font families, sizes, weights, line-height, letter-spacing
  • Spacing → base unit detection (4px or 5px grid)
  • Radius → xs to full scale
  • Shadows → full CSS syntax
    ↓
Step 3: Document components with all states
  • Navigation, Buttons, Inputs, Cards, Footer
  • Include hover, focus, active, selected states
    ↓
Step 4: Write brand voice (5-8 sentences as design critique)
    ↓
Step 5: Write Do's / Don'ts (7-8 each, referencing specific tokens)
    ↓
Step 6: Generate DESIGN.md + preview.html

工作流 2：输出单一格式

User: rico tokens https://stripe.com
    ↓
Generate tokens.json only (DTCG format)

工作流 3：完整输出（全部 5 个文件）

User: rico 全部输出 github
    ↓
Generate all 5 files:
  • DESIGN.md, preview.html, tokens.json, variables.css, theme.css

工作流 4：格式转换

User: rico 把 DESIGN.md 转为 tokens
    ↓
Parse existing DESIGN.md → generate tokens.json

---

参考 — 输出格式详情

DESIGN.md

包含以下内容的完整 Markdown 文档：

• 品牌语调和设计理念
• 包含语义 token 名称的颜色系统
• 包含 font-feature-settings 的字体排版比例
• 间距系统
• 边框圆角比例
• 阴影规范
• 组件文档（包含所有状态）
• 注意事项（引用特定 token）

preview.html

独立的单文件视觉设计系统参考页面：

• 从上到下的线性布局（无 Bento 网格）
• 分区：Hero → 颜色 → 渐变 → 字体排版 → 间距与形状 → 阴影 → 深度与表面 → 组件 → 注意事项
• 所有规范文件的下载链接
• 带有分区锚点的粘性导航
• 滚动触发的入场动画
• 响应式（移动端优先）
• 支持 file:// 协议（除 Google Fonts 外无外部依赖）

tokens.json

DTCG（Design Tokens Community Group）标准格式：

• 每个 token 都包含 $description，用于说明其预期用途
• 按类别分组：颜色、字体排版、间距、圆角、阴影
• 兼容 style dictionary 和 token transformers

variables.css

按以下类别分组的 CSS 自定义属性：

• 颜色、字体系列、字体比例、字重
• 间距、布局、边框圆角、阴影、表面

theme.css

采用 Tailwind v4 @theme 格式，可直接集成到 Tailwind CSS v4。

---

参考 — 使用示例

示例 1：从网站生成设计系统

User: rico DESIGN.md https://linear.app

AI: [Extracts design tokens from Linear's website]
    [Generates themes/linear/DESIGN.md + themes/linear/preview.html]

    Generated 2 files:
    • themes/linear/DESIGN.md - Full style reference
    • themes/linear/preview.html - Visual preview

示例 2：仅提取 Token

User: rico tokens https://github.com

AI: [Extracts tokens from GitHub]
    [Generates themes/github/tokens.json]

    Generated DTCG tokens with 87 tokens across 6 categories.

示例 3：在格式之间转换

User: rico 把 DESIGN.md 转为 tokens

AI: [Parses existing DESIGN.md]
    [Converts markdown tables to DTCG format]

    Generated themes/github/tokens.json

示例 4：完整输出

User: rico 全部输出 github

AI: [Generates all 5 files in themes/github/]
    • DESIGN.md
    • preview.html
    • tokens.json
    • variables.css
    • theme.css

---

参考 — 边缘情况

场景	处理方式
SPA / 客户端渲染	使用 view-source + network 标签页查找 CSS 文件
压缩的 CSS	使用 DevTools 的计算样式面板
多主题（浅色/深色）	询问用户要记录哪个主题；提供单独的 dark/ 子目录
需要身份验证的页面	聚焦于公开的营销页面
缺少 token 类别	跳过相应分区并注明缺失之处（切勿编造数值）

---

参考 — 文件结构

skills/
└── rico-design-md/
    ├── SKILL.md                          # Core skill definition
    └── references/
        ├── DESIGN-TEMPLATE.md            # Template for new DESIGN.md files
        └── themes-github/                # Reference example (GitHub)
            ├── DESIGN.md                 # Complete DESIGN.md example
            ├── github-preview.html       # Visual preview example
            ├── tokens.json               # DTCG format reference
            ├── variables.css             # CSS custom properties reference
            └── theme.css                 # Tailwind v4 @theme reference

---

参考 — 常见问题

这与 rico-ui-ux-themes 有何不同？

• rico-ui-ux-themes：应用现有设计主题，优化网站的视觉设计
• rico-design-md：从网站中提取设计系统，并生成文档/token

我可以在项目中使用生成的令牌吗？

可以。所有输出格式均可用于生产环境：

• tokens.json 适用于 style dictionary 和令牌转换器
• variables.css 可直接导入
• theme.css 可与 Tailwind v4 集成

如果网站同时支持浅色和深色模式怎么办？

该技能会询问要记录哪种模式。如果深色模式在视觉上有明显区别（例如 Linear、Supabase），它会提供生成单独的 themes/{brand}-dark/ 子目录的选项。

---

最后更新：2026-05-13

维护者： @ricouii

博客：rico'blog

状态：正在积极开发

---

交付——输出报告

完成所有主要技能任务后，将提案草稿写入 wiki。

步骤

1. 构建文件名：

• 格式：DDMMYY-<ten>.md
• DDMMYY = 今天的日期（例如，2026 年 6 月 2 日对应 020626）
• <ten> = 用于概括已完成工作的 2–4 个 kebab-case 单词（例如，landing-page-coteccons、brand-kit-fintech、ingest-auth-spec）

2. 写入 llmwiki/wiki/sources/draft/DDMMYY-<ten>.md：

---
type: draft
title: "DDMMYY-<ten>"
status: proposed
tags: [<skill-name>, output-report]
timestamp: YYYY-MM-DD
---

# DDMMYY-<ten>
**Type:** draft
**Status:** proposed
**Tags:** <skill-name>, output-report
**Proposed:** YYYY-MM-DD

## What
<One sentence — what this skill invocation produced or decided>

## Output
<Key artefacts, files created/modified, or decisions made>

## Files
| File | Action |
|------|--------|
| `path/to/file` | created / modified |

## Notes
- Invoked via: `/<skill-name>` skill

## Origin
- **Draft:** `wiki/sources/draft/DDMMYY-<ten>.md`
- **Commit:** _(filled by verify-before-commit)_
- **Date promoted:** _(filled by verify-before-commit)_

3. 更新 wiki 索引和日志：

• llmwiki/wiki/index.md — 追加一行：| [DDMMYY-<ten>](sources/draft/DDMMYY-<ten>.md) | draft | YYYY-MM-DD |
• llmwiki/wiki/log.md — 追加：## YYYY-MM-DD — <skill-name> — <ten>

仅当该技能未生成任何产物且未做出任何决定时跳过（例如，像 /caveman-stats 这样的纯显示模式）。