Extract Design Agent Skill

Extract Design Language

Extract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.

Prerequisites

Ensure designlang is available. Install if needed:

npm install -g designlang

Or use npx (no install required):

npx designlang <url>

Process

• Run the extraction on the provided URL:

npx designlang <url> --screenshots

For multi-page crawling: npx designlang <url> --depth 3 --screenshots

For dark mode: npx designlang <url> --dark --screenshots

• Read the generated markdown file to understand the design:

cat design-extract-output/*-design-language.md

• Present key findings to the user:
• Primary color palette with hex codes
• Font families in use
• Spacing system (base unit if detected)
• WCAG accessibility score
• Component patterns found
• Notable design decisions (shadows, radii, etc.)

• Offer next steps:
• Copy *-tailwind.config.js into their project
• Import *-variables.css into their stylesheet
• Paste *-shadcn-theme.css into globals.css for shadcn/ui users
• Import *-theme.js for React/CSS-in-JS projects
• Import *-figma-variables.json into Figma for designer handoff
• Open *-preview.html in a browser for a visual overview
• Use the markdown file as context for AI-assisted development

Output Files (8)

| File | Purpose |

|------|---------|

| *-design-language.md | AI-optimized markdown — the full design system for LLMs |

| *-preview.html | Visual HTML report with swatches, type scale, shadows, a11y |

| *-design-tokens.json | W3C Design Tokens format |

| *-tailwind.config.js | Ready-to-use Tailwind CSS theme |

| *-variables.css | CSS custom properties |

| *-figma-variables.json | Figma Variables import format |

| *-theme.js | React/CSS-in-JS theme object |

| *-shadcn-theme.css | shadcn/ui theme CSS variables |

Additional Commands

• Compare two sites: npx designlang diff <urlA> <urlB>
• View history: npx designlang history <url>

Options

| Flag | Description |

|------|-------------|

| --out <dir> | Output directory (default: ./design-extract-output) |

| --dark | Also extract dark mode color scheme |

| --depth <n> | Crawl N internal pages for site-wide extraction |

| --screenshots | Capture component screenshots (buttons, cards, nav) |

| --wait <ms> | Wait time after page load for SPAs |

| --framework <type> | Generate only specific theme (react or shadcn) |