Skip to content
UXClaim
Design Systems

Design Extractor

AI agent that automatically extracts design systems from codebases and generates paste-ready Figma scripts with tokens, components, and frames.

View source More in Design Systems

What it does

Design Extractor scans your codebase and automatically generates a single JavaScript file that reconstructs your entire design system in Figma. It extracts color tokens, typography scales, spacing systems, components with variants, and page frames—pulling real values directly from your code, not guesses.

How it works

The skill operates in four stages:

  1. Identify — Detects your framework (Next.js, React, Vue, SwiftUI, etc.) and locates token sources
  2. Extract — Pulls colors, typography, spacing, border radius, and shadows from config files and CSS
  3. Scan — Finds UI components and maps their variants and states
  4. Generate — Creates a figma-import.js file you paste directly into Figma’s console

No configuration needed. No plugins to install. One paste and your design system appears in Figma.

Use cases

  • Sync code-first designs to Figma — Keep your single source of truth in code while having a visual reference in Figma
  • Recover lost design documentation — Extract designs from existing codebases when Figma files have drifted
  • Speed up design handoff — Generate component libraries and page frames automatically instead of manually recreating them
  • Validate design consistency — Compare what Figma says vs. what the code actually does

Who benefits

Product designers working with engineering teams, design systems leads managing component documentation, and teams building with Claude Code who need to see generated designs visually.

Frequently asked questions

How do I install design-extractor?
Run this command from your project root: `git clone https://github.com/PatNoO/design-extractor.git _de_tmp && mkdir -p .claude/skills && cp -r _de_tmp/.claude/skills/design-extractor .claude/skills/ && cp -r _de_tmp/.claude/skills/pen-to-figma .claude/skills/ && rm -rf _de_tmp`. The skills are installed in a hidden `.claude` folder. On Mac, press Cmd+Shift+. in Finder to see hidden folders.
What happens when I run design-extractor?
The skill scans your codebase in four stages: identifying your framework, extracting tokens and styles, scanning for components, and generating a `figma-import.js` file. It also produces a `design-system-summary.md` showing what was extracted. You then paste the JavaScript into Figma's console (Plugins → Development → Open Console) and your design system appears automatically.
What frameworks does design-extractor support?
It works with Next.js + Tailwind, React + CSS Modules, Vue, HTML/CSS, SwiftUI, and C++ with Qt. Each framework has different extraction capabilities—Next.js with Tailwind gets the most complete coverage including tokens, components, and frames.
Do I need to configure design-extractor for my project?
No configuration is required. You can optionally run the setup workflow once (`Run setup-extractor.md for this project`) to teach the skill your specific framework and file structure, which improves accuracy on future extractions. This is recommended but not necessary.
What comes out of design-extractor?
Three deliverables: (1) `figma-import.js`—the paste-ready script that builds everything in Figma, (2) `design-system-summary.md`—documentation of what was extracted and any gaps, (3) a three-line instruction guide. The script creates color styles, text styles, a Components page with all variants, and a Frames page with your routes at mobile and desktop sizes.
Can design-extractor work on a test project?
Yes. The repo includes a minimal HTML/CSS fixture for testing. Ask Claude Code to generate against `.claude/skills/design-extractor/tests/fixture/` and you'll get a sample output with 2 pages, 8 components, and 4 frames. See `tests/TESTING.md` for the full workflow and validation steps.
Will design-extractor modify my source code?
No. The skill is read-only and never changes your codebase. It only scans and extracts values to generate the Figma import script.
What's the difference between design-extractor and pen-to-figma?
Design-extractor reads your code and generates a Figma script. Pen-to-figma does the same thing but for `.pen` files from Pencil, the design tool. Use design-extractor if your source of truth is in code; use pen-to-figma if you're designing in Pencil first.

Glossary

Design tokens
Reusable values (colors, typography, spacing, shadows) that define your design system. Design-extractor extracts these from your code files and config.
Figma script
JavaScript code that runs in Figma's console to automate design creation. Design-extractor generates a script that builds your entire design system in Figma automatically.
Component variants
Different states or sizes of the same component (e.g., Button with primary/secondary variants or small/medium/large sizes). Design-extractor detects and recreates these in Figma.
Framework detection
The skill's ability to identify what technology stack your project uses (React, Vue, Next.js, etc.) so it knows where to look for tokens and components.

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.