Guides with real output
Each guide answers one job from start to finish. The commands are the real CLI, and the output blocks were captured from real runs, not written by hand.
How to extract design tokens from any website
Turn any live URL into W3C DTCG design tokens, CSS variables and a Tailwind config with one free command. Real output from stripe.com included.
How to make Cursor and Claude Code follow your design system with MCP
Stop AI editors inventing colours. Connect Cursor or Claude Code to your real design tokens over MCP, add rules files, and lint the result in CI.
How to convert a website into a Tailwind theme
Generate a Tailwind v3 config or a Tailwind v4 @theme block from any live site’s real colours, type scale, spacing and radii, with real stripe.com output.
How to make a shadcn/ui theme from any website
Create shadcn/ui CSS variables from a live site’s brand colours and radius in one command, then apply them to every component. Real stripe.com theme shown.
How to run a design system audit on any website
Audit a site’s design system for colour sprawl, off-scale spacing, contrast failures and design debt, with a scored report and a ranked fix plan.
See the output first
Browse the design systems designlang has already read, with every token ready to download.