Anthropic shipped Claude Design yesterday. I spent three hours breaking it.
I one-shot a working app prototype.
I generated a fully designed pitch deck.
I handed a product demo off to Claude Code.
By the end of this newsletter, you will know the exact workflow to turn a rough idea into a working on-brand prototype in under ten minutes, plus the two output types, the four refinement tools, and the one setup step most people will skip.
If you are new here, welcome. If you have been reading for a while, thank you. Your subscription is what makes issues like this possible.
I also recorded the full video version of this newsletter. If you would rather watch than read, everything is in there:
Design used to mean juggling Figma, Canva, Lovable, and Claude Code. Every handoff broke something.
Claude Design collapses the stack into one interface.
It gives you a place to prompt, edit, comment, and export.
You need a brand kit and a clear brief. Nothing else.
The 4 starting points
Claude Design opens with four templates. Pick the one matching your output.
Prototype. Pick this for app UIs, dashboards, SaaS editors.
Pitch Deck. Pick this for slides, investor decks, client presentations.
From Template. Pick this for interactive product pages and landing demos.
Design System. Pick this when you want Claude to learn your brand before anything else.
Each runs the same two-step flow. Upload your brand kit. Write a brief. Everything else happens inside the editor.
The 5-step workflow
Before you start: set up your design system
Build your design system first. Every project you run after inherits it. Skip this step and your assets drift off-brand across three prompts.
What Claude does during setup:
☑︎ Reads your codebase
☑︎ Reads your existing design files
☑︎ Builds a shared design system for your team
☑︎ Auto-applies branding and components to every project
Your prototypes come out on-brand. Your pitch decks match. Your landing pages pull the same spacing rules.
Design system first, assets second.
With your system in place, here’s the 5-step workflow:
Step 1: Name your project and pick a type
Name your project first. Claude uses the name as context across everything inside.
Then pick Prototype, Slide deck or From template. If you are in Prototype, decide between Wireframe and High-fidelity before you write a word.
Tip: Start every new product idea in Wireframe. Lock the layout. Duplicate into High-fidelity once the structure is right. You save tokens and avoid rebuilding polished designs around a layout change.
Step 2: Upload your inputs
Claude Design accepts six input types:
Images
Text prompts
A codebase link
DOCX, PPTX, XLSX uploads
A web capture from your live site
Your saved design system
No design system yet? Drop your brand kit into the prompt. Include your logo, colour palette, typography, and a few reference screenshots of designs you admire.
Tip: The “Grab web element” capture tool is the sleeper feature. Point Claude at your live website and the prototype inherits the look of the real product.
Step 3: Write a specific brief
Vague briefs produce generic output. Specific briefs produce usable prototypes.
Weak brief:
“Design an app.”
Strong brief:
“Build an interactive prototype of the Vislo editor. Include a left sidebar for canvas selection, a main editing area, a top toolbar with export and share buttons, and a right-hand panel for layer controls. Match the attached brand kit.”
The difference is layout detail. Claude needs to know the regions, components, and actions you expect on screen.
Tip: Attach a reference UI screenshot for the overall feel. Visual cues travel faster than paragraphs of description.
The prompt I used to build this:
Build an interactive prototype of the Vislo app editor. First screen is My Designs, a grid of recent infographic cards with a prominent New Design button. Clicking New Design opens a prompt input with four suggested templates below: Stat Sheet, Timeline, Comparison, Process Flow. After a prompt submission, animate the transition into the editor view: a centre canvas with the infographic, a left layers panel, a right properties panel, and a top bar with Undo, Redo, Share, Export. Make the template picker, the prompt input, and the Export menu tappable. Include a hover state on cards and a loading shimmer on the canvas during generation.
Step 4: Refine your design live
Claude Design gives you four ways to edit without regenerating:
Inline comments on any element
Direct text edits inside the design
Custom sliders for spacing, colour, and layout
Apply a change across the full design
Click an element, drop a comment in plain English, and Claude updates only that element.
From my session: “Change this to a prompt bar instead of a prompt box.”
The live prototype updated and the rest of the design stayed intact.
Tip: Use inline comments for single-element tweaks. Use Apply across for anything global. Mixing them saves tokens and keeps the parts you liked.
Step 5: Export or hand off to Claude Code
Export options include PDF, PPTX, Canva, and standalone HTML. You also save to a folder or share via an organisation-scoped internal URL.
For production UI work, the handoff to Claude Code is where Claude Design earns its keep.
Claude packages the design into a handoff bundle. One instruction inside Claude Code picks it up. Spin up a local host and iterate from there.
The alternative is building inside Claude Code from scratch, adding design plugins, installing skills, and hacking the output until the UI looks presentable. Claude Design removes the first 80% of that work.
How to build a slide deck from template
The Slide deck flow follows the same project setup. Output is HTML-coded slides rather than a web app.
My Vislo pitch deck took around 8 minutes to generate. Longer than a Canva template, but the output is stronger, with custom layouts, proper logo use, and on-brand typography.
The prompt I used to build this:
