Anthropic Labs released Claude Design on April 17, 2026 — one day after Opus 4.7 shipped. It's the most impressive design-to-code tool ever publicly available. It will absolutely produce a working website from a single prompt in about ninety seconds.
It will also, used alone, produce a website that looks remarkably like every other website Claude Design has produced for someone else this week.
That's the real story to understand if you're evaluating an agency in 2026. Claude Design is a brilliant builder. It is not a designer. The agencies winning meaningful work this year are the ones who understand that distinction — and use Claude Design accordingly. If a candidate agency tells you they "design in Claude Design," they're describing a workflow that produces cookie-cutter output. If they tell you they "design in Figma and ship through Claude Design with a designer present at every step," they understand what the tool actually is. The difference matters.
Below: what Claude Design does well, what it's bad at, why our own rebuild used it the second way, and how to brief an agency on a project where you actually care about the outcome.
What Claude Design does well — genuinely
Claude Design is a browser-based environment where you describe what you want and Claude generates a working HTML/CSS/JS prototype. The output is a single .html file you can save to disk, drop into a browser, or hand to a developer to extend.
Three things it does better than any tool that's come before it:
1. It produces production-grade code as the design artifact. Not a Figma frame that someone then translates. The thing you're iterating on is the thing you ship. Modern HTML/CSS is powerful enough — scroll-driven animations, view transitions, CSS Grid, container queries, variable fonts — that a single-file prototype can do nearly anything a complex framework can. For static marketing sites, the build step is gone.
2. It iterates conversationally. "Make the hero serif." "The spacing on the CTA section feels too tight." "Swap the green for terracotta." Each edit lands in seconds. Iteration speed isn't 10× a Figma workflow — it's closer to 100×.
3. It's genuinely good at typography and layout fundamentals. Default proportions, type pairings, vertical rhythm, white-space economy — all in a thoughtful baseline. Most agencies' junior-designer work doesn't beat what Claude Design produces unprompted.
Where it falls apart, every time
Used without strong direction, Claude Design has one fingerprint aesthetic and uses it on everything. Watch what comes out when you prompt it generically:
- Warm off-white background, somewhere between
#F4F1EAand#EDE7D8 - Oversized serif display type — Fraunces, Playfair, Instrument Serif, GT Sectra
- Tight line-height on the display (~0.9), generous everywhere else
- DM Sans or similar humanist sans for body text
- One muted accent color (terracotta, oxidized orange, muted forest green)
- Generous section padding, horizontal rules as structural dividers
That aesthetic is beautiful. It's also exactly the same aesthetic Claude Design produces every time. The site you just shipped, the site your competitor shipped using the same tool last week, and the next 50 sites someone will ship this month using identical default prompts — all of them have the same fingerprint.
This is fine if your brand wants to look like an editorial publication or a small hospitality boutique or a thoughtful design studio. It is catastrophic if your brand needs to look like:
- A B2B fintech (needs to feel modern and confident, not editorial-cozy)
- A consumer gaming brand (needs energy and saturation, not calm)
- A pharmaceutical company (needs scientific authority, not cream-on-cream)
- A youth-oriented consumer brand (needs energy and movement)
- Itself. The thing you're paying an agency for is differentiation. Cookie-cutter is the opposite of that.
Claude Design's house style is the new "default Squarespace template." It's better than the Squarespace template — significantly better. But the category of problem it creates is identical: every site looks the same.
What a designer actually does in this workflow
When Rough Works rebuilt our own site, the workflow was Figma-led, Claude-built. Not "type a prompt and ship what comes out." Specifically:
Phase 1 — Design happens in Figma, by a designer. Our designer started with our brand language, mood-boarded against agencies we admire (which are themselves not Claude Design defaults), and produced a comprehensive Figma file with:
- Custom type pairing chosen against our brand's voice — Fraunces, sure, but at our weight, our tracking, our opsz settings, paired with a specific Geist weight for body
- A custom palette tuned to the photography we actually use
- Layout grids that account for the case studies, the cursor treatment, the scroll progress bar
- Hand-drawn component sketches for the marquee, the case study cards, the custom cursor states
This phase took roughly two days of focused design work. None of it was Claude Design.
Phase 2 — Figma frames go to Claude Design as a spec. Not a prompt. A spec. The conversation with Claude Design was prescriptive:
"Build this exact layout. Use these exact hex codes for palette: olive #3F4528, cream #E8E2CE, accent green #7BE38A. Use these exact fonts: Fraunces variable for display at the weights I'll specify per use; DM Sans for body. The hero treatment is this Figma frame [drag in]. The case study grid is this [drag in]. The marquee is this [drag in]. The cursor is a 14px cream dot that becomes 44px on hover and 88px with the text 'View ↗' over project cards. Build it."
Claude Design then produced HTML that matched. Not "in the style of" — matched. The designer's job through this phase was sitting next to the engineer, comparing the output to the Figma frame side-by-side, pointing at every place where the output drifted (which was a lot, especially on micro-spacing and animation curves), and directing the next iteration.
Phase 3 — Polish in code, designer in the loop. Once the HTML matched the Figma reasonably well, the designer kept eyes on the output as we exported, integrated with the production deploy pipeline, and shipped. Animation timing got tuned in the browser, not in Figma. Cursor easing was finalized against the actual rendered cursor, not against a static mockup. The designer was present through every iteration.
Phase 4 — Documentation. The designer wrote up what we decided and why, so future iterations don't have to relitigate the decisions. Brand guidelines now live alongside the codebase.
Total designer time across the rebuild: about a day and a half of focused Figma work upfront, plus continuous review during the Claude Design and integration phases. Without that designer involvement, the site that shipped would have looked like every other Claude Design site this week.
How agencies use Claude Design poorly
The pattern we see at the median:
"We started with Claude Design. Here are three directional prototypes we generated from your brief. Pick one."
What this actually means: the client got three flavors of the Claude Design house style. The differences between the three are slight — slightly warmer palette, slightly different serif, slightly different hero composition. None of them are yours. None of them have a designer's editorial point of view shaping them.
This workflow is fast and cheap. It works if the client doesn't know enough to notice. It produces sites that the client will quietly redesign in eighteen months because something always felt off about them.
The agencies that do this well aren't faster than the ones that don't. They're using their speed advantage to deliver more sameness more efficiently. That's not a value proposition.
What to ask an agency that says "we use Claude Design"
If you're briefing a project where the design actually matters, these three questions will separate agencies who use Claude Design well from agencies who use it as a Figma substitute:
1. "Show me a Figma file from the project you're proud of." If the agency uses Claude Design as a designer's assistant, they have Figma files. The Figma file is where the editorial work happened. If the agency says "we don't really use Figma anymore" — walk.
2. "Who's the designer on this project, and how do they work with Claude Design specifically?" If the answer is "we don't have a dedicated designer; our developers use Claude Design" — that's the cookie-cutter workflow. There is no design happening. The output will look like everyone else's.
3. "Show me three sites you've shipped using Claude Design that don't share Claude Design's default aesthetic." This is the trap question. If they can't, they don't actually know how to override the defaults. If they can, you'll see the actual range of work that's possible.
What we use Claude Design for, specifically
To be clear about our own positioning: Rough Works uses Claude Design heavily. We're not anti-Claude-Design. We're against the workflow of letting it design things by itself.
What we use it for:
- Translating finished Figma designs into shippable HTML — the use case where it shines
- Rapid client prototyping during discovery — three directional sketches in a single meeting, with the understanding that none of them is "the design" yet
- Static marketing sites where the client doesn't need a CMS — portfolios, microsites, one-pagers
- Component-level explorations — "give me five takes on a CTA module" to inspire the designer's actual choice
- Post-launch copy and layout tweaks — clients can request small changes that get applied in Claude Design and deployed within an hour
What we don't use it for:
- Initial visual direction (that's the designer's job)
- Brand systems (Figma + a designer + Brand guidelines, full stop)
- CMS-backed sites with complex content models (WordPress, Webflow, or custom)
- Anything where the client needs to look distinctively unlike "another 2026 editorial-modern site"
The pricing implications nobody wants to talk about
Here's the awkward part: if you're an agency selling design services in 2026 and you let your client think Claude Design is your designer, you're commodity-pricing yourself. The cookie-cutter output is now available to anyone with a Pro tier. Your competitive position evaporates.
The agencies thriving in 2026 are charging more for design work, not less. The reason: a designer-led workflow plus Claude Design as a build tool is dramatically more valuable than either component alone. The designer prevents cookie-cutter; Claude Design eliminates Figma-to-code translation time. The total is more leverage and more differentiation per dollar than the old model.
Clients who go cheap on this end up with the same eight sites everyone else has, and they redesign them in eighteen months. Clients who pay for designer-led work end up with sites that age into "yeah, we made that intentional choice" instead of "what were we thinking with that template."
That's the math you're balancing when you choose an agency. Cheap is expensive; intentional is durable.
The takeaway
Claude Design is a phenomenal tool. The agencies that use it as a designer will produce work that looks like everyone else's. The agencies that use it as a builder — with real designers running the design work in Figma first — will produce work that looks distinctly yours.
When you brief an agency, the question that separates the two is the simplest one: "Where does the design happen?"
If the answer is "in Claude Design," you're shopping in the bulk aisle.
If the answer is "in Figma, with a designer, and Claude Design is how we ship it" — that's the workflow that's actually producing this year's award-winning work. Come talk to us. The Rough Works homepage you're on right now was built that way. So is everything we ship.
