Claude Code Skills can extract your design system now. Here's the catch
By The WAALEE Team · · 4 min read
Since Claude Code Skills opened up as a marketplace, a small wave of design-extraction skills has shown up in it, packaged markdown instructions that teach an agent how to reverse-engineer a design system from a URL or a codebase. It's a real step forward from typing "match this site's vibe" into a prompt. It's also gated behind a setup step most of the pitch decks skip past: you need Claude Code installed, open, and pointed at a project before any of it runs.
What these skills actually do
The pattern across the marketplace listings is consistent. arvindrk/extract-design-system is an open-source CLI, distributed as an installable skill for Claude, Cursor, and Codex, that reads colors, typography, spacing, border radius, and shadows off a public site and writes them out as JSON and CSS custom properties. AI UX Playground's Extract Design System skill does the same job framed as a repeatable agent workflow rather than a one-off script. Point either at a URL, and the agent crawls it, reads the rendered styles, and produces a token file it can then apply to whatever you're building next.
The part that only shows up once you try it
A skill is not a standalone tool. It's a set of instructions that only runs inside an agent that already has Skills support turned on, which today means Claude Code, Cursor, or Codex, installed locally, with a terminal open and a project directory to work in. That's a fine assumption if you're a developer mid-session in an IDE. It's a real barrier if you're a designer, a founder, or anyone who wants to check a competitor's palette or start a mood board before a codebase even exists.
- You need Claude Code, Cursor, or Codex installed and configured with Skills before any extraction skill runs at all.
- Most of these skills execute as CLI scripts under the hood, so a failed dependency or a site that blocks headless browsers fails silently in a terminal, not in a UI that tells you what went wrong.
- The output is a file on disk. Useful once you're in a repo, less useful if you just want to look at a palette on your phone before a call.
- None of them ship a hosted, no-install version, because a skill's whole design is to run inside an agent you already have open.
Where the skill approach genuinely wins
None of this is a knock on the skills themselves. If you're already living inside Claude Code on a real project, a skill that extracts tokens without leaving the terminal, in the same session where you're about to build the UI, is a real time save. It skips the context switch of opening a browser tab, running an extractor, and pasting the output back in. For a developer mid-build, that loop is the whole point of Skills existing in the first place.
For everyone else, the browser is still faster
The gap these skills leave open is the moment before a project exists: benchmarking a competitor, collecting three references for a pitch, or just checking what a site's actual accent color is before you've decided which AI builder you're even using. For that, a web-based extractor that needs nothing installed does the same underlying job (headless browser, rendered DOM, real computed styles) without asking you to set up an agent first.
Three ways to get a token file out of a live site, depending on what you already have open:
- extract-design-system (arvindrk): Open-source CLI and Claude/Cursor/Codex skill. Outputs JSON and CSS variables. Requires the CLI installed and, for the skill version, an agent with Skills enabled.
- AI UX Playground: Extract Design System: A packaged Claude Code Skill for the same job, framed as a repeatable in-session workflow. Same prerequisite: Claude Code open with Skills turned on.
- WAALEE: Paste a URL in the browser, no install, no agent setup. Returns colors, type, spacing, and W3C tokens plus AI-ready prompts for Claude, Lovable, v0, Cursor, and Bolt in seconds.
The honest read: Skills are a good delivery mechanism for a developer already deep in a session, and the marketplace around them is only going to get more crowded. But a skill needs a host, and the host needs installing first. If the question is just "what does this site's design system actually look like," asked before you've opened an editor, a browser-based extractor still gets you there in fewer steps. Use whichever one matches where you already are, not where the demo assumes you are.