extract-site

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

extract Convert any website into a complete design system document, or convert between design token formats (DESIGN.md, tokens.json, variables.css, theme.css).

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

WHAT

概述

Purpose và context

目的与背景

Purpose: từ một website công khai, trích design system (màu, typography, spacing, radius, shadow, component + state) thành tài liệu/token (DESIGN.md, preview.html, tokens.json, variables.css, theme.css); hoặc chuyển đổi giữa các định dạng token đó.
Trigger (when to use): hai mode kích hoạt — Mode 1 lệnh tường minh tiền tố
```
rico
```
(
```
rico DESIGN.md [url]
```
,
```
rico tokens [url]
```
,
```
rico 全部输出 [brand]
```
,
```
rico 把 DESIGN.md 转为 tokens
```
…), Mode 2 ngôn ngữ tự nhiên ("Create a DESIGN.md for linear.app", "Extract design tokens from stripe.com"…). Use cases: cần design system doc cho website có sẵn · trích token để implement · chuyển đổi định dạng token · trang tham chiếu trực quan cho design system một brand.
Non-goals: KHÔNG dựng lại nguyên trang thành code chạy được (pixel-perfect) — đó là
```
/web-clone
```
Mode B (reconstruct), xem "Mode 3: Full-Clone"; không áp theme vào website của user (đó là rico-ui-ux-themes, xem FAQ); không trích trang cần đăng nhập.

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

Mental model

心智模型

URL (hoặc file token có sẵn) → gather visual data (screenshot + DevTools) → tokens ngữ nghĩa (colors · typography · spacing · radius · shadows) → components + states → brand voice + Do's/Don'ts → file đầu ra trong themes/{brand-slug}/

. Chuyển đổi định dạng = parse file nguồn → sinh file đích, bỏ bước gather.

URL（或已有的 token 文件）→ 收集视觉数据（截图 + DevTools）→ 语义化 token（颜色 · 字体排印 · 间距 · 圆角 · 阴影）→ 组件与状态 → 品牌语气 + 建议/禁止事项 → 输出至 themes/{brand-slug}/ 中的文件

。格式转换 = 解析源文件 → 生成目标文件，并跳过视觉数据收集步骤。

Input và output contract

输入与输出约定

	Field	Required?	Ý nghĩa
In	URL công khai hợp lệ	có (trừ khi chuyển đổi định dạng)	`extract DESIGN.md <url>`
In	file token nguồn	có khi chuyển đổi	vd DESIGN.md có sẵn → tokens.json
In	cờ `--theme=light\|dark` , `--depth=basic\|full` , `--components-only` , `--tokens-only` , `--mobile-first` , `--desktop-first`	không	tinh chỉnh phạm vi trích
Out	`themes/{brand-slug}/DESIGN.md` + `preview.html`	mặc định	style reference + trang preview tự chứa
Out	`tokens.json` / `variables.css` / `theme.css`	theo lệnh	DTCG · CSS custom properties · Tailwind v4 `@theme`
Out	output report `llmwiki/wiki/sources/draft/DDMMYY-<ten>.md`	có (trừ khi 0 artifact)	mục Delivery

	字段	是否必填	含义
