In partnership with
Friday afternoon, Anthropic shipped Claude Design.
By the closing bell: Figma down 7%. Adobe down 2.7%. Wix down 4.7%. GoDaddy down 3%.
Four public companies tanked in one trading session because of one product launch.
Here's what it does: you describe a design, Claude builds it live, and then you export to Canva, PPTX, HTML, or hand the whole thing to Claude Code to ship as real production code. No Figma. No Lovable. No middle layer.
If you're a solopreneur who's ever spent a Saturday night nudging text boxes in Google Slides, this is the thing you've been waiting for.
THE SIGNAL
A new surface inside Claude, built by Anthropic Labs on top of the Opus 4.7 vision model. Chat on the left, canvas on the right. You prompt, it builds, you refine.
The output isn't a static image. It's live HTML you can click through, share, and pressure-test before writing any code.
Research preview on Pro, Max, Team, and Enterprise plans. Free users don't get in.
Who it's for
Founders who can see the product in their head but can't draw it. Solopreneurs who need a deck by Friday. PMs sketching flows for engineering. Marketers shipping weekly landing pages. Designers who want to explore ten directions instead of two. Devs who want a visual layer before they write the code.
Basically anyone who's said "I know what I want, I just can't make it look like that."
10 things people are already building with it
1. Interactive shader wallpapers. Five wallpapers that react to your mouse movement. One of nine built-in demos Anthropic ships inside the tool. One click of "Use this prompt" and you have it.
2. A 3D rotating globe loader. Real country outlines, animated, smooth. Another built-in demo showing the range of what code-powered prototypes can do.
3. Text particle effects. Words dissolve into fire and smoke. Motion design without After Effects.
4. Animated explainer videos from a blog post. Paste your text, Claude asks about length, tone, and aspect ratio, then generates a coded animated video in minutes. Heads up: you can't export as MP4 yet, so people are screen-recording the output.
5. Animated slide decks with speaker notes mode. Toggle "Use speaker notes" on and Claude moves the detail into notes instead of cramming slides. Output quality blows past Google Slides and reveal.js.
6. Mobile fitness app onboarding. One-shot a full 4-screen onboarding flow with play testing built in. Clickable, interactive, not a static mockup.
7. A full app imported from a GitHub repo. Point Claude at an existing codebase and it extracts the components into an editable library. Every new screen you build then stays on-system automatically.
8. Apple-style Liquid Glass design system. Import a macOS .fig file and every design picks up the visual language. Typography, tokens, liquid glass effects, the whole aesthetic.
9. Dashboards. Revenue dashboards with regional filters, analytics with charts, internal ops tools. The prompt pattern is simple: describe the data and filters you want, it builds the UI.
10. Pitch decks from a rough outline. Founders and AEs are going from a napkin sketch to a complete on-brand deck in minutes. Export to PPTX or send to Canva for polish.
And two real customer stories from the launch:
Brilliant's complex interactive learning pages. Pages that took 20+ prompts in other tools now need 2. The animation-heavy stuff that's historically painful to prototype.
Datadog's live design during meetings. Rough idea to working prototype before anyone leaves the room. A week of briefs and mockups collapsed into one conversation.
How to use it
1. Set up your design system first
The most important step. Also the one everyone skips.
Before you generate a single screen, give Claude your brand. Three options:
Point it at your codebase. It reads your tokens, components, and typography automatically. Takes 15-20 minutes on a large repo.
Upload references. Screenshots of apps you like, existing slide decks, logos, anything that shows your look.
Describe it in words. Font family, color palette, border radius, spacing scale.
Without this, everything looks like AI slop. With it, the output is on-brand enough to ship.
2. Write a real prompt
Specify the goal, the layout, the content, and the audience. Good prompts from the docs:
"Create a dashboard showing monthly revenue with filters for region and product line."
"Build a landing page for our new API product with a hero, code examples, and pricing."
Bad prompt: "make it look cool."
3. Iterate three ways
Chat for big changes: "make it darker," "swap the hero," "show me three layouts."
Inline comments for small fixes: click the button, tell it to use the primary color.
The tweaks panel for live edits. A sidebar with sliders, toggles, and natural-language controls that modify elements without a full regeneration. Click and drag, no re-prompting.
4. Export
PDF. PPTX. Canva (fully editable). Standalone HTML. A .zip of the whole project. Or a Claude Code handoff bundle.
That last one is the one you want. It packages components, tokens, copy, and interaction notes into something Claude Code can turn into production code in whatever stack you run. No Figma-to-code step. No Builder.io middle layer.
Tips worth following
Pulled from Anthropic's docs and a public thread by one of their designers:
Set up your design system first. An hour here pays for itself.
Start simple. Core layout before polish.
Be specific in feedback. "This looks off" is useless. "Tighten the spacing to 8px" works.
Reference components by name. "Use the Primary Button."
Say whether you need mobile, tablet, desktop, or all three.
Ask for 2-3 variations when you're unsure. Comparing beats guessing.
Ask Claude to review for accessibility, contrast, and hierarchy.
Stop doing these things
Stop using Google Slides for pitch decks. Build in Claude Design, export to PPTX or Canva. On-brand. Interactive if you want.
Stop using Lovable for landing page mockups. Lovable is great for fully deployed apps. If you want a landing page that hands off clean to your own stack, Claude Design plus Claude Code is the faster loop.
Stop bouncing between Figma and your IDE. The Figma-to-code handoff is the step that breaks. Claude Design skips it.
Stop making non-technical founders take a Figma crash course. They describe the page, Claude builds it, they iterate with sliders, the engineer gets a handoff bundle. Done.
Get started
Pro at minimum. Pricing here.
Go to claude.ai/design.
Set up your design system. Upload 3-5 reference screenshots. Name your colors, fonts, radius, spacing.
Ask Claude to build the system as a style guide page before generating any screens.
Prompt something small first. One landing page. One pricing section.
Iterate with the tweaks panel, not re-prompts.
Export to PPTX, Canva, or a Claude Code handoff bundle.
Ship.
Go try it. claude.ai/design.
That's Monday. Go build.
The AI notepad for back-to-back meetings
Most AI note-takers just record your call and send a summary after.
Granola is different. It’s an AI notepad. You jot down what matters during the meeting, and Granola transcribes everything in the background.
When the call ends, it combines your notes with the full transcript to create summaries, action items, and next steps, all from your point of view.
Then the powerful part: chat with your notes. Write follow-up emails, pull out decisions, or prep for your next call, in seconds.
Think of it as a super-smart notes app that actually understands your meetings.