Stitch Open-Sources DESIGN.md for Cross-Platform AI-Generated UI Design

By The Engineer | April 21, 2026

Google Labs has announced that the draft specification for DESIGN.md, a key component of their design tool Stitch, is now open-source. This move allows designers and developers to export and import their design rules across different platforms and tools, ensuring consistency and efficiency in UI development.

What Changed Technically?

• Open-Sourced Specification: The DESIGN.md format, which previously worked only within the Stitch ecosystem, is now available as an open standard.
  • Why It Matters: Designers can now use this format with any tool or platform, not just those developed by Google. This interoperability means that AI-generated UIs can be more consistent and aligned with brand guidelines across different projects.

How Does DESIGN.md Work?

• Design Rules Export/Import: DESIGN.md allows you to define and document your design system's rules (colors, typography, spacing, etc.) in a structured format.

  • Key Features:
    • Color Definitions: Specify the purpose of each color (e.g., primary, secondary, error).
    • Typography Guidelines: Define font families, sizes, and weights.
    • Spacing Rules: Set consistent padding and margin values.
    • Accessibility Checks: Validate design choices against WCAG (Web Content Accessibility Guidelines) to ensure compliance.

• AI Understanding: By providing clear definitions, DESIGN.md helps AI agents understand the intent behind your design decisions.

  • Example: Instead of guessing that a particular shade of blue is for primary actions, the AI knows exactly what each color represents and can generate UI elements accordingly.

Implementation Details

• File Format: The DESIGN.md file is a Markdown document with YAML front matter. This format is human-readable and easy to edit.
  • Example:

    ---
    colors:
      primary: "#007bff"
      secondary: "#6c757d"
      error: "#dc3545"
    typography:
      family: "Roboto, sans-serif"
      sizes:
        h1: "2rem"
        body: "1rem"
    spacing:
      small: "8px"
      medium: "16px"
      large: "24px"
    ---
    # Design System Documentation
    ## Colors
    - Primary: Used for primary actions.
    - Secondary: Used for secondary actions and text.
    - Error: Used to indicate errors or warnings.
    
    ## Typography
    - Font Family: Roboto, sans-serif
    - Sizes:
      - H1: 2rem
      - Body: 1rem
    

## Spacing
- Small: 8px
- Medium: 16px
- Large: 24px
```

• Validation: The DESIGN.md tool includes a validation feature to check if your design rules meet WCAG standards.
  • How It Works:
    • Parses the YAML front matter for color definitions.
    • Uses contrast ratio calculations to ensure text is readable against background colors.

Practical Use Cases

• Consistency Across Projects: Designers can maintain a consistent look and feel across multiple projects by reusing DESIGN.md files.
• Collaboration: Teams can share design rules, ensuring everyone is on the same page.
• Automation: AI tools can generate UI elements that are compliant with your design system, reducing manual work.

Getting Started

To see DESIGN.md in action, check out the latest video by David East from Google Labs. You can also start generating your own files in Stitch or contribute to the project on GitHub.

• Watch the Video: Meet DESIGN.md: A new open standard for AI-generated UI
• Generate Files: Stitch
• Contribute: GitHub Repository

Related Stories

• Google brings Pomelli in English to small businesses in Europe.
  • Small businesses across the EEA, U.K., and Switzerland can now use Pomelli in English to create custom