Extract Design Language

Prerequisites

designlang

npm install -g designlang

npx designlang <url>

Process

1. Run the extraction on the provided URL:

npx designlang <url> --screenshots

npx designlang <url> --depth 3 --screenshots

npx designlang <url> --dark --screenshots

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

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

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

*-design-language.md

*-preview.html

*-design-tokens.json

*-tailwind.config.js

*-variables.css

*-figma-variables.json

*-theme.js

*-shadcn-theme.css

Additional Commands

• Compare two sites:

  npx designlang diff <urlA> <urlB>

• View history:

  npx designlang history <url>

Options

--out <dir>

./design-extract-output

--dark

--depth <n>

--screenshots

--wait <ms>

--framework <type>

react

shadcn