Superdesign's Claude Code skill can now extract your brand guide
By The WAALEE Team · · 4 min read
Superdesign started as a VS Code extension for generating UI mockups on a canvas. The current version is a skill: install it into Claude Code, Cursor, or basically any coding agent, and it adds a design workflow on top of whatever you're already building. The part worth noticing this week is the CLI underneath it now ships an `extract-brand-guide` command that takes a plain URL and returns colors, type and spacing back to the agent. That's the same job a dedicated extraction tool does, built directly into a design skill millions of Claude Code users are already installing.
What the skill actually does
Superdesign sets up a design system inside your own codebase, then generates and iterates UI drafts on an infinite canvas before any of it becomes final code, closer to a design tool bolted onto your agent than a one-shot prompt. Its documentation describes `extract-brand-guide` as pulling a reference's palette and typography straight from a URL, which means the skill can ground a new screen in a real brand without you manually typing in hex codes first. For a tool built around rapid UI iteration, that's a sensible feature to add. It removes one manual step in the exact workflow the skill already owns.
A feature inside a tool is not the same as a tool for the job
Here's the catch. `extract-brand-guide` exists to feed Superdesign's own canvas, so its output is shaped for that one consumer. If what you actually want is a clean, portable set of W3C design tokens you can hand to Lovable one week and Cursor the next, or a DESIGN.md you check into a repo that no agent owns, a feature bundled inside a design skill is the wrong shape for the job even when the underlying extraction logic is solid. jezweb's design-system skill runs into the same issue from the other direction: it's a Claude Code skill built specifically to analyze a site or screenshot and write a DESIGN.md, which is more portable than Superdesign's bundled version, but it still only runs inside Claude Code, and only when you remember to invoke it.
- Superdesign: a full design-and-iterate workflow with brand extraction as one command inside it. Best if you're already living on its canvas.
- jezweb design-system skill: a focused Claude Code skill that extracts tokens into a DESIGN.md. Portable output, but Claude Code-only and skill-install-dependent.
- Both assume you're already inside a specific agent or workflow before extraction even starts.
Where extraction should actually live
The fact that three different tools have now independently decided to bolt URL-to-tokens extraction onto themselves (a design canvas, a Claude Code skill, and others before them) says something: extraction is infrastructure, not a feature any single tool should own. A brand's palette and type scale don't belong to Claude Code any more than they belong to Cursor or Lovable. The moment you extract them, you want to reuse that exact token set across all four, not re-run a different vendor's extractor inside each one and hope they agree with each other down to the hex code.
Three ways to pull real brand values out of a reference right now, depending on where you want that output to live:
- Superdesign: Design skill for Claude Code, Cursor and others. extract-brand-guide pulls colors and type from a URL to feed its own canvas workflow. Great if you're already drafting UI there.
- jezweb design-system skill: Claude Code skill that extracts tokens from a site or screenshot into a DESIGN.md. Portable file, but Claude Code-only and has to be installed and invoked.
- WAALEE: Paste a live URL once, get the real colors, type and spacing back as W3C tokens and AI-ready prompts for Claude, Lovable, v0, Cursor and Bolt, no skill install, no single agent required.
None of this makes Superdesign's new command a bad idea. Built-in extraction beats no extraction, and if your whole workflow already happens inside its canvas, using its own command is the path of least resistance. But the second you want the same brand to show up correctly in more than one tool, the question changes from "does this agent have an extraction feature" to "where does my team keep the one token set every agent reads from." That answer should live outside any single coding agent, not bundled inside the one you happened to install first.