Good design is easy to recognize: the visuals and the user flow tell your brain the actions you can take inside an app or website without explanation. But good design is hard to build. You can stare at a new design for days and still feel that a page looks bland, the navigation is confusing, or that key information doesn't pop into the viewer's attention.
Claude Design levels the playing field for design beginners, letting you create designs, prototypes, and slide decks with AI so you can reach a first draft faster. Instead of using editors with fine-grained control, you'll wield prompts and references to polish pages until they're ready for building—and there's even a Claude Code handoff to help you transition fast into the action.
Table of contents:
What is Claude Design?
Claude Design is a new Anthropic product that generates design artifacts—such as app mockups, website prototypes, pitch decks, or landing pages—using Anthropic's AI models. Describe what you need with text or by adding files as context, and review the AI output in an integrated preview window, letting you tweak the design or add comments for targeted edits.
Currently in research preview for paid Claude subscribers, you can access it via a separate entry point in claude.ai/design at no additional cost—but with highly restrictive weekly usage caps.
How does Claude Design work?
At its core, Claude Design is a chat window connected to a virtual workspace. When you send your prompts to create a mobile app dashboard or a website landing page, the AI agent starts building all the assets and saving them to the workspace. Once finished, you can preview the result in an interactive preview window, where you can make tweaks or add comments before prompting again.
The workspace
Everything you create or upload to Claude Design is stored in the project's workspace. It keeps track of all files organized by type: you'll find a folder containing SVG files, another for pasted image references, as well as all the HTML and CSS files. The AI agent will use these as context as it builds; you can download them at any time.
Design system integration
One of the first steps when configuring your account will be to create a design system. Claude Design goes deep here: it accepts a link to your GitHub code repository, local file uploads, Figma references, and uploaded assets such as fonts or images. You can wrap this up with a text prompt detailing any special requests or instructions, and the engine gets down to work.
After about five minutes, Claude comes back with a thorough list of all design elements that compose the system. This includes dozens of files that you have to review and approve manually, covering colors, typography, components, and UI kits. You can upvote to approve or downvote to get another option. Once you finish approving, the design system is ready to use as a base for your projects.
You can create as many design systems as you need, but bear in mind that each generation consumes your weekly token usage.
Starting points
On the main dashboard, you can select which kind of project you'd like to start with: a prototype, a slide deck, or a previously saved template. Select one of the existing design systems to ground the project's look and feel or start from scratch, and choose whether you want wireframes or a high-fidelity mockup. The workspace opens, offering the option to draw a sketch to use as a base—you can always find this option on the top-right of the workspace.
You're not limited to text while prompting. You can upload images, documents (such as .docx, .pptx, .pdf), Figma files (.fig), or even use voice input to talk out your ideas. There's also a web capture tool on top of these that's a bit tricky to use but useful for quickly getting branding elements from your existing website or app design:
You drag a bookmarklet to your browser's toolbar, navigate to the site you want to reference, and click that bookmark to activate the capture mode.
A capture panel appears in the lower right. Hovering over page elements highlights their containers; clicking adds them to the capture.
When you're done, you copy the result and paste it into Claude Design, where it arrives as a JSON file you can immediately prompt against.
The tool doesn't reproduce images, logos, or complex layouts, but it creates a usable structural approximation so you can use it as a reference or starting point.
Editing with Tweaks, comments, and drawings
Claude Design's unique Tweaks feature sometimes places a card at the bottom right of the preview screen with a set of tweaks for the current page.
An example: I was building a form with multiple sections, and it offered options on form style (wrapping sections inside cards or just using dividers), input field style, and form width. When you click each option, the design updates in real-time, so you can make decisions on the spot without asking AI to generate more options.
Tweaks have different settings depending on which kind of page you're previewing, and sometimes they might not even be there at all for simple designs.Â
Wrapping up the quick edit options, the Edit button on the top right exposes selectors for background color, font, and base size. And for targeted changes, you can click the Comment button and then click on any visual element or container to write down your thoughts. This serves two functions: you can use it to collaborate with your team with the dedicated Comments tab, or to send it straight to Claude for edits.
If text doesn't fully express what you want to change, you can use the draw tool to mark the interface instead, and start typing anywhere to leave text. This will be passed as context so the model can make changes.
Export options
Here are all the export and sharing options currently available in Claude Design:
Present in Claude Design: You can present your slide decks in the platform without exporting anything.
URL sharing (for Team and Enterprise plans): View, comment, or edit access levels, shareable with teammates.
PDF and PPTX: Used for decks and documentation.
Standalone HTML: Claude packages the output as an app compiled into a single portable file—no servers or dependencies required. It's a functional prototype, not a production scaffold; expect to do integration work before adapting it for real use.
Canva: This one requires installing the Canva connector (click the profile icon at the top right, and then click Connectors). The export pushes the file as code; it's viewable in Canva, but it's not fully editable there.
Claude Code handoff: The handoff packages a bundle with a system prompt and project context, so you can copy and paste it into a local coding agent or push it to Claude Code on the web. This handoff bundle doesn't enforce a typical starter project structure out of the box (for example, there's no separation between HTML and CSS), so you might want to start with best practices before building further.
Browsing the examples
Claude Design's Examples tab reveals nine starting points that highlight the platform's capabilities, with shiny visuals that you can bring into a new project. These include animations, particle effects, full onboarding flows, or a collection of shaders. This shows that Claude can handle more than the bread-and-butter forms and dashboards and can tackle more ambitious projects as well.
Who is Claude Design actually for?
Despite the strong reactions to Claude Design oscillating between "designers are dead" and "this is just AI slop," the more balanced community view positions this tool as the Canva for UI/UX design. Canva didn't kill design work; it lowered the barrier to entry.
Builders and developers who don't want to spend hours in Figma will find a lot of value here, especially with the Claude Code handoff. This can serve as the ideation step for what the product looks like before actually moving to coding.
Product managers and founders can use it to validate ideas, iterate on how feature implementation will look, and share it with others to get buy-in or start development. Designers can use it to brainstorm new aesthetics quickly and create first drafts that they can perfect later.
And anyone with a visual project that involves animations or slide decks can also jump in and vibe-build this type of content, using the virtual workspace to keep everything organized and present directly from there.
Claude Design's limitations
The biggest limitation right now is the weekly usage, where you can burn through your entire token allowance in less than an hour if you're on the Pro plan. Plans with higher usage limits have more wiggle room, and you can always activate extra usage for pay-as-you-go, but this remains expensive when compared with other Claude features.
If you've been generating artifacts and UI with Claude models for a while, you'll notice that Claude Design has its own visual language: the heavy lean on serif fonts, the yellowed color schemes, card-based layouts, and accent bars everywhere. It looks good but becomes repetitive quickly, which is why adding your own design system is so important.
How to get started with Claude Design
Claude Design is available for Claude Pro, Max, Team, and Enterprise subscribers. There's no free tier. You access it through claude.com/design, and it appears as a product within your existing subscription.
It has its own weekly usage allowance that resets every seven days, independent of your chat or Claude Code limits. Each prompt consumes about 5-10% of your Pro plan weekly usage when using Sonnet 4.6. You can check how much you've spent so far in the Usage tab in the regular Claude chat app (Settings > Usage).
A few tips to help you get started faster:
Whenever you ask for changes to your page, you need to refresh the tab to see the changes. But you don't need to refresh the entire browser: look to the top left of the preview viewport to find the Claude Design refresh button.
Once you have multiple screens, you can navigate between them by clicking the links inside each page. Sometimes this doesn't work: you can instead close the tab and open the desired page from the workspace file list.
There are no viable free workarounds for the weekly caps except upgrading to a plan with higher usage or using multiple paid accounts.
Your new design assistant
Claude Design is a great step up in the world of AI design tools, raising the floor of what you can put together without obsessing over padding in Figma for hours. It doesn't compete with experienced designers shipping polished designs for now, but could automate commodified work: the kind where people execute a project brief for building more conventional user interfaces.
As more of these tools reach the market, we may see lots of visual experiences that look good but lack personality, as if being lookalikes of one another. If a smooth starter design becomes table stakes, what kinds of differentiation options open up for design professionals? And how can non-designers assert their vision in a sea of serif fonts and colorful accents?
Related reading:
