CLI that extracts a website's, git repo's, or local codebase's design system into a folder of files Claude Code can read to build matching UI.
2.4K250TypeScriptNo licenseUpdated 6 months ago
Manavarya09/design-extract
CLI that points a headless browser at any website and extracts its design system as DTCG tokens, Tailwind config, Figma variables and more.
Open-source alternative to:Figma
- Stars
- 4,261
- Forks
- 371
- Open issues
- 25
- Last commit
- 12 days ago
What is it?
designlang opens a URL in headless Chromium via Playwright and reads the computed styles and layout from the live DOM. A single command writes a set of files covering colors, typography, spacing, shadows, radii, CSS variables, motion tokens, and detected components, including W3C DTCG tokens, a Tailwind theme, a shadcn/ui theme, and Figma variables for light and dark modes.
Beyond raw token extraction, it can crawl four responsive breakpoints, capture hover, focus, and active state changes, score WCAG contrast for foreground and background pairs, and compare consistency across multiple pages. It also includes drift and lint checks for CI, visual diffs, and a whole-site mode that merges pages into one canonical system.
It can run as an MCP server for agents such as Claude Code, Cursor, and Windsurf, and it ships a Claude Code plugin, a Chrome extension, and a Node.js-based install with an npm package. Platform emitters cover iOS SwiftUI, Android Compose, Flutter, and WordPress.
Key features
- 01Extracts colors, typography, spacing, shadows, radii and CSS variables from a live page.
- 02Outputs W3C DTCG tokens, Tailwind config, shadcn/ui theme and Figma variables.
- 03Captures responsive behavior across four breakpoints and hover, focus and active states.
- 04Scores WCAG contrast for foreground and background color pairs.
- 05Runs as an MCP server for Claude Code, Cursor and Windsurf.
- 06Emits platform-specific tokens for iOS, Android, Flutter and WordPress.
Use cases
- Recreating a competitor's or reference site's look as a starting design system.
- Generating Tailwind or shadcn/ui themes from an existing website.
- Feeding extracted tokens to AI coding agents so generated UI matches a visual style.
- Checking a live site against a token file in CI to catch design drift.
Quick start
- 1
Install the CLI globally
npm i -g designlang - 2
Install the one-time Chromium browser
designlang install-browser - 3
Extract a site's design system
npx designlang https://stripe.com
Things to know
- Requires downloading a headless Chromium browser before first use.
- Several advanced features (site, fidelity, dna) are versioned and may change quickly.
Topics
FAQ
- What is design-extract?
- CLI that points a headless browser at any website and extracts its design system as DTCG tokens, Tailwind config, Figma variables and more. designlang opens a URL in headless Chromium via Playwright and reads the computed styles and layout from the live DOM. A single command writes a set of files covering colors, typography, spacing, shadows, radii, CSS variables, motion tokens, and detected components, including W3C DTCG tokens, a Tailwind theme, a shadcn/ui theme, and Figma variables for light and dark modes.
- Is design-extract free to use? What license does it have?
- design-extract is open source under the MIT license. Check the license terms before using it in commercial products.
- Is design-extract still maintained?
- Actively maintained. The last commit to design-extract was on Oct 8, 2026.
- What can I use design-extract for?
- Recreating a competitor's or reference site's look as a starting design system. Generating Tailwind or shadcn/ui themes from an existing website. Feeding extracted tokens to AI coding agents so generated UI matches a visual style. Checking a live site against a token file in CI to catch design drift.
- How do I install design-extract?
- Install the CLI globally: npm i -g designlang Install the one-time Chromium browser: designlang install-browser Extract a site's design system: npx designlang https://stripe.com
- Where can I get design-extract?
- The source code and installation instructions are on GitHub: https://github.com/Manavarya09/design-extract
Summary generated by AI from the project's README. GitHub stats refresh daily.
Related projects
Analyzes any website with Playwright and exports its design system as Tailwind v4 config, React components, design tokens, or a DESIGN.md report.
815PythonMITUpdated 2 months ago
CLI tool that extracts a website's design system (colors, typography, spacing, shadows, components) into W3C design tokens in one command.
3.7K327TypeScriptMITUpdated 9 days ago
Open-source Python web crawler that turns any website into clean, LLM-ready Markdown, with CSS/LLM-based structured extraction and an optional hosted API.
85.8K8.9KPythonApache-2.0Updated yesterday
A collection of agent skills for building better UI, covering accessibility, layout, typography, color, writing and UI polish.
8K307MarkdownMITUpdated 7 days ago
A pure instruction and knowledge kit that turns Claude and other coding agents into a UX/UI design expert, with DTCG tokens, component specs, 138 design systems and 52 objective gates.
2.4K253JavaScriptMITUpdated 21 hours ago