extract-design · diff
git:20260415.ee882b0 to git:20260415.f6566b1
52 added, 25 removed. Audit A to A.
---
name: extract-design
- description: "Extract the full design language from any website URL. Produces AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors does this site use', 'what font does this site use', or '/extract-design'."
- argument-hint: "<url> [--dark] [--out <dir>]"
+ 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.
+ Extract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.
- ## Process
+ ## Prerequisites
- 1. **Run the extraction CLI** on the provided URL:
+ Ensure `designlang` is available. Install if needed:
```bash
- cd "${CLAUDE_SKILL_DIR}/../.." && node bin/design-extract.js $ARGUMENTS
+ npm install -g designlang
```
- If dependencies are not installed, run first:
+ Or use npx (no install required):
+
```bash
- cd "${CLAUDE_SKILL_DIR}/../.." && npm install
+ 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)
+ - Primary color palette with hex codes
- Font families in use
- Spacing system (base unit if detected)
- - Number of component patterns found
- - Any notable design decisions (shadows, border-radius scale, etc.)
+ - WCAG accessibility score
+ - Component patterns found
+ - Notable design decisions (shadows, radii, etc.)
4. **Offer next steps:**
- - Copy `tailwind.config.js` into the user's project
- - Import `variables.css` into their stylesheet
- - Use `design-tokens.json` for tooling integration
- - Use the markdown file as a reference for AI-assisted development
-
- ## Output Files
+ - 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
- The tool generates 4 files in the output directory:
+ ## Output Files (8)
| File | Purpose |
|------|---------|
- | `*-design-language.md` | AI-optimized markdown describing the full design system |
- | `*-design-tokens.json` | W3C Design Tokens format for tooling |
- | `*-tailwind.config.js` | Ready-to-use Tailwind CSS theme extension |
- | `*-variables.css` | CSS custom properties for direct use |
+ | `*-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
- - `--out <dir>` — Output directory (default: `./design-extract-output`)
- - `--dark` — Also extract dark mode color scheme
- - `--wait <ms>` — Wait time after page load for SPAs
+ | 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`) |