Maintainer of this skill?
Automated security scan — not a certification.
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+.
# Add to your Claude Code skills
git clone https://github.com/Manavarya09/design-extractGuides for using ai agents skills like design-extract.
Last scanned: 4/27/2026
{
"issues": [],
"status": "PASSED",
"scannedAt": "2026-04-27T06:27:51.919Z",
"semgrepRan": false,
"npmAuditRan": true,
"pipAuditRan": true
}See how design-extract compares with popular alternatives.
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 4,252 GitHub stars.
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.
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).
design-extract is primarily written in HTML. It is open-source under Manavarya09 on GitHub, so you can review or fork the full source.
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.
No comments yet. Be the first to share your thoughts!
Based on votes and bookmarks from developers who liked this skill
30 days in the Featured rail · terms & refunds
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
Automated security scan — not a certification.
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.
npx designlang https://stripe.com # extract everything
npx designlang dna stripe.com # place it in the measured design space: neighbours + percentiles ← v13.1
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:
v13)Don't take the output on faith — watch it happen. On designlang.app/watch you paste a URL and a real headless Chromium opens the page and reads its entire design system in real time: a split stage with the live browser on the left and the design system — palette, type, spacing, motion — assembling itself on the right as each token lifts off the page.
It's driven by the actual extraction (the browser's CDP screencast streamed frame-by-frame alongside the real token events), recorded so a shared link replays the exact run. No install, no account. Every gallery card can be watched the same way, and the gallery now spans 37 real-graded design systems.
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 |
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:
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
dna)Every extractor on the market answers what a design uses. None of them answers
where it sits. designlang grade returns a letter — but a letter with no
reference frame is a thermometer with no scale on it.
designlang dna reduces a design to 30 deterministic features across five
axes — colour, type, space, shape, motion — and ranks it against a corpus of
real design systems:
npx designlang dna raycast.com
Design DNA · https://raycast.com
30 features, 100% measurable
vs 8 systems (default)
color 65th percentile
type 56th percentile
space 42th percentile
shape 79