Claude Design vs Figma Make for websites and apps

Claude Design and Figma Make both take a prompt and return a working interface, and the right one depends on where your work already lives. Figma Make is the better choice when your designs and components are in Figma and you want the result hosted from Figma, with a backend and a custom domain. Claude Design is the better choice when you start from a prompt or a codebase, want the page to leave as plain HTML or continue in Claude Code, and would rather not add a seat to pay for.

One detail changes how to read the comparison. Figma Make's model selector includes Claude Opus 5.5, so the same model can sit behind both tools. What differs is the environment around the model, and what decides the look is the brief you hand it. Everything below comes from Anthropic's and Figma's own documentation and pricing pages.

The short answer#

Choose Figma Make if:

• your designs, components and library styles are already in Figma
• you want version history, a properties panel and annotations on the preview
• you want the app hosted where you made it, with a backend and a custom domain
• your team will reuse templates and Make kits across projects

Choose Claude Design if:

• you are starting from a written brief, screenshots or a codebase
• the deliverable is a landing page or a one-page site you will host yourself
• you want to export to HTML, PDF, PPTX or Google Slides, or hand off to Claude Code
• you already pay for Claude, or you want to try it on Claude's Free plan

Both tools build interactive pages in code, and both will reproduce real interaction when it is described precisely. These three pages are each defined by one interaction, the kind a prompt has to spell out because no default supplies it:

Each is a full art direction from the Thanor library, written as values, and each one is the sort of page both tools can build once those values are in the prompt.

What each tool is#

Figma Make is, in Figma's words, an AI-driven prompt-to-app tool that turns ideas and existing Figma designs into interactive apps. You work in two areas: a chat with the agent, and a workspace with a Browser tab to preview the app, a Files tab to read and edit its code, and a Review tab to inspect what each response changed. You can attach Figma frames and components, images and text files, ask it to search the web or fetch a URL, and run several chats at once in one file. It is available on the Starter, Professional, Education, Organization, Government and Enterprise plans, and full access comes with a Full seat.

Claude Design is Anthropic's tool for designs, interactive prototypes, one-pagers and landing pages made by talking to Claude. It launched on April 17, 2026 as an Anthropic Labs research preview on Claude Opus 4.7, and since September 16, 2026 it has been a template inside Claude: you start it from any conversation, from the Artifacts tab, or from Claude Code with /design. Anthropic's help article lists it on every Claude plan, including Free. The standalone site at claude.ai/design closes on December 14, 2026.

So one lives inside a design tool and reaches toward code, and the other lives inside an assistant and reaches toward design. That origin explains most of the rows in the table below. If Google's tool is also on your list, the Stitch comparison runs the same test, and our Claude Design review covers what it produces from a plain request.

Claude Design and Figma Make side by side#

The rows that decide most choices are design context, hosting and price. The sections below take them in turn, then come back to the one thing both tools leave to you.

Where your design context lives#

Figma Make reads Figma natively. You attach a frame or a component through Add context, or paste the frame straight into the chat, and Make builds from it. Figma's FAQ is specific about one trap: do not type a link to the file into the prompt, because Make does not fetch a design that way and the model may guess at the link instead.

For a team, the deeper context is the Make kit. Figma's help center describes a kit as three things together:

• npm packages that tell Make which components, styles and tokens to use
• variables and styles imported from your design library
• written guidelines on how those assets should look and behave

Every Make project also gets an empty Guidelines.md file, and Figma's developer docs say it is the set of guidelines Make always looks at first. You can write rules into it, upload more .md files into the Guidelines folder, or ask Make to generate guidelines for you. The template inside the file carries Figma's own advice: more context is not always better, because it can confuse the model.

Claude Design starts from code and files instead. It imports a design system from a GitHub repo, design files, uploads or a local codebase, and in Claude Code the /design-sync command pulls one in. Anthropic says Claude checks its output against that system and corrects it before you see it. New projects inherit your organization's default system automatically.

Either way, the system covers components, and a landing page needs more than components. A library holds the button and the card. It does not hold the hero film, the scroll sequence or the headline at 9rem. In Make, those belong in Guidelines.md. In Claude Design, they belong in the prompt. The guide to design tokens for AI-built sites covers what goes where.