输入	有效的公共 URL	是（格式转换除外）	`extract DESIGN.md <url>`
输入	token 源文件	格式转换时必填	例如：已有 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`	是（0 个产物时除外）	用于交付

Rules và capabilities

规则与能力

RULE-01 (MUST): Missing token categories → Skip sections and note the gap (never fabricate values).
RULE-02 (MUST): Multi-theme (light/dark) → Ask user which theme to document; offer separate
```
dark/
```
subdirectory.
RULE-03 (MUST): Auth-gated pages → Focus on public marketing pages.
RULE-04 (MUST): Full-clone thành code chạy được → chuyển
```
/web-clone
```
Mode B, không làm trong skill này (canonical duy nhất, tránh drift).
RULE-05 (SHOULD): Do's / Don'ts 7-8 mỗi loại, tham chiếu token cụ thể; brand voice 5-8 câu dạng design critique.
Capabilities: đọc trang web công khai (chụp màn hình + đọc CSS/computed styles); ghi file vào
```
themes/{brand-slug}/
```
và draft wiki.

RULE-01（必须）：缺少 token 类别 → 跳过相应章节并注明缺口（绝不编造数值）。
RULE-02（必须）：存在多主题（浅色/深色）→ 询问用户需要记录哪个主题；可提供独立的
```
dark/
```
子目录。
RULE-03（必须）：页面需要登录验证 → 专注于公开的营销页面。
RULE-04（必须）：需要将完整克隆重建为可运行代码 → 转交
```
/web-clone
```
模式 B，不在此 skill 中处理（保持唯一权威来源，避免流程漂移）。
RULE-05（应该）：建议/禁止事项各 7–8 条，并引用具体 token；品牌语气使用 5–8 句，以设计点评的形式撰写。
能力：读取公开网站（截取屏幕截图并读取 CSS/计算样式）；将文件写入
```
themes/{brand-slug}/
```
和草稿 wiki。

Failure boundaries

失败边界

URL không hợp lệ / không công khai → clarify xin URL public; trang auth-gated → partial trên trang marketing công khai.
Site có cả light/dark → clarify chọn theme trước khi trích.
Không trích được một nhóm token → partial: bỏ mục đó và ghi rõ gap, không bịa giá trị.
Yêu cầu rebuild thành code → ngoài phạm vi, chuyển
```
/web-clone
```
.

URL 无效或不是公开页面 → 澄清并询问有效的公开 URL；页面需要登录验证 → 对公开营销页面执行部分提取。
网站同时包含浅色和深色主题 → 澄清并选择要提取的主题。
无法提取某一类 token → 部分完成：跳过该部分并明确记录缺口，不编造数值。
要求将页面重建为代码 → 超出范围，转交
```
/web-clone
```
。

HOW

实施方法

Main workflow

主工作流

Step	Type	Inputs	Action	Outputs/exit	Failure/next
W01	judgment	lời user	Xác định mode (rico command / ngôn ngữ tự nhiên) + đầu ra (Workflow 1–4) + brand-slug	loại workflow	rebuild code → `/web-clone` ; nhiều theme → clarify
W02	effect	URL	Gather visual data: screenshot hero, nav, CTAs, cards, typography, footer; DevTools CSS variables, @font-face, computed styles	dữ liệu thô	SPA/CSS nén → Edge Cases
W03	judgment	dữ liệu thô	Extract design tokens (colors, typography, spacing, radius, shadows)	bộ token	nhóm thiếu → ghi gap
W04	judgment	trang + token	Document components với mọi state; brand voice; Do's/Don'ts	nội dung DESIGN.md	—
W05	effect	token	Sinh file theo workflow vào `themes/{brand-slug}/`	file đầu ra	—
W06	effect	kết quả	Output report draft + index + log (mục Delivery)	draft	0 artifact → skip

Chi tiết từng bước (nguồn chân lý cho W01–W06): xem "Workflow 1–4" dưới đây và các mục tham chiếu kèm theo, chép nguyên văn từ bản cũ.

步骤	类型	输入	操作	输出/退出	失败/后续操作
W01	判断	用户话语	确定模式（rico 命令/自然语言）、输出类型（工作流 1–4）和 brand-slug	工作流类型	需要重建代码 → `/web-clone` ；存在多个主题 → 澄清
W02	执行	URL	收集视觉数据：截取首屏、导航、CTA、卡片、字体排印和页脚；通过 DevTools 检查 CSS 变量、 `@font-face` 和计算样式	原始数据	SPA/压缩 CSS → 边界情况
W03	判断	原始数据	提取 design token（颜色、字体排印、间距、圆角、阴影）	token 集合	类别缺失 → 记录缺口
W04	判断	页面 + token	记录所有状态的组件、品牌语气以及建议/禁止事项	DESIGN.md 内容	—
W05	执行	token	根据工作流将文件生成到 `themes/{brand-slug}/`	输出文件	—
W06	执行	结果	输出报告草稿 + 索引 + 日志（见“交付”部分）	草稿	0 个产物 → 跳过

各步骤的详细信息（W01–W06 的唯一事实来源）：请参阅下方“工作流 1–4”及其附带的参考章节，并从旧版本逐字复制。

Branches

分支

ID	Kind	Guard	Hành vi	Skip / failure	Rejoin
B01	user_optional	`rico tokens` / `rico variables` / `rico theme.css` / `rico preview`	Workflow 2: chỉ sinh một định dạng	—	W06
B02	user_optional	`rico 全部输出 [brand]`	Workflow 3: sinh đủ 5 file	—	W06
B03	conditional_required	đầu vào là file token có sẵn ( `rico 把 DESIGN.md 转为 tokens` )	Workflow 4: parse file nguồn → sinh định dạng đích, bỏ W02	file nguồn không có → clarify	W05
B04	conditional_required	site multi-theme light/dark	hỏi theme; dark khác biệt rõ → đề nghị `themes/{brand}-dark/`	user chọn một theme → chỉ theme đó	W03
B05	recovery	SPA / client-rendered hoặc CSS nén	view-source + network tab / DevTools computed styles	vẫn không có → ghi gap	W03

ID	类型	条件	行为	跳过/失败	汇合点
B01	user_optional	`rico tokens` / `rico variables` / `rico theme.css` / `rico preview`	工作流 2：仅生成一种格式	—	W06
B02	user_optional	`rico 全部输出 [brand]`	工作流 3：生成全部 5 个文件	—	W06
B03	conditional_required	输入为已有的 token 文件（ `rico 把 DESIGN.md 转为 tokens` ）	工作流 4：解析源文件 → 生成目标格式，跳过 W02	源文件不存在 → 澄清	W05
B04	conditional_required	网站同时包含浅色/深色主题	询问主题；如果深色主题差异明显，则建议使用 `themes/{brand}-dark/`	用户选择一个主题 → 仅处理该主题	W03
B05	recovery	SPA/客户端渲染或压缩 CSS	使用 view-source + Network 标签页/DevTools 计算样式	仍然无法获取 → 记录缺口	W03

Validation và stopping

验证与停止条件

Cần review bằng mắt: token có nguồn quan sát thật (không bịa), preview.html mở được qua

file://

, tokens.json đúng DTCG có

$description

. Dừng khi mọi file của workflow đã chọn được sinh hoặc gap đã được ghi rõ.

需要通过肉眼审查：token 应具有真实观察来源（不得编造），preview.html 可通过

file://

打开，tokens.json 应符合 DTCG 并包含

$description

。当所选工作流的所有文件均已生成，或缺口已明确记录时停止。

Examples

示例

Positive:

rico DESIGN.md https://linear.app

→

themes/linear/DESIGN.md

themes/linear/preview.html

, trang Linear là dark khác biệt → hỏi theme trước, đề nghị

themes/linear-dark/

Boundary/failure: "clone y hệt stripe.com thành Next.js chạy được" → không trích token; chuyển
```
/web-clone
```
Mode B. Site không lộ shadow nào → DESIGN.md bỏ mục Shadows và ghi gap, không bịa giá trị.

正向示例：
```
rico DESIGN.md https://linear.app
```
→
```
themes/linear/DESIGN.md
```
+
```
themes/linear/preview.html
```
；Linear 页面采用差异明显的深色主题 → 提取前先询问主题，并建议使用
```
themes/linear-dark/
```
。
边界/失败示例：“将 stripe.com 像素级克隆为可运行的 Next.js” → 不提取 token，转交
```
/web-clone
```
模式 B。网站未呈现任何阴影 → DESIGN.md 省略 Shadows 部分并记录缺口，不编造数值。

Reference — Input Contract

参考——输入约定

Website Extraction

网站提取

extract DESIGN.md <url>

Required:

valid public URL

Optional flags:

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

extract DESIGN.md <url>

必填：

有效的公开 URL

可选标志：

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

Reference — What Can This Skill Do?

参考——此 Skill 能做什么？

Core Features

核心功能

Website to Design System - Input any website URL, extract its design tokens, colors, typography, spacing, shadows, and component styles
Multiple Output Formats - Generate DESIGN.md, preview.html, tokens.json (DTCG), variables.css, and theme.css (Tailwind v4)
Format Conversion - Convert between any supported formats (e.g., DESIGN.md to tokens.json, variables.css to DESIGN.md)
Visual Preview - Generate a self-contained preview.html page that showcases the entire design system

网站转设计系统——输入任意网站 URL，提取其 design token、颜色、字体排印、间距、阴影和组件样式
多种输出格式——生成 DESIGN.md、preview.html、tokens.json（DTCG）、variables.css 和 theme.css（Tailwind v4）
格式转换——在任意受支持格式之间转换（例如 DESIGN.md 转 tokens.json、variables.css 转 DESIGN.md）
可视化预览——生成可独立使用的 preview.html 页面，展示完整的设计系统

Use Cases

使用场景

Need a design system document for an existing website
Want to extract design tokens for implementation
Need to convert between design token formats
Want a visual reference page for a brand's design system

为已有网站创建设计系统文档
提取 design token 以供实现
在不同 design token 格式之间转换
为某个品牌的设计系统创建可视化参考页面

Reference — Trigger Methods

参考——触发方式

This skill supports two trigger modes:

Mode 1: Explicit Command (rico prefix)

Command	Output
`rico DESIGN.md [url]`	DESIGN.md + preview.html (default)
`rico preview [url]`	preview.html only
`rico tokens [url]`	tokens.json only
`rico variables [url]`	variables.css only
`rico theme.css [url]`	theme.css only
`rico 全部输出 [brand]`	All 5 files
`rico 把 DESIGN.md 转为 tokens`	Format conversion

Mode 2: Natural Language

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

此 skill 支持两种触发模式：

模式 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

Reference — Mode 3: Full-Clone — rebuild to working code

参考——模式 3：完整克隆——重建为可运行代码

Mặc định extract-site cho ra design system (token → DESIGN.md/css/json). Khi user muốn dựng lại nguyên trang thành code chạy được (pixel-perfect, ví dụ Next.js + shadcn), đây không còn là job của extract-site — chuyển sang /web-clone
Mode B (reconstruct), skill đó là canonical duy nhất cho pipeline recon → component spec → parallel builder → visual-diff QA (distilled từ

ai-website-cloner-template

, MIT). Trước 2026-07-23, pipeline này từng viết trùng ở cả hai skill; hợp nhất về

web-clone

để tránh drift khi một bên sửa mà bên kia quên.

默认情况下，extract-site 生成设计系统（token → DESIGN.md/CSS/JSON）。当用户希望 将整个页面重建为可运行代码（像素级还原，例如 Next.js + shadcn）时，这已不属于 extract-site 的职责——应转交给 /web-clone
模式 B（reconstruct）。该 skill 是 recon → component spec → parallel builder → visual-diff QA 流程的唯一权威来源（提炼自

ai-website-cloner-template

，MIT）。在 2026-07-23 之前，该流程曾同时写在两个 skill 中；现统一到

web-clone

，以避免一方更新而另一方遗漏所造成的漂移。

Reference — Output Structure

参考——输出结构

All generated files are saved in the

themes/{brand-slug}/

directory:

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

所有生成文件均保存在

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

Reference — Workflow

参考——工作流

Workflow 1: Generate DESIGN.md + Preview (Default)

工作流 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

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

Workflow 2: Single Format Output

工作流 2：单一格式输出

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

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

Workflow 3: Full Output (All 5 Files)

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

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

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

Workflow 4: Format Conversion

工作流 4：格式转换

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

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

Reference — Output Format Details

参考——输出格式详情

DESIGN.md

A comprehensive markdown document containing:

Brand voice and design philosophy
Color system with semantic token names
Typography scale with font-feature-settings
Spacing system
Border radius scale
Shadow specifications
Component documentation (with all states)
Do's and Don'ts (referencing specific tokens)

一份全面的 Markdown 文档，包含：

品牌语气和设计理念
使用语义化 token 名称的颜色系统
包含 font-feature-settings 的字体排印比例
间距系统
圆角比例
阴影规范
组件文档（涵盖所有状态）
建议/禁止事项（引用具体 token）

preview.html

A self-contained, single-file visual design system reference page:

Linear top-to-bottom layout (no bento grid)
Sections: Hero → Colors → Gradients → Typography → Spacing & Shapes → Shadows → Depth & Surfaces → Components → Do's & Don'ts
Download links for all spec files
Sticky nav with section anchors
Scroll-triggered entrance animations
Responsive (mobile-first)
Works with
```
file://
```
protocol (no external dependencies except Google Fonts)

一个可独立使用的单文件设计系统可视化参考页面：

Linear 自上而下的布局（不使用 bento 网格）
章节：Hero → 颜色 → 渐变 → 字体排印 → 间距与形状 → 阴影 → 深度与表面 → 组件 → 建议与禁止事项
所有规范文件的下载链接
带有章节锚点的粘性导航
滚动触发的入场动画
响应式设计（移动端优先）
可通过
```
file://
```
协议运行（除 Google Fonts 外无外部依赖）

tokens.json

DTCG (Design Tokens Community Group) standard format:

Each token includes
```
$description
```
explaining its intended use
Grouped by category: colors, typography, spacing, radius, shadows
Compatible with style dictionary and token transformers

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

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

variables.css

CSS custom properties grouped by:

Colors, Font Families, Type Scale, Weights
Spacing, Layout, Border Radius, Shadows, Surfaces

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

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

theme.css

Tailwind v4

@theme

format for direct integration with Tailwind CSS v4.

采用 Tailwind v4

@theme

格式，可直接与 Tailwind CSS v4 集成。

Reference — Usage Examples

参考——使用示例

Example 1: Generate Design System from Website

示例 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

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

Example 2: Extract Tokens Only

示例 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.

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.

Example 3: Convert Between Formats

示例 3：在不同格式之间转换

User: rico 把 DESIGN.md 转为 tokens

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

    Generated themes/github/tokens.json

User: rico 把 DESIGN.md 转为 tokens

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

    Generated themes/github/tokens.json

Example 4: Full Output

示例 4：完整输出

User: rico 全部输出 github

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

User: rico 全部输出 github

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

Reference — Edge Cases

参考——边界情况

Scenario	Handling
SPA / client-rendered	Use view-source + network tab for CSS files
Compressed CSS	Use DevTools computed styles panel
Multi-theme (light/dark)	Ask user which theme to document; offer separate `dark/` subdirectory
Auth-gated pages	Focus on public marketing pages
Missing token categories	Skip sections and note the gap (never fabricate values)

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

Reference — File Structure

参考——文件结构

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

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

Reference — FAQ

参考——FAQ

How is this different from rico-ui-ux-themes?

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

rico-ui-ux-themes: Applies existing design themes to optimize your website's visual design
rico-design-md: Extracts design systems FROM websites and generates documentation/tokens

rico-ui-ux-themes：将已有设计主题应用到用户的网站，以优化其视觉设计
rico-design-md：从网站中提取设计系统，并生成文档和 token

Can I use the generated tokens in my project?

我可以在自己的项目中使用生成的 token 吗？

Yes. All output formats are production-ready:

```
tokens.json
```
works with style dictionary and token transformers
```
variables.css
```
can be imported directly
```
theme.css
```
integrates with Tailwind v4

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

```
tokens.json
```
可与 style dictionary 和 token transformers 配合使用
```
variables.css
```
可直接导入
```
theme.css
```
可与 Tailwind v4 集成

What if the website has both light and dark modes?

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

The skill will ask which mode to document. If the dark mode is visually distinct (e.g., Linear, Supabase), it offers to generate a separate

themes/{brand}-dark/

subdirectory.

Last Updated: 2026-05-13

Maintainer: @ricouii

Blog: rico'blog

Status: Active Development

此 skill 会询问需要记录哪个模式。如果深色模式在视觉上存在明显差异（例如 Linear、Supabase），则可选择生成独立的

themes/{brand}-dark/

子目录。

最后更新：2026-05-13

维护者：@ricouii

博客：rico'blog

状态：积极开发中

Delivery — Output Report

交付——输出报告

After all main skill tasks complete, write a propose draft to the wiki.

完成所有主要 skill 任务后，向 wiki 写入一份提议草稿。

Steps

步骤

1. Build the filename:

Format:
```
DDMMYY-<ten>.md
```
```
DDMMYY
```
= today (e.g.,
```
020626
```
for 2 June 2026)

<ten>

= 2–4 kebab-case words summarising what was done (e.g.,

landing-page-coteccons

brand-kit-fintech

ingest-auth-spec

)

2. Write

llmwiki/wiki/sources/draft/DDMMYY-<ten>.md

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

1. 构建文件名：

格式：
```
DDMMYY-<ten>.md
```
```
DDMMYY
```
= 今天（例如，
```
020626
```
表示 2026 年 6 月 2 日）
```
<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

Output

Files

File	Action
`path/to/file`	created / modified

File	Action
`path/to/file`	created / modified

Notes

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

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. Update wiki index & log:**
- `llmwiki/wiki/index.md` — append one row: `| [DDMMYY-<ten>](sources/draft/DDMMYY-<ten>.md) | draft | YYYY-MM-DD |`
- `llmwiki/wiki/log.md` — append: `## YYYY-MM-DD — <skill-name> — <ten>`

> Skip only when the skill produces zero artefacts and zero decisions (e.g., a pure display mode like `/caveman-stats`).

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>`

> 仅当此 skill 未生成任何产物且未作出任何决策时（例如 `/caveman-stats` 这样的纯展示模式），才可跳过。