DESIGN.md Generator

DESIGN.md Generator — Free Online Tool for AI-Ready Design Systems

Stop re-explaining your brand to every AI tool you use. The DESIGN.md Generator creates a structured design system file that AI agents — Google Stitch, Claude Code, Cursor, Copilot — read automatically as context, so every generated UI follows your exact colors, fonts, and component rules.

Fill in the 9-section wizard, download the file, drop it in your project root. Done.

What Is DESIGN.md and Why Does It Matter?

DESIGN.md is a plain markdown file that stores your brand's visual design rules in a structured format AI agents can parse deterministically. It was created by Google Labs for their Stitch design tool and open-sourced under Apache 2.0 on April 21, 2026.

Think of it as README.md for your design system. Whereas README.md explains the code to humans and tools, DESIGN.md explains the visual design to AI agents. Any compatible tool reads it automatically from the project root — no prompt engineering required.

Without DESIGN.md, every AI-generated UI is a fresh guess: arbitrary colors, generic fonts, random border-radii. With DESIGN.md, the agent treats your spec as a constraint and applies it consistently across every generation.

How to Use the DESIGN.md Generator

The tool walks you through the 9 sections of the official spec in a step-by-step wizard:

1. Fill in Project Basics — name, tagline, and a natural-language description of your visual theme (e.g. "minimal and clean, generous whitespace, neutral palette").
2. Define your Color Palette — assign semantic roles (primary, surface, error, success) for light and dark mode using the color pickers.
3. Set Typography rules — heading font, body font, monospace font, and the modular type scale ratio.
4. Configure Spacing & Layout — base unit, grid columns, container width, and responsive breakpoints.
5. Describe Component Stylings — button radius, card shadow, form field height, and variant patterns.
6. Specify Iconography — the icon library you use, size scale, and image treatment rules.
7. Set Motion & Animation — duration scale, easing curve, and whether motion is fully enabled or reduced.
8. Define Accessibility requirements — WCAG target level, minimum contrast ratios, focus ring style, and touch target sizes.
9. Add Platform Guidelines — CSS custom property prefix, dark mode strategy, and platform-specific rules.
10. Preview and download — see the complete DESIGN.md, copy to clipboard, or download to commit to your project.

The 9 Sections of the DESIGN.md Spec

The Apache 2.0 specification defines exactly nine sections. Every compliant tool knows where to find each type of information — no ambiguity.

1. Visual Theme & Atmosphere — The overall aesthetic intent in plain language. Examples: "minimal and clinical", "warm and approachable", "bold and energetic". This sets the AI's interpretation of every subsequent rule.

2. Color Palette & Roles — Colors defined with semantic roles, not just hex values. Primary, secondary, surface, background, on-surface, accent, error, warning, success — plus their dark mode counterparts with WCAG contrast compliance notes.

3. Typography Rules — Font families for headings, body, and monospace text. Type scale built on a modular ratio (minor third, perfect fourth, golden ratio) so every size is mathematically consistent.

4. Spacing & Layout — Base spacing unit, scale multipliers, grid columns, gutters, container max-widths, and responsive breakpoints (sm, md, lg, xl).

5. Component Stylings — Visual patterns for buttons (primary, secondary, ghost, danger variants), cards (radius, shadow, padding), form fields (height, border, focus state), and other core UI patterns.

6. Iconography & Imagery — Which icon library to use, icon size conventions (sm/md/lg), image aspect ratios, border-radius treatment, and lazy loading rules.

7. Motion & Animation — Easing curves, duration scale (instant → fast → base → slow → slower), and whether the brand uses motion at all (important for accessibility).

8. Accessibility Requirements — Minimum contrast ratios, focus ring styles, touch target sizes, WCAG compliance level target (AA or AAA).

9. Platform-specific Guidelines — CSS custom properties naming convention, dark mode implementation strategy (class vs. media query), web-specific rules, and mobile-specific rules.

Common Use Cases

• Starting a new project with AI tooling: Drop DESIGN.md in the repo root before writing the first component. Every AI-generated UI from that point uses your brand rules.
• Reducing prompt repetition: Stop specifying #1A73E8 primary blue, Inter font, 6px border radius in every prompt. Write it once in DESIGN.md.
• Google Stitch workflows: Stitch reads DESIGN.md natively. Export your design tokens from Figma, transfer them to DESIGN.md, and every Stitch generation matches your Figma system.
• Onboarding new AI coding tools: When you switch from Cursor to Copilot to Claude Code, DESIGN.md travels with the project — no per-tool configuration.
• Design system documentation: The spec's structured format doubles as human-readable documentation for design decisions, useful in onboarding designers and developers.

Frequently Asked Questions

What is a DESIGN.md file?

DESIGN.md is a plain markdown file that stores your brand's visual design rules — colors, typography, spacing, and component patterns — in a structured format AI agents can read and follow consistently. It was created by Google Labs for their Stitch tool and open-sourced under Apache 2.0 in April 2026. Think of it as README.md for your design system: a file in the project root that any compatible tool reads automatically.

Which AI tools support DESIGN.md?

Google Stitch has native DESIGN.md support. Claude Code, Cursor, GitHub Copilot, and Windsurf can use it as a project context file — they read files in the project root as context when generating code. The spec is open under Apache 2.0, so adoption is growing quickly across AI coding and design tools.

Can I write DESIGN.md without using Google Stitch?

Yes. The spec is completely open source (Apache 2.0) and tool-neutral. You can write DESIGN.md by hand in any text editor, commit it to your GitHub repository, and use it with any compatible AI agent. This generator makes the process faster by walking you through each of the 9 sections with sensible defaults.

Does DESIGN.md replace Figma?

No. Figma remains the standard for real-time collaboration, high-precision refinement, and design handoff. DESIGN.md covers the specification phase and the handoff to AI agents. The emerging workflow is hybrid: DESIGN.md for AI generation context, Figma for collaboration and polishing. They are complementary, not competing.

How does DESIGN.md improve AI-generated UI consistency?

When you submit a prompt to an AI tool without DESIGN.md, it picks colors, fonts, and spacing arbitrarily. With DESIGN.md in context, the agent treats your design rules as hard constraints — it uses your primary color hex instead of guessing, your font family instead of defaulting to a generic one, and your border-radius instead of whatever it finds reasonable. The effect is cumulative: every generation in a project stays on-brand without per-prompt specification.

Is DESIGN.md the same as design tokens?

Not exactly. Design tokens are a concept — named values for colors, spacing, and typography — that can be stored in many formats (JSON, CSS custom properties, Figma tokens plugin). DESIGN.md is a specific file format and spec that goes beyond tokens: it includes visual theme intent in natural language, component patterns, motion principles, and accessibility requirements in a holistic, narrative-plus-structured format that AI agents can interpret contextually.

What is "vibe design" and how does DESIGN.md relate to it?

"Vibe design" is the practice of describing a UI's intended feel in natural language ("calm and minimal, like Apple Health") rather than specifying every pixel manually. DESIGN.md formalizes the output of that process — it captures the design intent in a structured file so it can be reproduced consistently by any AI agent, not just interpreted differently each time from a vague prompt.

Resources

• Google Stitch — DESIGN.md Overview — Official documentation for the DESIGN.md spec, maintained by Google Labs.
• Apache 2.0 License — The open source license under which the DESIGN.md specification is published.