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