Free · No sign-up · Runs in your browser
Free tools foryour design system.
Document, convert and theme the tokens you already have — in your browser, with no account. When you want tokens from a site you admire, the Xtractly extension reads them off the live page.
Free with an account · Chrome, Edge & Brave · reads a page only when you click
Paste what you have, copy what you need.
Nothing you paste leaves your browser. The token tools run the same exporters as Xtractly's themes and Agent Bridge; CSS → Tailwind runs the extension's own Tailwind export.
- Domain → design system
Website design system lookup
Type a domain, get its design system on one board: typeface, type scale and palette.
Open the tool → - Tokens → DESIGN.md
DESIGN.md generator
Turn your tokens into a DESIGN.md your coding agent reads before it writes UI.
Open the tool → - tailwind.config.js → @theme
Tailwind v3 → v4 converter
Paste a tailwind.config.js, get the CSS-first v4 theme: @theme, @plugin and @utility.
Open the tool → - :root → @theme
CSS variables → Tailwind
Turn :root custom properties into a Tailwind v4 @theme or a v3 config.
Open the tool → - Any tokens → any format
Design tokens converter
Convert tokens between DTCG JSON, Tokens Studio, Figma variables, CSS and Tailwind.
Open the tool → - Brand colours → shadcn :root
shadcn/ui theme generator
Brand colours in, a complete shadcn/ui :root theme out, with readable foregrounds.
Open the tool → - CSS → classes
CSS → Tailwind converter
Paste CSS rules, get Tailwind classes per selector, with hover: and md: variants.
Open the tool →
Tokens you have are the easy part.
Collect the ones you admire.
The Xtractly extension reads colours, type and components off any live site, and your coding agent builds with them over the Agent Bridge.
Add to Chrome, free