SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsextract-site

extract-site

Design & creation

View repository

Updated 10-15 22:10

About this skill

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

WHAT

Purpose and context

  • Purpose: from a public website, extract the design system (color, typography, spacing, radius, shadow, component + state) into documents/tokens (DESIGN.md, preview.html, tokens.json, variables.css, theme.css); or convert between those token formats.
  • Trigger (when to use): two trigger modes — Mode 1 explicit command with prefix rico (rico DESIGN.md [url], rico tokens [url], rico 全部输出 [brand], rico 把 DESIGN.md 转为 tokens…), Mode 2 natural language ("Create a DESIGN.md for linear.app", "Extract design tokens from stripe.com"…). Use cases: need a design system doc for an existing website · extract tokens to implement · convert token formats · visual reference page for a brand's design system.
  • Non-goals: Do NOT rebuild the entire page into runnable code (pixel-perfect) — that is /web-clone Mode B (reconstruct), see "Mode 3: Full-Clone"; do not apply a theme to the user's website (that is rico-ui-ux-themes, see FAQ); do not extract pages that require login.

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}/. Format conversion = parse source file → generate target file, skip the gather step.

Input and output contract

Field Required? Meaning
In Valid public URL yes (unless converting formats) extract DESIGN.md <url>
In source token file yes when converting e.g. existing DESIGN.md → tokens.json
In flags --theme=light|dark, --depth=basic|full, --components-only, --tokens-only, --mobile-first, --desktop-first no fine-tune extraction scope
Out themes/{brand-slug}/DESIGN.md + preview.html default style reference + self-contained preview page
Out tokens.json / variables.css / theme.css on demand DTCG · CSS custom properties · Tailwind v4 @theme
Out output report llmwiki/wiki/sources/draft/DDMMYY-<ten>.md yes (unless 0 artifacts) Delivery section

Rules and 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 into runnable code → switch to /web-clone Mode B, do not do it in this skill (single canonical, avoid drift).
  • RULE-05 (SHOULD): Do's / Don'ts 7-8 each, reference specific tokens; brand voice 5-8 sentences in the form of design critique.
  • Capabilities: read public websites (screenshot + read CSS/computed styles); write files to themes/{brand-slug}/ and draft wiki.

Failure boundaries

  • Invalid / non-public URL → clarify ask for a public URL; auth-gated page → partial on the public marketing page.
  • Site has both light/dark → clarify choose a theme before extracting.
  • Cannot extract a token group → partial: drop that section and state the gap explicitly, do not invent values.
  • Request to rebuild into code → out of scope, switch to /web-clone.

HOW

Main workflow

Step Type Inputs Action Outputs/exit Failure/next
W01 judgment user's words Determine mode (rico command / natural language) + output (Workflow 1–4) + brand-slug workflow type rebuild code → /web-clone; multiple themes → clarify
W02 effect URL Gather visual data: screenshot hero, nav, CTAs, cards, typography, footer; DevTools CSS variables, @font-face, computed styles raw data SPA/minified CSS → Edge Cases
W03 judgment raw data Extract design tokens (colors, typography, spacing, radius, shadows) token set missing group → record gap
W04 judgment page + tokens Document components with all states; brand voice; Do's/Don'ts DESIGN.md content —
W05 effect tokens Generate files per workflow into themes/{brand-slug}/ output files —
W06 effect results Output report draft + index + log (Delivery section) draft 0 artifacts → skip

Details of each step (source of truth for W01–W06): see "Workflow 1–4" below and the accompanying reference sections, copied verbatim from the old version.

Branches

ID Kind Guard Behavior Skip / failure Rejoin
B01 user_optional rico tokens / rico variables / rico theme.css / rico preview Workflow 2: generate only one format — W06
B02 user_optional rico 全部输出 [brand] Workflow 3: generate all 5 files — W06
B03 conditional_required input is an existing token file (rico 把 DESIGN.md 转为 tokens) Workflow 4: parse source file → generate target format, skip W02 source file missing → clarify W05
B04 conditional_required site multi-theme light/dark ask about theme; dark is clearly different → suggest themes/{brand}-dark/ user picks one theme → only that theme W03
B05 recovery SPA / client-rendered or minified CSS view-source + network tab / DevTools computed styles still nothing → record gap W03

Validation and stopping

Needs visual review: tokens have real observational sources (not fabricated), preview.html opens via file://, tokens.json is valid DTCG with $description. Stop when all files of the chosen workflow have been generated or gaps have been clearly recorded.

Examples

  • Positive: rico DESIGN.md https://linear.app → themes/linear/DESIGN.md + themes/linear/preview.html, the Linear site is clearly dark → ask about theme first, suggest themes/linear-dark/.
  • Boundary/failure: "clone stripe.com exactly into a working Next.js" → do not extract tokens; switch to /web-clone Mode B. The site exposes no shadow at all → DESIGN.md drops the Shadows section and records a gap, does not fabricate values.

Reference — Input Contract

Website Extraction

extract DESIGN.md

Required:

  • valid public URL

Optional flags:

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

Reference — 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

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

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

By default extract-site outputs design system (token → DESIGN.md/css/json). When the user wants to rebuild the entire page into working code (pixel-perfect, e.g. Next.js + shadcn), this is no longer extract-site's job — hand it over to /web-clone Mode B (reconstruct); that skill is the sole canonical source for the pipeline recon → component spec → parallel builder → visual-diff QA (distilled from ai-website-cloner-template, MIT). Before 2026-07-23, this pipeline was duplicated across both skills; consolidated into web-clone to avoid drift when one side is edited and the other is forgotten.

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

Reference — 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)

Workflow 3: Full Output (All 5 Files)

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

Workflow 4: Format Conversion

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)

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)

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

variables.css

CSS custom properties grouped by:

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

theme.css

Tailwind v4 @theme format for direct integration with Tailwind CSS v4.

Reference — Usage Examples

Example 1: Generate Design System from Website

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

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

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

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)

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

Reference — FAQ

How is this different from 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

Can I use the generated tokens in my project?

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

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

Delivery — Output Report

After all main skill tasks complete, write a propose draft to the 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
---

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