Google Stitch just introduced DESIGN.md as a machine-readable, portable design system manifesto. Token-level rules in the repo give agents something concrete to follow instead of vague adjectives.
Google Stitch recently introduced DESIGN.md as a plain-text design system document meant specifically for AI agents. Giving your AI coding assistant a canonical source of truth for colors and typography drastically improves UI consistency across Claude Code, Cursor, or any other agentic pipeline you use.
I spend a lot of time spinning up side projects, tweaking UI with Cursor Composer-2, and testing how good Claude Opus 4.6 is at designing websites. The most tedious part of building web interfaces with AI right now involves repeating yourself. You start a new project or spin up an agent and you constantly have to remind it to use Inter for the font, a specific hex code for the primary buttons, and exact border radii for dialog components. Vague instructions like "make it look clean" just lead to generic results.
Google Stitch recently introduced a concept that aims to solve this problem entirely. They call it DESIGN.md.
Think of it like a README.md, only the topic is your design system instead of setup instructions. It functions as the machine-readable version of your brand's visual rules. JSON and YAML design token files work fine for machines. They are often annoying for humans to read or discuss. Markdown is completely accessible to both designers and developers. Most importantly, markdown is the native language of Large Language Models. When an agent reads a markdown file, there is zero parsing overhead or configuration required.
The file captures token-level precision instead of subjective style directives. You define your primary colors as exact hex values. You specify your font families, base font sizes, spacing scales, and card border styles.
It answers mechanical questions like what your primary button color should be. It works ideally as a companion to your larger design system documentation. It captures the rules that the AI can apply mechanically at generation time and gives you a consistent baseline when the assistant spits out new React components or CSS.
This is the part that has gotten the most attention recently from the community. The format is the feature.
Because it is just a plain markdown file, the usefulness of DESIGN.md extends far beyond Google Stitch. The same file works seamlessly in Claude Code, Cursor, Gemini CLI, or any other workflow tool. Your design intent follows your project repository rather than being permanently locked inside a single proprietary platform.
Many people are framing this as the real announcement behind the recent Stitch update. A portable, machine-readable design system format specifically targeting the spec and handoff layer could become a genuine cross-tool standard. It provides a shared canonical representation that agents understand immediately and could reduce Figma's role as the sole source of truth for tokens going forward.
The community has jumped on this very quickly. VoltAgent already launched an awesome-design-md repository on GitHub. It features pre-built DESIGN.md files extracted from top-tier engineering sites like Stripe, Vercel, Linear, Notion, and Spotify. You can drop one of these files into your project root and your AI coding agent will immediately start building UI that matches that specific aesthetic.
Google also dropped stitch-skills on GitHub. This repository includes tools for synthesizing design systems directly into a .stitch/DESIGN.md file from a URL. It also includes workflows for converting Stitch screens into complete React component systems.
You completely do not need to use Google Stitch to start getting the benefits of this. The fastest way to get a DESIGN.md in place is to paste the prompt below into Claude Code, Cursor, Gemini CLI, or Codex. The agent will ask only the questions it needs so it does not invent your brand from scratch, then write the file at the repository root.
Here is that prompt:
You are setting up DESIGN.md at the repository root so this project has a single source of truth for visual design.
1) Check whether DESIGN.md already exists in the repo root. If it is missing or only a stub, create or meaningfully expand it into a concrete design spec.
2) Before writing the file, if you do not yet know enough to avoid inventing a brand, ask me a small number of focused questions (aim for roughly 3–5 at most). Good topics: primary or accent brand colors, primary typeface, light vs dark default, and whether the UI should feel dense (product) or airy (marketing). If I defer to your judgment on something, pick sensible defaults and label them clearly as defaults in the file.
3) Write DESIGN.md in markdown with real values: color palette (hex), typography scale, spacing scale, radii, shadows, and any component-level rules that will keep UI consistent. Include a short "How agents should use this file" section at the top.
4) From this point forward, whenever you generate UI components, style existing elements, or write CSS/Tailwind classes, you must strictly follow the tokens and rules in DESIGN.md. Do not invent new colors or spacing values outside what is documented unless I explicitly ask you to update the design spec.
After DESIGN.md exists, your constraints live in the repository instead of only in chat history. Answer the agent with whatever you already know about your brand. You do not need to draft the file by hand first. Having your design rules persistently available in the repo solves one of the biggest friction points in AI coding today.