Design Lang
CLIDesign system extractor
Use it when you want to use an existing website's structure as a starting template
A tool that reads a website's design and extracts it as a reusable template.
Added to the shelf
From the makersREADME, read 22 Oct
designlang points a headless browser at any URL and reads the design system off the live DOM, emitting DTCG tokens, Tailwind config, shadcn theme, Figma variables, motion tokens and a prompt pack for v0, Lovable, Cursor and Claude Artifacts. It also measures layout patterns, responsive behavior, hover and focus states, WCAG contrast, and clone fidelity against a live site. It runs as a CLI, an MCP server and a Claude Code plugin.
Install
npm i -g designlangCommands
npx designlang https://stripe.comExtract the full design system from a URL
npx designlang site stripe.comCrawl a whole site into one canonical system
npx designlang fidelity https://stripe.com --clone http://localhost:3000