What is this

extraktor turns any URL into a usable design system. It opens a browser, reads the page, and outputs production-ready code: Tailwind configs, CSS variables, DTCG tokens, React components, Storybook, and DESIGN.md files.

It ships as 9 Claude Code skills. Install once, then just talk to Claude.

Works with your Claude Code subscription — no API key needed

Every skill runs against your existing Claude Code subscription (Pro, Max, Team). extraktor does the browser work and data extraction; Claude does the AI analysis in-session, metered against your plan. Nothing calls the Anthropic API from a subprocess unless you explicitly opt in via --api-key.

Previously, genome and regen required ANTHROPIC_API_KEY and broke for subscription users. They now use a prep + in-session pattern: genome-prep / regen-prep / design-md-prep produce a data scaffold (screenshots, DOM, tokens, a claude-instructions.md), and Claude builds components, narratives, and pages directly in the conversation. The standalone one-shot commands are still there with --api-key for CI / scripted use.

Setup

# 1. Install
npm install -g extraktor
npx playwright install chromium

# 2. Copy skills into Claude Code
cp $(npm root -g)/extraktor/skills/*.md ~/.claude/skills/

# 3. Done. Talk to Claude.

Skills

| Skill | What it does | API key? | |-------|-------------|----------| | extract-tokens | Colors, fonts, spacing -> Tailwind config, CSS vars, DTCG tokens | No | | analyze-design | Quick design audit - colors, fonts, framework detection | No | | clone-site | Full Next.js project with all assets and animations | No | | apply-style | Extract a site's style and apply it to your project | No | | design-md | Generate Stitch-format DESIGN.md (compatible with awesome-design-md) | No | | genome | Full React design system + Storybook from any URL | No (Claude in-session) | | regen | Generate new pages from an extracted genome | No (Claude in-session) | | devtools-extract | Extract from authenticated pages via Chrome DevTools | No | | claude-design | Seed Claude Design from any URL | No |

All 9 skills work without an ANTHROPIC_API_KEY. The three that need AI analysis (genome, regen, and the optional design-md polish) use your Claude Code subscription — extraktor prepares data, Claude builds the output in-session. Standalone CLI users can still pass --api-key for one-shot scripted runs.

See skills/README.md for the full index and the prep + in-session pattern.

Examples

Just talk to Claude naturally:

"Extract the design tokens from linear.app"
"What fonts does stripe.com use?"
"Generate a DESIGN.md from this site"
"Clone this site and make it about my product"
"Extract the design system and build me a new landing page"
"Get the colors from my dashboard"  (uses --devtools for auth pages)

Claude picks the right skill automatically.

What gets extracted

| Category | Output | |----------|--------| | Colors | Full palette, semantic names, gradients, usage roles | | Typography | Families, sizes, weights, line heights, text styles | | Spacing | Scale, margins, padding, gaps | | Animations | Keyframes (named), transitions, transforms, timing functions | | Layout | Section hierarchy, grid patterns, bento layouts, breakpoints | | Effects | Shadows, border radii, filters, opacity | | Assets | Images, SVGs, fonts, icons (downloaded) | | Components | Cards, heroes, CTAs, pricing, testimonials, nav | | Platform | Framer, Webflow, WordPress, Shopify, Squarespace, Wix |

DESIGN.md generation

extraktor design-md https://linear.app -o ./DESIGN.md

Generates a 9-section Stitch-format DESIGN.md:

1. Visual Theme & Atmosphere
2. Color Palette & Roles
3. Typography Rules
4. Component Stylings
5. Layout Principles
6. Depth & Elevation
7. Do's and Don'ts
8. Responsive Behavior
9. Agent Prompt Guide

Drop it into any project. Any AI agent (Claude, Cursor, Copilot) reads it and builds matching UI. What awesome-design-md does manually for 31 sites, extraktor does automatically for any URL.

Works with Claude Design

Claude Design is Anthropic's design tool for building interfaces in conversation with Claude. Extraktor handles the "start with a design system from an existing site" on-ramp — one command produces a bundle you can feed straight into Claude Design's setup flow.

1. Run extraktor genome <url> --claude-design -o ./{site}-cd
2. Upload the generated .zip (or code/ folder) to Claude Design's code-repo ingestion
3. Upload files in assets/ one by one (colors.md, typography.md, logo.svg, fonts/)
4. Paste contents of DESIGN.md into Claude Design's setup chat

See claude-design skill for natural-language usage.

Works with taste-skill

taste-skill is a premium-frontend skill pack for Claude Code. If it's installed alongside extraktor, you can say "regen with taste" and Claude will layer taste-skill's output rules on top of your extracted genome.

Extraction stays faithful — extract, clone, genome, and devtools read the source exactly as it is. taste-skill only fires on regen and refine-design when you ask for it.

Install:

npx skills add https://github.com/Leonxlnx/taste-skill

See docs/interop-taste-skill.md for the full variant → extraktor skill mapping.

Genome - design system from any URL

From a Claude Code session (subscription path, recommended):

extraktor genome-prep https://example.com -o ./genome

Then follow the genome skill — Claude reads the per-section screenshots, DOM, and tokens from ./genome/ and writes components, theme, Storybook, and genome.json directly into the turn.

Four phases:

1. Extract — Design tokens (colors, fonts, spacing, animations) — API-free
2. See — Claude (in your session) reads per-section screenshots
3. Synthesize — Screenshot + DOM together -> clean React/Tailwind components
4. Package — genome.json + components/ + theme/ + Storybook

Build new pages from a genome:

extraktor regen-prep ./genome --prompt "SaaS pricing page for TaskFlow" -o ./taskflow

Then follow the regen skill to have Claude compose the page in-session.

Standalone CLI users (no Claude Code) can run the legacy one-shot with --api-key:

extraktor genome <url> --api-key $ANTHROPIC_API_KEY -o ./genome
extraktor regen <dir> --prompt "..." --api-key $ANTHROPIC_API_KEY -o ./new

DevTools mode

Extract from pages you're logged into:

# Start Chrome with debugging, log in to your app, then:
extraktor extract https://dashboard.example.com --devtools

Connects via CDP. Cookies and sessions preserved. Works with extract, genome, clone, design-md.

CLI reference

Works as a standalone CLI without Claude Code:

extraktor extract <url>         Design tokens (Tailwind, CSS vars, DTCG)
extraktor analyze <url>         Quick analysis (no output files)
extraktor clone <url>           Next.js project with all assets
extraktor design-md <url>       DESIGN.md (Stitch format, 9 sections)
extraktor design-md-prep <url>  Prep data + claude-instructions for in-session polish
extraktor genome <url>          One-shot genome (needs --api-key)
extraktor genome-prep <url>     API-free prep + claude-instructions for Claude in-session
extraktor regen <dir>           One-shot page regen (needs --api-key)
extraktor regen-prep <dir>      API-free regen scaffold for Claude in-session
extraktor init                  Generate config file

All commands support --devtools, --timeout, --headless, -v. genome, regen, and design-md's AI polish accept --api-key for standalone one-shot execution.

Requirements

• Node.js >= 18
• Chromium (npx playwright install chromium)
• ANTHROPIC_API_KEY only required if you run the legacy one-shot genome / regen / design-md --api-key outside Claude Code. In a Claude Code session, not needed.

Contributing

See CONTRIBUTING.md. The project uses TypeScript strict mode, Vitest for testing, and Playwright for browser automation.

git clone https://github.com/aytuncyildizli/extraktor.git
cd extraktor && npm install && npx playwright install chromium
npm run build && npm test

Responsible use

Designed for learning from web design, extracting tokens for your own projects, and rapid prototyping. Respect intellectual property, terms of service, and robots.txt.

License

MIT