extract-design

Name: extract-design
Author: manavarya09

manavarya09/design-extract

Source View on skills.sh

How to install extract-design

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

Claude Code

Cursor

Windsurf

Cline

Full instructions (SKILL.md)

Source of truth, from manavarya09/design-extract.

name: extract-design description: "Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use', or '/extract-design'." allowed-tools: Bash, Read, Write, Glob

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`)