google-labs-code

google-labs-code / design.md

Public

A format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system.

stitch.withgoogle.comdocsdesign-mdspecification
265
20
100% credibility
Found Apr 21, 2026 at 267 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

DESIGN.md is a human- and machine-readable format specification combined with a CLI tool for validating, comparing, and exporting design systems intended for AI coding agents.

How It Works

1
💡 Discover DESIGN.md

You hear about a simple way to describe your app's colors, fonts, and styles so AI can build it just right.

2
📝 Create your design file

Write a special note called DESIGN.md with your favorite colors, text styles, button shapes, and spacing preferences.

3
🔍 Check for mistakes

Run the handy checker to spot any issues like wrong colors or missing parts, getting a clear report.

4
⚖️ Compare versions

See what's changed between your old and new design notes to keep improvements on track.

5
📤 Export styles

Turn your design into ready-to-use instructions for popular style tools.

🎉 AI builds your vision

Share your perfect design file with AI coding helpers, and watch them create your app exactly as you imagined.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 267 to 265 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is design.md?

Google's design.md is a format specification for DESIGN.md files that blend YAML design tokens—like colors, typography scales, spacing, and components—with markdown prose explaining the why and how. It gives coding agents a structured, persistent grasp of your visual identity, solving the gap between vague design docs and precise code gen. The TypeScript CLI lets you lint for broken refs, contrast ratios, and structure; diff versions for regressions; export tokens to Tailwind or DTCG JSON; or dump the full spec for prompts.

Why is it gaining traction?

In an agent-first world, design.md stands out by making design systems machine-readable without Figma exports or custom parsers—agents just read the DESIGN.md file in your repo. Linting catches real issues like WCAG fails or orphaned tokens, outputting agent-friendly JSON, while exports plug straight into Tailwind workflows or W3C format specs. With 265 stars, it's hooking devs stitching design.md into GitHub Actions for PR checks or AI code reviews.

Who should use this?

Frontend teams building AI-powered UIs, where agents like Claude or Cursor need exact tokens without hallucinating fonts. Design system maintainers validating tokens across PRs, or Tailwind users exporting from prose-heavy specs. Ideal for solo devs prototyping agentic apps tired of manual theme syncing.

Verdict

Grab it if you're experimenting with design.md for agent workflows—solid CLI and spec make it practical now. Alpha status, 265 stars, and 1.0% credibility score signal active Google Labs evolution; expect spec tweaks, but docs and tests cover the basics well.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.