Claude Design launched on April 17, 2026, and I did the only test that means anything to me with a new design tool: I pointed it at all four of my real brands in one sitting, mejba.me, Ramlit, ColorPark, and xCyberSecurity, and asked it to produce work that would not embarrass any of them. My thesis after that session has not changed since: the visual canvas is nice, but the product is the codebase ingestion. Claude Design treats your shipped code as the design system of record, and for developer-led teams that inverts the usual design tooling relationship in exactly the right way.
This is the honest version of that test. What held up, what broke, and the workflow pattern that made it click, because the first forty minutes genuinely did not.
The problem it exists to solve
Claude Code is the most productive environment I have ever worked in, and it is almost entirely a text tool. The moment a project needs real visual iteration, a hero that has to feel right, a dashboard whose hierarchy has to read at a glance, the workflow degrades into a loop: prompt in the terminal, npm run dev, open localhost, screenshot, judge, retype the prompt with adjustments, rebuild, compare. I once counted seventeen round-trips on a single landing page hero before it looked right.
I have chipped at this gap from several directions before: the Figma MCP bridge into Claude Code for teams already living in Figma, and the design-to-code workflow for the reverse direction. Both assume a visual artifact already exists somewhere. Claude Design's bet is different: the codebase itself is the artifact, and the canvas is generated from it.
What it is, functionally
Strip the launch language away and Claude Design is a web-only visual workspace at claude.ai/design, an Anthropic Labs research preview running on Opus 4.7, included with Pro, Max, Team, and Enterprise plans at no extra cost. No desktop app, no terminal integration; you need a browser.
Outputs: interactive prototypes, static mockups, slide decks, one-pagers, and landing pages. Exports: ZIP, PDF, PowerPoint, standalone HTML, Canva, and, the one that matters for this review, a handoff bundle aimed back into Claude Code.
Inputs are where it gets interesting. You can start from a blank prompt, an uploaded image or document, a live site URL (captured at the DOM level, not a screenshot), a GitHub repository, or a local folder dragged onto the canvas. Those last two are the whole ballgame.
The four-brand extraction test
Keeping visual identity consistent across four brands is a permanent chore for me. Each identity lives partly in configs, partly in production CSS, partly in my head, and every AI design tool I had tested before this one ignored all of it and produced the same template-flavored output.
So test one was dragging the mejba.me codebase in and asking for a blog hero that matched the brand. Claude Design did not slurp the whole repo; it crawled the project, picked out the relevant files, the Tailwind config, global CSS, logo assets, font declarations, a few existing hero sections, and started extracting tokens. The extraction is not fast. Mine ran in the fifteen-to-twenty-minute range per project, long enough that I now trigger extractions before I need them, the way you preheat an oven.
What came back was the moment my skepticism cracked: it had my actual brand. The green I use everywhere (#38D39F) identified as the primary accent, not approximated. My real typography stack, Instrument Sans for the interface, DM Serif Display for headlines, JetBrains Mono in code contexts, pulled from the font declarations rather than defaulted to Inter. Spacing mapped to my Tailwind scale, and logo variants surfaced from the public folder without being asked.
I repeated the run three more times: a GitHub link for ColorPark, a folder drag for xCyberSecurity, a live URL for a Ramlit client project. Every extraction produced a coherent, brand-faithful starting point. That is the feature no competing tool in my rotation has: reading shipped code and building the design system from it in one step.
The Q&A pattern is the actual product
My first real prompt on the canvas got no image back. It got a question. Then five more: what visual register, which interaction states matter, single-hue or multi-hue accents, how much surrounding UI, what mood, which parameters I wanted tweakable afterward.
My first reaction was impatience. My considered reaction, about thirty minutes later, is that this interview is the most honest thing in the product. When I brief a design in my head, there are dozens of implicit decisions in that brief, and a one-shot text prompt transmits maybe seven of them. The model guesses the rest, and guessed decisions are why one-shot AI design output feels generic. The Q&A forces the unstated decisions out of my head one at a time, exactly the way a good senior designer interrogates a client before sketching. The questions are the design work; generation is just rendering.
Worth knowing: the interview only fires on genuinely ambiguous prompts. "Make the button green" just makes the button green.
The Claude Code handoff, which is the point
If you take one section from this review, take this one. The loop I now run on real client work:
- Point Claude Design at the project repo and let the extraction finish.
- Prompt for the section or screen; answer the interview honestly.
- Iterate on the canvas: direct manipulation for granular tweaks (click the element, drag the slider), batched annotations for structural ones. Batching matters; queuing five changes and sending them as one update produces more coherent regenerations than five sequential one-off asks.
- Export the Claude Code handoff bundle: design spec, extracted tokens, component structure, implementation notes.
- In Claude Code, in the same repo, one instruction: implement this bundle, matching existing component conventions.
On the run I did for a Ramlit client pricing page, the generated implementation was maybe 80% right on arrival, in the codebase's own style with the correct Tailwind tokens, and the remaining 20% was normal review-and-touch-up rather than translation work. The manual version of that translation, canvas idea to production component, has historically cost me most of an hour per section. That is the number the handoff attacks.
This round-trip is what separates the tool from its neighbors. Figma Make hands to code but from inside Figma's ecosystem, and it remains the better choice where designers own the system; my Figma Make design systems walkthrough covers that side. Prompt-first ideation tools are faster for greenfield exploration with no codebase. Component generators produce good isolated React but do not ingest your brand. Claude Design is the only one where the code is the source of truth in both directions.
Where it will annoy you
The preview label is accurate, and I hit real walls:
- Web-only. No offline, no terminal path. On a train with bad connectivity, I fell back to my old workflow entirely.
- The extraction wait. Fifteen-plus minutes makes casual use unattractive. I only extract projects I will iterate on across multiple sessions.
- When to prompt versus when to click. The canvas rewards direct manipulation for small changes, and I burned most of my frustrating first hour prompting for things a slider already controlled. Budget a session to internalize the split.
- Rendering glitches. I hit two: an SVG import with broken paths, and a dark-mode palette switch that failed to propagate into nested components. Both recoverable, both very research-preview.
- Opus usage. It runs on Opus 4.7 against your plan limits. A long iteration session on the Pro plan will feel that; I hit a limit once mid-session.
- It does not replace judgment. It executes design decisions fast. It does not know when your brand is drifting or why a hero feels wrong. That remains the human's job, and the tool is at its best when the human doing that job also runs an automated critique on the output; my Impeccable skill review covers the tool I use for exactly that pass after the handoff lands.
The category it creates
Every AI design tool I have used fits one of three boxes: ideation tools (fast, prompt-driven, zero-to-something), system tools (consistent inside an existing design ecosystem), and component tools (production code for isolated elements). Claude Design plays across all three while belonging to none, because its anchor is different: the production codebase as the design system's source of truth, a visual canvas as the iteration layer, and the model as a bidirectional translator between them.
"Codebase-native design" is the best name I have for it. For developer-led teams, where the code was always going to be the real system of record no matter what the Figma file claimed, I think this pattern wins, and Claude Design is its first serious implementation.
My verdict after living with it
The pattern I have kept: mornings in Claude Code for logic and data, visual work started in Claude Design against an already-extracted codebase, handoff bundle back into the terminal, review, ship, and client-facing exports to PDF or Canva when someone outside the team needs to react to it. Measured against comparable weeks before, my visual iteration time dropped by a large fraction, and more importantly, the seventeen-round-trip loop is gone.
On a Pro or Max plan the only test that matters costs twenty minutes: a real repository you care about dragged onto the canvas, the extraction started, and a first look at what your own codebase looks like to a model that can actually read it. Either it clicks or it does not. Mine clicked the same morning I planned to write a skeptical review.
I keep all four of those brands in active production use, and the shipped work that came out the other side of this workflow lives on the projects page.
