design-extract
by Manavarya09
Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.
3,363stars
318forks
JavaScript
Added 4/19/2026
AI Agentsaccessibilityagent-skillaichrome-extensionclaude-code-pluginclicsscursordesign-systemdesign-to-codedesign-tokensdtcgfigmamcp-servernpxplaywrightshadcn-uiskills-shtailwindweb-scraping
Installation
# Add to your Claude Code skills
git clone https://github.com/Manavarya09/design-extractGetting Started
Guides for using ai agents skills like design-extract.
- Caveman: Cut Claude Token Use by 65%How agent-side prompt compression works, when to use it, and when not to.
- What is an AI Skills Marketplace?Definitions, how marketplaces work, and how to choose between them in 2026.
- Getting Started with AI SkillsFirst-time install walkthrough for Claude Code, Codex CLI, and ChatGPT.
Security ReportVerified
Last scanned: 4/27/2026
{
"issues": [],
"status": "PASSED",
"scannedAt": "2026-04-27T06:27:51.919Z",
"semgrepRan": false,
"npmAuditRan": true,
"pipAuditRan": true
}Sponsors
designlang points a headless browser at any URL and reads the design system off the live DOM. One command emits 17+ files — DTCG tokens, Tailwind config, shadcn theme, Figma variables, motion tokens, typed component anatomy, brand voice, page-intent labels, and a paste-ready prompt pack for v0 / Lovable / Cursor / Claude Artifacts.
It also goes where extractors don't: layout patterns, responsive behavior across 4 breakpoints, hover / focus / active states, WCAG contrast scoring, multi-page consistency, drift checks against a live source-of-truth, visual-diffs, and a shareable graded report card.
Quick start
npx designlang https://stripe.com # extract everything
npx designlang site stripe.com # whole-site: one canonical system + consistency grade ← v12.23
npx designlang fidelity stripe.com --clone localhost:3000 # score a clone vs the original (visual + motion) ← v12.24
npx designlang gallery # static shareable gallery of measured clones ← v12.24
npx designlang studio # live token editor: edit, preview, export, share ← v12.19
npx designlang verify stripe.com # fidelity score: rebuild from tokens vs live ← v12.18
npx designlang pair stripe.com linear.app # fuse two designs (visuals A × voice B) ← v12.8
npx designlang brand stripe.com # full brand-guidelines book (13 chapters) ← v12.7
npx designlang theme-swap stripe.com --primary "#ff4800" # recolour around your brand ← v12.6
npx designlang pack stripe.com # one polished design-system directory ← v12.4
npx designlang remix stripe.com --as cyberpunk # restyle in another vocabulary ← v12.3
npx designlang remix stripe.com --all # emit all 6 vocabs at once ← v12.3
npx designlang grade https://stripe.com --badge # report card + SVG badge ← v12.2
npx designlang battle stripe.com vercel.com # head-to-head graded fight ← v12.2
npx designlang clone https://stripe.com # working Next.js starter
npx designlang --full https://stripe.com # screenshots + responsive + interactions
Drop a live design-score badge in any README:
Whole-site design system (site)
Most extractors read a single URL. designlang site crawls a site's canonical
pages (home, pricing, docs, blog, about, product…) and synthesizes one
de-duplicated system. Every token is elected by coverage — the share of pages
that use it — so what's genuinely site-wide is separated from one-off,
page-local choices. Near-identical colours are merged in OKLab. It's fully
deterministic and free; no API key.
npx designlang site stripe.com --max-pages 8
You get, alongside the standard pack emitted from the canonical system:
| File | What it is |
|---|---|
*-site-system.json |
canonical unified tokens + coverage + drift |
*-site-coverage.md |
every token tagged 🟢 site-wide / 🟡 section / 🔴 page-local, with the pages using it |
*-site-consistency.md |
a 0–100 consistency grade, per-category breakdown, and the off-system outliers to consolidate |
Measured clone fidelity (fidelity + gallery)
Cloning tools all claim "pixel-perfect" — none of them measure it. designlang fidelity does. Point it at the original and your clone (often a local dev
server) and it returns one honest number, both halves of the clone:
- Visual — full-page screenshots of each, pixel-diffed.
- Motion —
extractMotion()on both, compared across feel, durations, easings, springs, keyframe kinds, scroll-linked motion, and choreography/ stagger. (Most clones reproduce static pixels and drop the motion entirely; this is where they lose.)
The two blend into a 0–100 score + letter grade, and — the part competitors don't ship — a ranked correction plan: the exact next edits that will raise the score, hardest-hitting first. Measure → fix → re-run until it converges.
npx designlang fidelity https://stripe.com --clone http://localhost:3000
npx designlang fidelity https://stripe.com --clone http://localhost:3000 --min 90 # CI gate
Generating the clone with designlang clone? Add --fidelity and it grades the
clone's token basis against the live site the moment it's built — writing
FIDELITY.md + a correction plan straight into the project, no separate step:
npx designlang clone https://stripe.com --fidelity
You get fidelity.md (score + motion table + correction plan), fidelity.json,
a shareable fidelity-card.svg (88% · B · stripe.com), and a fidelity-diff.png
loss heatmap.
Then publish them. designlang gallery scans your reports and builds a
deployable static site — an index of score cards plus a permalink page per clone
(each with an OG card, so a shared link unfurls the number).
npx designlang gallery --title "Our clones" --base-url https://clones.example.com
Install
npm i -g designlang # global
npx skills add Manavarya09/design-extract # as an agent skill (40+ agents)
Use in Claude Code (plugin)
designlang ships as a Claude Code plugin — eleven slash commands that wrap the CLI. Install it from inside Claude Code:
/plugin marketplace add Manavarya09/design-extract
/plugin install designlang@designlang
The first command registers this repo as a plugin marketplace; the second
installs the designlang plugin from it. Restart Claude Code if prompted, then
the commands are available:
| Command | What it does |
|---|---|
/extract <url> |
full design language → DTCG, Tailwind, Figma, motion, voice |
/site <url> |
crawl a whole site → one canonical design system + consistency grade |
/grade <url> |
shareable HTML report card + SVG badge |
/battle <a> <b> |
head-to-head graded comparison |
/remix <url> --as <vocab> |
restyle in 6 vocabularies (brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial) |
/pack <url> |
one downloadable design-system bundle |
/theme-swap <url> |
OKLCH-correct recolour around a new brand primary |
/brand <url> |
full editorial brand-guidelines book (13 chapters) |
/pair <a> <b> |
fuse two designs across configurable axes |
/studio |
live token editor — preview, dark mode, export, share |
/verify <url> |
rebuild from tokens, pixel-diff vs live, fidelity score |
/fidelity <url> --clone <url> |
score a clone vs the original (visual + motion) + correction plan |
/gallery [dir] |
build a static shareable gallery of measured clones |
Prefer the raw MCP tools? The CLI also ships an MCP server — run
designlang mcp --output-dir ./design-extract-outputto serve the latest extraction's tokens to any MCP client.
Atlas Cloud for --smart
designlang --smart can now use Atlas Cloud through its OpenAI-compatible chat API, so low-confidence classifiers can stay zero-dependency while routing to Atlas-hosted models.
export ATLASCLOUD_API_KEY="<atlascloud-api-key>"
export ATLASCLOUD_MODEL="deepseek-ai/deepseek-v4-pro"
npx designlang https://stripe.com --smart
- Atlas Cloud envs:
ATLASCLOUD_API_KEY,ATLASCLOUD_MODEL, optionalATLASCLOUD_API_BASE - Alias envs also work:
ATLAS_CLOUD_API_KEY,ATLAS_CLOUD_MODEL,ATLAS_CLOUD_API_BASE - Existing
OPENAI_API_KEYandANTHROPIC_API_KEYflows keep working unchanged
What you
Frequently Asked Questions
What is design-extract?
design-extract is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by Manavarya09. Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+. It has 3,363 GitHub stars.
Is design-extract safe to use?
Yes. design-extract passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.
How do I install design-extract?
Clone the repository with "git clone https://github.com/Manavarya09/design-extract" and add it to your Claude Code skills directory (see the Installation section above).
What programming language is design-extract written in?
design-extract is primarily written in JavaScript. It is open-source under Manavarya09 on GitHub, so you can review or fork the full source.
Are there alternatives to design-extract?
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh design-extract against similar tools.
Comments (0)
to leave a comment.
No comments yet. Be the first to share your thoughts!
Related Skills
An agentic skills framework & software development methodology that works.
234,966
20,863
Shell
AI Agentsaibrainstorming
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
231,321
35,296
JavaScript
AI Agentsai-agentsanthropic
Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.
197,111
59,478
TypeScript
MCP Serversaiapis
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
185,940
28,768
JavaScript
AI Agentsai-agentsanthropic
Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.
120,031
19,897
Shell
AI Agents
Developers Also Liked
Based on votes and bookmarks from developers who liked this skill
Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More
87,900
7,632
JavaScript
AI Agentsaiai-agents
A light-weight and powerful meta-prompting, context engineering and spec-driven development system for Claude Code by TÂCHES.
64,779
5,481
JavaScript
AI Agentsclaude-codecontext-engineering
Bash is all you need - A nano claude code–like 「agent harness」, built from 0 to 1
71,567
11,631
Python
AI Agentsagentagent-development
🪨 why use many token when few token do trick — Claude Code skill that cuts 65% of tokens by talking like caveman
90,920
5,152
JavaScript
AI Agentsaianthropic
Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.
120,031
19,897
Shell
AI Agents
A curated list of awesome Claude Skills, resources, and tools for customizing Claude AI workflows
68,129
7,727
Python
AI Agentsagent-skillsai-agents