The two-tool workflow that made Canva and Figma optional. Brainstorm visually in ChatGPT's image model. Hand the winning concept to Claude Design. Get back working code, polished slides, and on-brand pages in minutes.
Claude Design is an AI-powered visual design tool built on Claude Opus. It launched April 17, 2026, as a research preview at claude.ai/design. Since September 16, 2026 it works inside any Claude conversation, and on October 8, 2026 Anthropic took the beta label off and put it on every plan, including Free. The standalone site at claude.ai/design closes December 14, 2026; the migration note in Step 7 covers what to move. Claude Design generates working frontend code from natural-language prompts. You get a working, interactive page built in code, not a canvas of layers you drag around.
Think of it this way: Canva and Figma are vector editors where you manually position shapes. Claude Design is a coder that reads your description and generates HTML/CSS/JavaScript that works right away.
Presentations with animations. 5 slides or 50. Export as PowerPoint or PDF, or keep as working HTML.
Marketing sites, one-pagers, sales pages. Clickable, fully interactive.
App mockups and component libraries. Ready to hand to developers.
Email templates, ad creatives, social banners. Fast iteration on multiple concepts.
On October 8, 2026 Anthropic shipped Claude Motion beside Design. Same idea, one difference: Design generates a page, Motion generates a timeline. Type /motion or ask for an animation, and Claude writes code that animates your text, charts, shapes and images into a short film. No video model, no generated footage, no AI-generated people. Because it is code, you change one word, one number or one timing and the rest holds. Export is MP4.
/motion does nothing in your message box, that is the plan, not a setting. Team plans have it on by default; Enterprise owners turn it on in Organization settings → Artifacts. Claude Dashboards, which shipped the same day, is on every paid plan (see Workflow 5).
Where it fits the workflow in this guide: Design for the deck, Motion for the one chart in it that should move. Say who will watch it, where it plays and how long it should run. Attach the report or data it animates, so the facts are yours. Ask for the storyboard before the animation, so you fix the story in text before Claude spends minutes rendering it. Ruben Hassid's how-to (October 13, 2026) covers the prompt and the comment-on-the-timeline edit loop.
| Factor | Claude Design | Canva | Figma |
|---|---|---|---|
| Output Type | Working code (HTML/CSS/JS) | Editable vector design | Editable design system |
| Best For | Speed, prototypes, code handoff | Final polished marketing output | Production UI work, team collaboration |
| Learning Curve | Just describe what you want | Drag-and-drop, templates | Steep, design skills required |
| Team Collaboration | Share by link; your team edits alongside Claude | Excellent with comments | Industry standard |
| Usage Limits | Counts against your Claude plan limits | Higher limits for Pro | Unlimited (paid plan) |
| Brand Integration | Upload assets, Claude applies consistently | Brand Intelligence system | Brand kits with design tokens |
| Cost | Included in every Claude plan, Free included | Free to paid plans | No-cost Starter tier, paid plans above it |
The core insight: image AI is phenomenal at exploration. Claude Design is phenomenal at polish. Using both in sequence is faster than using either alone.
Here is what it looks like:
You want to make a pitch deck. Instead of staring at Canva templates, you generate 4-8 visual directions for the cover. Different aesthetics: brutalist data viz, warm illustration, minimalist tech, editorial photography. You pick one. Takes 2 minutes. Cost: zero. Mental friction: zero.
You take the one image you loved. You upload it to Claude Design. You say "build a 10-slide pitch deck using this visual direction, with my brand colors and logo." Claude generates the entire working deck. Iterate on it. Get it perfect. Export as PDF. Done.
Design work counts against the same plan limits as everything else you do in Claude. If you brainstorm visual directions inside Claude Design itself, you spend that usage on concepts you will throw away, and you have less left for the polished deliverable and for the rest of your day.
OpenAI's image model is the opposite. Generation is cheap, fast, and effectively unlimited for the way most people use it. Each cover concept takes seconds and pennies.
If a step involves picking between options, do it outside Claude Design. If a step involves producing the final artifact, do it inside Claude Design. Exploration is cheap somewhere else. Polish is what Claude Design is for.
ChatGPT Images 2.0 (newer, with thinking capability) or DALL-E 3 via ChatGPT is your divergent ideation tool. The goal is not perfect final images. The goal is to explore multiple visual directions so you can pick one that captures the feeling you want.
Be specific about the concept, loose about the style. Ask for variation. Here is an example:
ChatGPT will generate four images. You open them side-by-side and feel which one resonates. Maybe it's the brutalist data one. Maybe it's the warm illustration. Pick one.
Vary the aesthetic, tone, and visual approach. Horizontal (16:9) works best for decks.
Not the "best" technically. The one that matches the feeling of your message.
You'll upload it to Claude Design in the next step.
Now you have your visual direction. Take it to Claude Design and hand off the full build. Claude Design can take an image as a reference and apply its visual language (color, typography, proportion) to your entire deck or site.
Start a conversation, attach the image and ask for a design. Or open the Artifacts page and pick the Design template. The standalone site at claude.ai/design still works until December 14, 2026, then closes.
Drag the image you chose from step 3. Claude Design will analyze the colors, typography, mood, and visual approach.
Include in your prompt: hex codes for 3 primary colors, 2 font names (or URLs if custom), and a logo URL if you have one. Example: "Brand colors: #1A1A1A, #D4956A, #E8E8E8. Fonts: Inter and SF Mono. Logo: [URL]"
Give Claude the outline and key content. Claude will generate the entire working design in the visual direction of your reference image.
Claude Design will generate a complete, clickable deck. You can iterate: "Change slide 3 to focus more on ROI" or "Add more whitespace on the title slide" or "Make the data visualization more prominent."
Here is the exact process we recommend for building a real pitch or sales deck using Claude Design.
In Claude Design, your first prompt should not be "build the deck." It should be "outline the deck." Ask for a numbered list of slide titles and one-line descriptions. This takes 30 seconds and gives you a chance to approve the structure before Claude builds the whole thing. You will save dozens of iterations this way.
Generate one image concept in ChatGPT Images 2.0. Something that visually represents your story. Upload it to Claude Design and reference it in your prompt. Claude will apply its mood and color language to all slides.
Include at the start: hex codes, font URLs, logo URL. Claude applies these consistently across all slides. Don't change your colors mid-build. Pick 3-4 and stick with them. Consistency beats perfection.
Once the full deck is built, you can refine. "Slide 6: add a data chart here." "Slide 10: make the CTA button more prominent." Each change is fast because Claude can reason about the whole design system.
When done, you can export as:
While Claude Design shines for decks, it handles a wide range of visual design work. Here is the quick reference:
Product pages, feature overviews, pricing pages. Fully interactive. Use when you want fast iteration and code handoff to developers.
Sales collateral, company overviews, event announcements. Great for PDF export and email.
Newsletter layouts, promotional emails. Claude generates responsive HTML you can drop into Mailchimp or Brevo.
Product mockups, dashboard layouts. Clickable prototypes you can hand to developers as a spec.
Social ad creatives (1:1, 16:9), infographics, data visualizations. Fast variations for A/B testing.
Dashboards, reports, tracking pages. Quick prototypes without building in a framework.
Claude Design lets you upload brand assets once. Claude extracts your design system (colors, typography, components, layout patterns) and applies it consistently to every new project.
In Claude, open Artifacts; design systems live there since the merge. On the standalone site, until it closes: click your organization name in the top right, then Settings.
You can upload multiple files (PDFs, design files, images). Claude will analyze them automatically.
Select one design system as your default. Every new project will reference it automatically.
When you start a new deck or page, just describe it. Claude will apply your brand system without you re-explaining it.
All three tools are good. They solve different problems. Here is the detailed breakdown:
| Feature | Claude Design | Canva | Figma |
|---|---|---|---|
| Output Type | Working HTML/CSS/JS code | Editable vector design | Editable design files |
| Time to First Prototype | 5 minutes (text prompt) | 15 minutes (template hunting) | 30+ minutes (design from scratch) |
| Template Library | None (AI generates) | 600K+ templates | Community plugins |
| Ideal User | Founders, PMs, marketers who want code | Marketers, social media managers, non-designers | Design professionals, UI/UX teams |
| Team Collaboration | Share by link; your team edits alongside Claude | Excellent with comments and real-time | Industry standard for design teams |
| Brand Integration | Upload to org settings, applies automatically | Brand Intelligence system (new April 2026) | Brand kits with design tokens |
| Editability After Generation | Code (or ask Claude to refine) | Full drag-and-drop layer editing | Full design system editing |
| Usage Limits | Counts against your Claude plan limits | Higher limits on paid plans | Unlimited on paid plans |
| Cost | Included in every Claude plan, Free included | Paid Pro plan, see canva.com/pricing | $16/month per full seat on Professional (October 2026) |
| Export Options | PowerPoint, PDF, HTML, shareable link | PNG, JPG, PDF, video, GIF | PNG, SVG, CSS, component packages |
| Learning Curve | Lowest (text prompt) | Very low (template familiar) | High (design skills required) |
| When You'll Wait | First generation (60 seconds). Refine in seconds. | Template hunting (5+ minutes) | Design design design (hours) |
Use Claude Design if: You want working code, you're not a designer, you like speed over pixel perfection, you want to hand HTML to developers.
Use Canva if: You want a polished final visual, you need templates, you're making social content or marketing collateral, you're not tech-savvy.
Use Figma if: You're a designer building a team system, you need production-ready component libraries, you work in tech and collaborate with developers daily.
Claude Design launched April 2026 as a research preview. It's fast and capable but has real limits. Being honest about them saves you time.
If you need pixel-perfect design: Use Figma. Hire a designer. Canva templates are good too.
If you need to edit layers and elements: Use Canva or Figma. Claude Design outputs are code, not layers.
If you need a massive template library: Use Canva. Canva has 600K+ templates. Claude Design has zero templates (it generates instead).
If you're building production software: Use Figma for design spec, then Claude Code to implement. Claude Design is a prototype tool, not a production tool.
Jack Roberts (@Itssssss_Jack) has published foundational Claude Code 2.0 content: