Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

extract-design — Claude Code skill for extracting website design

This skill analyzes a website URL and generates files describing its design system. Use it to bring a site's colors, typography, and component patterns into a project.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Manavarya09/design-extract --skill extract-design -a claude-code
Open on GitHub

What extract-design does

The skill runs designlang on a URL and creates eight files: a Markdown design-system report, an HTML preview, W3C design tokens, Tailwind and React themes, shadcn/ui CSS, CSS variables, and Figma variables. It also reports a WCAG accessibility score and findings such as colors, fonts, spacing, and component patterns.

The designlang command must be available. Install it with npm install -g designlang, or run it through npx designlang <url>. Add --screenshots to capture component images, --depth to crawl internal pages, or --dark to extract a dark color scheme. Without --depth, the analysis is limited to the supplied URL, so use the flag when you need multiple pages covered.

The skill reads the generated Markdown report and presents its main findings. You can copy *-tailwind.config.js into a project or import *-variables.css. To compare sites, run npx designlang diff <urlA> <urlB>; to view a site's history, use npx designlang history <url>.

What it helps with

  • extract a site's colors and fonts from its URL
  • generate a Tailwind theme from an existing website
  • prepare design tokens for Figma
  • check a site's WCAG accessibility score
  • compare the design of two websites

Example prompts for the agent

  • Extract the design system from this website URL and report its colors, fonts, and WCAG score.
  • Generate design files for this site, including dark-mode colors and component screenshots.
  • Compare the design of these two URLs and show the differences.

How to install extract-design

1Skills CLI (Vercel)

npx skills add Manavarya09/design-extract --skill extract-design -a claude-code

2Manually: put the files in place

~/.claude/skills/extract-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/extract-design/

Similar

music-video-subtitle-generator MiniMax-AI Plans AI music video storyboards and kinetic lyric typography from audio tracks and lyrics. Useful for creators generating multi-shot shot prompts and timing rules. Claude Code CX Codex Cursor +1 3,400installs minimalist-product-ad-generator MiniMax-AI This skill turns product images and an ad brief into a short product film, from choosing a format to planning shots and generating video. It is aimed at product promotion and launches. Claude Code CX Codex Cursor +1 3,400installs architecture-diagram Cocoon AI ([email protected]), ported by Hermes Agent Generates SVG architecture and cloud infrastructure diagrams as a standalone HTML file with a dark theme. No API keys or external dependencies needed — just a browser. Claude Code CX Codex Cursor +1 491installs co-op-game-intro-generator MiniMax-AI Generates opening menu animations for two-player co-op games. It locks character identity cues, arranges UI elements, and formats prompts for MiniMax H3. Claude Code CX Codex Cursor +1 3,300installs remotion calesthio Teaches AI agents toolkit-specific Remotion patterns, including custom transition shaders and 30 fps video rules. Claude Code CX Codex Cursor +1 1,200installs dfm earthtojake Reviews 3D parts for sheet metal bending, CNC machining, and injection molding. Catches design-for-manufacturing issues before sending parts to the shop. Claude Code CX Codex Cursor +1 2,000installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs

Questions about extract-design

How do I install extract-design in Claude Code?

Run npx skills add Manavarya09/design-extract --skill extract-design -a claude-code. The skill file is available at ~/.claude/skills/extract-design/SKILL.md.

What does extract-design do?

It analyzes a website URL and generates design-system files, including tokens, CSS variables, and themes for Tailwind and React. It also reports a WCAG accessibility score.

Can extract-design analyze multiple pages?

Yes. Set the crawl depth with --depth <n> to include internal pages. Add --screenshots to capture component screenshots.

Source text

SKILL.md · MIT 
---
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', 'turn this URL into design tokens', 'make a Tailwind theme from this site', or '/extract-design'. Do not use for building a new UI from scratch unless the user first wants to extract an existing website's design language."
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:

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

© Manavarya09 · MIT · Manavarya09/design-extract

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor