Claude Design: The Complete Guide to Using It Now, My Recommended Setup, and How It Fits with Figma and Canva (2026 Update)

TL;DR: Claude Design is Anthropic's AI design tool. You describe what you need, and it builds prototypes, one-pagers, landing pages, and deck drafts. Since September 2026 it has been part of Claude itself: you can use it in any conversation, from the Artifacts tab, and in Claude Code. The Free plan can use it, and its usage comes out of the same allowance as the rest of Claude. The standalone site at claude.ai/design closes on December 14, 2026. It saves the most time on getting from an idea to a first version. For print, final brand work, or pixel-level UI, go back to Figma or Illustrator. Designing with AI is not only about image generation, and my recommended way to start is to open Claude Code, ask it to open Claude Design, and pick Claude Opus 5.5. I treat it as an efficiency tool, not a replacement.

I first wrote this guide in April 2026, right after Claude Design launched. Six months later its entry points, plans, and export options have all changed. This version focuses on how it works now and only mentions the April launch where the comparison helps. Features, plans, and prices were checked against the Claude Help Center, the Claude Code docs, and official product pages on October 14, 2026. Sources are listed at the end.

What is Claude Design?

In one sentence: you describe what you want in words, and Claude builds an editable design on a canvas next to your conversation.

It is different from AI image generation. An image model gives you a picture. Claude Design gives you a structured design: a clickable app prototype, a laid-out one-page proposal, a landing page, or a deck draft. The text, sections, and components all stay editable.

Anthropic launched it on April 17, 2026 as an Anthropic Labs product. The launch post says the first version used Claude Opus 4.7. The current help pages do not name a fixed model, so this guide does not either.

April launch vs now

Item	April 2026 launch	October 2026 now
Where to use it	The standalone site claude.ai/design	Any Claude conversation, the Artifacts tab, Claude Code, and the mobile apps
Who can use it	Pro, Max, Team, Enterprise (research preview)	Free, Pro, Max, Team, Enterprise
Usage	Its own weekly allowance	Shares one allowance with Claude and Claude Code
Design system	Built during onboarding from your code and design files	Ask Claude to build one in chat, or sync it with /design-sync in Claude Code; not available on Free
Export	PDF, PPTX, HTML, send to Canva, hand off to Claude Code	Adds Google Slides and ZIP, and can send to 15 tools including Canva and Gamma
Decks	Made directly in Claude Design	Claude has a separate Slides template for full decks; Design output can still export to PPTX

If you used the standalone version, note that claude.ai/design closes on December 14, 2026. Design systems can move over, but your chats and comments in the standalone version do not, they are deleted after it closes, and public links stop working. Save what you need before then. The steps are in the migration section below.

Where to start now

Claude Design is now one of the templates inside Claude. Anthropic calls the shareable things Claude makes "artifacts". Design is one template, alongside Slides and Docs.

• In a conversation: Just say "turn this proposal into a one-pager" and Claude builds it next to the chat. You can also pick Output, then Design, in the message box.
• In the Artifacts tab: Open it from the sidebar and choose the Design template.
• In Claude Code: Ask it to design something, or type /design followed by your brief. This is the way I recommend most right now; the steps are in the next section.
• Mobile apps: On iOS and Android you can ask for a design, view it, and edit it, but sharing settings have to be changed on web or desktop.

On Claude web, desktop, and mobile, it is on by default for Free, Pro, Max, and Team. On Enterprise plans it turns on by default on October 15, 2026; before that, an owner turns it on in Organization settings > Artifacts. To use it inside Claude Code, the Claude Code docs say you need Pro, Max, Team, or Enterprise and must sign in with a claude.ai account.

How to start: the way I recommend now

Designing with AI is not only about image generation. This is how I recommend getting started:

1. Open Claude Code. The desktop app or the terminal both work. Sign in with your claude.ai account; you need Pro or above. The docs say /design requires Claude Code v2.1.265 or later, so update first if your version is older.
2. Ask it to open Claude Design. Say something like "open Claude Design and make a ...", or type /design followed by your brief. In the Claude Code desktop app, the canvas opens right next to the conversation, which is how my setup looks. In the terminal, Claude gives you a link to the canvas, which you open in a desktop browser.
3. Pick Claude Opus 5.5, and I set effort to high. Use /model to choose the model and /effort to set the effort level. The docs say Opus 5.5 defaults to medium in Claude Code; I turn it up to high.
4. Describe your design brief. Spell out the style, layout, and copy. The official guidance is that a good brief covers the goal, layout, content, and audience. If something is missing, Claude asks before it builds.
5. Provide your assets. Give it your logo, images, and anything else that should appear in the design.
6. Refine by chat and edit text directly. The finished design appears on the canvas. For big changes, say what you want in the chat. To change wording, click the text and edit it. There are plenty of settings to adjust: layout, text styles, colors, corner radius, and shadows.

I think this is the easiest way to get started, and the results are good too, because it is not the kind of output an image model gives you: what you get is a design whose text and layers you can still edit. Since Claude Opus 5.5 came out, after using it many times, I find its understanding of design is much better than before.

When I first shared this tip, I attached a test design I made: a banner for an "AI design talk". It was only a test design, not a real course; there is no such course. Just follow the steps above and try it yourself, that is plenty.

When you are ready to hand it off, use Export in the upper right of the canvas. The docs say a design made with /design in Claude Code can export each artboard as PNG or PDF. The full export options are in Export and handoff below.

You can also do it without Claude Code

On Claude web, desktop, or mobile, ask for a design in any conversation, pick Output, then Design, in the message box, or choose the Design template from the Artifacts tab. From there it is the same: describe the brief, provide assets, then refine by chat and direct editing. The Free plan can use it this way.

If you have your own brand guidelines, set up a design system first so everything you make follows it. See the design system section below.

Feature by feature: what still exists and what changed

1. Inputs: text, images, documents, code

Besides typing, you can give it:

• Screenshots, images, existing designs, competitor screens, wireframes
• Existing decks or documents, so it can follow that style
• A code repository or design files, so it understands your existing components and styles

At the April launch, Anthropic also introduced a Web Capture tool for grabbing elements directly from a website, and I found it very handy at the time. The current help pages no longer mention it, so I cannot confirm it still exists. If you want a new page to match your site, the most reliable way now is to upload screenshots of the site or link the site's code repository.

2. Design system: set it up once, apply it everywhere

I think this is a big part of Claude Design's value. As I wrote in my newsletter in April, it gives you a full design system, so there is a set of rules to follow and you are less likely to end up with decks or images whose formatting does not match.

There are two ways to build one now:

• In a chat: Give Claude your uploaded files, Figma files, decks, logos, and fonts, and ask it to build a design system. This works best for brand guidelines.
• With /design-sync in Claude Code: If your components already exist in React, it reads your tokens and components directly. This works best for product design systems.

Two things to note. First, design systems are in beta and only available on Pro, Max, Team, and Enterprise, not on Free. Second, the help center says import quality depends on the source; a messy codebase or incomplete files will show up in the output, so review the first version yourself.

3. Revising: chat, comments, direct edits

The first version is only a starting point. There are three ways to revise, and the right one depends on how big the change is:

• Chat: For changes that affect the whole design, such as "make it darker and more minimal" or "show me 2 to 3 alternative layouts". You can also ask Claude to explain its design decisions or review accessibility.
• Inline comments: Click an element on the canvas and leave a comment, such as "more padding on this button". It is faster than describing the location in chat. The help center notes that comments are occasionally missed; if that happens, paste the feedback into the chat.
• Direct edits: Drag, resize, and align on the canvas, edit text directly, or open the properties panel to adjust color and fonts.

In April, the feature I found clever was the live sliders: Claude builds sliders for spacing and color, and you drag them to see the whole design change, a bit like a small design-token control panel. The official product page still lists this feature.

4. Export and handoff

When you are done, the Export button in the upper right offers:

• Downloads: ZIP, PDF, PPTX, standalone HTML
• Google Slides: Export straight to editable Google Slides
• Send to other tools: 15 of them, including Canva, Gamma, Miro, Lovable, Vercel, and Wix
• Hand off to development: Claude Code, a local coding agent, or Claude Code on the web

The handoff to Claude Code is still the part I find most promising. Prototype in Claude Design, confirm the direction, then hand it to Claude Code, which continues from your design instead of starting over from a screenshot. Anthropic has connected the path from design to development.

For sharing, every design has its own link and starts private to you. When you share it, you choose whether people can view, comment, or edit.

5. Advanced interactivity

At the April launch, Anthropic showed prototypes with voice, video, shaders, 3D, and built-in AI, so prototypes could feel closer to real products. The current help pages and product page no longer list these, and I have not tested them, so I cannot promise every one works. If you need effects like these, I suggest finishing the prototype and then handing it to Claude Code.

What it is good for, and what it is not

The short version: it is great for things you will discuss, and not suited to things you will deliver as final files. Ask two questions. Is this for discussion or for final delivery? If it is for final delivery (print-ready files, final brand identity, pixel-perfect UI), go back to Figma or Illustrator. If it is for discussion, do you need custom fonts, external APIs, or code? If not, finish it in Claude Design and export. If you do, draft it in Claude Design and hand it to Claude Code.

Scenario	Fit?	Why
A founder drafting a pitch deck	Good fit	A structured first draft in minutes, exported to PPTX or Google Slides for further work. Claude Slides is now the dedicated starting point for full decks
A PM mocking up a feature	Good fit	Hard to explain verbally; a first version for the designer saves many rounds of back and forth
A solo worker building a landing page	Good fit	Make the design, then export HTML or hand it to Claude Code to ship
A designer exploring directions fast	Good fit	Produce 3 to 5 directions, then refine the promising one in Figma
A marketing team making campaign assets	Depends	A design system helps keep things consistent; text, data, and images can still be wrong, so check each one before publishing
Print-ready files, final brand identity	Not a fit	You need control over color, bleed, and spot colors; go back to Illustrator
Pixel-level UI, maintaining a full component library	Not a fit	Figma is still more reliable for refinement and long-term maintenance
Large projects with several people editing at once	Not a fit	The help center says simultaneous editing is still basic and may not work reliably

How it divides the work with Figma, Canva, and Gamma

My view: Claude Design solves the zero-to-one stretch. It does not finish the work; it produces the first version and then hands it to the next tool.

Tool	Best stage	How it pairs with Claude Design
Claude Design	From a written idea to a first version: prototypes, one-pagers, deck drafts	Settle the direction here first
Figma	Pixel-level UI, component libraries, long-term design system maintenance	Refine in Figma once the direction is set. I personally use Figma more, connected through MCP, because it makes my purchased fonts easier to use
Canva	Templates, brand kits, extending into social posts and print	Use "send to Canva" and keep editing it as an editable design
Gamma	Shaping decks fast, web-style presentations	Use "send to Gamma" and keep editing
Claude Code	Turning the design into a real website or product	Use the Claude Code handoff and continue from the same design

I covered plans and monthly prices for Canva and Gamma in How to Choose an AI Slide Tool in 2026, so I will not repeat them here.

In the launch post, Canva's co-founder also said drafts sent from Claude Design into Canva become fully editable, collaborative designs. The two work more like a relay than competitors.

My take as a designer

Honestly, my first reaction was mixed. This is not the first time someone has said AI will replace designers. After using it for a while, I think things are less extreme.

Claude Design's output is roughly upper-middle in quality. For prototypes, pitch decks, and quick validation, that is completely enough. If you need refined brand design, pixel-level UI adjustments, or a complete design system, it cannot do that yet.

The healthier mindset, I think, is to treat it as an efficiency tool, not a replacement.

Even the simplest design process goes through gathering requirements, wireframing, confirming direction, designing, and revising. Claude Design makes the stretch from requirements to wireframe much faster. Clients can even make a first version themselves to show me, so I understand what they want more precisely.

As I wrote in my newsletter in April, calling everything a "replacement" is too blunt. A designer's job is not just producing images. With the same tool, a designer usually still gets better results, because professional judgment shows in the details.

In the launch post, a designer at Brilliant said their most complex pages took more than 20 prompts in other tools and only 2 in Claude Design, and a PM at Datadog said a week of back and forth now becomes a prototype in one conversation. Those numbers describe the speed from idea to first version, not from idea to final delivery. Final quality still needs a professional designer.

The downside: less freedom than Claude itself

When I used the standalone version in April 2026, one thing stood out: it gave me much less freedom than Claude itself.

When I do design work in Claude, I can easily:

• Use an open-source Chinese typeface such as Noto Sans TC, Source Han Sans, or jf open huninn
• Connect stock photo APIs like Unsplash or Pexels for scene photos
• Connect other third-party APIs as content sources
• Write custom logic to generate specific styles

These were more limited inside Claude Design. It has its own framework and asset library, which makes it fast and visually consistent, but it gets in the way when you want to customize outside that framework.

Today I recommend Claude Design because it is the most convenient. But I personally use Figma more, because I am used to it. I connect AI to Figma through MCP, and it makes my purchased fonts easier to use. MCP is a standard way for AI tools to connect to other software, and Figma has an official Figma MCP server. If fonts matter a lot to you, or you like to finish your work in Figma, this route is worth considering.

How I pair the tools now

Because the freedom is limited, the best-value approach is: finish the first draft in Claude Design, then hand it to Claude Code for further editing.

• Claude Design handles: turning ideas into structured visual drafts quickly, applying the design system, and producing usable prototypes.
• Claude Code takes over: custom fonts, external APIs, program logic, and deployment.

That way you get Claude Design's speed and Claude Code's flexibility.

I do not lock myself into one tool; I pick by task. For presentations I use Claude Design and Codex. For graphics and design work, I currently use Claude Opus 5.5, working in either Claude Design or Figma. That is my choice for now, and the next stage may look different. When I pay for AI tools, I pay monthly and never yearly.

I have also given a talk at a generative AI conference on using Claude Design together with GPT Image 2.

Six practical tips

These come from my own use. Some are operational, and some are details designers tend to care about.

1. The more specific the brief, the better the result

Do not just say "design an app interface". Give it context: "Design the home screen of a task-management app for freelancers, minimal style, deep green as the primary color, with a today list and a completion-rate stat."

That brief covers the four things the official guidance recommends: goal, layout, content, and audience. The more constraints you give, the faster it converges, and the fewer rounds of revision you need.

2. Show references with screenshots instead of describing them

If you already have a site or a reference design you like, upload a screenshot. It works far better than describing "a style like X" in words. In April I used Web Capture for this; the current help pages no longer mention it, so screenshots or a linked code repository are the most reliable options.

3. Hand the finished draft to Claude Code for advanced edits

After the prototype, use the Claude Code handoff in the export menu to customize further: connect APIs, change fonts, add motion, and deploy. From the Claude Code side, you can also use /design to bring a design into your codebase.

4. Do not italicize Chinese text

This is something designers notice: AI tools often set Chinese text in italics when making decks or designs.

Chinese and other CJK typefaces have no true italic design. Forced slanting just distorts the glyphs, makes them look blurry, and breaks their structure. I have reminded non-designer readers about this in my newsletter too: do not casually apply italics or fake bold to Chinese. Fix CJK text back to upright after generation, or add a line to your brief: "Never apply italics to Chinese text."

5. Ask for text contrast that meets WCAG

A common problem with AI-made designs is text and background colors that are too close. It looks fine at a glance, but the contrast is too low and reading is tiring.

Use the Web Content Accessibility Guidelines (WCAG) as the baseline. WCAG is the international standard published by the W3C, with levels A, AA, and AAA. For text contrast, AA requires at least 4.5:1 for normal text, and AAA requires at least 7:1. You can put this straight into the brief:

Text contrast must meet at least WCAG AA (4.5:1 for normal text), and AAA (7:1) where possible. When you are done, list the contrast ratio of each text block.

The W3C itself does not recommend requiring AAA as a general policy for entire sites, because some content cannot meet it. So hold the line at AA, and push the main body text higher where you can. The help center also says you can ask Claude to review contrast and accessibility. Once this becomes a habit, you will be more rigorous with any design tool.

6. Ask the AI to install open-source fonts from GitHub

If the default fonts are not enough, ask the AI to fetch an open-source typeface from GitHub:

Fetch justfont/open-huninn-font from GitHub, install it, and use it for all headings.

Useful open-source Traditional Chinese typefaces:

• jf open huninn (justfont/open-huninn-font): SIL OFL 1.1, commercial use is fine, but you cannot sell the font itself
• Noto Sans CJK (notofonts/noto-cjk): Google's Chinese, Japanese, and Korean typeface family
• Source Han Sans (adobe-fonts/source-han-sans): Adobe's open-source sans

This works even better once Claude Code takes over, because it can download the font and integrate it into the project. I have also written in my newsletter that naming the typeface and font weights explicitly makes AI-made graphics look much better.

If you used the standalone version: what to do before December 14

If you made anything at claude.ai/design after April, take care of these first:

1. Migrate your design systems. Open the Artifacts tab in Claude and click "Migrate team design systems" in the banner. One migration brings over every design system in your organization, so it only needs to run once.
2. Check the results. Anything that could not be migrated is listed with a reason, such as being too large. You can fix it in the standalone version and migrate again.
3. Save your chats and comments. Your chats with Claude and comments on projects in the standalone version are not carried over and are deleted after it closes.
4. Replace public links. Public links to standalone projects stop working after it closes.

Projects themselves stay in the standalone version for now. The Artifacts tab lists up to 60 of them, and they open in the standalone version. Anthropic says details on moving projects into Claude are coming later.

Limits and cautions

• Usage is shared with Claude. Claude Design has no separate allowance; it draws from the same pool as chat and Claude Code. Complex projects, large codebases, and many revisions use it up faster. When you hit your limit, you wait for it to reset unless you have enabled extra usage.
• No design systems on Free. Design systems are in beta and only available on Pro and above.
• Claude Code needs a paid plan. Using /design in Claude Code requires Pro, Max, Team, or Enterprise, Claude Code v2.1.265 or later, and a claude.ai sign-in.
• No version history. To try another direction without losing the current one, tell Claude: "Save what we have and try a completely different approach."
• Comments are occasionally missed. If that happens, paste the feedback into the chat.
• Simultaneous editing is basic. Two or more people editing at once may not work reliably.
• Very large codebases can lag. The help center suggests linking very large repositories from Claude Code and syncing with /design-sync.
• Precision does not match Figma. It is not suited to final delivery files.
• Chinese text is often italicized. Check after generation, or say so in your brief.
• It changes fast. In six months, its entry points, plans, and export options all changed once. Check the official help pages before you rely on it.

Resources

Resource	What it covers
Get started with Claude Design	Where to use it, ways to revise, export formats, usage, known limitations
Set up your design system	Building one in chat, syncing with /design-sync, eligible plans
Migrate from standalone Claude Design	Closing date, design system migration, what is not carried over
What are artifacts	The Design, Slides, and Docs templates and what each plan includes
Claude Code commands	/design, /design-sync, /model, /effort, and version requirements
Claude Code: artifacts and the Design template	Drafting artboards with /design, plan availability
Guide to the Figma MCP server	Figma's official way to connect AI tools to Figma
Claude Design product page	Features and partner tools
Claude plans and pricing	Free, Pro (US$20 per month billed monthly), Max (from US$100 per month)
Claude Design launch post	Anthropic, April 17, 2026: launch features and customer examples
WCAG contrast (AA)	4.5:1 for normal text, 3:1 for large text
WCAG contrast (AAA)	7:1 for normal text
How to Choose an AI Slide Tool in 2026	Claude Design, Gamma, Canva AI, Codex, and more, with monthly prices

Features, plans, and prices in this guide were checked against the Claude Help Center, the Claude Code docs, and official pages on October 14, 2026, and may change.

Summary

1. Claude Design is now the Design template inside Claude. It works in conversations, the Artifacts tab, Claude Code, and mobile; Free can use it, and usage is shared.
2. It is best at getting from an idea to a first version: prototypes, one-pagers, landing pages, deck drafts.
3. My recommended way to start: open Claude Code, run /design or ask it to open Claude Design, pick Claude Opus 5.5 with high effort, describe the style, layout, and copy, then provide your logo and images.
4. Revise by scope: chat for big changes, comments for one component, direct edits for visual tweaks.
5. Hand it off with export: PDF, PPTX, Google Slides, HTML, send to Canva or Gamma, or hand off to Claude Code.
6. For final delivery, go back to Figma or Illustrator; for customization, hand it to Claude Code.
7. If you used the standalone version, migrate your design systems before December 14 and save your chats and comments yourself.

It will not replace designers, but it makes "having a first version to discuss" much faster. Try it once on something small you actually need to make; that teaches more than any overview.

Related reading

• How to Choose an AI Slide Tool in 2026
• How to Choose AI Tools Without Regret
• AI Design Asset Tools: 26 Tools for Image Generation, Product Shots, Background Removal, Logos, UI, and Video
• My AI Solo Work Routine: 2025 Experiences and 8 Use Cases