designlang
designlang (design-extract)
A CLI and MCP server that reads a live website and pulls out its design system: DTCG tokens, a Tailwind config, Figma variables and a brand book
Medium risk
We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.
Why this level
- Runs a Playwright browser and reaches external sites
- Extracts and reuses others' design decisions, which needs care about brand rights
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add cli/designlang-design-extractDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Install the tool
npm install -g designlangAdd the MCP server: claude mcp add designlang -- npx -y designlang mcp. Or install the skill: npx skills add Manavarya09/design-extract. For a one-off extraction: npx designlang <url>.
Other ways from the author
npx designlang https://stripe.comOne-off site extraction with no install. Modes like site, brand and clone are available.
This is third-party code. Review the repository files before installing.
What it does
designlang opens a site through Playwright and extracts its design system: primitive, semantic and composite tokens in DTCG format, a Tailwind config, Figma variables and a shadcn/ui set. A whole-site mode builds one canonical system with a consistency grade, plus an accessibility audit and contrast hints. Output can be emitted as code for iOS SwiftUI, Android Compose, Flutter and WordPress, or as a Next.js starter. It runs as a CLI via npx, as an agent skill, as a Claude Code plugin and as an MCP server.
Who it is for. For designers and frontend developers who need to break a site's design system down into tokens and code quickly.
Good fit when
- You need to pull tokens and a palette from an existing site into DTCG or a Tailwind config
- You need to check design consistency across a whole site and review accessibility
- You want to give an agent MCP access to the extracted design system
Not a fit when
- You need original design from scratch rather than analysis of someone else's
- The target site blocks automated access or requires authentication
Example request
Extract the design system of stripe.com and assemble the tokens as a Tailwind configLimitations
It needs Node.js 20 or newer, and full extraction runs Playwright with a browser. Accuracy depends on a given site's markup and styles. Reusing someone else's design system in a product should account for brand and trademark rights.
How to disable. One-off runs leave nothing installed since npx does not persist. Remove the global package with npm rm -g designlang, uninstall the plugin via /plugin, and delete the MCP server from your client config.
Security check
- Runs a Playwright browser and reaches external sites
- Extracts and reuses others' design decisions, which needs care about brand rights
README in short
The README frames designlang as a tool that reads a site the way a developer reads a stylesheet and returns a full design system. It lists CLI commands: extract one URL, analyze a whole site, score a clone against the original, generate a brand book and a starter. It covers npx and global install, wiring as a skill for 40+ agents, a Claude Code plugin and an MCP server. MIT licensed, Node.js 20 or newer required.
FAQ
How do I use it without installing?
Run npx designlang <url>. The package is fetched for the run and extracts the given site.
What output formats are supported?
DTCG tokens, a Tailwind config, Figma variables, a shadcn/ui set, plus code for SwiftUI, Compose, Flutter and WordPress and a Next.js starter.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys