Claude Design Tutorial: Design Your App UI Free (2026)

A step-by-step guide to designing your app's screens in Claude Design on the Free plan, and knowing exactly where Free stops

On October 8, 2026, Anthropic took the beta label off Claude Design and put it on every Claude plan, including Free. The same announcement said people had already made more than 45 million docs, decks and designs inside Claude conversations - Claude. Six months earlier, the product had launched as an Anthropic Labs research preview that only paying subscribers could open.

But "free" hides a set of boundaries that most tutorials skip. On the Free plan you get the design canvas, the chat, inline comments and every export format. You do not get saved design systems, you do not get Claude Code (so no one-step handoff to working software), you cannot pick Opus, and every design you generate draws from the same small usage pool as your ordinary chats. Knowing those lines before you start decides whether a free session ends with a clickable prototype you can ship or with three half-finished screens and a usage-limit banner.

This guide walks through how to design an app UI in Claude Design for free: the settings to switch on, the brief that substitutes for a design system, the seven-step flow from first prompt to clickable prototype, which model to choose (with live leaderboard data), and every path from a finished design to working code. It also covers the paid path through Claude Code's /design and /design-sync, how Claude Design compares with Google Stitch, Figma Make, v0, Lovable and others, where it breaks, and why Anthropic decided to give it away.

Contents

1. What Claude Design Is Now (After October 8, 2026)
2. What the Free Plan Gets You, and What It Does Not
3. Before You Start: Settings, Model and the Brief
4. Step by Step: Design Your First App Screen
5. Refining a Design: Chat, Comments, Direct Edits and Sliders
6. From One Screen to a Clickable App Flow
7. Which Claude Model Designs Best? The Leaderboard Data
8. From Design to Working Code on the Free Plan
9. The Paid Path: Design Systems, /design-sync and /design in Claude Code
10. Claude Design vs Google Stitch, Figma Make, v0 and Lovable
11. Where Claude Design Fails, and How to Work Around It
12. Why Anthropic Made Design Free, and What Comes Next
13. Conclusion: Which Path Fits Your App

AI UI Design Tools, Scored for Designing an App for Free

Before the tutorial, here is how the main prompt-to-UI tools compare for the specific job this guide is about: designing an app's interface without paying, then turning it into something that runs. Every tool, including the one the publisher of this guide builds, is scored on the same four criteria and the same evidence standard, and the table is sorted by the final weighted score.

How the criteria were chosen. Free Tier (30%) carries the most weight because the reader's constraint is cost: it measures how much real design work the free plan allows before a paywall or a cap stops you. Design Control (25%) measures how precisely you can steer the result (comments, direct edits, variations) rather than re-rolling prompts. Path to Code (25%) measures how far a free user can carry a design toward running software. Brand Fidelity (20%) measures whether the tool can hold your colors, type and components across screens on the tier you are scoring. Where a criterion could not be verified from the vendor this session, the cell shows "-" and the final score is the weighted average of the remaining criteria, so those rows are scored on three criteria instead of four. Sources for every figure appear in the sections below.

The ranking says something specific: Claude Design and Google Stitch are nearly tied for free UI design, and they win for opposite reasons. Claude Design wins on control and on the number of places a design can go next. Stitch wins on generosity and on keeping a brand consistent without paying. The full-app builders (v0, Lovable, Founden) score lower here not because they are weaker products but because designing a screen is a by-product of what they do, not the job itself. Section 10 goes through each in detail.

1. What Claude Design Is Now (After October 8, 2026)

Claude Design is not the product it was at launch, and most tutorials written before October still describe the old one. It started on April 17, 2026 as a separate Anthropic Labs app at its own address, powered by Claude Opus 4.7 and open only to Pro, Max, Team and Enterprise subscribers - Anthropic. On September 16 it moved inside ordinary Claude conversations, alongside two new siblings, Claude Docs and Claude Slides. On October 8 all three left beta and became available on every plan, Free included.

That history matters for a practical reason: there are now two places to do the same work, and one of them is closing. The standalone site at claude.ai/design keeps running only until December 14, 2026, and Anthropic is folding it into Claude because "running two versions slows down fixes for both" - Claude. If you are starting today, start inside a normal conversation. If you have projects or design systems in the standalone app, move them before the deadline.

The timeline in one table

The product moved fast enough that dates are the clearest way to see what changed. Each row below is taken from Anthropic's own announcements or release notes, and each changed something a free user can see today. The pattern is consistent: every step pulled Design closer to the place where people already talk to Claude and closer to the place where code gets written.

Read the table as a direction of travel rather than a list of features. Design began as a destination you visited, became a template you can start from any chat, and is now one of several artifact types (designs, decks, docs, dashboards, animations) that open beside a conversation. Anthropic's Help Center now describes it as "one of the templates you can start an artifact from, so you can use it in any chat, in Claude Code, and from the Artifacts tab" - Claude Help Center. For a tutorial, that means the entry point is the message box, not a separate app.

What it actually produces

A Claude Design artifact is a canvas of artboards, each holding layers of text, shapes and images, generated from your description and editable by you or by Claude. Anthropic lists the intended outputs as designs, interactive prototypes, one-pagers and "other visual work," and its product page groups them as asset creation, one-pagers and mockups - Claude. For an app builder, the useful outputs are screen mockups, multi-screen flows and clickable prototypes that behave like the real thing when someone taps through them.

Anthropic's own launch video for the September move shows the intended rhythm: one brief, several artifacts, and comments sent back to Claude to change any of them. It runs about a minute and a half and is worth watching once before you start, because it shows how the canvas sits beside the chat.

The point to take from the video is that you never leave the conversation. The brief, the files you attach and the decisions you make in chat all stay as context for the design, which is the main practical difference from the standalone app, where every project started cold. For a free user, that continuity is also where usage goes, which is the subject of the next section.

2. What the Free Plan Gets You, and What It Does Not

The pricing page is unambiguous about the headline: the Free plan's feature list ends with "Claude Design, Slides, Docs," and the comparison table marks Claude Design "Yes" on Free, Pro, Max and Ultra - Claude pricing. What the headline does not tell you is which parts of the Design workflow sit behind other features that Free does not include. Those are the lines that shape a free tutorial.

The cleanest way to see them is to separate the design template (on Free) from the features a complete workflow leans on: saved design systems, Claude Code, Opus models, and artifacts that connect to live data. The Help Center's artifacts table shows the split precisely: Free can create artifacts and start from the Design template, but cannot connect apps to an artifact or store data in an artifact - Claude Help Center.

The plan comparison that matters for design work

The table below pulls together the plan facts that change what you can do in Claude Design. Prices are Anthropic's list prices in US dollars before tax; usage multiples are relative to Pro. The design-system row comes from the design-system setup guide, the /design row from the Claude Code release notes, and everything else from the pricing page.

The design-system row is the one most free users discover the hard way. Anthropic's setup guide states that design systems "are available in beta on Pro, Max, Ultra, Team, and Enterprise plans" - Claude Help Center. Free is not on that list. The getting-started guide, meanwhile, "assumes your organization's design system has already been set up," which is why a free user following it literally will look for menus that are not there.

Usage: one pool for everything

Claude Design used to have its own weekly allowance. It no longer does: "All Claude Design activity now counts toward your plan's shared limits," and when you hit them, "Claude Design is unavailable until your limits reset" - Claude Help Center. On Free, that pool is described only as "Limited usage every 5 hours and every week," and the general usage article adds that how fast you reach a limit depends on "the length and complexity of your conversations, the features you use, which Claude model you're chatting with, and the effort level you've selected" - Claude Help Center.

Two consequences follow. First, a long design conversation is expensive in a way a short chat is not, because every refinement re-reads the growing context. Second, Free has no usage credits: the pricing table lists usage credits as "No" on Free, so when the pool runs dry, you wait for the reset. Plan a free design session the way you would plan a timed exam: brief written in advance, one screen at a time, and new conversations for unrelated work.

What a dollar of plan buys

It helps to reason about the paid tiers from first principles before deciding whether Free is enough. Anthropic prices its individual plans so that each unit of usage costs the same: Pro is $20 for 1x, Max is $100 for 5x, Ultra is $200 for 10x weekly usage. The chart below divides each plan's monthly price by its weekly usage multiple.

The flat line tells you where the real decision sits. Moving from Pro to Max or Ultra buys more of the same (plus monthly API credits and Fable access). Moving from Free to Pro is the only step that changes what you can do in Claude Design: it unlocks saved design systems, Opus, and Claude Code with /design and /design-sync. So the honest question for a free user is not "how much usage do I need" but "do I need my brand remembered, and do I need the design to become code inside Claude." If the answer to both is no, Free is a complete tool.

The privacy line on Free

One more boundary is easy to miss because it is a setting rather than a feature. On consumer plans (Free, Pro and Max), Anthropic uses your chats and coding sessions to improve its models if you choose to allow it, if a conversation is flagged for safety review, or if you opt in another way; Incognito chats are never used, even with model improvement switched on - Claude Privacy Center. The pricing table lists model training as "Opt-out" on every individual plan.

For design work this is not abstract: a design conversation carries your product idea, screenshots of your competitors and sometimes your users' data pasted in as sample content. Check the model-improvement setting under Settings > Privacy before you start - Claude Privacy Center, and use realistic but invented sample data in mockups. We compared how the major AI builders handle training data in our guide to AI builder opt-outs, which covers the same question for Lovable, v0 and Figma.

3. Before You Start: Settings, Model and the Brief

Most failed first sessions in Claude Design fail before the first prompt. The canvas will not appear if a capability is switched off, a vague request burns usage on clarifying questions, and the wrong model choice quietly lowers the quality of everything that follows. Ten minutes of setup prevents all three, and on Free, where every refinement draws on a small pool, that setup is the highest-return work in the whole process.

The setup has three parts: switch on the capability artifacts depend on, choose the model deliberately, and write a brief that does the job a saved design system would do on a paid plan. The third part is where a free workflow differs most from Anthropic's own guide, so it gets the most space here.

Switch on file creation

Artifacts, including designs, depend on one setting. The Help Center is explicit: "Artifacts require Cloud code execution and file creation (called Create and edit files in the updated Settings layout) to be turned on in Settings > Capabilities" on Free, Pro, Max and Ultra - Claude Help Center. If you ask for a design and get a long text description or a code block instead of a canvas, this is almost always why.

Then decide where you will work. You can ask for a design in any conversation ("Mock up the onboarding flow we just discussed"), select Output > Design in the message box, or open the Artifacts tab and pick a Design template. On a phone, the Claude apps for iOS and Android can create and edit designs, but cannot change sharing settings. For a first app UI, use the web or desktop app: the properties panel and keyboard controls covered in Section 5 are built for a larger screen.

Choose the model on purpose

Because Design now runs inside an ordinary conversation, the model picker under the message box is part of your design setup. Anthropic's own screenshots of artifact work show that picker beneath the composer, set to Sonnet 5.5 in one and Opus 5.5 in another - Claude. On Free, the pricing table lists Sonnet and Haiku as the available families; Opus starts at Pro.

The practical rule is simple and is backed by the leaderboard data in Section 7: on Free, design with Sonnet, never Haiku. Haiku is built for "high-volume, cost-sensitive tasks," in Anthropic's words when it launched Claude Haiku 5.5 on October 7 - Claude release notes. A UI design is the opposite kind of task: low volume, high judgment, and every weak decision costs you a refinement round. If a conversation defaulted to Haiku, switch before the first design prompt rather than after.

Write the brief that replaces a design system

On paid plans, a saved design system feeds every project your colors, type, components and layout patterns automatically. On Free, you provide the same information in a brief at the start of the conversation, and because the design lives inside that conversation, Claude keeps it in context for every screen that follows. Anthropic's guide says a good prompt includes four things: the goal, the layout, the content and the audience - Claude Help Center. A brand block on top of those four does most of what a design system does for a single project.

Here is a brief template that works well as the first message of a free design conversation. Fill it in once, save it in a note, and paste it into each new design conversation for the same product:

PRODUCT: Cafe Rota, a mobile app that lets café owners publish
next week's staff rota and lets staff swap shifts with one tap.
AUDIENCE: Café owners (busy, on their phone between orders) and
part-time staff (18-30).
PLATFORM: Mobile first (iPhone 15 frame, 393 x 852), must also
work at tablet width.

BRAND
- Colors: primary #1F6F5C (deep green), accent #F2A541 (amber),
  background #FAF8F4, text #1C1C1C, error #C2412D
- Type: "Inter" for UI text, "Fraunces" for headings only
- Shape: 12px corner radius, soft shadows, generous white space
- Voice: plain and friendly, no exclamation marks

COMPONENTS I WANT REUSED
- Primary button (filled green), secondary button (outlined),
  shift card, bottom tab bar with 4 tabs (Rota, Swaps, Team, Me)

FIRST TASK
Design the "Rota" home screen for a staff member: this week's
shifts as cards, one shift highlighted as "Today", and a banner
when a swap request is waiting.
Show me 3 layout directions side by side before we refine one.

Three details in that brief do disproportionate work. Naming exact hex values and fonts stops Claude from inventing a palette on each screen. Naming the components you want reused gives later screens something to stay consistent with, which is the core job of a design system. And asking for three directions first, which Anthropic also recommends ("Ask for variations"), means you spend one generation choosing a direction instead of five generations correcting one you never wanted.

The brief also protects you against the most common complaint about AI-generated interfaces: that they all look the same. A model given no brand defaults to a safe, familiar style, and the result looks like every other AI-made app. We went deep on how to avoid that default look in Differentiated Design With AI, and the short version applies here: specific constraints produce specific design.

4. Step by Step: Design Your First App Screen

With the setting on, the model chosen and the brief written, the actual design work follows a loop that Anthropic describes in seven steps: start a design, attach a design system, add context, describe what you want, review the canvas, refine, then export or share - Claude Help Center. On Free, step two becomes "paste your brief," and the rest applies unchanged. What follows is that loop, adapted for a free user designing an app rather than a slide or a one-pager.

The example throughout is the café rota app from the brief in Section 3: a staff-facing mobile app with a home screen, a swap flow and a profile. Substitute your own product. The principle that carries over is to treat each step as a decision point rather than a button: every step is where a free session either stays on budget or starts leaking usage.

Step 1: Open a design and paste the brief

Start a new conversation, choose Output > Design (or just ask for a design), and paste the brief as your first message. Claude will often ask clarifying questions before it generates anything, which the Help Center describes as expected behavior: "Claude will also ask clarifying questions if it needs more information." Answer them in one message. Each back-and-forth exchange costs usage, and three short answers spread over three messages cost more than one complete answer.

When the canvas opens, it sits beside the conversation, with the artifact's own header carrying its title, a comment control and a Share button. The screenshot below comes from Anthropic's October 8 announcement and shows a different artifact type (a dashboard), but the layout is the one a design opens in: your conversation on the left, the live artifact on the right.

Notice the model picker under the reply box in that screenshot: it reads Opus 5.5 Medium, which is a paid-plan configuration. On Free, the same control is where you confirm Sonnet is selected before generating. Notice too that the artifact has its own header with sharing controls, separate from the chat: the design is a standalone object with a link, not a message in the thread.

Step 2: Generate three directions and pick one

Ask for variations before you ask for polish. The brief above ends with "Show me 3 layout directions side by side," and the reason is economic: comparing three directions costs one generation, while discovering on round five that you wanted a different layout costs five. Anthropic's tips say the same thing: "Comparing alternatives is much faster than guessing."

When the three directions appear, judge them on structure, not decoration. Colors and fonts are cheap to change later; the hierarchy of the screen (what a user sees first, where their thumb goes, how much fits above the fold) is expensive to change once you have refined details on top of it. A useful test is to ask what the screen is for in one sentence ("a staff member checks today's shift in under two seconds") and pick the direction that serves that sentence best.

Step 3: Lock the structure in chat

Once you pick a direction, tell Claude to keep it and remove the others, and state the structural rules you want held for every later screen. A message like "Keep direction B. From now on, every screen uses the bottom tab bar from B, the card style from B, and 16px side margins" turns your choice into a constraint the conversation carries forward.

This is the free substitute for what a design system's layout patterns do automatically on paid plans. It feels redundant, but it prevents the most common drift in multi-screen AI design: each new screen quietly reinvents spacing, header style or button shape because nothing told it not to.

Step 4: Fill it with realistic content

Generic placeholder text hides design problems. A shift card that looks elegant with "Lorem ipsum" breaks when the real content is "Saturday, 06:30 to 14:00, Kitchen, swap requested by Priya." Ask Claude to replace every placeholder with realistic sample data, including the awkward cases: the longest name, the shift that crosses midnight, the week with no shifts.

Use invented data rather than real staff names or customer records. The design conversation is ordinary chat data under Anthropic's consumer privacy terms covered in Section 2, and realistic invented data tests the layout just as well as real data does.

Step 5: Add the states real apps have

A screen in a real app has more than one state, and AI-generated mockups almost always show only the happy one: the version where the data has loaded, the network is fine and every name fits on one line. Real users meet the other versions constantly, and a builder who never drew them ends up improvising them in code, usually badly and usually at the last minute.

Before you call a screen done, ask for the states a user will actually see. Each one is a separate artboard on the canvas, which also makes them easy to compare side by side and to hand over later as a complete set. In practice, the four that catch most problems are these:

• Empty state for a new user with no shifts yet
• Loading state while the rota fetches
• Error state when the network fails
• Edge state such as a very long name or eight shifts in one week

Asking for these in one message ("Add an empty, loading, error and overflow version of this screen as separate artboards") is cheaper than discovering them during development, where each one becomes a bug report. It also produces better handoff material: whoever builds the app, whether that is you, Claude Code or another tool, gets the states drawn rather than guessed. Designers call this "designing the whole screen," and it is the cheapest quality upgrade available on any plan, because one extra message now replaces several bug reports later.

Step 6: Review it like a user, then like an auditor

Claude can critique its own work, and the Help Center recommends using that: Claude "can review your design for accessibility, contrast ratios, information hierarchy, and general usability." Ask for that review explicitly, and ask for specific findings rather than reassurance: "List every text and background pair below WCAG AA contrast, with the hex values."

Then review it yourself as a user. Open the design on your phone through its share link, try to do the screen's one job, and note where your thumb hesitates. AI review catches measurable problems such as contrast and tap-target size; only a person catches "I did not realize that card was tappable." Both reviews matter, and the second one costs no usage at all.

Step 7: Save a checkpoint before changing direction

Claude Design has no version history yet, which the Help Center lists among its known limitations. The workaround Anthropic suggests is conversational: tell Claude "Save what we have and try a completely different approach," and it saves the current project and confirms where. Do this before any large change, such as a new navigation pattern or a dark-mode variant.

On a free plan this habit has a second benefit. If you hit a usage limit in the middle of an exploration, a saved checkpoint means the next session resumes from a known good state rather than from whatever half-finished experiment the limit interrupted. Treat checkpoints the way a developer treats commits: small, frequent and named after what they contain.

5. Refining a Design: Chat, Comments, Direct Edits and Sliders

Claude Design gives you four ways to change a design, and choosing the right one for each change is the single biggest factor in how much a refinement costs. The Help Center draws the main line clearly: use comments for "targeted, component-level changes," chat for "structural changes, new sections, or anything that requires explanation or context," and direct edits for "quick visual and aesthetic changes." The fourth tool, sliders that Claude builds for a specific design, sits between direct edits and chat.

The reason this matters on Free is that the four tools cost very different amounts. A direct edit on the canvas changes a value without asking the model anything, so it costs nothing from your usage pool. A comment asks the model to change one element. A chat message can make the model reconsider the whole design. Using chat for a change that a direct edit could make is the most common way free users run out of usage before their design is finished.

The diagram's ordering is the habit to build: reach for the cheapest tool that can make the change. Moving a button 8 pixels never needs a model. Making a list of shift cards collapsible usually needs a comment on that list, not a paragraph in chat. Rethinking how swaps work across three screens is exactly what chat is for, because it requires explanation and context.

Edit directly on the canvas

The editor added in June gives you direct, fine-grained control: "rich layout controls let you drag, resize, and align elements," along with what Anthropic called "hundreds of stability fixes" - Claude blog. Select any layer and the properties panel shows its text, typography (font, size, color, leading, tracking), appearance (background, radius, opacity) and border. Anthropic's screenshot from that update shows the panel next to a selected heading:

Two things in that image matter for this tutorial. The left panel is the free part: anyone on any plan can select a heading and change its font size, color or letter spacing by hand, without spending usage. The terminal on the right shows /design-sync running in Claude Code, which is the paid part covered in Section 9. Most of the polish a design needs (aligning a column, fixing a color, tightening spacing) belongs in the left panel.

The editor is also fully keyboard-operable, which is unusual for a design tool and useful for speed. The Help Center lists the shortcuts; the ones worth memorizing first are below.

Duplicate is the shortcut that saves the most usage. If you need a second version of a screen with one difference, duplicating the artboard and editing it by hand costs nothing, whereas asking Claude for "the same screen but with the banner at the top" regenerates it. One limitation applies: placing a brand-new text layer, artboard, shape or note needs a mouse or trackpad, and the Help Center's suggestion is to "Ask Claude to add it."

Leave inline comments for component-level fixes

Inline comments let you click on a specific element and request a change there, which "is faster than describing the location in chat." The examples Anthropic gives are the right size for comments: "Make this button padding larger," "Change this to a dropdown instead of radio buttons," "Use the primary brand color here," "Make this section collapsible." Each names one element and one change.

There is a known bug to plan around: comments occasionally disappear before Claude reads them. The Help Center's workaround is to paste the feedback into chat instead if a comment is not picked up, and comments that vanish from the page can still be found in the comments view. When you leave several comments at once, check after sending that each one was applied before moving on.

Ask Claude for sliders when you are exploring a range

At launch, Anthropic described "custom sliders (made by Claude)" and "adjustment knobs to tweak spacing, color, and layout live" - Anthropic. The current product page still lists "the adjustment sliders Claude creates to tune spacing and color" among its controls. The idea is that instead of asking for "a bit more spacing" five times, you ask once for a slider that controls the spacing, then tune it yourself.

Sliders pay off when you do not yet know the value you want: card spacing, corner radius, how saturated the accent color should be, how dense a list feels. One request creates the control; every adjustment after that is free. Once you find the value, write it into your brief ("card gap 14px") so later screens inherit it.

Use chat for structure

Chat is the right tool when the change needs reasoning: a new section, a rearranged layout, a different navigation model, or a question such as "why did you put the swap banner above the shifts?" Anthropic's examples are all structural: "Rearrange the dashboard so metrics are in the top row and the chart is below," "Add a settings panel on the right side," "Show me 2-3 alternative layouts for this page."

The discipline that keeps chat affordable is batching. One message with four structural changes costs less than four messages with one change each, because each message re-reads the conversation. Write the batch as a short numbered list, and be specific: Anthropic's own example of good feedback is "Tighten the spacing between form fields to 8px," set against the useless "This doesn't look right."

6. From One Screen to a Clickable App Flow

A single screen is a picture; an app is a sequence. The point at which Claude Design becomes more useful than a static mockup tool is when you ask it to connect screens into a clickable prototype that someone can tap through. Anthropic's launch post listed "realistic prototypes" first among its uses, describing how designers "can turn static mockups into easily-shareable interactive prototypes to gather feedback and user-test, without code review or PRs."

For a founder or product builder, a clickable flow answers a question that no single screen can: does the path from opening the app to finishing the task make sense to someone who has never seen it? That is a question worth answering before writing code, because a confusing flow found in a prototype costs one conversation, while the same flow found after launch costs a rebuild and the users who gave up.

Design the flow as a list first

Before generating screens, write the flow as numbered steps in chat and ask Claude to confirm it. For the café app, the swap flow might read: (1) staff member taps a shift, (2) sees shift details with a "Request swap" button, (3) picks colleagues to offer it to, (4) sees a confirmation, (5) colleague receives a request and accepts, (6) both see the updated rota. Agreeing on this list costs one short exchange and prevents Claude from inventing an extra screen or skipping one.

Then generate the flow in one request: "Design screens 1 to 6 of this flow as separate artboards, using the components and spacing we agreed, then link them so tapping the buttons moves between screens." Asking for all screens together keeps them consistent with each other, which matters more on Free, where no saved design system enforces consistency for you.

Make it clickable and test it on a phone

Once the screens exist, the prototype is something you can share as a link. Designs start private; to share, click Share and choose who can open it and whether they can view, comment or edit. Since October 8, slides, designs, dashboards and animations can also be shared with people outside your organization or with anyone who has the link, where an admin allows it - Claude. On an individual account there is no organization admin to ask.

Anthropic's Academy tutorial shows the mechanics: ask Claude to make an artboard clickable, then press Play on it to try the flow yourself before anyone else does - Claude Academy. Then send the link to three people who match your audience and watch them use it, ideally on their own phones. Five minutes of watching someone hunt for the swap button teaches more than an hour of refining. Bring what you saw back as one batched chat message, and keep a checkpoint before applying it, because user feedback often triggers the kind of structural change that you may want to undo.

Responsive layouts and dark mode

The Help Center's tip to "think about responsiveness early" is worth taking literally: say in your brief whether the app needs to work on mobile, tablet and desktop, or just one. Adding a tablet layout after six phone screens are polished means regenerating six screens; designing the key screen at both widths from the start means the later screens inherit both.

Dark mode follows the same logic. If the app will have it, generate the dark version of one finished screen early, fix the contrast problems it reveals, and add the dark palette to your brief. Then every later screen gets both modes for little extra cost. If you leave dark mode to the end, each screen needs its own pass, and on Free that is often the pass that hits the usage limit.

Know when to stop designing

The risk in a tool this fluent is endless refinement. A useful stopping rule for an app UI is that the design is done when every screen in the core flow has its states drawn, the people you tested with completed the task without help, and the remaining feedback is about taste rather than comprehension. Past that point, refinement in the design tool has lower returns than building the real thing and refining with real usage data. Section 8 covers how to make that jump without paying.

7. Which Claude Model Designs Best? The Leaderboard Data

The model behind a design session decides the quality ceiling of everything on the canvas, and on Free the choice is narrower than on paid plans. So it is worth asking, with data rather than brand loyalty, how much a free user gives up by designing with Sonnet instead of Opus, and how much worse Haiku really is. The best public evidence for that question is Design Arena, a crowdsourced leaderboard where people compare two anonymous models' designs for the same prompt and vote for the better one.

Two boards are relevant. The all-categories board pools websites, games, 3D, data visualization, UI components and SVG work. The website (general-purpose) board isolates the category closest to an app screen. The chart below shows each Claude model's win rate on both boards, read live from the leaderboard on November 3, 2026 - Design Arena. Win rate is the share of head-to-head votes a model won, so 50% means it won as often as it lost.

The pattern is clearer in ratings than in the chart. On the all-categories board, Claude Opus 5.5 rates 1385, third overall behind GPT-6 Astra (1389) and Meta's Muse Wonder (1387), while Claude Sonnet 5.5 rates 1351 and Claude Haiku 5.5 rates 1281. On the website board, the three larger Claude models are effectively tied: Claude Fable 5.1 at 1333, Sonnet 5.5 at 1332 and Opus 5.5 at 1328, each from roughly 470 to 710 head-to-head battles. Haiku 5.5 sits at 1270 on the same board, about 60 points behind.

What the numbers mean for a free user

Read with care, the data supports a clear conclusion: for website-style app screens, Sonnet 5.5 on Free designs about as well as Opus 5.5 on Pro. The all-categories gap in Opus's favor comes largely from categories an app screen does not use, such as 3D scenes and games. The website ratings are within a handful of points of each other, and with a few hundred votes per model, differences that small are within the noise. The free model is not a consolation prize for this task.

The same data supports a second conclusion just as firmly: Haiku is the wrong model for design. A 60-point gap on the website board is large, and Haiku's win rate of about 51% means voters preferred it barely more often than chance against the field. That matches its stated purpose of "high-volume, cost-sensitive tasks." Anthropic's own launch post lists Haiku's sweet spot as "summaries, compactions, database queries, and classification requests" - Anthropic, none of which is a design. If you notice a design conversation running on Haiku, switch to Sonnet before generating; the saving in usage is not worth the drop in quality.

Why bigger models still cost you more

There is a reason to prefer Sonnet even on a paid plan, and it comes from how usage limits work. On the API, Opus 5.5 costs $4 per million input tokens and $20 per million output tokens, double Sonnet 5.5's $2 and $10. Subscriptions hide token prices, but Anthropic says plainly that how fast you reach a limit "depends on the model you use" - Claude pricing. A more expensive model drains the same pool faster.

For design work, where a session might run thirty or forty refinement rounds over a long context, that difference compounds. The practical setup on Pro is to explore and refine with Sonnet, and switch to Opus only for the step where its broader strength helps: a complex interactive prototype, a data-heavy dashboard, or the handoff to code in Claude Code. Leaderboards measure taste in a single generation; they do not measure the cost of the fortieth. For a wider comparison of the models founders build on, see our Claude Sonnet 5.5 vs GPT-6.1 Sol breakdown.

8. From Design to Working Code on the Free Plan

A design is only worth what it becomes. The question every free user eventually reaches is how to turn the canvas into an app that runs, without a Claude Code subscription. Claude Design offers more exits than most tools in its category, and the Help Center lists them all behind the Export button in the upper right of a project - Claude Help Center. None of those export formats is marked as plan-limited in the Help Center; the one exit that needs a paid plan is the handoff to Claude Code, because Claude Code itself starts at Pro.

The exits fall into three families. Files you download: a .zip of the project, PDF, PPTX, Google Slides and standalone HTML. Destinations you send to: Adobe Experience Manager, Adobe for Creativity, Adobe Journey Optimizer, Base44, Canva, Gamma, HubSpot, Hyperframes, Lovable, Miro, Netlify, Replit, v0, Vercel and Wix. And handoff to Claude Code, either to a local coding agent or to Claude Code on the web.

The diagram shows why Free is a complete path rather than a demo: two of the three exits work without paying Anthropic, and both end in a running app. What differs between them is where your code lives and how much control you keep, which is the decision this section helps you make.

Path A: export HTML and hand it to any AI coder

The standalone HTML export is the most portable output Claude Design has. It is a self-contained page you can open in any browser, host as a static prototype, or give to any coding agent as the visual specification for the real app. The .zip carries the project's assets alongside it. Both are plain files, so they work with whatever stack you choose and whatever AI coder you use.

Treat the export as a reference, not as production code. A design artifact is built to look and behave right on the canvas; a production app needs routing, state, data loading, accessibility semantics and a component structure that a team can maintain. The reliable workflow is to put the HTML in your repository as design/ and prompt your coding agent with something like:

Implement the screens in design/rota-home.html and
design/swap-flow.html as React components in this Next.js app.
Match spacing, colors and type exactly; extract the colors and
fonts into our theme file first. Build the empty, loading and
error states shown in the artboards. Do not copy the HTML
structure literally: use semantic elements and our existing
Button and Card components.

That last instruction is the one that prevents the most technical debt. A coding agent given HTML will copy its structure unless told not to, and design-tool HTML is usually built from deeply nested divs positioned for a fixed frame. Asking for semantic elements and your own components turns a picture of the app into the app. If you are choosing a stack or a coding agent for this step, our guide to building an app with AI walks through the options.

Path B: send it to an app builder

The Send to destinations are the fastest route from design to something running, because the receiving tool builds the app for you. Anthropic built these as integrations with the vendors, and the vendors describe the intent in Anthropic's own announcement: Lovable says people can "bring those ideas to life inside Lovable as production-ready applications," and Replit calls it an MCP integration so builders "can now design on-brand apps in Claude Design and build, refine, and ship them in Replit" - Claude blog.

The catch is that each destination brings its own pricing and limits. On their free plans, v0 allows 7 messages a day - v0, and Lovable gives 5 daily build credits, capped at 30 a month - Lovable docs. That is enough to turn one well-designed flow into a working first version, and not much more. We compared what those builders actually cost per finished app in Lovable vs v0 vs Bolt, which is the right read before committing a project to one of them.

Path C: publish a static prototype for feedback

Sometimes the next step is not an app but evidence: a link you can put in front of potential users or investors to see whether the idea lands. The Netlify and Vercel destinations, or the HTML export uploaded to any static host, give you a public URL for the prototype in minutes. Our ranking of where to deploy your app covers the free hosting options in more depth.

Be clear with yourself and with testers that this is a prototype. It has no backend, no accounts and no data, and the most common mistake at this stage is collecting sign-ups through a page that cannot store them. If you need to collect interest, add a form from a dedicated form service or an email tool, and keep the prototype honest about what it is.

Which free path to choose

The choice comes down to who will own and change the code afterwards. If you will keep developing the app yourself with an AI coder, Path A keeps the code in your repository from day one and costs nothing extra. If you want something running today and are comfortable building inside one vendor's platform, Path B is faster. If you are still validating the idea, Path C is enough, and building anything more is premature. For the broader decision of when a builder platform stops being enough, see our guide on when to graduate from a vibe-coding tool.

9. The Paid Path: Design Systems, /design-sync and /design in Claude Code

Everything up to this point works on Free. This section covers what changes at $20 a month on Pro, because for many app builders the upgrade pays for itself on the first project, and because the paid features change the workflow rather than simply adding usage. Three features do the work: saved design systems, /design-sync to pull a design system from code, and /design to design and implement inside Claude Code.

The reasoning is the one from Section 2: Pro is the only step that changes what you can do. On Free, your brand lives in a brief you paste and Claude holds in one conversation. On Pro, it lives in a design system Claude reads on every project, and the design can move into code inside the same tool that will write the app. For a product that will have dozens of screens built over months, that difference is the difference between consistency you enforce by hand and consistency you get by default.

Saved design systems

A design system in Claude Design "captures your colors, typography, components, and layout patterns, so Claude applies them to every new design and deck" - Claude Help Center. You can create one from a chat ("connected apps, uploaded files, Figma files, decks, logos, and fonts"), which works best for brand systems, or from Claude Code with /design-sync, which works best for product systems that already exist as code. Manage them under Settings > Capabilities, next to Design systems.

Anthropic's own tip for building one is the most useful line in the guide: "Include real examples, not just specs. A finished landing page or marketing site tells Claude more about your brand's feel than a color palette alone." The import is also only as good as its source: the Help Center warns that "a messy codebase or an incomplete file will show up in the output." If your components are inconsistent, the design system will faithfully reproduce the inconsistency.

/design-sync: your components in, Claude's designs out

When your design system already exists in code, /design-sync is the bridge. The Help Center says that if your design system "already exists as React components, run /design-sync in Claude Code. It reads your tokens and components directly." Claude then "builds with your real design system components, checks its own output against your design system, and makes corrections before you see them" - Claude Help Center.

The practical effect is that designs come back using the components your app already has, so the handoff to code is a matter of wiring rather than translation. The limitation is equally practical: the sync favors React component libraries, and very large repositories can make the browser lag, which is why the Help Center recommends linking very large codebases from Claude Code rather than uploading them in the browser.

/design: design and build without leaving Claude Code

The /design skill arrived in Claude Code in the week of August 17 to 21, 2026, as a research preview. Anthropic's release note describes it in two sentences: it "brings Claude Design's artboard workflow into the CLI and Claude Code Desktop, built on artifacts. Run it with a brief and Claude publishes a canvas of editable artboards for your UI. Pick one, tweak it, then have Claude implement it." It is "Available on Pro, Max, Team, and Enterprise" and requires Claude Code v2.1.234 or later - Claude Code docs.

The invocation is a single line in a Claude Code session, using Anthropic's own example:

# inside a Claude Code session, in your app's repository
/design redesign the composer based on what people actually use it for

Claude prints a link to the published canvas; you open it, pick an artboard, and tell Claude which option to implement. Because the session already has your repository in context, the options are drawn from your real app rather than from a blank page, and the implementation happens in the same session that drew them. Claude Code's artifacts documentation shows the same pattern for comparing options side by side:

The screenshot shows the logic of the paid path well: two versions of the same mobile screen, the current one and a proposed fix, annotated with why each decision was made, published as a page a teammate can open and comment on. That is a design review that lives next to the code it will change.

Give Claude Code your design tokens

Even without /design, Claude Code applies a built-in design skill whenever it builds an artifact, and that skill "looks for an existing design system in your project before choosing its own" - Claude Code docs. Anthropic's documentation recommends recording your tokens where Claude can find them, such as the project's CLAUDE.md:

## Design system

- Colors: primary #1F6F5C, accent #F2A541, surface #FAF8F4, text #1C1C1C
- Typography: Inter for UI text, Fraunces for headings
- Spacing: 8px scale, 12px border radius

The docs state the precedence explicitly: "Claude treats your design system as higher precedence than its own choices, and your prompt as higher precedence than both." This is the same brief from Section 3, moved from a chat message into a file the coding agent reads on every session. If you work across several coding agents, our guide to one AGENTS.md for Claude Code, Codex and Cursor covers how to keep that file shared.

Watch the workflow end to end

Anthropic published a short official video on October 2 that shows this paid path in practice: a designer at Anthropic connects a side project's repository, opens the Artifacts tab, asks for design options for its onboarding, leaves comments, fixes details himself in the editor, asks for a click-through prototype, and then tells Claude to build it. It is under two minutes long and is the clearest demonstration available of design and code in one loop.

The step to notice in the video is the order: options, comments, hand edits, prototype, and only then code. Each step is cheaper than the one after it, so mistakes get caught where fixing them costs least. That ordering is the real lesson of the paid path, and it applies just as well on Free with Path A from Section 8. For more on running Claude Code from first prompt to a live product, see our guides to building a live app with Claude Code and to the Claude Code skills that help with web and app builds.

What Max and Ultra add

Max ($100) and Ultra ($200) add usage rather than design features: five and ten times Pro's weekly usage, Fable access up to half the weekly limit, and monthly API credits of $100 and $200 respectively for building on the Claude Platform - Claude pricing. For heavy design-and-build weeks that run into Pro's limits, those multiples matter, and the API credits can pay for the AI features inside the app you are designing. We covered how to claim and use those credits in Claude Max API credits.

10. Claude Design vs Google Stitch, Figma Make, v0 and Lovable

Claude Design did not arrive in an empty market, and it is not the right tool for every builder. The prompt-to-UI category has split into three kinds of product, and understanding which kind you need matters more than any single feature comparison. Design-first canvases (Claude Design, Google Stitch, Figma Make, UX Pilot) produce screens you refine visually before any code exists. App builders with design modes (v0, Lovable) produce a running app first and let you adjust its look. Whole-product builders go further and build and run the product, its site and its back office together.

The structural difference is where the source of truth lives. In a design-first tool, the design is the master and code follows it. In an app builder, the code is the master and the design is whatever the code renders. Neither is better in general: a team with a designer and a brand to protect usually wants the first; a solo builder who needs something running this week often wants the second. The comparison below is organized around that choice, with prices from each vendor's own pages.

The prices cluster tightly between $16 and $30, which tells you that price is rarely the deciding factor once you pay. What differs is what each dollar buys: Figma's $16 is a design seat with AI credits on top, Claude's $20 is general-purpose Claude usage of which design is one part, and v0's and Lovable's prices are mostly credits for building apps. The free tiers differ far more than the paid ones, which is why the scoring table at the top weights the free tier most heavily.

Google Stitch: the most generous free option

Google Stitch is Google Labs' prompt-to-UI tool, and its most important property for this guide is that it remains free in its Labs phase with "no paid tier yet," according to a June 2026 review that also reports it now runs on Gemini 3 - Vibecoding. Google has not published its current limits on a page we could read, and third-party figures conflict, so treat any specific generation count you see quoted with caution.

Stitch's strongest feature is one that Claude Design keeps behind a paid plan: brand consistency. Google says you can "extract a design system from any URL" and use DESIGN.md, "an agent-friendly markdown file," to export or import your design rules to and from other tools - Google. Its May update added ways to "export your screens into Google Antigravity" and to "publish your work to the web directly with Netlify" - Google. If your top priority is keeping a brand consistent across many screens without paying, Stitch is the better free tool; if it is fine-grained editing and the widest set of places a design can go next, Claude Design is.

Figma Make: design inside the tool designers already use

Figma Make turns prompts into working prototypes and web apps inside Figma. The Starter plan is free and includes "150 AI credits/day, up to 500 AI credits/mo," while the Professional Full seat starts at $16 a month with 3,000 AI credits - Figma. Figma's own credit guide puts generating an app from scratch at "Approximately 75+ credits," which means a free Starter account can generate roughly half a dozen apps a month before the cap - Figma Help Center.

Figma's wording on free access is cautious: Make "is available for Full seats on paid plans," but "you can try Figma Make on other seats and plans" - Figma Help Center. Code download is available on Starter for people with a Full or Dev seat - Figma Help Center, but publishing a Make project requires a paid plan. The deciding factor is your existing workflow: if your team already lives in Figma with a component library, Make's ability to use your variables, styles and components beats any tool that has to learn them from scratch.

v0: code-first, with the fastest path to deployment

v0 from Vercel is an app builder rather than a design tool, but its Design Mode lets you edit visually, which puts it in this comparison. Its Free plan costs $0 and includes "Edit visually with Design Mode," "Sync with GitHub" and "Deploy apps to Vercel," with a "7 message/day limit"; the Plus plan is $30 per user per month with $30 of included monthly credits - v0. New users also get $5 in one-time credits.

v0 is also one of Claude Design's Send to destinations, which makes the two complementary rather than competing for many builders: design in Claude, send the result to v0, and let v0 turn it into a deployed Next.js app with code in your GitHub. The 7-message daily limit is the constraint to plan around; a design that arrives already resolved in Claude Design spends those messages on implementation rather than on deciding what the app should look like.

Lovable: the whole app from chat

Lovable builds full applications from conversation, and like v0, it is a Claude Design destination. Its free plan gives 5 build credits a day, and "on Free plans, daily build credits are capped at 30 per calendar month"; paid Pro plans start at $25 a month for 100 credits - Lovable docs. That makes it a good place to land a design you have already resolved and a poor place to explore a design from scratch on a free plan, because exploration burns build credits.

For a fuller comparison of what Lovable, v0 and Bolt cost per finished app, our cost-per-app analysis runs the numbers, and our ranking of the top 20 AI app builders covers the rest of the field.

UX Pilot: wireframes, mockups and heatmaps

UX Pilot is the most UX-specific tool here: it produces wireframes, high-fidelity mockups and predictive heatmaps, which estimate where a user's attention will go. Its Free plan is "$0 forever" with "Up-to 13 screens per day" and "80/day credits," while Pro costs $29 a month, or $19 a month billed yearly, with 750 monthly credits and "Export to Figma and code" - UX Pilot.

The free tier is generous for drafting screens, but the export that turns a design into something a developer can use is Pro-only, which is why it scores low on path to code in the table at the top. It suits teams that want heatmap-style feedback on layouts before committing to one, and who already plan to finish the design in Figma.

Founden: when the screen is not the goal

Founden sits in a different category from everything above, and it is included because some readers who search for a free way to design an app UI actually want the app. Founden builds a company's product, the site that sells it and its back office as one piece of autonomous software from a plain-language description, and you change the interface the same way, by asking ("Change the hero color to forest green," in its own example) - Founden. It is free to look around; the first build starts an 8-day Pro trial with 300 credits, and a card is needed to start it.

It scores low for this guide's job because it has no design canvas: you cannot drag a button or leave a comment on a component, and a designer who wants pixel control will find that frustrating. Where it differs from the app builders is ownership: in its desktop app, the build runs on the AI coder you choose (Claude Code or Codex, on the AI plan you already pay for, with the choice of coder on paid plans), and a desktop-built company keeps its full source, with every change, on your own computer. A practical combination is to resolve the look in Claude Design first and then describe it, screen by screen, to whichever builder will make it real.

11. Where Claude Design Fails, and How to Work Around It

Every tool in this category has failure modes, and the honest ones publish them. Anthropic's Help Center has a Known limitations section for Claude Design, which is more than most competitors offer, and it is the right starting point. Beyond that list, there are failure modes that come from the nature of AI-generated design itself rather than from bugs, and those are harder to see because the output looks finished.

Understanding both kinds matters most on Free, where you have the least room to recover. A paid user who hits a bug can retry with plenty of usage left; a free user who hits one late in a session may lose the session. The workarounds below are ordered roughly by how often they save a free session.

The documented limitations

Anthropic lists these limitations directly in the getting-started guide, and the list is unusually candid for a product that just left beta. Most of them are collaboration and history problems rather than quality problems: the design Claude produces is not worse because of them, but your ability to recover from a bad change or to work with a teammate is weaker than in a mature design tool that has had a decade to build those features.

That distinction matters for how you plan a session. Quality problems you fix with better prompts; collaboration and history problems you fix with habits, and habits cost no usage at all. The ones that affect app design most are below, each with the workaround that the Help Center or experience suggests:

• No version history: save checkpoints by telling Claude to save before a big change
• Comments can vanish: check the comments view, or paste feedback into chat
• Large codebases lag: link big repositories from Claude Code instead of the browser
• Multi-person editing is basic: have one person edit at a time and others comment
• "Chat upstream error": start a new chat tab inside the same project

None of these is fatal, but together they shape a working style: one editor at a time, frequent checkpoints, and a habit of confirming that feedback landed. The missing version history is the one that bites hardest, because a single sweeping chat request ("make it more modern") can rewrite every screen at once, and without a saved checkpoint there is no simple way back. The design-system import limitation, "only as good as its source," mostly affects paid users, but it also applies to the brief a free user writes: vague brand notes produce vague consistency.

The generic-look problem

The deeper failure mode is aesthetic. Language models produce designs by drawing on patterns they have seen, and without strong constraints, those patterns converge on a familiar look: centered hero, soft gradients, rounded cards, the same handful of fonts. Each individual design looks competent. A product built from them looks like every other product built the same way, and users notice even when they cannot say why.

Anthropic says as much in its admin guide for teams: "Turning on Claude Design without a design system in place means your team gets functional but generic output" - Claude Help Center. The defense is specificity, applied early. A brief with exact colors and fonts, references to a few products whose feel you want, and explicit instructions about what to avoid ("no gradients, no centered hero, left-aligned headlines") moves the output away from the average. Uploading screenshots of designs you admire, which the Help Center supports for "make it look like this" requests, does more than any adjective. Our guide to differentiated design with AI covers the techniques in depth.

Accessibility that looks right but is not

AI design reviews catch measurable accessibility issues, such as text contrast, but a design that passes a contrast check can still be hard to use: tap targets too small for a thumb, information conveyed only by color, error messages that rely on a red outline. Claude's own review helps, and the editor's color picker now "tells you whether its contrast against the background is good or poor," but neither replaces testing with real people and, ideally, with a screen reader on the finished app.

Treat the design's accessibility as a hypothesis that implementation must prove. Ask your coding agent to use semantic HTML and labelled controls, and run an automated accessibility check on the built app before launch. Our pre-launch security and quality checklist for AI-built apps covers the checks worth running.

The prototype that pretends to be a product

The most expensive failure is not in the tool but in how its output gets used. A clickable prototype from Claude Design looks and feels like an app, and that fluency tempts builders to show it as one: to put it in front of customers, collect sign-ups through it, or estimate the remaining work as "just wiring it up." The remaining work is almost always larger than that, because the hard parts of software (data, accounts, payments, edge cases, reliability) are exactly the parts a design does not contain.

The workaround is a discipline rather than a feature: label prototypes as prototypes, keep a written list of what the design assumes the backend will do, and estimate implementation from that list, not from how finished the screens look. If you want a realistic view of what building the rest costs, our breakdown of what it costs to build an app with AI is a good reality check.

The usage cliff

Finally, there is the failure mode specific to Free: running out mid-session. Because design shares one pool with all your Claude use, and Free has no usage credits to extend it, a long refinement session can stop with the work half done. The defenses are the habits from earlier sections: a complete brief up front, variations before refinement, direct edits instead of chat for small changes, batched chat messages, and checkpoints. On Free, a well-run session designs a complete core flow; a badly run one designs one screen several times.

