Design Extract Skill

Extract comprehensive design system data from any website.

Triggers

• "extract design from [URL]"

• "ดึง design จาก [URL]"

• "/extract [URL]"

• "analyze design of [URL]"

Requirements

• agent-browser CLI (npm install -g agent-browser && agent-browser install )

Quick Usage

/extract https://airbnb.com /extract https://linear.app

What Gets Extracted

Category Details

Colors Backgrounds, text, borders with usage context

Typography Fonts, weights, sizes, line heights

Spacing Grid base detection, padding/margin values

Components Buttons, cards, inputs with animations

Shadows Box shadows, elevation levels

Animations @keyframes, transitions, hover/focus states

Psychology Style classification, emotions, target audience

Output

design-system/extracted/{site-name}/ ├── data.yaml # Complete 17-section design data └── screenshots/ ├── full-page.png # Full page capture ├── button-0-default.png ├── button-0-hover.png └── ...

Workflow

1. Navigate → Open URL in browser
2. Extract → CSS data (colors, typography, spacing, components)
3. Capture → Interactive states (hover, focus screenshots)
4. Analyze → AI psychology analysis
5. Generate → data.yaml with 17 sections

Detailed Documentation

Reference Use When

references/extraction-steps.md Full step-by-step extraction process

references/output-format.md data.yaml schema and sections

references/style-detection.md Design style classification

references/error-handling.md Handling failures gracefully

Next Steps After Extraction

Extract more reference sites (optional)

/extract https://linear.app

Generate final design system

/designsetup @prd.md

→ Merges all extracted data

→ Outputs: design-system/data.yaml