mcpField
E
extract-design

extract-design

github.com/manavarya09Design & UI4.4k3.0k installsUpdated 5d ago
Repository

About extract-design

extract-design is a skill that analyzes a website URL and produces design-language documentation and implementation files. It is intended for designers and developers who need to inspect a site's visual system or reuse its tokens and themes.

Key features

  1. 01Extract colors, typography, and spacing
  2. 02Inspect components, shadows, and breakpoints
  3. 03Generate eight design-system files
  4. 04Capture screenshots of components
  5. 05Crawl pages or extract dark mode

Use cases

  1. 01Document a website's design system
  2. 02Reuse extracted tokens in a project
  3. 03Prepare design variables for Figma
  4. 04Review component patterns and accessibility

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/manavarya09/design-extract --skill extract-design

After installing, type/extract-designin Claude Code to confirm it loaded.

Details

From the project README

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

  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)

FilePurpose
*-design-language.mdAI-optimized markdown — the full design system for LLMs
*-preview.htmlVisual HTML report with swatches, type scale, shadows, a11y
*-design-tokens.jsonW3C Design Tokens format
*-tailwind.config.jsReady-to-use Tailwind CSS theme
*-variables.cssCSS custom properties
*-figma-variables.jsonFigma Variables import format
*-theme.jsReact/CSS-in-JS theme object
*-shadcn-theme.cssshadcn/ui theme CSS variables

Additional Commands

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

Options

FlagDescription
--out <dir>Output directory (default: ./design-extract-output)
--darkAlso extract dark mode color scheme
--depth <n>Crawl N internal pages for site-wide extraction
--screenshotsCapture component screenshots (buttons, cards, nav)
--wait <ms>Wait time after page load for SPAs
--framework <type>Generate only specific theme (react or shadcn)

Comments

Markdown supported