Extract Design
- 2.5k installs
- 3.1k repo stars
- Updated June 8, 2026
- manavarya09/design-extract
extract-design is an agent skill that runs designlang to pull a full design system from a URL into markdown, Tailwind, CSS, Figma, and shadcn outputs.
About
Extract Design Language pulls colors, typography, spacing, shadows, components, breakpoints, and animations from any website URL using the designlang CLI. A single npx designlang run with optional screenshots produces eight outputs: AI-optimized markdown, visual HTML preview, W3C design tokens JSON, Tailwind config, CSS variables, Figma variables import, React theme object, and shadcn theme CSS. The workflow installs or invokes designlang, reads the generated markdown, and presents palette, font, spacing, WCAG score, and component patterns to the user with suggested next steps for Tailwind, shadcn, Figma, and preview HTML. Flags support multi-page depth crawling, dark mode extraction, SPA wait times, and framework-specific theme generation. Additional commands compare two sites with designlang diff and show extraction history. Use it when a team needs design tokens from a live site, Tailwind or shadcn theming from a reference brand, or Figma handoff variables without manual inspection.
- Eight outputs including markdown, Tailwind, CSS variables, Figma, and shadcn themes.
- Runs via npx designlang with optional screenshots and multi-page depth crawl.
- WCAG accessibility scoring in the HTML preview report.
- Dark mode extraction and SPA wait flags for modern sites.
- Site diff and history commands for comparing design extractions.
Extract Design by the numbers
- 2,512 all-time installs (skills.sh)
- +3 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Ranked #127 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
extract-design capabilities & compatibility
- Capabilities
- designlang cli extraction with screenshot captur · multi page crawl and dark mode scheme extraction · tailwind, css variables, and react theme generat · figma variables and shadcn theme css export · wcag accessibility scoring in html preview · site comparison and extraction history commands
- Use cases
- ui design · web design · frontend
What extract-design says it does
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.
npx skills add https://github.com/manavarya09/design-extract --skill extract-designAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 2.5k |
|---|---|
| repo stars | ★ 3.1k |
| Security audit | 0 / 3 scanners passed |
| Last updated | June 8, 2026 |
| Repository | manavarya09/design-extract ↗ |
How do I capture colors, typography, and component patterns from a live website into usable design tokens?
Extract a website design language into markdown, Tailwind config, CSS variables, Figma tokens, and accessibility-scored previews.
Who is it for?
Frontend teams cloning or referencing an existing site's visual language into code and design tools.
Skip if: Skip when you need original brand strategy without a reference URL to extract.
When should I use this skill?
User says extract design, design tokens, design language, site colors or fonts, or /extract-design on a URL.
What you get
Eight designlang artifacts with palette, type scale, spacing, WCAG score, and import-ready theme files.
- design-language.md
- tailwind.config.js
- shadcn-theme.css
By the numbers
- Produces 8 structured output files per extraction
- Runs WCAG accessibility scoring on extracted design language
Files
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 designlangOr use npx (no install required):
npx designlang <url>Process
1. Run the extraction on the provided URL:
npx designlang <url> --screenshotsFor 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.md3. 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.jsinto their project - Import
*-variables.cssinto their stylesheet - Paste
*-shadcn-theme.cssinto globals.css for shadcn/ui users - Import
*-theme.jsfor React/CSS-in-JS projects - Import
*-figma-variables.jsoninto Figma for designer handoff - Open
*-preview.htmlin 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) |
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
Do I need a global install?
No. npx designlang works without installing; npm install -g designlang is optional.
What files are generated?
Markdown, HTML preview, tokens JSON, Tailwind config, CSS variables, Figma variables, React theme, and shadcn CSS.
Can it crawl multiple pages?
Yes. Use --depth for internal page crawling and --dark for dark mode schemes.
Is Extract Design safe to install?
skills.sh reports 0 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.