design-system.md
The full token sheet: colour palette, typography, spacing, radius, shadows, and component specs.
Agent Design Protocol | Bhargav Tibadiya
Agent Design Protocol
Design systems that keep AI agents on-spec.
Agent Design Protocol is a curated catalog of complete, locked-down design systems for AI coding agents. You download two Markdown files per theme, tokens plus instructions, drop them into your rules folder, and your next prompt ships UI that stays on-spec instead of inventing a new look every time.
Published Updated
- Systems live
- 11
- Categories
- 18
- Files per system
- 2
agent-design-protocol verify
$ agent-design-protocol verify
border-radius resolves from --ds-radius-none
colour resolves from --ds-color-primary
spacing snaps to the 2px scale
font pair locked: DM Sans / Space Mono
shadow matches the elevation scale
contrast ratio passes WCAG AA
6/6 checks passed. Shipping on-spec.
The problem
Why do AI agents invent a new design system every prompt?
Ask an AI agent to build a UI twice and it will give you two different border radii, two colour palettes, and two font pairings. Nothing enforces the last decision on the next prompt, unless you give it a locked-down contract.
| Criterion | Without a protocol | With Agent Design Protocol |
|---|---|---|
| Border radius | A different value every prompt: 2px here, 8px there, 12px on the next screen. | Locked to one token. Sharp is 0px everywhere; Rounded is 12px everywhere. |
| Colour | New hex values invented per session, never matching the last one. | Every colour resolves from one CSS custom property sheet. |
| Typography | Font pairs drift across screens; weights and tracking are guessed. | A two-font law enforced by instructions.md: no third font, ever. |
| Shadows & elevation | Random blur radii and opacities picked per component. | One elevation scale, defined once, referenced everywhere. |
| Spacing & rhythm | Padding eyeballed per component: 8px here, 14px there, nothing lines up. | A single spacing scale, from a 2px base unit, used for every gap and inset. |
| Naming & tokens | Ad-hoc variables like --primary, --main-color, and --brand-blue-2 pile up. | One token sheet per system, the same names referenced everywhere they're used. |
| Responsive behaviour | Breakpoints guessed per screen; mobile padding is whatever still fits. | Documented breakpoint behaviour and a responsive padding scale, spec'd once. |
| Accessibility | Focus states, contrast ratios, and ARIA roles are an afterthought, if that. | Contrast ratios, focus-visible states, and ARIA patterns documented per component. |
| Many more: opacity, hover and active states, icon sizing, z-index layering, and every other decision a prompt could drift on. | ||
Our working hypothesis: agents stay on-spec when tokens and instructions live as non-negotiable Markdown next to the project, not as vibes in the chat window.
What you get
What does every Agent Design Protocol theme include?
Two per-system Markdown files, a ready-made rules template, a live component showcase, and tokens scoped so systems never collide. Nothing to install, nothing to configure, you should download a theme and wire it into your agent the same day.
instructions.md
Design philosophy, anti-pattern lists, decision trees, and ready-to-paste AI prompting templates.
agent-design-protocol.md
A ready-made rules file that points any agent at the other two and marks them non-negotiable.
Live showcase
20+ components rendered live on the system's own page: buttons, forms, tables, modals, charts, and more.
Scoped tokens
Every token lives under its own data attribute, so systems never bleed into each other.
One-click downloads
Grab both Markdown files straight from the browser. No cloning the repo, no build step.
- Contract format
- Markdown (design-system.md + instructions.md)
- Install step
- None, copy files into your rules folder
- License
- MIT, free for commercial and personal use
- Agent support
- Cursor, Claude Code, Codex, Copilot, Windsurf, and others
How it works
How do you go from download to on-spec UI?
Four numbered steps: pick a system, download two files, drop them into your rules folder, then prompt with the contract loaded. See the full guidelines for tool-specific paths. Try this flow once, you should see consistent tokens on the next screen you generate.
Pick a system
Search or filter by category and mode, and preview the live component showcase before committing to one.
Download two files
design-system.md and instructions.md, no local setup of this site required.
Drop into your rules folder
.cursor/rules/ for Cursor. docs/design-system/ for everything else.
Prompt with the contract loaded
Point the agent at all three files before it writes a single line of UI code.
The catalog
Which design systems can you pick for your agent?
Filter by mode and category across 11 live systems, from zero-radius brutalism to warm editorial serif, dark-mode pill UI, and terminal monospace. Every new system that ships follows the same two-file contract as the last.
Light
Sharp
Zero-radius brutalist editorial. Off-white canvas, ink-black accent, hard-edge offset shadows, DM Sans + Space Mono.
Light
Editorial
Warm cream canvas with deep burgundy accent. Cormorant Garamond display serif paired with Syne geometric sans.
Light
Rounded
Friendly modernism in cool blue-grey. Generous curves, confident blue accent, Plus Jakarta Sans with a Lora editorial touch.
Dark
Capsule
Dark-mode pill UI for developer tools. Layered GitHub-dark surfaces, blue glow accent, Outfit + Nunito Sans with IBM Plex Mono labels.
Light
Luxury Editorial
Premium warm neutrals with gold prestige accent. Instrument Serif display, Manrope body, DM Mono for metadata, restrained enterprise editorial.
Dark
Mono
Terminal / CLI dark mode. IBM Plex Mono carries the UI, Albert Sans for display numerals, amber CRT signal accent, 2px functional corners.
Compatibility
Works with the agent you already use.
Any tool that reads Markdown rule files works. There is no plugin to install and no proprietary format: point the agent at three plain files and the contract reads the same everywhere.
Cursor
.cursor/rules/Everything else
docs/design-system/Cursor
Claude Code
GitHub Copilot
Windsurf
Codex
Azure DevOps
What people say
I got tired of my own agents reinventing the UI every chat. Two Markdown files later, Sharp stays Sharp. That's why I put this protocol together.
Verdict
Should you lock your agent to a design system?
Yes, if you care that the fifth screen matches the first. On the other hand, if you are exploring throwaway prototypes, leave the contract out. For production SaaS UI, you should pick one system, load the two files, and treat drift as a bug.
- Open the catalog and pick a theme that matches your product tone.
- Download design-system.md and instructions.md for that theme.
- Place them where your agent reads rules (for example .cursor/rules/).
- Prompt with an explicit reminder that the contract is non-negotiable.
Ready when you are
Pick a system.
Ship consistent UI.
Browse the catalog, download two files, and give your next agent a contract it can't drift from.
- License
- MIT, free forever
- Setup
- Two files, no build step