Claude Design vs Google Stitch for websites

Claude Design and Google Stitch both turn a written description into an interface you can click through, and for a website the better pick depends on what you are making. Claude Design is the stronger tool for a marketing site you intend to ship. It builds in code from the first draft, Anthropic positions it for prototypes with video, shaders and 3D, and the result exports as standalone HTML or goes straight to a host.

Stitch is the stronger tool for exploring app screens and flows on an infinite canvas, it can be steered by voice, and its DESIGN.md format makes a design system portable between tools. Google lists no price for it.

Neither tool decides how your page looks. Both return a version of the category average when the prompt is a mood, and both follow exact values when the prompt carries them. Everything below comes from Anthropic's and Google's own announcements and documentation.

The short answer#

Choose Claude Design if:

• the deliverable is a landing page or one-page site that has to go live
• the page needs a hero film, scroll-bound motion or a 3D object
• your product already has a codebase or design system you want to import
• you want to continue the build in Claude Code with the same context

Choose Google Stitch if:

• you are exploring several directions for an app's screens and flows
• you think out loud and would rather talk a design through by voice
• you want the design system as a portable file other tools can read
• your next step is Google's own tooling, AI Studio or Antigravity

What neither tool supplies is the subject of the page. A mascot, a product object, a film, the way the headline layers over a character: those come from a brief, and both tools render them faithfully once they are written down. Here is what that looks like on SaaS and app heroes:

Each is a full art direction from the Thanor library, written as values. Either tool can build from text like that; neither will arrive there from "a modern SaaS landing page", for the reasons the sameness piece lays out. If SaaS is your case, the SaaS landing page prompt covers the section order in detail.

What each tool is#

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 running on Claude Opus 4.7. Since September 16, 2026 it has lived inside Claude itself: Anthropic's help article describes it as a template that any conversation, the Artifacts tab or Claude Code (with /design) can start from. It is available on every Claude plan, including Free, and the original standalone site at claude.ai/design closes on December 14, 2026. Our Claude Design review covers what it produces from a plain request.

Google Stitch is a design tool from Google Labs, and its history is a run of quick releases:

• May 20, 2025: Google introduced Stitch as "a new experiment from Google Labs", built on Gemini 2.5 Pro. It turned text or images (sketches, screenshots, wireframes) into UI designs and front-end code, and designs could be pasted into Figma.
• December 10, 2025: Gemini 3 came to Stitch, along with Prototypes, which connect screens into working flows.
• March 18, 2026: Google relaunched it around "vibe design", with an infinite canvas, a design agent that reasons across the whole project, voice input, a Play button for prototypes, DESIGN.md, an MCP server and SDK, and export to AI Studio and Antigravity.
• May 19, 2026: at I/O, the Stitch Agent began streaming its work onto the canvas as it designs, projects could start from codebases and design files, and finished screens could be published to the web with Netlify.

Both tools now accept a prompt, references and an existing design system, and both end in code. They differ in what they are built to finish.

Claude Design and Google Stitch side by side#

The rows that matter most for a website are the prototypes row and the "what leaves the tool" row. A website is judged on motion and media in a way an app screen is not, and the next sections take those dimensions one at a time.

Starting point: a mood or a specification#

Google's March post frames vibe design as starting from a business objective, the feeling you want users to have, or examples that inspire you, instead of from a wireframe. Its voice mode goes further: the agent can interview you to design a landing page and make live changes, such as showing the same screens in different palettes. That is a fast way to find a direction when you do not have one.

Anthropic's guidance for Claude Design asks for something closer to a brief: the goal, the layout, the content and the audience, plus screenshots when you want "make it look like this". Claude asks clarifying questions when something is missing.

Both approaches settle structure and content. Neither settles the look, because a feeling and a goal name no values, and every value left open gets filled from the middle of what similar pages look like. Compare the same request at two levels of detail:

MOOD
A calm, premium landing page for a ceramics studio.
SPECIFICATION
page #F2EEE6, text #1F1B16, muted #7A6F60, one accent #B5502E on the button only
display serif at clamp(3rem, 8vw, 7.5rem), line-height 0.95, tracking -0.02em
body 17px / 1.65, measure 62ch, two weights
reveal: opacity and translateY(16px), cubic-bezier(0.22, 1, 0.36, 1), 720ms, first screen only
1. hero: one bowl as a cut-out, centered, turning 12deg as the page scrolls 100vh
2. three pieces in an asymmetric 5/7 grid, captions under each
3. the studio in two sentences and one photograph
4. one button, repeated in the footer

The first line gets you a beige page with a centered headline in both tools. The second gets you something close to the page it describes, in either one. The difference between them is the work, and it is the same work whichever canvas you open. For how to write that second block for Claude specifically, see the Claude Design prompt guide.

Design systems: DESIGN.md or an imported codebase#

Stitch's design system lives in DESIGN.md, a format Google open-sourced as a draft specification on April 21, 2026. According to the spec, a DESIGN.md is a Markdown file with YAML tokens at the top and prose rationale underneath. The token groups are colors, typography, rounded, spacing and components, and the prose sections run in a fixed order: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components, and Do's and Don'ts. A command-line linter checks broken references and WCAG contrast, and an exporter writes Tailwind themes and W3C design tokens.

It is a good format, and its gaps are exactly the website parts. There is no token type for motion, so easing curves, durations and triggers have nowhere to go, and there is no slot for section order or for media. The spec says unknown section headings are preserved rather than rejected, so you can add your own:

## Motion
Entrances use cubic-bezier(0.22, 1, 0.36, 1) at 720ms, first screen only.
The hero object is bound to scroll across 100vh. Nothing else moves.

Claude Design imports a system from a GitHub repo, design files, uploads or a local codebase, and in Claude Code the /design-sync command pulls it in. Anthropic says Claude checks its own output against that system and corrects it before you see the result. Its own known limitations add a fair warning: the import is only as good as its source, and a messy codebase shows up in the output.

The shared limit is that a product's design system describes buttons, inputs and cards. It does not describe a hero film or a scroll sequence, so for a marketing page the system keeps the components on brand and the prompt has to carry the rest.

Motion and media, where a website differs from an app screen#

An app screen is mostly a set of states. A marketing page is judged on what happens between them: the entrance, the scroll, the response to the cursor, the film behind the headline. This is where the two tools are built for different jobs.

Anthropic's launch post lists "frontier design" among Claude Design's uses: code-powered prototypes with voice, video, shaders, 3D and built-in AI. Because the prototype is code from the first draft, a scroll-bound film or a cursor-driven character can be built and tested inside the tool. Stitch's prototypes connect screens into flows that you preview with Play, and Stitch can propose the likely next screen from a click. That suits checkout flows and onboarding. Google's announcements say little about page-level motion such as a scroll-driven film, so plan to specify it for whatever builds the code after Stitch.

Pages like these need three motion facts in the brief, whichever tool reads it:

1. The driver. Scroll position, the pointer, or time.
2. The curve and the duration. cubic-bezier(0.22, 1, 0.36, 1) at 700ms for an entrance, 200ms for a hover, a scrub lag around 0.4s for a scroll film.
3. The scope. Which single element moves, and the instruction that nothing else does.

Write those into Claude Design's prompt and it builds them. Write them into Stitch's DESIGN.md as a Motion section, and they travel with the design to the coding agent that builds it.

Code, export and getting it live#

Claude Design's export menu covers a .zip, PDF, PPTX, Google Slides and standalone HTML, and it can send a design to Netlify, Vercel, Wix, Lovable, v0, Replit, Base44, Canva and several other tools. The handoff to Claude Code is the deeper route: Anthropic says Claude Code continues from your existing work instead of starting over from a screenshot, so the tokens and structure carry into a real project.

Stitch's route runs through Google's stack. Designs export to AI Studio and Antigravity, a shareable link comes from AI Studio, and since I/O screens can be published straight to the web with Netlify or taken to Antigravity to connect backend logic. The Stitch MCP server and SDK let other coding agents read a Stitch project directly.

Both routes end at a URL. The question is what you will do next: continue in Claude, or continue in Google's tools. If your team lives in Figma instead, the Figma Make comparison covers that third route. If the next step is a full build, the Claude Code guide covers that side, and the artifact guide covers shipping a single page straight from Claude.

Price and limits#

Claude Design is included on the Free, Pro, Max, Ultra, Team and Enterprise plans. Design work counts toward the same shared usage limits as chat and Claude Code; it used to have its own weekly allowance, which no longer applies. When you reach your limit, Claude Design is unavailable until it resets, unless usage credits are turned on. Claude's plans are on Anthropic's pricing page.

Stitch is a Labs experiment, and Google's announcements list no price for it. Usage is measured in credits, and the limits have changed more than once since launch, so check the current ones inside Stitch rather than trusting any figure you read elsewhere, including here.

Each tool also documents its rough edges, and they are worth knowing before you commit a project:

• Claude Design: no version history yet, so save before a big change; multi-person editing is basic; very large codebases can lag in the browser and are better linked from Claude Code.
• Stitch: it is still an experiment, and Labs products change their features and limits as they evolve; what you build on its export paths today may move.

For a sense of the models underneath, the Gemini 4 Argon write-up covers Google's newest model on design work, and the model comparison puts the field side by side.

The verdict on Claude Design vs Google Stitch#

For a website, use Claude Design. It builds in code from the first draft, handles the motion and media a marketing page is judged on, exports a page you can host the same day, and hands off to Claude Code when the page has to become a project. It is also included in the Claude plan you may already have.

For an app, start in Stitch. It is quick at generating many directions, its canvas holds them side by side, its prototypes show flows across screens, and its voice mode is a good way to find a direction you could not have described in writing. DESIGN.md is a useful open format that outlives any single tool.

The two also work in sequence. Explore in Stitch, keep the direction you like, export its DESIGN.md, add a Motion section, a numbered section order and the media in prose, and paste the whole file into a Claude Design conversation to build the page. Every step of that chain depends on the same thing: the values written down.

Moving a design between the two#

From Stitch to Claude Design, carry text rather than pictures. The DESIGN.md file holds the tokens and the rationale; screenshots of the screens you liked work as references for "make it look like this". Paste both into the conversation, then add what DESIGN.md cannot hold.

From Claude Design to Stitch, publish the page first. Stitch can extract a design system from any URL, so a live page is the cleanest way to hand Stitch your palette and type.

If you built design systems in the standalone Claude Design site, move them into Claude before it closes on December 14, 2026. Anthropic's migration article explains the move: one run brings over every design system in your organization, and chats and comments stay behind.

Give either tool an art direction#

The values in the examples above are the part most people skip, and the Thanor library is a shelf of them, finished. Each design is a live preview with a long, exact prompt: 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 one into a Claude Design conversation and it builds that site; paste the tokens into Stitch's prompt or a DESIGN.md and add the motion as prose. The Thanor MCP lets Claude search the catalog and pull a full art direction without the clipboard, and it comes with every paid plan.

You do not need it for everything. If you are designing app screens inside an existing design system, your system is the art direction, and either tool will do well with it alone. A library like this earns its place on the pages a system does not cover: the landing page, the launch page, the portfolio, the hero that has to be remembered.

To test the difference, open Vesperion and copy its prompt; it is free with a free account. Paste it into a Claude Design conversation and into Stitch, and compare what each does with the same values. The SaaS heroes above, Judgy, Caravan and Lorikeet, are on the paid plans listed on the pricing page.