Google's Stitch DESIGN.md Format Goes Open Source — A New Way to Share Design Systems with AI

Last month, Google Labs released DESIGN.md—an open-source format for describing design systems in a way AI can understand. Until now, communicating design intent to AI was fragmented: screenshots lived in Figma, color specs in code, and typography guidelines in Notion. Consistency was almost impossible to maintain at scale.

DESIGN.md fixes this.

What is DESIGN.md?

DESIGN.md is a Markdown-based specification for design systems. A single file in your project root describes colors, typography, spacing, and component design in a machine-readable format that both humans and AI can parse.

Google Labs' Stitch team uses it to generate UI automatically from text prompts. Instead of describing a button ten times (once for humans, once for AI, once in CSS), you describe it once—and both people and algorithms read the same spec.

The Structure

Here's the basic anatomy:

# Design System
 
## Design Tokens
 
### Colors
```yaml
primary: "#0066FF"
secondary: "#666666"
success: "#00AA44"
warning: "#FF9900"
error: "#CC0000"
neutral-50: "#FAFAFA"
neutral-900: "#111111"

Typography

heading-1:
  font-family: "Roboto"
  font-size: 32px
  font-weight: 700
  line-height: 1.2
 
body:
  font-family: "Roboto"
  font-size: 16px
  font-weight: 400
  line-height: 1.5

Spacing

xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px

Component Specs

Button

Design Intent: Primary entry point for user actions. Visual hierarchy expresses priority.

Variants:

• Primary: background primary, text white
• Secondary: background neutral-100, text neutral-900
• Danger: background error, text white

Properties:

• Padding: md (vertical), lg (horizontal)
• Border-radius: 4px
• Transition: all properties 200ms

Input

Design Intent: Prompt text entry. Clear feedback on focus.

States:

• Default: border neutral-300
• Focused: border primary, box-shadow active
• Error: border error, helper text red

The clever part: **DESIGN.md blends YAML and Markdown**. Design tokens (colors, fonts) are YAML, structured and unambiguous. Component intent and philosophy are natural Markdown, readable and human-friendly.

## The Tooling

Google Labs simultaneously released CLI tools for working with DESIGN.md:

```bash
# Validate the file for structural correctness
design-cli validate ./DESIGN.md

# Export to Tailwind config
design-cli export --format tailwind ./DESIGN.md > tailwind.config.js

# Export to W3C DTCG (Design Tokens Community Group) JSON
design-cli export --format w3c ./DESIGN.md > tokens.json

# Diff two versions for code review
design-cli diff ./DESIGN_old.md ./DESIGN_new.md

This ecosystem eliminates the classic gap between "what the designer intended" and "what the engineer built." Version control via Git is natural.

License and Maturity

DESIGN.md is Apache 2.0 licensed and currently at version 0.9.0 (alpha). It's already deployed internally at Google Labs, so breaking changes are unlikely—but minor updates may come. If you adopt it, pin your version explicitly.

Getting Started: A Minimal Template

To adopt DESIGN.md in your project, start here:

# Our Design System
 
## Design Tokens
 
### Colors
```yaml
primary: "#3B82F6"
secondary: "#8B5CF6"
success: "#10B981"
warning: "#F59E0B"
error: "#EF4444"

Typography

heading-large:
  font-family: "Inter"
  font-size: 24px
  font-weight: 700
 
body:
  font-family: "Inter"
  font-size: 14px
  font-weight: 400

Spacing

xs: 4px
sm: 8px
md: 16px
lg: 24px

Components

Card

Purpose: Group related content, provide visual separation

Appearance:

• Background: white
• Border: 1px solid border-color
• Border-radius: 8px
• Padding: md
• Box-shadow: 0 1px 3px rgba(0,0,0,0.1)

Expand from here with your own components. The key: **always capture both intent and implementation**. When an AI reads "Purpose: Group related content," it makes better decisions about where cards belong in a layout.

## Integrating with Gemini and other AI

DESIGN.md shines when paired with generative AI. Here's a Python example using Gemini:

```python
from anthropic import Anthropic

# Read the design system
with open("DESIGN.md", "r") as f:
    design_system = f.read()

client = Anthropic()

# Ask Gemini to generate UI following the design system
message = client.messages.create(
    model="claude-3-5-sonnet-20241022",
    max_tokens=2048,
    messages=[
        {
            "role": "user",
            "content": f"""
Generate an HTML user profile editor that follows this design system exactly.

DESIGN.md:
{design_system}

Requirements:
- Fields: name, email, profile photo
- Buttons: Save (Primary), Cancel (Secondary)
- Responsive layout

Return only HTML and CSS.
"""
        }
    ]
)

print(message.content[0].text)

By feeding DESIGN.md to the AI upfront, generated UI automatically respects your brand. No hand-tweaking, no "close enough" compromises.

Why This Matters

Before DESIGN.md, AI-generated UI had two problems:

1. Lost Brand Identity: AI generated generic, blank-slate interfaces that didn't feel like your product.
2. Document Fragmentation: Designers, engineers, and AI consulted different sources. Inconsistencies multiplied.

DESIGN.md creates a single source of truth. Every stakeholder—human and algorithmic—reads the same spec.

Moreover, when Gemini or Grok understands your design system before generating, quality jumps dramatically. The AI doesn't guess; it follows.

Next Steps

To try DESIGN.md, check out the official repository on GitHub. The format isn't tied to any single AI platform—Claude, Gemini, local models, all benefit equally.

The age of design systems that AI can read is here. If your team is tired of manually adjusting AI-generated UI, now's the time to standardize.