Claude Design vs Google Stitch

Most comparisons of these two tools list features and plans. This one looks at a narrower question: for each tool, where does the design system come from, how is it stored, and how does it reach code. The open DESIGN.md format is part of the answer for one tool and an open question for the other. This site is independent and is not affiliated with or endorsed by Google or Anthropic.

What are Claude Design and Google Stitch?#

Claude Design is a product of Anthropic Labs. Anthropic's announcement is dated April 17, 2026, and describes it as a way to create prototypes, slides and one-pagers: you describe what you need, Claude builds a first version, and you refine it through conversation, inline comments, direct edits or sliders. The announcement says it is powered by Claude Opus 4.7. Anthropic's help center now describes it as an artifact template that works in any Claude chat, in Claude Code and from the Artifacts tab, and says the standalone claude.ai/design site closes on December 14, 2026.

Google Stitch is a Google Labs tool for generating user interfaces with AI. Google's DESIGN.md announcement is dated April 21, 2026, the day Google open-sourced the draft DESIGN.md specification. Stitch's own documentation describes a canvas where you generate screens from a prompt, iterate on them, turn them into an interactive prototype and download the result.

Both products are young and change often. Everything below is as of November 2026.

How does each tool get your design system?#

This is the clearest difference between the two.

Claude Design#

Anthropic's guide to setting up a design system says Claude extracts the system from assets you provide. The listed sources are codebases with a design system or component library, slide decks or documents that reflect your visual identity, and brand guideline assets such as logos, color palettes and typography specs. In chat, the guide adds connected apps, uploaded files, Figma files and fonts, and says this works best for brand systems.

Claude then generates a system with a color palette, typography, components and layout patterns. The guide recommends validating it with a test project (a landing page, a dashboard or a one-pager) and uploading more or different assets if the first extraction misses the brand. It also notes that finished examples such as landing pages help more than specs alone.

For design systems that already exist as React components, Claude's product page and the setup guide point to /design-sync in Claude Code, which the guide says reads tokens and components directly.

Google Stitch#

Stitch's documentation lists three paths to a DESIGN.md: let the agent generate it from a described aesthetic, derive it from branding by providing a URL or image, or write it by hand. It also has a page on importing from your codebase, which offers a prompt you paste into a coding agent (the page names Gemini, Claude Code, Cursor and Antigravity) so the agent reads your source and writes a DESIGN.md, plus an automated option called Stitch Design Skills.

The practical difference: Claude Design extracts a design system inside Claude from whatever you hand it. Stitch's documented codebase path produces a file outside Stitch first, and then imports that file.

Where is the design system stored?#

Sources: the Claude Design product page, the setup guide and Stitch's view, edit and export page.

Two details are worth separating. In Claude Design, a team usually sets the system up once and everyone's work picks it up afterward, and publishing it makes it the default for projects created in that organization. In Stitch, a default design system applies to screens generated after you select it; existing screens are not updated retroactively and must have the system applied individually.

Stitch's documentation says edits in the Design System panel update both the structured tokens and the DESIGN.md summary, and that finer changes such as component guidelines or do's and don'ts are made in the markdown itself. It calls the exported DESIGN.md "a standalone document" that does not depend on Stitch.

How does a design reach code?#

Claude Design to Claude Code. Anthropic's announcement says Claude packages a design into a handoff bundle that you can pass to Claude Code with a single instruction. The help center names two destinations, a local coding agent and Claude Code on the web. In the other direction, /design-sync pulls a design system into Claude Code, and /design lets you create, edit and sync design projects from there. Claude Design also exports to PDF, PPTX, HTML and a .zip, and connects to apps such as Canva, according to the help center and product page.

Stitch to code. Stitch's documentation says you select screens and download a zip, and that it creates both image and HTML outputs. It describes the HTML as a base that an LLM can translate, alongside a reference image, into React, Angular, Vue, Jetpack Compose, Flutter or SwiftUI. Stitch also runs a remote MCP server so tools such as Cursor, Claude Code and the Gemini CLI can work with your projects directly. Its documented tools include creating, updating, listing and applying design systems, and generating or editing screens from text.

The two handoffs differ in kind. Claude's is a bundle between two Anthropic products, so the coding agent starts from the design work instead of a screenshot (Anthropic's wording is that Claude Code "continues from your existing work"). Stitch's is a set of open outputs, a zip plus an MCP server, aimed at whichever tool you already use. For how a file-based design system compares with a live server, see DESIGN.md vs MCP servers.

Where does DESIGN.md fit in each tool?#

In Stitch, it is the design system's written form. Google's documentation describes DESIGN.md as a plain-text document with two layers: YAML front matter holding machine-readable tokens, and a markdown body explaining the rationale. It is read by Stitch when generating screens and exported with your project. The open spec and the @google/design.md command line tool (lint, diff, export, spec) work on any such file, whether Stitch produced it or you wrote it. The spec guide and how to write a DESIGN.md cover the format itself.

In Claude Design, it is not documented. Anthropic's setup guide does not mention DESIGN.md. Some community tables claim native support; we found no Anthropic page that says so. The supported route is the list above, and a DESIGN.md can plausibly be one more document you upload, or part of a codebase Claude reads. How Claude Design weighs such a file against everything else is not documented, so treat the extracted system as the thing to verify, not the file.

Claude Code is a separate case. It does not read DESIGN.md automatically either, but a one-line reference in its instructions file makes it work, as covered in DESIGN.md with Claude Code. Stitch's own import prompt works in Claude Code, so a file written there can be loaded into Stitch.

Which should you choose?#

None of this is exclusive. A team could extract a DESIGN.md from its codebase, load it into Stitch for exploration, and keep a Claude Design system for brand work. The risk of running both is two copies of the same decisions that drift apart, which is the same staleness problem described in agentic design systems. The usual fix is one source, such as a file in the repository, and the other tools derived from it.

What do the plans and availability look like?#

As of November 2026, Anthropic's product page says Claude Design is included in every plan, including Free, and that artifacts count toward plan usage limits. The setup guide says design systems are in beta on Pro, Max, Ultra, Team and Enterprise, on by default except on Enterprise, where an owner turns them on. We did not find plan or price details for Stitch on a page we could read, so check Google's site directly.

What are the limits of this comparison?#

• We did not test either tool for this article. Everything here comes from the vendors' own documentation and announcements, linked above.
• Both vendors change their products quickly. Claude Design's help center and product page already describe a different packaging (an artifact template, a retiring standalone site) than the April announcement.
• Stitch's DESIGN.md support is documented, but the format is an alpha spec, and Google's repository says the spec, token schema and CLI are still in development.
• A design system that a tool extracts is an interpretation. Anthropic's own guide recommends testing the result with sample projects, and the same applies to a DESIGN.md that an agent generates.
• Our viewer renders and lints an existing DESIGN.md in your browser; it does not generate one, and files are never uploaded or stored. It can check a file exported from Stitch before you share it elsewhere.

Related reading: what agentic design is, the tools compared and our notes on Stitch and DESIGN.md.

---

Next step: if you want the portable option, read how to write a DESIGN.md, then check a file in the viewer or browse real files in examples.