The Problem
Teams rebuilding a site or porting a design to a new platform typically spend days manually inspecting a live site's computed styles, then hand-converting that into theme files for each target framework. Most extraction tools stop at colors and fonts, missing layout structure, responsive behavior, interaction states, and accessibility data.
What This Does
designlang (published as designlang on npm, source in this repo) crawls a site with Playwright and extracts computed styles from the live DOM across 4 viewports. It writes 8 output files plus an optional MCP JSON companion: DTCG tokens, Tailwind config, CSS variables, Figma variables, React theme, shadcn/ui theme, an AI-optimized markdown spec, and a visual HTML preview.
The extraction logic lives in src/extractors/ — 26 modules covering colors, typography, layout, breakpoints, interaction states, accessibility, gradients, shadows, and more. Formatters in src/formatters/ handle platform-specific output (SwiftUI, Compose, Flutter, WordPress, Vue, Svelte). An MCP server (src/mcp/server.js) exposes extraction results to Claude Code, Cursor, and Windsurf. A Chrome extension and marketing site (website/) round out the repo.
How To Use It
Setup: Node 20+. No install required — run via npx.
Running it:
npx designlang https://stripe.com npx designlang https://stripe.com --full
The CLI entry point is bin/design-extract.js. The README documents these commands verbatim. For agent integration, the skills/extract-design/SKILL.md file enables installation via npx skills add Manavarya09/design-extract. Output files land in the current directory, prefixed with the site name.
Configuration: No env vars or config files are required for basic use. The --platforms <csv> flag adds SwiftUI/Compose/Flutter/WordPress output; --emit-agent-rules writes Cursor/Claude config fragments. The MCP server (src/mcp/server.js) reads the companion *-mcp.json file written in v7.
Real-World Use
A consulting team migrating a client from a custom React app to WordPress can run npx designlang https://client-site.com --platforms wordpress to get a theme scaffold with actual token values. The markdown output feeds directly into an LLM to generate the WordPress theme's CSS, while the accessibility report (src/extractors/accessibility.js) identifies WCAG violations to fix during the migration. The --diff mode (src/diff.js) lets you compare the live site against local tokens to catch design drift.
Code Health & Issues
Med — Single-maintainer risk: This is a fork of Manavarya09/design-extract (3,354 stars upstream) with 0 stars here. The upstream repo is the canonical source; this fork's value is unclear without a diff. Low — Test coverage: 10 test files exist covering CLI, extractors, formatters, MCP, and utils, but the extractor modules (26 files) have only one test file (tests/extractors.test.js) — likely shallow coverage. Low — No CI in this fork: .github/workflows/ contains only a bot config, no build/test pipeline. Upstream may have CI, but this fork doesn't. Low — Docs skew: docs/superpowers/ references dates in 2026, suggesting aspirational planning docs rather than current state. Low — Website API exposure: website/app/api/extract/route.js runs extractions server-side; rate limiting exists (website/lib/rate-limit.js) but the endpoint is public — a potential abuse vector.
The Bottom Line
This is a genuinely capable design extraction tool with unusually broad platform support. The main caveat is provenance: you're looking at a fork of a well-maintained upstream project, so verify the fork adds value before adopting it. Worth evaluating if you need multi-platform design token extraction, especially with AI-agent integration.