Which AI tools support DESIGN.md?

Google Stitch has native support. Claude Code, Cursor, GitHub Copilot, and Windsurf can all use it as a project context file, since they already read files placed in the project root.

Can I write a DESIGN.md file without using Google Stitch?

Yes. The spec is open source and tool-neutral — you can write one by hand or with a generator like this and use it with any compatible agent, Stitch or not.

Does DESIGN.md replace Figma?

No. Figma remains the standard for visual collaboration and refinement. The emerging workflow is hybrid: DESIGN.md for AI context, Figma for design collaboration and handoff.

Is DESIGN.md the same as design tokens?

Not exactly. Tokens are named values in formats like JSON or CSS variables. DESIGN.md goes further: it includes visual intent in natural language, component patterns, and accessibility requirements alongside the raw values.

Where do I put the DESIGN.md file in my project?

In the project root, next to your README.md. AI coding agents scan the repo root automatically, so that's the location every current integration expects.

DESIGN.md Generator

Create AI-ready DESIGN.md files for Google Stitch, Claude Code, Cursor, and Copilot — define colors, typography, spacing, and components for AI tools.

Updated May 2026

› › › › › › › ›

Project Basics

Name your project and describe its overall visual intent.

Project Name

Tagline (optional)

Visual Theme & Atmosphere

Describe the intended visual feel. AI agents use this to set the tone.

Theme

Dashboard

Users

12.4k

+8.2%

Revenue

$48k

+12.1%

Recent Activity

Design tokens updated 2m

Component review ✓ 1h

Contrast warning 3h

Button Variants

Type Specimen

h1 40 Heading 1

h3 28 Heading 3

body 16 The quick brown fox jumps.

How the DESIGN.md generator works

9-section wizard, download in seconds

1. Fill in the basics and the color palette

Project name, tagline, visual theme in plain language, and colors by semantic role (primary, error, success).

2. Configure typography, layout, and components

Fonts, modular type scale, spacing, border-radius, shadows, and component variant patterns.

3. Download and commit

Copy or download the complete DESIGN.md file and drop it in your project root.

What this DESIGN.md generator does

All 9 sections of the official spec, guided step by step

Step-by-step wizard

Walks through the 9 sections of the Apache 2.0 spec so you don't have to memorize the file structure.

Colors by semantic role

Primary, surface, error, success — for light and dark mode, not just loose hex values.

Modular type scale

Minor third, perfect fourth, golden ratio — mathematically consistent font sizes generated for you.

Accessibility included

Target WCAG level, minimum contrast ratios, focus ring color, and touch target size.

The 9 sections of the spec

What each part of the generated file covers

Section

What it defines

Visual Theme & Mood

Aesthetic intent described in plain language

Color Palette & Roles

Semantic colors plus their dark mode equivalents

Component Styling

Buttons, cards, form fields, and their variants

Platform Guidelines

CSS custom property naming, dark mode strategy

When you'll use this

The most common scenarios among people using this tool

Starting a new project with AI

Drop DESIGN.md in the root before the first component — every UI the agent generates follows your rules.

No more repeating specs in every prompt

Write your primary color, font, and border-radius once instead of retyping them in every new prompt.

Google Stitch workflows

Export tokens from Figma into DESIGN.md so every Stitch generation matches your system automatically.

Switching between AI coding tools

DESIGN.md travels with the project when you move between Cursor, Copilot, and Claude Code.

Common mistakes

Assuming it replaces Figma

They're complementary — DESIGN.md covers the specification and AI handoff, not visual collaboration.

Skipping the accessibility section

Without a minimum contrast ratio and WCAG level defined, AI agents have no constraint pushing them toward accessible UI.

Confusing it with design tokens

DESIGN.md goes further than tokens — it includes visual intent in natural language and component patterns, not just named values.

Why use this generator

The wizard walks you through the 9 sections of the official spec with sensible defaults, instead of you writing the markdown by hand from a blank page.

It's natively compatible with Google Stitch and doubles as a context file for Claude Code, Cursor, and Copilot — all of them read files in the project root automatically.

DESIGN.md vs. README.md vs. Design Tokens

Complementary formats, different purposes

DESIGN.md

README.md

Design Tokens

Who it's for

AI agents

humans and tooling

build systems

Content

visual intent + component rules

code documentation

named values (color, spacing)

Format

structured markdown

free-form markdown

JSON, CSS vars, Figma plugin

Frequently asked questions

It's a markdown file that stores a project's visual rules — colors, typography, spacing, and components — in a structured format AI agents can read and follow. It was created by Google Labs for Stitch and released open source under Apache 2.0.

Resources

Google Stitch — DESIGN.md Overview

Official documentation for the DESIGN.md spec, maintained by Google Labs.

awesome-design-md

A curated collection of real DESIGN.md files from popular brand design systems, for reference.

Apache 2.0 License

The open source license the DESIGN.md spec is published under.