JSPM – extraktor@1.1.0

Package Exports

extraktor
extraktor/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (extraktor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm version

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.

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	Vision-AI component extraction with Storybook	Yes
regen	Generate new pages from extracted genome	Yes
devtools-extract	Extract from authenticated pages via Chrome DevTools	No
claude-design	Seed Claude Design from any URL	No

7 out of 9 work without any API key. genome and regen use your existing ANTHROPIC_API_KEY - if you're on Claude Code, it's already there.

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.

extraktor extracting linear.app

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:

Visual Theme & Atmosphere
Color Palette & Roles
Typography Rules
Component Stylings
Layout Principles
Depth & Elevation
Do's and Don'ts
Responsive Behavior
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.

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

See claude-design skill for natural-language usage.

Genome - Vision AI design system

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

genome pipeline

Most tools scrape text. Genome reads design visually:

Extract - Design tokens (colors, fonts, spacing, animations)
See - Claude Vision analyzes screenshots to identify components
Synthesize - Screenshot + DOM together -> clean React/Tailwind components
Package - genome.json + components/ + theme/ + Storybook

The output is a portable design system you can build new pages from:

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

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 design-md <url>    DESIGN.md (Stitch format, 9 sections)
extraktor clone <url>        Next.js project with all assets
extraktor genome <url>       Vision-AI design system + Storybook
extraktor regen <dir>        New page from genome
extraktor analyze <url>      Quick analysis (no output files)
extraktor init               Generate config file

All commands support --devtools, --timeout, --headless, -v.

Requirements

Node.js >= 18
Chromium (npx playwright install chromium)
ANTHROPIC_API_KEY (only for genome and regen)

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