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

New to DESIGN.md? Start here

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

AI Agents7 min

DESIGN.md for Cursor

How to use DESIGN.md with Cursor to keep AI-generated and AI-edited UI consistent with your product design system.

Read guide
AI Agents7 min

DESIGN.md for Claude Code

How to use DESIGN.md as persistent visual context for Claude Code so multi-file UI work stays consistent with your product design system.

Read guide
AI Agents7 min

DESIGN.md for Codex

How to use DESIGN.md with Codex so autonomous AI-generated frontend code follows your product design system instead of generic defaults.

Read guide
AI Agents5 min
A

DESIGN.md for Amp

Use DESIGN.md with Amp threads and remote agents to preserve product taste across fast, collaborative coding sessions.

Read guide
AI Agents5 min
DR

DESIGN.md for Factory Droid

Give Factory Droid a durable visual contract so CLI-driven implementation follows your product system instead of inventing UI defaults.

Read guide
AI Agents5 min
AG

DESIGN.md for Google Antigravity

Use DESIGN.md with Google Antigravity Projects and subagents so asynchronous UI work still follows one coherent product language.

Read guide
AI Agents5 min
OC

DESIGN.md for OpenCode

Use DESIGN.md with OpenCode to keep open-source, provider-agnostic coding sessions visually consistent across terminal, IDE, and desktop workflows.

Read guide
AI Agents5 min

DESIGN.md for Bolt

How DESIGN.md helps bolt.new generate full-stack browser apps with stronger UI direction, cleaner components, and less generic styling.

Read guide
AI Agents8 min

DESIGN.md for Devin Desktop (formerly Windsurf)

How to use DESIGN.md with Devin Desktop, the next generation of Windsurf, so agentic edits follow your product design system instead of default editor taste.

Read guide
AI Agents5 min

DESIGN.md for Kiro

How to use DESIGN.md with Kiro, the AWS agentic IDE built around specs, steering, hooks, and production-minded implementation.

Read guide
AI Agents5 min

DESIGN.md for Lovable

How DESIGN.md can guide Lovable projects from natural-language app generation toward product-specific UI, stronger handoff, and better code ownership.

Read guide
AI Agents7 min

DESIGN.md for v0

How to use DESIGN.md with Vercel v0 to generate UI, prototypes, and full-stack app surfaces that match your real product design system.

Read guide
AI Agents7 min

Google Stitch and DESIGN.md

How Google Stitch popularized DESIGN.md as a design-system format for AI UI generation.

Read guide