SkillFoxx

designlang CLI

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

  • 5,058 ★ on the repository
  • Last commit
  • MIT
CLI

Extended access

Why this level

  • Runs a Playwright browser and reaches external sites
  • Extracts and reuses others' design decisions, which needs care about brand rights
All reasons and checks

manavarya09/design-extractAuthor:Manav Arya Singh

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add cli/designlang-design-extract

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • Runs a Playwright browser and reaches external sites
  • Extracts and reuses others' design decisions, which needs care about brand rights

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 config

Limitations

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.

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.

Discussion

No questions or reviews yet.

CLI tools

A CLI that extracts any website's design system into tokens: colors, typography, spacing, shadows, in one run

CLIExtended access4K

A skill and CLI that pull colors, type, spacing, radius and shadows from a public site and save them as JSON and CSS tokens

SkillExtended access288

An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code

MCP serverExtended access576

A Claude skill that turns sites, images and Figma files into a design system: Markdown, DTCG tokens and element rebuild prompts

SkillExtended access245
Official

The DESIGN.md format for agents and a CLI: lint contrast and references, diff versions, export tokens to Tailwind and DTCG

CLIMinimal access28.8K

A plugin and npx CLI that scaffold DESIGN.md from the official google-labs-code/design.md templates

PluginExtended access9

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.

README badge

Report a problem