Stats
Actions
Available In
Tags
Plugin
designlang
Extract any website's complete design language — colors, typography, spacing, shadows, motion, and voice — and output DTCG tokens, Tailwind/shadcn/Figma variables, CSS, and a visual preview. Grade consistency, battle two sites, remix in six design vocabularies, recolor via OKLCH, generate brand guidelines, and rebuild pages for pixel-diff fidelity checks.
What's Inside
Slash Commands11
Battle
/battle
Head-to-head graded battle card between two sites — eight dimensions, bar-by-bar, verdict line.
What's in the book
/brand
Generate a full editorial brand-guidelines book for any URL. 13 chapters covering colour, typography, spacing, shape, iconography, motion, components, voice, accessibility, tokens, and how-to-use guidance. Print-ready, dark-mode toggle, hand-off-ready single HTML.
Extract
/extract
Extract the complete design language from a URL — DTCG tokens, Tailwind, Figma vars, motion, voice, components.
Grade
/grade
Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm), strengths + fixes, plus an SVG badge.
Pack
/pack
Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts) into one polished design-system directory ready to zip and ship.
Stats
Version12.23.0
Released
LanguageJavaScript
Stars3,273
Forks313
Copy clicks5
MaintenanceExcellent
LicenseMIT
Last Commit
Added
Available In
Tags
Categories
