Anthropic just launched Claude Design. Prompt a full prototype, edit it live on a canvas, then ship it straight to Claude Code. Here's the full walkthrough.
Claude Design gives you a visual canvas to prompt prototypes, slide decks, and mockups... then edit them directly like you would in Lovable or Cursor. It pulls from your brand assets, talks to your codebase, and hands the final output straight to Claude Code when you're ready to ship.
Open Claude Design in your browser. You need to be signed in to a Pro, Max, Team or Enterprise plan. You can also reach it from the palette icon on the left nav of claude.ai.
On a free plan? This is the reason to upgrade. Claude Design alone pays for Pro.
Click Setup design system at the bottom of the sidebar. Give it your company name, then point it at your GitHub repo or drop your local codebase folder in.
You can also upload fonts, logos, and brand assets directly. Claude reads it all and builds a reusable design system. Every project after that automatically matches your brand... colours, typography, components.
Heads up... a large codebase can take 15-20 minutes to process. Kick it off while you make a coffee.
From the sidebar pick Prototype. You can also pick Slide Deck or Template if that's what you need.
Name your project, pick wireframe or high-fidelity mockup, then describe what you want built. The more specific, the better.
Before Claude builds anything, it asks you planning questions. Style, colour palette, interaction behaviour, what elements should be tweakable, overall mood. Answer each one, then hit continue.
This is plan mode from Claude Code, but for design. Fewer blind spots. Dramatically better output on the first pass.
Your prototype appears on a live canvas with custom sliders Claude built for you (rotation speed, glow intensity, colour palette, whatever you made tweakable in the plan).
Click Edit to select any element directly. Change colours, size, spacing, typography without prompting.
For bigger changes, drop a Comment on the element. Queue up multiple comments, then send them all to Claude at once.
Think Cursor's element inspector meets Lovable's chat edits. Direct manipulation when you want precision, natural language when you want speed.
Click Export. Download as ZIP, PDF, or PPTX. Send it to Canva for final polish. Or hit Hand off to Claude Code and Claude gives you a command to drop straight into your terminal.
Prototype becomes working code. Design intent flows directly into your codebase.
This is the unlock. Design to code is usually where handoff breaks. Now it's one command.
Test it on a landing page idea you've been sitting on, or a deck for your next sales call. The learning curve is zero.
Open Claude Design Read the Anthropic announcement