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

Cursor

7 min guide

Claude Code

7 min guide

Codex

7 min guide

Devin Desktop

8 min guide

OC

OpenCode

5 min guide

AG

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.

1

Understand the format

What is DESIGN.md?

2

Write your first file

DESIGN.md template

3

Learn why it matters

Why AI agents make ugly UI

4

Apply to your tool

DESIGN.md for Claude Code

AllAI Agents· 13Getting Started· 4Workflow· 3Design Systems· 5Templates· 2
Design Systems5 min

DESIGN.md vs Figma design systems

Why DESIGN.md is the agent-readable counterpart to a traditional design system.

Read guide
Design Systems7 min

Why AI agents make ugly UI

Most bad AI-generated interfaces come from missing visual context, not weak code generation.

Read guide
Design Systems8 min

DESIGN.md for shadcn/ui

How to keep shadcn/ui fast without letting your product feel generic.

Read guide
Design Systems8 min

DESIGN.md for Tailwind CSS

Use DESIGN.md to stop Tailwind-generated UI from collapsing into generic utility soup.

Read guide
Design Systems7 min

DESIGN.md vs design tokens

Why DESIGN.md complements tokens instead of replacing them.

Read guide