Claude Design's web capture reads your site. Not its exact tokens
By The WAALEE Team · · 4 min read
Anthropic's own design tool picked up a feature the rest of this space has been circling all year: point it at a live URL and it pulls your colors, fonts, buttons, and cards straight off the page. Claude Design, the Anthropic Labs product at claude.ai/design, added a web capture method for exactly this, and it's fast, about three minutes for a single domain, per its own docs. Read the support article closely, though, and Anthropic is upfront about what that capture is actually for, and it's not what most teams assume when they hear "extracts your colors."
What web capture actually does
Per Claude's help center, a design system in Claude Design can start from chat (pointing at connected apps, uploaded files, Figma files, decks, logos, and fonts), from Claude Code via a `/design-sync` command that reads tokens straight out of a React codebase, or from web capture, pasting a live URL so Claude can grab elements directly from the rendered page. That third path is the one built for a team whose brand only lives on a shipped site, not in a component library or a Figma file anyone kept current.
"Your brand's feel," not your brand's numbers
One line in Anthropic's own documentation says exactly where the ceiling is: a finished landing page or marketing site tells Claude more about your brand's feel than a color palette alone. That's a deliberate framing, not a slip. Web capture is built to give Claude visual context, the vibe, the layout patterns, the general palette, so a new prototype reads as recognizably yours. It's not built to hand back an exact hex code, a precise type scale, or a spacing value you could paste into a Tailwind config with confidence. The docs' own advice for getting it right is to include "real examples, not just specs," and to keep iterating if the first extraction doesn't quite land. That's the language of an approximation you refine, not a measurement you trust on the first pass.
A browser extension closes part of the gap, for some sites
- Claude Design's own web capture reads a URL for visual context: colors, fonts, and components as Claude interprets them, tuned for a coherent-looking prototype, not an exact source of truth.
- The `/design-sync` path from Claude Code gets real tokens, but only for teams whose design system already lives in a coded React component library.
- WebGrabber for Claude Design, a third-party Chrome extension, captures resolved CSS custom properties per element, real design tokens, when a site is already built with CSS variables. Most marketing sites, Webflow, Wix, WordPress, a decade-old custom build, aren't.
- None of the three has a step that turns an ordinary site's plain hex-coded CSS into a token file automatically, before you're already inside an agent session.
Why this matters more for Claude Design specifically
Anthropic built the feature that makes the gap visible faster than most competitors, because it's the first major tool to admit, in its own docs, that a URL capture is a feel-extraction, not a values-extraction. Every other AI design tool this year has quietly let "we read your site" imply "we got your exact brand" and left teams to discover the difference later, usually in a design review. Claude Design just said it plainly, which makes it easier to know when you need something more precise, and when the vibe is genuinely enough.
Bring the exact values yourself
If a prototype needs to match production, not just resemble it, the fix is the same one that applies everywhere in this pipeline: extract the real computed colors, type scale, spacing, and radii off your live site first, as exact values, then feed those into Claude Design as one more upload, a palette and font spec alongside the web capture, instead of asking the capture alone to carry that weight. The vibe extraction still does its job, giving Claude visual context for layout and composition, while the exact numbers come from a source built to measure them, not approximate them.
Three ways a live URL turns into design-system material right now:
- Claude Design web capture: Paste a URL, get colors, fonts, and components as visual context in about three minutes. Anthropic's own docs frame it as capturing your brand's feel, not exact values.
- WebGrabber for Claude Design: Chrome extension that captures resolved CSS custom properties per element for Claude Design. Real tokens, but only on sites already built with CSS variables.
- WAALEE: Paste a live URL and get the real colors, type scale, spacing, and radii back as exact W3C tokens, no CSS-variable requirement, ready to upload into Claude Design alongside its own web capture.
None of this is a knock on what Anthropic shipped. A three-minute capture that gives a prototype the right visual feel is a genuine convenience, and being explicit that it's feel over precision is more honest than the alternative. The gap is just the one this whole space keeps leaving in the same place: reading a live site for inspiration and reading it for exact values are two different jobs, and right now, most tools, Claude Design included, are still only doing the first one automatically.