# Two Free CLIs Now Extract Any Site's Design Tokens. Then What? > design-extract and extract-design-system will pull W3C tokens off a live URL for free, one command. Here's what you still have to do before an AI tool can use them. Source: https://waalee.ai/blog/design-extract-cli-tokens-free-ai-ready-gap Published: 2026-10-29 · 4 min read · By The WAALEE Team Topics: design token extractor open source, extract website design tokens free, design-extract claude code plugin, W3C design tokens CLI, AI ready design prompts, css design tokens generator For a while, pulling a design system off a live website meant opening DevTools and copying hex codes by hand, or paying for a tool that did the same thing behind a paywall. That gap closed fast this year. Two open-source CLIs, [design-extract](https://github.com/Manavarya09/design-extract) and [extract-design-system](https://github.com/arvindrk/extract-design-system), will now point at any URL and hand back W3C-format tokens for free, no account, one command. Worth knowing exactly what they give you, and what's still missing once you've got the file. ## design-extract: a CLI and a Claude Code plugin in one design-extract runs on Node and Playwright, so it actually renders the page before reading it rather than just scraping the HTML. Run `npx designlang ` and it writes out eight files: colors, typography, spacing, shadows, components, breakpoints, animations and accessibility, formatted as W3C design tokens plus a Tailwind config and plain CSS custom properties. It also installs as a Claude Code plugin, so inside a Claude Code session you can run `/extract-design` against a URL and get the same output dropped straight into your project instead of pasting files in by hand. That plugin path is the part worth noticing: it's built for the exact moment an AI coding agent needs real values instead of guessing at a palette. ## extract-design-system: narrower, same idea extract-design-system does a smaller version of the same job. It outputs a W3C-compatible tokens.json and a tokens.css file of custom properties, covering colors, type and spacing rather than the fuller eight-category breakdown. You can add it as a Claude skill with `npx skills add arvindrk/extract-design-system`, which is a lower-friction install than cloning a repo if you're already working inside an agent session. It won't catch component patterns or shadows the way design-extract does, but if all you need is a clean tokens file fast, it does that one thing without extra ceremony. - Both tools are free, open source, and run from a URL, no Figma file or design handoff required. - Both output W3C-shaped tokens, so the file itself will drop into most modern build pipelines without reformatting. - Neither tool turns the output into something an AI coding agent's prompt can act on directly; you still get a JSON or CSS file, not an instruction. - Neither distinguishes a brand's deliberate tokens from a one-off inline style some page happens to use, so a noisy site can still produce a noisy token set. ## A tokens file isn't a prompt Here's the step both CLIs leave on the table. A tokens.json is exactly the right shape for a build system, a Style Dictionary pipeline, a design team that already knows what to do with CSS variables. It is not the right shape to hand to Claude, Lovable, v0, Cursor or Bolt and expect a prototype that actually looks like your brand. Each of those tools wants different framing: Cursor wants explicit values inline in the instructions it's given, v0 and Lovable respond better to a short written system plus the literal numbers, and a one-line prompt with a tokens.json pasted in usually gets summarized into "use a blue theme" rather than read value by value. Getting a clean extraction is maybe half the job. Turning a hundred-line JSON file into five tool-specific prompts that an agent will actually follow precisely is the part that still takes real editing by hand. Three ways to go from a live URL to something an AI tool can build from: - [design-extract](https://github.com/Manavarya09/design-extract): CLI and Claude Code plugin. Renders the page with Playwright, outputs eight token files (colors, type, spacing, shadows, components, breakpoints, animations, a11y) as W3C tokens, Tailwind config and CSS variables. - [extract-design-system](https://github.com/arvindrk/extract-design-system): Lighter CLI and Claude skill. Outputs a W3C-compatible tokens.json and tokens.css covering colors, type and spacing. Fast install, narrower scope. - [WAALEE](https://waalee.ai/): Paste a live URL and get W3C tokens back as ready-made, tool-specific prompts for Claude, Lovable, v0, Cursor and Bolt, not just a JSON file you still have to translate into instructions each agent will actually follow. ## Pick the tool for the job you actually have If you're already in a codebase with a build pipeline and you just need a tokens file to wire into Tailwind or Style Dictionary, either CLI is a genuinely good, free way to get there, and design-extract's Claude Code plugin is a nice touch if you live in that workflow already. If the job is further downstream, getting an AI coding tool to actually produce something that looks like your brand on the first try, extraction was never the hard part. Getting the agent to follow the numbers instead of defaulting back to its own taste is. That's the step worth checking before you assume a clean token file alone has solved it.