The model underneath#

Figma Make runs on a default model, and its model selector offers others alongside it. At the time of writing the list includes Claude Opus 5.5 and Claude Sonnet 4.5 from Anthropic, Gemini 4 Argon and a Gemini Flash model from Google, and two OpenAI models. Figma does not name the default and says it may change. Credit use differs by model, sometimes a lot: Figma warns that some models may use substantially more credits per task, and the two Gemini models are on a promotion that lowers their credit cost until November 30 and December 31, 2026 respectively. You can switch models at any point in a conversation.

Claude Design runs on Claude; it launched on Claude Opus 4.7, and Anthropic's current help article does not name the model it uses. That makes the comparison simpler than it looks. If you pick Claude Opus 5.5 inside Figma Make, the same model is writing the code in both tools. What the model receives is what differs: in Make, your Figma frames, your kit and your guidelines; in Claude Design, your prompt, your imported system and your references. For how Opus 5.5 behaves on design work, see the Opus 5.5 write-up, and for the wider field, the model comparison for web design.

Model choice matters at the margins, and Figma's selector is a real advantage for anyone who wants to compare engines on one file. It matters far less than the specification. A model handed "a playful bubble-tea site" fills the open values from the middle of the category whichever company trained it.

Editing after the first draft#

Figma Make gives you Figma's hands. The edit tool lets you point at an element in the preview and change it in a properties panel like Figma Design's. The draw tool lets you mark up the preview and attach those marks to a prompt, and annotations leave instructions on specific elements. The code editor is open: you can edit files, paste your own code, review each response's changes, revert to a checkpoint, and step back through version history.

Claude Design gives you three channels, and Anthropic is clear about which to use for what:

1. Chat for structural changes, new sections and anything that needs explanation.
2. Inline comments for targeted, component-level changes, such as "make this button padding larger".
3. Direct editing on the canvas to drag, resize and align elements for quick visual moves.

Anthropic also lists the limits plainly: there is no version history yet, inline comments occasionally fail to appear (pasting the feedback into chat works around it), and two people editing at once is still basic. The workaround for history is a sentence, "Save what we have and try a completely different approach", which Anthropic suggests before any big change.

For someone who thinks in Figma, Make's editing will feel familiar from the first minute. For someone who thinks in sentences and values, Claude Design's chat-first loop suits the way they already work. In both, the edits that keep a page directed are written as values: "headline tracking -0.03em", "replace #6B7280 with #A39E93", "reveal at 680ms, not 300ms".

Publishing, code and hosting#

Figma Make hosts what you build. You publish to the public web or to your organization with a dedicated URL, and you can connect a custom domain; Figma's FAQ says Professional plans can connect 10 custom domains, shared with Figma Sites, and that hosting is included in paid plans while publishing is in beta. You can add a backend for data, logins and secrets, and a Google Analytics ID. Two notes matter for a marketing site: a published app is not indexed by search engines by default (a setting changes that), and Figma says Make does not yet offer specific SEO controls.

The code leaves too. A Full or Dev seat can download a .zip of every file, and Make can push to a GitHub repository, one way only, so edits made in GitHub do not flow back. On paid plans you can copy a preview as layers into Figma Design.

Claude Design does not host. It exports a .zip, a PDF, a PPTX, Google Slides or standalone HTML, and sends designs to Netlify, Vercel, Wix, Lovable, v0, Replit, Canva and other tools. The handoff to Claude Code continues from your existing work instead of starting over from a screenshot, which is the route to a real repository. The artifact guide covers shipping a Claude Design page step by step.

Price, seats and credits#

Figma Make is priced through Figma seats and AI credits. On Figma's pricing page, at the time of writing:

• Starter: free, with 150 AI credits a day up to 500 a month. Figma's FAQ adds that Starter cannot bring team libraries into Make and can publish to the public web only alongside a Figma Community publish.
• Professional: a Full seat is listed from $16 a month with 3,000 AI credits a month.
• Organization: a Full seat is $55 a month, billed annually, with 3,500 credits.
• Enterprise: a Full seat is $90 a month, billed annually, with 4,250 credits.

Make is included on the Full seat. Dev, Collab and View seats get 500 credits a month and can try Make in drafts, without sharing or publishing. Extra credits can be bought on any plan.

Claude Design has no separate price. It is included on the Free, Pro, Max, Ultra, Team and Enterprise plans, and design work draws from the same usage limits as chat and Claude Code; when you hit the limit, it pauses until the limit resets unless usage credits are turned on. Claude's plans are on Anthropic's pricing page.

For a person who already pays for Claude, Claude Design costs nothing extra. For a team already paying for Figma Full seats, Make is already in the plan. Each tool is cheapest for the people already inside its ecosystem.

The look comes from the brief in both#

A model with no values to follow fills each open slot with the most typical choice for that kind of page. That is how AI builders converge on a neutral sans, a cool gray, 8px corners and a short fade on every section, and an empty Guidelines.md or a one-line prompt leaves every one of those slots open. Choosing a different tool does not change the mechanism.

What moves it is a specification. For a page like the two below, that means writing down:

• the palette in hex, with a rule for where the accent may appear
• the typefaces and a size scale, with the display size and tracking
• the spacing ramp and the corner radius for each kind of element
• the motion, as a driver, a curve and a duration: scroll scrubbed across 400vh, cubic-bezier(0.22, 1, 0.36, 1) at 700ms
• the section order with the one interaction in each block
• the media the page uses, as files

In Figma Make, that list goes into Guidelines.md, the file Make looks at first. In Claude Design, it goes at the top of the conversation, before the first request. The Claude Design prompt guide shows the full skeleton, and the same block can go into Make's guidelines file as it is.

The verdict on Claude Design vs Figma Make#

If your design work lives in Figma, use Figma Make. It reads your frames and components natively, its editing tools will feel familiar, it keeps version history, and it can publish the result with a backend and a custom domain without leaving Figma. Its model selector lets you run Claude Opus 5.5 or Gemini 4 Argon on the same file and compare.

If your work starts from a brief, a codebase or a conversation, use Claude Design. It is included in every Claude plan, it exports in more formats, it leaves you in control of hosting and of every tag in the page's head, and its handoff to Claude Code turns the design into a project without starting over.

For a marketing website specifically, the hosting row deserves the most weight. Figma Make's hosting is convenient and its indexing is a setting away, but Figma says it has no specific SEO controls yet. A Claude Design page exported as HTML can live anywhere and carry whatever metadata you write. Teams that rely on search traffic should weigh that before choosing.

Moving work between the two#

From Claude Design to Figma Make: export standalone HTML and paste it into Make's code editor, which accepts your own code and lets you keep iterating by prompt. Or attach screenshots of the Claude Design canvas as references and paste your original prompt into Guidelines.md.

From Figma Make to Claude Design: download the .zip or push to GitHub, then import that repository into Claude Design as a design system, or attach screenshots of the preview with your guidelines file as the prompt.

From either one back to a design tool: Make copies a preview into Figma Design as layers on paid plans, and Claude Design exports PDF, PPTX or Google Slides. If you built design systems in the standalone Claude Design site, move them into Claude before it closes on December 14, 2026.

Paste one art direction into both#

The specification in the list above is what the Thanor library sells, one finished art direction per design. Each design is a live, moving preview with a long, exact prompt behind it: the palette in hex, the typefaces and scale, spacing, easing curves and durations, the section order and every interaction, and the hosted films, cut-outs and stills the page uses. Paste a prompt into a Claude Design conversation, or into Guidelines.md in Figma Make, and the model builds that site. The Thanor MCP connects the library to Claude, so Claude can search the catalog and pull a design's full art direction without the clipboard; it is included in every paid plan, and the roundup of MCP servers for web design shows where it sits among the others.

Start with one comparison you can see. Open Vesperion and copy its prompt; it is free with a free account. Paste it into Claude Design and into Figma Make with the same model selected, and compare the two pages against the preview. The interactive pages above, Tapioca, Kickflip and Grumps, are on the paid plans listed on the pricing page.