extract-design

extract-design

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)

Weekly Installs702Repositorymanavarya09/des…-extractGitHub Stars1.7KFirst SeenTodaySecurity AuditsGen Agent Trust HubWarnSocketWarnSnykWarn