design-extract
design-extract is a command-line tool that reads a website's design system and exports tokens and code for designers and developers building matching interfaces.
What it is good for
- Copying the colors, fonts, and spacing from a live website
- Turning a website's style into Tailwind or Figma variables
- Checking a site's color contrast and accessibility
- Keeping a clone of a website visually close to the original
At a glance
- Who it is for
- Setup
- Guided command-line setup
Level 4 of 5. You copy and paste commands into a terminal by following the instructions. Comfortable territory for vibe coders.
- Cost
- Free and open source
- Type
- Agent app
- Tasks
- Works with
- Claude Code, Cursor, Windsurf, Figma, Tailwind CSS, shadcn/ui
Momentum
- Rank this week
- Not ranked yet
- Best rank
- None yet
- GitHub stars
- 4,458
GitHub numbers as of Nov 2, 2026. Updated weekly.
Official links
Setup steps are on the official pages. We do not repeat them here, since they change.
Questions
- Is design-extract free?
- Yes. It is free and open source (MIT license).
- Do I need to know how to code to use design-extract?
- You do not need to write code, but setup means copying and pasting commands into a terminal by following its instructions.
- What does design-extract work with?
- According to its own documentation, it works with Claude Code, Cursor, Windsurf, Figma, Tailwind CSS, and shadcn/ui.
- What is design-extract good for?
- Copying the colors, fonts, and spacing from a live website, turning a website's style into Tailwind or Figma variables, checking a site's color contrast and accessibility, and keeping a clone of a website visually close to the original.
Similar agents to design-extract
- OpenPencil
OpenPencil is a vector design tool that turns text prompts into UI on a canvas, with AI agent teams working in parallel for designers and developers.
- stitch-skills
Stitch-skills is a library of skill add-ons that teach coding agents to turn Google Stitch designs into code, design systems, and assets for designers and developers.
- Open Design
Open Design is a local-first, open source design workspace where teams and AI coding agents build prototypes, slides, images, and videos together.
- Impeccable
Impeccable is a set of design commands for coding agents that steers, reviews, and polishes interfaces to avoid generic AI-looking design.
- AI Website Cloner Template
AI Website Cloner Template is a skill that recreates an existing website as a Next.js app for people who want a copy of a site's design and layout.
- Skills
Skills is a collection of agent skill folders that teaches Codex, Claude, and Cursor how to build landing pages, 3D scenes, and UI prompts for designers and builders.