Google Stitch and DESIGN.md
On this page
DESIGN.md originated in Google Stitch, a Google Labs AI design tool, where it carries design rules between projects and to other tools. According to Google, Stitch can generate, export and import the file, and Google open-sourced the draft specification on April 21, 2026. To use a Stitch file in a coding agent, keep it at the repo root, lint it, and reference it from the agent's instruction file.
This page covers the Stitch side of the format: where DESIGN.md came from, how Stitch creates, applies and exports it, and what to do with the file afterwards. Statements about Stitch come from Google's posts and from the DESIGN.md section of the Stitch documentation, linked inline. md-design.io is independent and is not affiliated with or endorsed by Google.
What is Google Stitch?#
Google describes Stitch as a Google Labs product and "an AI-native software design canvas" that turns natural-language descriptions into high-fidelity UI designs (Google, March 2026). That post lists a redesigned infinite canvas that accepts images, text or code as context, a design agent, an agent manager for parallel ideas, voice critiques and interactive prototyping.
For developers, the same post says designs can be exported to tools such as AI Studio and Antigravity, that a Stitch MCP server has been released, and that an SDK and skills are available. A later Google post, from the I/O announcements on May 19, 2026, describes real-time streaming of designs to the canvas and export to Google Antigravity (Google, May 2026).
When did DESIGN.md come out of Stitch?#
Two dates matter, and Google's posts support both.
| Date | Event | Source |
|---|---|---|
| March 18, 2026 | Google's post "Introducing 'vibe design' with Stitch" calls DESIGN.md "an agent-friendly markdown file" for exporting or importing design rules to or from other design and coding tools | Google blog |
| April 21, 2026 | Google announces it is releasing the draft DESIGN.md specification as open source, "so it can be used across any single tool or platform" | Google blog |
The term "vibe design" in that title is explained in what vibe design is. Some third-party write-ups place the introduction around March 19, 2026, or call the release "Stitch 2.0". Google's own post is dated March 18 and does not use a version number. The April 21 post is the one that describes the open-source release; the spec and CLI live in the google-labs-code/design.md repository.
What does DESIGN.md do inside Stitch?#
According to Google's April post, DESIGN.md lets you export or import your design rules from project to project, so you do not rebuild them for each new Stitch project. Google says this helps Stitch grasp the reasoning behind a design system and generate interfaces that match a brand. The same post says agents can learn what a color is for and check their choices against WCAG accessibility rules instead of guessing intent.
Stitch's documentation frames the file next to the other Markdown files in a repository: README.md tells humans what the project is, AGENTS.md tells coding agents how to build it, and DESIGN.md tells design agents "how the project should look and feel" (Stitch docs). When Stitch reads a DESIGN.md, the screens it generates follow the same palette, typography and component patterns.
How does Stitch create a DESIGN.md?#
The documentation lists three paths, plus a separate route for existing code:
| Path | What Stitch documents | Source |
|---|---|---|
| Let the agent generate it | You describe the aesthetic in a prompt; Stitch generates a design system (colors, typography, spacing, component styles) and summarizes it as a DESIGN.md | Overview |
| Derive it from branding | You provide a URL or an image; the agent extracts palette, typography and style patterns and builds the DESIGN.md from them | Overview |
| Write it by hand | Markdown sections with optional YAML front matter for tokens, no special syntax | Overview |
| Import from a codebase | A prompt you paste into a coding agent (the docs name Gemini, Claude Code, Cursor and Antigravity) that reads your source and writes a DESIGN.md, or the open-source Stitch Design Skills | Import from your codebase |
Stitch Design Skills is described as an open-source collection of 13 agent skills in three plugins (stitch-design, stitch-build, stitch-utilities) that follow the Agent Skills standard. For a codebase, the docs recommend the plain prompt for a quick extraction, the extract-design-md skill for a thorough one, and the code-to-design skill for a full migration into Stitch. A Figma-to-DESIGN.md path is not described in the documentation we read.
How do you edit, export and import a DESIGN.md in Stitch?#
The view, edit and export page describes the workflow inside a project:
- Design System panel. It shows the resolved tokens (colors, fonts, roundedness, spacing, component patterns) for the selected screen. Edits made in the panel update both the structured tokens and the DESIGN.md summary.
- Project default. Selecting a design system as the project default applies it to screens generated afterwards. Existing screens are not updated retroactively; you apply the system to them one by one.
- Export. When you export a project, the DESIGN.md is included in the zip alongside the generated screens. The docs call the exported file "a standalone document" that does not depend on Stitch.
- Import. Google's April post says design rules can be imported from project to project. For a file that comes from code, the import page shows a prompt for the
manage-design-systemskill ("Upload .stitch/DESIGN.md to Stitch and create a design system from it"), which registers the design system at the project level.
Because the file is plain Markdown with YAML front matter, you can open an exported file in any editor, fix a value by hand, and bring it back.
How do you use a Stitch DESIGN.md in a coding agent?#
Treat the exported file like any other DESIGN.md. The steps are short, and the existing guides cover each in detail.
- Save it as
DESIGN.mdat the repository root. That name and location is the common convention, and it is where your instruction file will point. - Lint it. Run
npx @google/design.md lint DESIGN.md. The CLI validates structure, broken token references and WCAG contrast. See the CLI guide for the rules. - Look at it. Drop the file into the DESIGN.md viewer to see colors, type scale and components rendered. The viewer renders and lints an existing file in your browser; it does not generate files, and your file is never uploaded or stored.
- Point the agent at it. No agent loads the file automatically, so add a short instruction to the file your agent does read:
CLAUDE.mdfor Claude Code,.cursor/rulesfor Cursor, orAGENTS.mdfor several tools. The setups are in DESIGN.md with Claude Code, DESIGN.md with Cursor and DESIGN.md vs CLAUDE.md and AGENTS.md.
If you also want Stitch itself to stay connected to your code, Google's March post mentions an MCP server and SDK. How that compares with a static file is covered in DESIGN.md vs MCP.
What are the limits of a Stitch-exported file?#
- The format is alpha. The spec README says the version is "alpha" and to expect changes as it matures. As of November 2026 the newest npm release of
@google/design.mdis 0.4.0, from July 27, 2026. A later commit allowing interleaved YAML code blocks has been merged into the repository but is not in an npm release yet. - A file is a snapshot. Changes you make in code or in Stitch afterward do not update the other side. Decide which one is the source of truth and re-export or edit deliberately.
- Tokens do not cover everything. A DESIGN.md describes colors, typography, spacing, components and rationale. Layouts, copy, assets and interaction behavior are outside it.
- Generated is not the same as checked. A generated file can contain unresolved references, low-contrast pairs or missing sections. Lint it, and read the prose against your real brand rules. The how to write a DESIGN.md guide shows what a complete file contains.
- Stitch behavior can change. The product is still evolving, so re-check Google's posts before relying on a specific step.
Does DESIGN.md work without Stitch?#
Yes. After the April 21 release the format is an open specification with an Apache-2.0 repository, and a file written by hand or produced by another tool follows the same rules. Examples written by the community are collected in awesome-design-md and the examples gallery. For other ways to produce a file, see DESIGN.md generators and how the tools compare.
Next step: lint your exported file with npx @google/design.md lint DESIGN.md, view it in the DESIGN.md viewer, then wire it into your agent with DESIGN.md with Claude Code or the AI coding agents guide.
Frequently asked questions
Is DESIGN.md the same thing as Google Stitch?
No. Stitch is a Google Labs design tool. DESIGN.md is a file format that Stitch can generate, export and import. Google open-sourced the draft specification on April 21, 2026, so the format is not tied to Stitch, and any tool or agent that can read a Markdown file can use it.
How do I get a DESIGN.md out of Stitch?
Export the project. Stitch's documentation says the DESIGN.md file is included in the export zip alongside the generated screens, and calls it a standalone document that does not depend on Stitch.
Can Stitch create a DESIGN.md from a website?
Yes. Stitch's documentation says you can provide a URL or an image, and the agent extracts the palette, typography and style patterns to build a DESIGN.md. A Figma-to-DESIGN.md path is not described in the documentation we read.
How do I use a Stitch DESIGN.md in Claude Code or Cursor?
Save the file as DESIGN.md at the repository root, run npx @google/design.md lint DESIGN.md, and add one instruction to CLAUDE.md, AGENTS.md or a Cursor rule telling the agent to read it before UI work. Neither tool loads the file by itself.
Is the Stitch DESIGN.md format stable?
No. The specification repository labels the format alpha and says to expect changes as it matures. As of November 2026 the latest npm release of @google/design.md is 0.4.0, published July 27, 2026.