How Good is Anthropic's Claude Design?
Issue #65 | Notes from building an interactive reader map for my book site with Claude Design and Claude Code in about 45 minutes.
Anthropic Labs released Claude Design [1] on April 17, 2026, one day after the Claude Opus 4.7 release [2]. It is a design tool aimed at turning descriptions, documents, or codebases into prototypes, slides, and one-pagers.
I tried it on a real task: add an interactive globe to buy.multiagentbook.com (see video below) showing where readers of Designing Multi-Agent Systems come from, wired to real Google Analytics and Stripe data. Below is what worked, where human judgment was still needed, and the engineering outcome.
TLDR
Design system before build. Claude Design ingests your existing CSS (or any other files) to understand your design system, so output respects your design tokens rather than guessing at them.
Claude Code handoff. Whatever you build can be exported to multiple formats (pdf, ppt, canva) including a bundle structured for a coding agent to pick up, which makes the Design-to-Code step tighter than a typical HTML export.
Short time to a shippable feature (~45 min). Between providing context and giving feedback, about 45 minutes of my active attention got the feature integrated end-to-end — a project that would typically take a week or more of engineering time without these tools.
Engineering taste is still critical. Claude Design sits at the center mass of generation, but the sensitive decisions around the generated output are still yours — when to aggregate vs. show raw numbers, what to hide for privacy, and where to place things on a conversion-sensitive page. I had to explicitly direct Claude toward bucketed counts, away from raw analytics figures, and to move the map below the fold.
Want to understand how systems like Claude Code or Claude Design are built from the ground up? Designing Multi-Agent Systems takes a first-principles approach — agent architecture, UX patterns for agentic interfaces, and a from-scratch build of a Claude-Code-style software-engineering agent.
What is Claude Design?
Claude Design is a prompt-driven design tool. You hand it descriptions, screenshots, or a codebase; it produces working prototypes, slides, or one-pagers; you iterate visually through conversation, inline comments, and direct edits. Anthropic positions it [1] as a separate product under Anthropic Labs, powered by Opus 4.7.
Two features matter for the rest of this post:
Design system ingestion. It reads your existing CSS and design files to build a working design system, which it then applies to everything it generates.
Claude Code handoff. It packages finished designs into a bundle structured for a coding agent to pick up.
One observation worth flagging: the UI shares a lot of shape with Claude Code — a chat pane with collapsible tool-call steps (”Editing,” “Searching,” “Done”), agent-driven file edits, persistent session state, interruptibility, and a live preview that updates as the agent works. It reads as an agentic loop in the Claude Code mold, with a design-specific UX layered on top. Anthropic does not claim this architecture explicitly; it is my inference from using the tool.
The Workflow I Ran
The goal. I wanted to add something to the book’s home page that did two things: communicate the book’s global reach visually, and give the reader something to interact with rather than another static block of copy. Readers come from 100+ countries — a fact that until now lived only as a number in analytics. A rotating globe they could drag and explore would make that reach tangible.
Uploaded the site’s CSS and a screenshot (~5 min of my time). Claude Design read the CSS token files and reconstructed the whole page at decent fidelity — not just the new component, the surrounding hero too. That gave me a live working context to edit against rather than a blank canvas. It felt noticeably faster than starting this kind of iteration in terminal Claude Code, where visual feedback is a separate loop; Claude Design is wired up to see code and visual output at the same time.
Described the initial prompt. A rough paragraph: a rotating globe showing where readers come from, minimally integrated with the existing hero. Claude iterated o for ~15 minutes and created a first version.
Refined the layout and added real data (~10 min of my time). I adjusted placement and framing through conversation and plugged in CSV exports from Google Analytics and Stripe.
Exported to Claude Code (~30 min of my time). Claude Design supports export to multiple formats including a bundle that a coding agent can work with.
The handoff bundle arrived as a tar archive with a README instructing the coding agent to read the files directly and match the visual output in whatever technology fit the existing codebase. Claude Code handled simplification, tree shaking, performance testing, and React + Vite integration. I spent the time reviewing output and redirecting — the judgment calls come in the next section.
The result is live at buy.multiagentbook.com (scroll down).
A feature like this — interactive, data-driven, with custom layout, privacy rules, and production integration — would typically take a week or more of engineering time without tools like these.
Where Human Judgment Still Mattered
It is important to note here, that while the first draft produced by Claude Design closer to “visually interesting” than “useful visualization that communicates insights clearly.” Two data sources fed the globe: Google Analytics (session counts per city) and Stripe (purchase counts per country — country-level only, never city). Several things in the first prototype did not map properly to that:
