google-labs-code/design.md

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

What it solves

Coding agents often struggle to maintain a consistent visual identity when generating UI. DESIGN.md provides a standardized, persistent format for describing a design system so that AI agents can understand both the exact values (tokens) and the reasoning (prose) behind a visual brand.

How it works

The system uses a dual-layer file format:

  1. YAML Front Matter: Contains machine-readable design tokens for colors, typography, spacing, and component-specific properties (e.g., button colors).
  2. Markdown Body: Contains human-readable design rationale and guidelines organized into specific sections (e.g., Overview, Colors, Typography).

It includes a CLI tool to lint these files for structural correctness, check WCAG contrast ratios, detect broken token references, and export tokens to formats like Tailwind CSS (v3 and v4) or the W3C Design Tokens Format.

Who it’s for

Developers and designers working with AI coding agents who want to ensure the generated UI remains consistent with a specific brand identity and design system.

Highlights

  • Hybrid Format: Combines structured YAML tokens with descriptive Markdown prose.
  • Accessibility Checking: Built-in linting for WCAG AA contrast ratios.
  • WriteLine Export: Supports exporting to Tailwind CSS and W3C DTCG formats.
  • Agent-Ready: Includes a spec command to output the format specification for injection into agent prompts.

Related

  • Project
    agentsmd/agents.md

    An open format for creating AGENTS.md files to provide AI coding agents with project-specific context and instructions.

  • Project
    kwakseongjae/oh-my-design

    A design workflow system for AI coding agents that uses a project-owned DESIGN.md file and a library of 440+ company references to ensure consistent, professional UI/UX.

  • Project
    markdown-viewer/skills

    A collection of standardized skills for AI agents to generate professional diagrams, data visualizations, and technical documentation in Markdown.

  • Project
    bergside/awesome-design-skills

    A curated registry of design system skill files that provide AI coding agents with specific UI rules, tokens, and accessibility constraints to ensure consistent, high-quality design implementation.

  • Project
    Railly/tinte

    A tool that compiles design systems into installable Agent Plugins, allowing AI coding agents to write on-brand UI by following a specific set of design tokens and composition rules.