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.
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 guideDESIGN.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 guideDESIGN.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 guideDESIGN.md for Amp
Use DESIGN.md with Amp threads and remote agents to preserve product taste across fast, collaborative coding sessions.
Read guideDESIGN.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 guideDESIGN.md for Google Antigravity
Use DESIGN.md with Google Antigravity Projects and subagents so asynchronous UI work still follows one coherent product language.
Read guideDESIGN.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 guideDESIGN.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 guideDESIGN.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 guideDESIGN.md for Kiro
How to use DESIGN.md with Kiro, the AWS agentic IDE built around specs, steering, hooks, and production-minded implementation.
Read guideDESIGN.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 guideDESIGN.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 guideDESIGN.md vs AGENTS.md
A clean mental model for splitting agent instructions by domain.
Read guideDESIGN.md vs CLAUDE.md
Keep engineering behavior and visual behavior separate so agents can follow both well.
Read guideBest DESIGN.md templates
What launch-ready DESIGN.md templates should include for SaaS, docs, AI apps, and dashboards.
Read guideDESIGN.md vs Figma design systems
Why DESIGN.md is the agent-readable counterpart to a traditional design system.
Read guideHow to create a DESIGN.md from a website
Turn an existing product surface into a reusable AI-readable design brief.
Read guideHow to make Cursor generate better frontend design
Use stable design memory instead of rewriting visual instructions in every chat.
Read guideHow to make Claude Code design better UI
A practical loop for using Claude Code with stronger visual output.
Read guideWhy AI agents make ugly UI
Most bad AI-generated interfaces come from missing visual context, not weak code generation.
Read guideDESIGN.md for shadcn/ui
How to keep shadcn/ui fast without letting your product feel generic.
Read guideDESIGN.md for Tailwind CSS
Use DESIGN.md to stop Tailwind-generated UI from collapsing into generic utility soup.
Read guideDESIGN.md vs design tokens
Why DESIGN.md complements tokens instead of replacing them.
Read guideGoogle Stitch and DESIGN.md
How Google Stitch popularized DESIGN.md as a design-system format for AI UI generation.
Read guideDESIGN.md template
A starter structure for writing a DESIGN.md file for your own product.
Read guideBest DESIGN.md examples
Examples of DESIGN.md files, templates, and public tools for AI-readable design systems.
Read guideWhat is DESIGN.md?
DESIGN.md is a markdown file that explains a product visual system to AI agents before they generate UI.
Read guide