extract-design

SKILL.md

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)

1d