Claude Design Review: 48-Hour Builder's Test + Hero Prompts
I spent 48 hours testing Claude Design on Opus 4.7. The prompts, the credit traps, and why the "Figma is dead" take is louder than it is true.
TL;DR: Claude Design runs on Opus 4.7, turns chat into working UI, slides, and 3D prototypes, and hands off directly to Claude Code. Best for founders and PMs who outsource visuals. Weak on real-time collaboration, photorealism, and credit economics. Not a Figma killer yet — a first-draft killer.
I barely finished drafting the Claude Opus 4.7 review before Anthropic introduced Claude Design.
In 48 hours, I test and publish; in the same 48 hours, Anthropic ships a product, then another, and moves on.
From a product strategy perspective, the real story is not the design tool itself, but the stack Anthropic is building around it. Design, code, research, and memory are no longer separate experiences.
Before, if you used Claude to build, you designed somewhere else.
The product workflow looked something like this:
Idea → Problem framing → Design → Prototype → Validation → Production → Feedback → New Idea
Now, we don’t move from idea to production in stages with handoffs.
We move in one loop, within the same model and context.
Like Lovable and Replit, Anthropic no longer assumes a trained designer is in the loop.
For people who haven’t worked across these stages, this matters. It opens a new entry point into design and building.
This likely contributed to Figma stock dropping 7.28% within four hours of the Claude Design announcement.
What followed was a predictable wave of dramatic “Figma is dead” hot takes.
Today, we’re going to look at what this release means for beginners, the experiments I ran, the prompts I used, and why the “Figma is dead” storyline is a lot less binary than Twitter would like you to believe.
Hey, I’m Karo Zieminski 🤗 AI Product Manager and builder. I write Product with Attitude, an AI newsletter community of 17,000+ subscribers building with AI and developing critical AI literacy through practice. The kind where you sit down on a Saturday morning, follow a guide, and walk away with a working agent, automation, or product. Built by you. Understood by you. Owned by you.
If you’re new here, welcome! Here’s what you might have missed:
→ Opus 4.7 Cheat Sheet for AI Learners, Writers, Knowledge Workers, Vibe Coders & System Builders
→ Claude Cowork Guide for Power Users
Join 17K readers from around the world and learn with us.
What’s Inside
Why Claude Design only works because of Opus 4.7
What Claude Design is and who it’s for
My 48-hour hands-on review (what worked, what didn’t, credit traps)
Claude Design vs Figma vs Figma Make vs Lovable
Exact Claude Design prompts for portfolio-worthy hero sections
Part 1:
Why Claude Design Only Works Because of Opus 4.7
I focused only on updates that matter for the Opus + Design combo.
If you want a deeper analysis of Opus 4.7 and how it maps to other roles, goals, and workflows, my previous article is a great place to start.
Claude Design runs on Opus 4.7.
That release is the reason Design works at all.
In benchmarks, vision jumped from 54.5% to 98.5%.
It reads 3.75-megapixel images with near-perfect accuracy.
Coding also got better (SWE-bench Pro: 53.4% → 64.3%), and Opus 4.7 now checks its own work before showing it to you.
A lot like opening a second eye, or realizing the first one was confabulating the entire time.
That means Opus 4.7 can read tiny UI labels, parse dense dashboards, and spot subtle icon differences.
Without that jump, a design tool built on top would hallucinate half of what it sees on your screen.
In a design tool, that means fewer broken screens and less cleanup.
That’s the engine. Now the product.
Part 2:
What Claude Design Is (and Who It's For)
What Claude Design Is
Claude Design is the second product Anthropic launched in that very busy 48-hour window starting April 16.
Claude Design is an AI design workspace where you describe what you want in chat, and Claude turns it into working visuals of all kinds, from slides to 3D visualizations.
This time, the name is refreshingly clear.
Claude Design designs.
I’m only speculating, but we might have Mike Krieger, co-founder of Instagram, to thank for that name. He co-led the project. He also left Figma’s board three days before Claude Design launched.
How to Start Using Claude Design
Claude Design runs on Opus 4.7, which is why we started there.
For now, it’s web-only, so don’t worry if you don’t see it in the desktop app. You can start playing with it at claude.ai/design. As always, I encourage you to do just that and decide if the hype matches the experience.
During onboarding, it reads your codebase and design files, extracts your brand system, and builds it automatically.
Then it applies it to every new project.
You can run multiple brand systems per workspace, so agencies and multi-product teams don’t have to keep re-training the same style from scratch.
What You Can Do With Claude Design
No matter what you do, there’s something on this list you’re either doing by hand or paying another tool to do for you.
If you’re a marketer
Landing pages, campaign assets and microsites, social assets across every format, email templates, banner ads, pitch decks, explainer videos, animated social clips, mood boards, style explorations and your brand system.
If you run a newsletter or blog
Post header illustrations, recurring column branding, subscribe block designs, archive page layouts, referral program pages, anniversary retrospectives, subscriber-only bonus PDFs, social share cards auto-generated per post.
If you’re a PM, designer, or builder
Design systems, token libraries, UI component catalogs. User flows. Onboarding sequences. Web capture of existing site elements. Interactive prototypes with voice, video, shaders, or built-in AI components. 3D prototypes. Mobile mockups in real device frames. Responsive layout variants. Empty states, error states, loading states. Dev handoff as HTML or React.
If you’re an educator
Lecture slides, interactive explainers, essays with custom diagrams, printable handouts.
If you’re an illustrator, or cartoonist
Character sheets, turnarounds, editorial covers, storyboards.
If you sell design assets on Etsy
Sticker packs, planner kits, and digital journal inserts.
If you work with data
Charts, dashboards, editorial charts, animated data videos. The visuals that used to require a designer or a week with D3.
If you work in local government or nonprofits
Public notices, program enrollment pages, event flyers in multiple languages, annual report layouts, volunteer dashboards, and grant application visuals.
And when you’re done, you can export it directly to Canva or as a PDF, PPTX, URL, or HTML.
What You Can’t Do With Claude Design
These are the current limitations. Keep in mind Claude Design is still in preview. And at the pace Anthropic is shipping, parts of this list might be outdated by the time I hit publish.
You can’t generate photorealistic images directly, by using tools like Nano Banana, Midjourney, or DALL-E.
No real-time collaboration. You can’t co-edit like in Figma.
No public share link.
No voice input. Google Stitch has it, Claude Design doesn’t.
No infinite canvas. Figma has it, Claude Design doesn’t.
No backend/database. Design produces the front-end only; Claude Code handles the rest.
No parallel agents like in Perplexity Computer.
No real-time consumption meter. At some point, the credits just run out.
No precise vector control.
Help me spread the word and I’ll make it worth your while.
Share this with 3 friends or colleagues and you’ll get a free month of premium membership.
Part 3:
The 48-Hour Claude Design Review
Things I Appreciated Most
The Claude Code Handoff
The real breakthrough is the combination of codebase awareness and Claude Code handoff.
Claude Design sits next to code. Code sits next to research. All of it sits on top of persistent memory.
Its work ends with a handoff bundle that goes straight to Claude Code.
To put this in context, Figma (even Figma Make) produces a spec handed to engineers.
Claude Design produces a machine-readable spec that Claude Code consumes directly to build the feature.
The Contextual Features
The days of generic, fixed sliders and knobs are over.
Tweaks Panel
Claude generates a custom tweaks panel with controls specific to your design, like a dark mode toggle or a font switcher.
When you select something, the knobs show the controls that matter, like spacing, color, typography.
I kept asking for more controls, and the tool just reshaped itself around my project.
Embedded Sliders & Pickers
Claude embeds sliders and color pickers directly into your prototype. Theme color, accent color, timing values; whatever Claude decided should be adjustable.
For engineers, this is business as usual. Variables in a UI.
For beginners, this is the part where design suddenly feels possible.
Things That Surprised Me
It picks up voice, not just style. After feeding it three Substack links, the copy sounded like me. Close enough to edit rather than rewrite.
Things That Got Under My Skin
Claude Design is token-intensive. Brutally so.
If Claude Design has a meta-skill, it is this: credit discipline.
Because it constantly renders and re-renders complex code behind the scenes, you can burn through a Pro weekly allowance in under 30 minutes of heavy use.
How To Save Credits In Claude Design
Build the design system first. That way, you avoid rework on every screen.
Don’t waste tokens on lengthy prompts, use the inline comments instead. Point. Comment.
It helps to know the limits. It’s not the best tool for highly original, creative work. Don’t waste credits on that.
Part 4: Claude Design vs Figma
Is Claude Design a Figma Killer?
It’d be easy to call Claude Design a Figma killer, but in my opinion, we’re not there yet, stock move or not.
Some of the reasons are feature related, some are linked to how our brains work.
Design production ≠ Design thinking.
Blurring them produces the worst takes on both sides.
One camp shrugs it off, ignoring how much routine design work is on the line.
The other goes full doomsday, convinced the entire function is about to vanish.
Just as typing isn’t the hardest part of writing, building the first prototype isn’t the hardest part of design.
Design is taste, judgment, attitude, and the ability to build under uncertainty. The first three are personal.
The last relies on real-time collaboration - Figma’s sharpest edge - which is absent in Claude Design right now.
Waiting for AI to finish tasks breaks the creative flow
There's also a cognitive problem I see.
Even a 10–30 second delay is enough for my brain to drift to food, Substack, or any other convenient distraction.
When the AI finally responds, I have to rebuild the mental state I was just in.
That’s why manual manipulation of design still has the edge over prompting: superior tools are not just about output, but about keeping us locked into the work.
Claude Design is very good at accelerating draft creation. Figma is still better at sustained design work. And those are not the same job.
Claude Design vs Figma vs Figma Make vs Lovable
Here's how the four tools compare for a non-designer shipping a first mockup to working code.
Going Beyond Prompting
Similar to Replit and Lovable, Claude Design creates a list of to-dos for each project. It doesn’t ask for approval, which I suspect is the point.
We’re moving beyond prompts and context management.
We can simply adjust the design by chatting with it.
WHY SUBSCRIBE ・YOUR BENEFITS・ TOOLS I BUILT・CLAUDE HUB・PERPLEXITY HUB ・VIBE CODING HUB
Part 5:
Claude Design Prompts
The Exact Prompts I Used For My Projects
Prompt 1:
The “Hey, I’m Karo” Hero: Make Your Name Move
Copy the prompt below and paste it into a new Claude Design session.
To make it your own: Swap text for your name and the hex codes for your brand colors. everything else will re-compose around it.