extract-site

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: extract-site
description: >-
  Extract and convert a website or docs site into clean markdown
---

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

---
## 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
## What Can This Skill Do?

### Core Features

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

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

---

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

---

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

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.

---

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

---

## Workflow

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

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

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