AGENTCONN
D

// Agent profile

design.md

Coding Free

About design.md

design.md (google-labs-code/design.md) is a format specification from Google Labs for describing a project's visual identity to AI coding agents. Instead of agents guessing at colors, fonts, and spacing, teams create a design.md file that codifies brand colors, typography scales, spacing tokens, component styles, and design principles in structured markdown. At 18.7K GitHub stars (+1,407/day), it's become the fastest-adopted design-to-code specification in 2026. Coding agents that support the format — including Claude Code, Gemini CLI, Cursor, and others — read the design.md file and generate UI code that matches the project's visual identity without manual style correction.

Key Features

  • Structured markdown format for describing visual identity — colors, typography, spacing, components
  • Read by AI coding agents to generate on-brand UI code without manual style correction
  • Design token definitions — color palettes, font stacks, spacing scales, border radii, shadows
  • Component style specifications — buttons, inputs, cards, navigation patterns
  • Works with Claude Code, Gemini CLI, Cursor, and other coding agents
  • Single-file format — one design.md per project, no build tooling required

Overview

design.md is a format specification from Google Labs that solves a persistent problem in AI-assisted development: coding agents have no way to know what a project should look like. Without explicit design guidance, agents generate UI code with default styles, arbitrary color choices, and inconsistent spacing — requiring manual cleanup that erodes the productivity gains of AI coding.

The design.md specification defines a structured markdown format for describing a project’s complete visual identity: brand colors, typography scales, spacing tokens, border radii, shadows, component styles, and design principles. Coding agents that understand the format read this file and generate UI code that matches the project’s design system from the first generation.

At 18.7K GitHub stars with +1,407 new stars per day, design.md has become one of the fastest-growing developer tools of 2026, reflecting broad demand for a standardized way to bridge design systems and AI coding workflows.

Key Capabilities

The specification covers the full scope of visual identity that a coding agent needs: color palettes with semantic roles (primary, secondary, accent, surface, error), typography with font families and scale, spacing systems, elevation/shadow tokens, border and radius definitions, and component-level style specifications for common UI elements like buttons, inputs, cards, and navigation.

The format is deliberately simple — plain markdown with structured sections, no build tooling or compilation required. Teams can write a design.md by hand, generate one from an existing design system (Figma, Tailwind config), or start from a template. The file lives in the project root alongside other agent configuration files like CLAUDE.md or .cursorrules.

Use Cases

Teams adopting AI coding agents use design.md to eliminate the “looks wrong” iteration cycle. Instead of generating UI code, reviewing it, correcting colors and spacing, and regenerating, the agent gets it right on the first pass. Particularly valuable for: teams with established brand guidelines who need agents to respect them, design system maintainers who want a machine-readable representation of their tokens, and solo developers who want consistent styling across agent-generated components without writing CSS by hand.

Considerations

design.md is a specification, not a runtime tool — its value depends entirely on agent platform support. The format is still early and evolving; not all coding agents fully support every section of the specification yet. Teams with complex, multi-brand design systems may find the single-file format limiting for capturing all variants.

Similar Agents