Design systems for AI agents

DESIGN.md guides

Practical guides for giving AI coding agents better visual context: format basics, templates, design tokens, product examples, and workflows for Cursor, Claude Code, Codex, Devin Desktop, OpenCode, Google Antigravity, Amp, and more.

Start with your tool

Six popular agent workflows

View all agent guides →

Cursor

7 min guide

Claude Code

7 min guide

Codex

7 min guide

Devin Desktop

8 min guide

OpenCode

5 min guide

Google Antigravity

5 min guide

New to DESIGN.md? Start here

Four guides in the right order to go from zero to working with AI agents.

Understand the format

What is DESIGN.md?

Write your first file

DESIGN.md template

Learn why it matters

Why AI agents make ugly UI

Apply to your tool

DESIGN.md for Claude Code

All AI Agents· 13 Getting Started· 4 Workflow· 3 Design Systems· 5 Templates· 2

Getting StartedMay 10, 20267 min

DESIGN.md vs AGENTS.md

A clean mental model for splitting agent instructions by domain.

Read guide

Getting StartedMay 10, 20267 min

DESIGN.md vs CLAUDE.md

Keep engineering behavior and visual behavior separate so agents can follow both well.

Read guide

Getting StartedApr 1, 20267 min

Best DESIGN.md examples

Examples of DESIGN.md files, templates, and public tools for AI-readable design systems.

Read guide

Getting StartedApr 1, 20267 min

What is DESIGN.md?

DESIGN.md is a markdown file that explains a product visual system to AI agents before they generate UI.

Read guide