Every time you try to replicate a website’s style, you wish you could just extract its design system programmatically. designlang goes beyond static CSS scraping — it reverse-engineers live websites to produce structured design tokens, layout patterns, accessibility scores, and component stubs, all ready to consume in multiple frontend and AI workflows.
what designlang does and how it works
designlang is a headless-browser CLI tool that analyzes a live website’s DOM and CSS to extract its design system into 17+ structured files. It reads the actual rendered page, capturing colors, typography, spacing, breakpoints, and interaction states like hover and focus.
The output is rich and multi-format: W3C Design Tokens Community Group (DTCG) tokens, Tailwind CSS configs, shadcn/ui themes, Figma variables, typed React component stubs, motion tokens, brand voice profiles, and even AI prompt templates for code generation. This breadth enables seamless integration into design systems, frontend codebases, design tools, and AI-assisted development.
Under the hood, designlang uses a headless browser (likely Playwright or Puppeteer) to load pages fully, including dynamic content and interactive states. This lets it detect multi-page consistency, responsive breakpoints, and WCAG contrast scores for accessibility grading. It goes beyond static CSS to capture layout patterns and interaction state transitions.
The repo ships as a CLI tool, but also provides a VS Code extension, a Raycast extension, a Figma plugin, a GitHub Action for design regression guarding, a Chrome extension for quick capture, and notably an MCP server. The MCP server exposes the extracted design system as MCP resources and tools, letting AI agents like Claude Code, Cursor, and Windsurf query a site’s design tokens and interactions programmatically during development.
technical strengths and tradeoffs
The technical strength lies in designlang’s comprehensive extraction and multi-platform support. Extracting from a live DOM with interaction states and multi-page consistency requires sophisticated crawling and analysis logic. The emitted formats are carefully chosen to cover popular ecosystems: DTCG tokens for standards, Tailwind for utility CSS, Figma variables for design tooling, and React stubs for implementation.
Designlang also integrates accessibility scoring via WCAG contrast checks, which is a valuable feature for real-world projects. The design grading and head-to-head battles between sites add an analytical and competitive dimension.
The MCP server aspect is especially interesting. By exposing the design tokens and component regions as machine-consumable MCP resources, it enables AI agents to reason about design constraints live in the developer workflow. This is an advanced integration that reflects a trend towards AI-assisted coding and design consistency enforcement.
Tradeoffs include the complexity and resource usage of crawling and rendering live pages with a headless browser. This approach is more heavyweight than static CSS parsing, and may be slower or require more setup. The multi-format output also means maintaining mappings between tokens and formats, which can introduce complexity.
The project supports drift detection and visual diffs, but these features likely depend on stable markup and styles; dynamic sites with frequent changes might yield noisy results. Also, while the tool emits typed React stubs, the generated components will need manual refinement for production use.
quick start with designlang
Here are some commands to get started, straight from the repo’s README:
npx designlang https://stripe.com # extract everything
npx designlang grade https://stripe.com --badge # report card + SVG badge
npx designlang battle stripe.com vercel.com # head-to-head graded fight
npx designlang clone https://stripe.com # working Next.js starter
npx designlang --full https://stripe.com # screenshots + responsive + interactions
You can also install it globally:
npm i -g designlang
Beyond the CLI, designlang offers several extensions:
- VS Code extension to extract design from URLs and inject into your workspace.
- Raycast extension for scoring and generating CLI commands.
- Figma plugin to import variables directly into design files.
- GitHub Action for design regression guarding by diffing tokens on PRs.
- Chrome extension for one-click design handoff from browser tabs.
- MCP server to expose design data as AI-consumable resources.
Embedding a live design score badge in your README is also possible:
verdict: who should use designlang
designlang is a powerful tool for frontend engineers, design system maintainers, and AI tool integrators who want to bridge live web design extraction with structured tokens and AI workflows. Its multi-format output and integration into VS Code, Figma, GitHub, and AI agents make it versatile for development and design teams.
The tradeoff is the complexity and resource cost of running a headless browser crawler, plus the need to manually validate and refine generated components for production. It’s not a plug-and-play design system generator but rather a sophisticated extractor and analysis tool that surfaces a live site’s design under multiple lenses.
If you build or maintain design systems, want to automate visual consistency checks, or explore AI-assisted coding tied to real-world styles, designlang is worth exploring. Its MCP server integration is especially relevant if you work with AI programming assistants that can consume structured design knowledge during development.
Overall, designlang tackles a real problem with a broad, practical approach — but expect to invest time in understanding its outputs and integrating them into your workflow.
→ GitHub Repo: Manavarya09/design-extract ⭐ 2,030 · JavaScript