explaingit

google-labs-code/design.md

13,224TypeScriptAudience · vibe coderComplexity · 2/5Setup · easy

TLDR

DESIGN.md is a file format and CLI tool from Google Labs that lets you describe your app's colors, fonts, and spacing once so AI coding assistants apply your design rules consistently on every new screen they build.

Mindmap

mindmap
  root((design.md))
    File format
      YAML token block
      Prose description
      Token references
    Design tokens
      Colors hex codes
      Fonts sizing
      Spacing radius
    CLI tools
      Validate file
      Accessibility check
      Export tokens
    Export targets
      Tailwind CSS config
    Use cases
      AI design consistency
      Design system docs
      Token management
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Create a single DESIGN.md file your AI assistant reads whenever it builds new UI components or screens

USE CASE 2

Validate that your chosen color combinations meet accessibility contrast requirements automatically

USE CASE 3

Export your design tokens directly into a Tailwind CSS config file to keep code and design in sync

Tech stack

TypeScriptYAMLMarkdownTailwind CSS

Getting it running

Difficulty · easy Time to first run · 30min

Alpha-stage specification, the format and CLI commands may change between releases.

In plain English

DESIGN.md is a file format specification created by Google Labs for describing the visual identity of an app or website in a way that AI coding assistants can read and apply consistently. The core idea is that a single file placed in your project can tell an AI agent what colors, fonts, spacing values, and component styles to use whenever it generates or edits interface code. Without something like this, each time you ask an AI tool to build a new screen or component, you would need to repeat your design rules in the prompt. The file format combines two sections. The first is a YAML block at the top of the file that lists the exact design values: specific color hex codes, font families, font sizes, corner radius values, and spacing measurements. This machine-readable block gives the AI precise numbers to work with. The second section is written prose in standard markdown that explains the reasoning behind those values, describing the intended aesthetic and how different design elements should relate to each other. Together, the two sections give an agent both the what and the why. The project ships a command-line tool that can validate a DESIGN.md file against the specification, check that color combinations meet accessibility contrast requirements, and compare two versions of a design file to identify what changed between them. There is also an export command that converts the token values into formats used by other tools, such as Tailwind CSS configuration files. The format supports token references, meaning a component's background color can point to a named color token rather than repeating a raw hex code. This keeps the design system internally consistent and makes it easier to update a value in one place. The project is in an early stage, described as alpha in the specification. The README is detailed and covers the full token schema, section structure, CLI reference, and installation steps.

Copy-paste prompts

Prompt 1
Create a DESIGN.md file for my app using these brand colors: primary #2563EB, background #F9FAFB, and Inter font, include both the YAML token block and a prose description of the aesthetic.
Prompt 2
Use the DESIGN.md CLI to validate my design file and check all color pairs for accessibility contrast compliance.
Prompt 3
Export my DESIGN.md tokens to a Tailwind CSS config file and show me how to reference them in my components.
Prompt 4
I have an existing Tailwind config and Figma style guide. Help me write a DESIGN.md file that captures both so Cursor uses my design system automatically.
Open on GitHub → Explain another repo

← google-labs-code on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.