Skip to content
csl
All skills

Design Extract

Design

Extract any website's design system into DTCG tokens, Tailwind, Figma vars, and shadcn themes via slash commands.

by Manavarya09Manavarya09/design-extract
Stars4.3k
Forks361
Watchers13
Open issues24
LicenseMIT
Last pushtoday

Install

install

$ /plugin install Manavarya09/design-extract

Update

update

$ /plugin marketplace update design-extract

Then run /reload-plugins. Official marketplaces auto-update at startup.

When to use it

  • You want to reverse-engineer a live website's colors, typography, spacing, and motion into structured design tokens
  • You need DTCG tokens, a Tailwind config, shadcn theme, or Figma variables generated from an existing site
  • You want a WCAG contrast/accessibility audit and a shareable graded design report card for a URL
  • You want to compare two sites' design systems head-to-head, or restyle a site into another visual vocabulary

Commands & flags

/extract <url>
Full extraction to DTCG tokens, Tailwind, Figma vars, motion, voice.
/grade <url>
Generate a shareable HTML 'Design Report Card'.
/battle <urlA> <urlB>
Head-to-head graded battle card comparing two sites.
/remix <url> --as <vocab>
Restyle a site as brutalist / swiss / cyberpunk / editorial.
/pack <url>
Bundle every output into one design-system directory.
npx designlang mcp
Run the standalone MCP server instead of slash commands.

How to use it

Install as a Claude Code plugin:

/plugin install Manavarya09/design-extract

It also installs via npx skills add Manavarya09/design-extract, standalone npm (npm i -g designlang), or ships an MCP server (npx designlang mcp). Once installed, each command is a slash command:

/extract <url>            Full extraction -> DTCG tokens, Tailwind, Figma vars, motion, voice
/grade <url>             Shareable HTML "Design Report Card"
/battle <urlA> <urlB>    Head-to-head graded battle card
/remix <url> --as <vocab>  Restyle as brutalist / swiss / cyberpunk / editorial
/pack <url>              Bundle every output into one design-system directory

A typical run points a headless Playwright browser at the URL, reads the live DOM, and writes 17+ output files you can drop straight into a project.

Why it earns its place

It turns the slow, manual job of auditing and replicating a website's design into a single command, emitting standards-compliant W3C DTCG tokens plus ready-to-use Tailwind, shadcn, and Figma outputs rather than just a color list. It captures responsive behavior across breakpoints, interaction states, WCAG contrast scoring, and multi-page consistency, and as a Claude Code plugin the whole pipeline runs from slash commands.

Try it

claude

> /extract https://stripe.com