How do I install the Extract Design skill?

Run npx skillmds@latest add mmehdi0606/extract-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Extract Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Extract Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Extract Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Extract Design?

MMEHDI0606 (@mmehdi0606) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Extract Design by mmehdi0606 — Agent Skill

Name: Extract Design
Rating: 4.2 (5 reviews)
Author: MMEHDI0606

Extract Design

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'.

MMEHDI0606 Updated Sep 9, 2026 2 repo stars

File contents

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

---name: extract-designdescription: 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'.--- # 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: ```bash npm install -g designlang ``` Or use npx (no install required): ```bash npx designlang <url> ``` ## Process 1. **Run the extraction** on the provided URL: ```bash npx designlang <url> --screenshots ``` For 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: ```bash cat design-extract-output/*-design-language.md ``` 3. **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.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`) |

Frequently asked questions