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

1. 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

2. Read the generated markdown file to understand the design:

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

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

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

CLI Commands

Core Extraction

• designlang <url> — Colors, typography, spacing, shadows, radii, CSS vars, breakpoints, animations, components
• designlang apply <url> — Auto-detect framework and write tokens to your project
• designlang clone <url> — Generate a working Next.js starter with extracted design

Grading & Comparison

• designlang grade <url> — Shareable HTML Design Report Card — letter grade, 8 dimensions, evidence, strengths + fixes
• designlang battle <urlA> <urlB> — Head-to-head graded battle card with verdict, dimension table, palette comparison

Design Transformation

• designlang remix <url> --as <vocab> — Restyle the audited page in another vocabulary (brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial)
• designlang theme-swap <url> --primary <hex> — Recolour the extracted design around a new brand primary
• designlang pair <urlA> <urlB> — Fuse two designs across 7 axes (colours/type/spacing/shape/motion/voice/components)

Documentation & Analysis

• designlang brand <url> — Full editorial brand-guidelines document (13 chapters)
• designlang pack <url> — Bundle every output into one polished design-system directory
• designlang drift <url> --tokens <file> — Check local tokens for drift against a live site
• designlang visual-diff <before> <after> — Side-by-side HTML diff of two URLs

MCP Server

• designlang mcp — Launch stdio MCP server for Cursor / Claude Code / agent integration

Claude Code Slash Commands

Inside Claude Code sessions (via plugin):

• /extract <url> — Full extraction output
• /grade <url> — Design Report Card
• /battle <urlA> <urlB> — Comparative analysis
• /remix <url> --as <vocab> — Style transformation
• /pack <url> — Bundled design system
• /theme-swap <url> --primary <hex> — Recolour around a new brand primary
• /brand <url> — Full editorial brand-guidelines document
• /pair <urlA> <urlB> — Fuse two designs

Additional Commands

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

Options