12. Why Anthropic Made Design Free, and What Comes Next

It is worth asking why a company would give away a product that, six months earlier, it sold only to paying subscribers, because the answer predicts how the product will change. The surface explanation, that free features attract users, is true but incomplete. The structural explanation starts with what a design costs Anthropic to produce and what it leads to afterwards.

A design in Claude is an artifact generated by the same models that answer chats, so its cost is tokens, and the cost of tokens per unit of work keeps falling. Anthropic filed its S-1 on October 26 for a proposed initial public offering - Anthropic. The filing gives the numbers: with Claude Opus 5.5, the company "reduced customers' cost per task by approximately 40% compared to Opus 5," and with Claude Fable 5.1 it cut the cost of typical workloads by about 25% - SEC. Each model generation makes a free design cheaper to serve. We covered what else the filing means for builders in our Anthropic S-1 analysis.

The free tier as the top of a funnel

The same S-1 states the purpose of free tiers directly: Anthropic offers free access "in significant part to build awareness of, familiarity with, and engagement with our products," and seeks "to convert these users into paying customers over time," while acknowledging that "free users may be satisfied with the limited functionality available in free tiers." Read against the plan table in Section 2, the conversion path for Claude Design is visible: the canvas is free, but saved design systems, Claude Code and Opus are not.

That is a precise line. The free product is good enough to design an app's first version, which is the moment a builder's enthusiasm peaks. The paid product is what you need the second time: when the brand must hold across fifty screens, and when the design must become code in the same tool. Anthropic is giving away the first draft and charging for continuity and implementation, the two things a builder who succeeded with the first draft is most likely to want next.

What the market heard

Investors read the original launch as a threat to design-tool seats. Figma's stock fell about 7% on April 17, the day Claude Design launched, three days after Anthropic's chief product officer Mike Krieger resigned from Figma's board - DesignRush. The pressure did not stop there: Figma's shares fell 16% across April, with The Motley Fool naming Claude Design among the causes - The Motley Fool. The partner list Anthropic built since points to a more nuanced position: Claude Design sends work to Canva, Adobe, Gamma, Miro and others, which positions it as the place a first draft starts rather than the place a professional design is finished.

From first principles, that split follows the economics. When the cost of a first draft falls toward zero, the scarce inputs become judgment (knowing which of three directions is right), brand (a visual identity worth keeping consistent) and implementation (turning a design into reliable software). Tools that sell first drafts face falling prices; tools that hold brand systems, collaboration and production workflows keep their value. Claude Design's own plan structure, with design systems on paid plans, shows Anthropic betting on the same split.

The design system becomes a text file

The most important trend for builders is quieter: the design system is turning into a plain text file that any AI agent can read. Claude Code's documentation asks you to put design tokens in CLAUDE.md. Google Stitch exports and imports design rules as DESIGN.md. And on October 22, Anthropic donated the Agent Skills standard to the Agentic AI Foundation under the Linux Foundation, saying it is "committed to keeping Agent Skills open, community-driven, and vendor-neutral" - Anthropic.

Put together, these point to a near future in which your brand's rules live in your repository as files that every design tool and coding agent reads, rather than locked inside one vendor's design tool. For a builder, the practical move today is to write those files now: a short design-tokens section in your agent instructions file, kept current, means any tool you adopt later starts from your brand rather than its defaults. Our guide to shipping an agent skill for your product explains how the skills format works.

What to expect next

The direction of travel from April to October suggests three near-term changes. The standalone app disappears on December 14, and design becomes purely a capability inside conversations and Claude Code. Designs become live: artifacts can already pull data through connectors on paid plans, and the same October 8 release added Dashboards and Motion, so the line between a mockup and a working interface will keep blurring. And the handoff shortens further, because when the same session designs and implements, the "handoff" stops being a step at all.

None of that changes the core lesson of this tutorial. The tool will keep getting faster at producing screens; what it cannot supply is your decision about what the product should do and for whom. Builders who arrive with a clear brief, a real brand and a plan for implementation will get more from each improvement than those who arrive hoping the tool will decide for them.

13. Conclusion: Which Path Fits Your App

Claude Design on the Free plan is a complete tool for designing an app's interface: a canvas, a chat that can reason about layout, inline comments, direct editing and every export format, running on a model that ties the best Claude models on website-style design. Its free limits are real but predictable: no saved design system, no Claude Code, no Opus, and one shared usage pool. Planning around those limits, with a complete brief, variations before refinement and the cheapest refinement tool for each change, turns a free session into a finished, clickable flow.

The decision framework comes down to three questions. Do you need your brand remembered across many screens and sessions? If yes and you want to stay free, use Google Stitch's design-system extraction or keep a disciplined brief; if you can pay, Claude Pro's design systems solve it. Do you need the design to become code inside the same tool? If yes, Claude Pro at $20 with /design and /design-sync is the most direct path; if no, export HTML or send to v0 or Lovable on their free tiers. Do you need a design at all, or a running product? If the screen is a means to a running product, a full-app builder such as v0, Lovable or Founden may get you there faster, with the design resolved in Claude Design first.

For most solo builders starting today, the best free sequence is short: write the brief, design the core flow in Claude Design with Sonnet, test the clickable prototype with three real people, then export it to whichever coding path you will maintain. Upgrade to Pro when the second project starts, or when you catch yourself pasting the same brand brief for the third time. That is the moment the free plan has done its job.

This guide reflects Claude Design, its plans and its competitors as of November 3, 2026. Plan features, usage limits, model availability and competitor pricing change frequently, so verify current details on each vendor's pricing page before you rely on them.

What this article rests on

Every model figure linked above is read from its record, re-read from OpenRouter's model feed every 6 hours, so the figures on this page are current even where the prose around them is older. Prices are OpenRouter's listed price per million tokens: for a lab's closed models that is the lab's own list price, and for an open-weight model it is the price of the host OpenRouter routes to by default, which can differ from the lab's own API and from other hosts.

• Claude Opus 5.5 (Anthropic): $4 in and $20 out per million tokens, cached input $0.20, a 1M token window, listed 22 September 2026.
• Claude Sonnet 5.5 (Anthropic): $2 in and $10 out per million tokens, cached input $0.10, a 1M token window, listed 28 September 2026.

In this topic: Building with AI

• AGENTS.md vs CLAUDE.md: One File, Three AI Coders (2026)
• Build a Shopping Agent: Fork Claude Commerce 2026
• Lovable vs v0 vs Bolt: Cost Per App 2026
• Build a Mobile App With AI for iOS 27 (2026 Guide)
• Build a Cursor App From One Prompt 2026
• Build a Multi-Tenant SaaS App (2026)
• Build Your Own CRM Instead of Buying SaaS 2026
• When to Graduate From a Vibe-Coding Tool 2026

How do you build software with AI? Every guide on it

Data behind this topic: AI app builders and coding agents: free and first paid plans.