Design systems for AI agents
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
Four guides in the right order to go from zero to working with AI agents.
How to use DESIGN.md with Cursor to keep AI-generated and AI-edited UI consistent with your product design system.
Read guideHow to use DESIGN.md as persistent visual context for Claude Code so multi-file UI work stays consistent with your product design system.
Read guideHow to use DESIGN.md with Codex so autonomous AI-generated frontend code follows your product design system instead of generic defaults.
Read guideUse DESIGN.md with Amp threads and remote agents to preserve product taste across fast, collaborative coding sessions.
Read guideGive Factory Droid a durable visual contract so CLI-driven implementation follows your product system instead of inventing UI defaults.
Read guideUse DESIGN.md with Google Antigravity Projects and subagents so asynchronous UI work still follows one coherent product language.
Read guideUse DESIGN.md with OpenCode to keep open-source, provider-agnostic coding sessions visually consistent across terminal, IDE, and desktop workflows.
Read guideHow DESIGN.md helps bolt.new generate full-stack browser apps with stronger UI direction, cleaner components, and less generic styling.
Read guideHow 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 guideHow to use DESIGN.md with Kiro, the AWS agentic IDE built around specs, steering, hooks, and production-minded implementation.
Read guideHow DESIGN.md can guide Lovable projects from natural-language app generation toward product-specific UI, stronger handoff, and better code ownership.
Read guideHow to use DESIGN.md with Vercel v0 to generate UI, prototypes, and full-stack app surfaces that match your real product design system.
Read guideA clean mental model for splitting agent instructions by domain.
Read guideKeep engineering behavior and visual behavior separate so agents can follow both well.
Read guideWhat launch-ready DESIGN.md templates should include for SaaS, docs, AI apps, and dashboards.
Read guideWhy DESIGN.md is the agent-readable counterpart to a traditional design system.
Read guideTurn an existing product surface into a reusable AI-readable design brief.
Read guideUse stable design memory instead of rewriting visual instructions in every chat.
Read guideA practical loop for using Claude Code with stronger visual output.
Read guideMost bad AI-generated interfaces come from missing visual context, not weak code generation.
Read guideHow to keep shadcn/ui fast without letting your product feel generic.
Read guideUse DESIGN.md to stop Tailwind-generated UI from collapsing into generic utility soup.
Read guideWhy DESIGN.md complements tokens instead of replacing them.
Read guideHow Google Stitch popularized DESIGN.md as a design-system format for AI UI generation.
Read guideA starter structure for writing a DESIGN.md file for your own product.
Read guideExamples of DESIGN.md files, templates, and public tools for AI-readable design systems.
Read guideDESIGN.md is a markdown file that explains a product visual system to AI agents before they generate UI.
Read guide