design-system.md
The full token sheet: colour palette, typography, spacing, radius, shadows, and component specs.
Agent Design Protocol
Design systems that keep AI agents on-spec.
A curated catalog of complete, locked-down design systems for AI agents: tokens, components, instructions, and live previews.
- Systems live
- 6
- 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
Every agent invents its own design system.
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.
| 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. | ||
What you get
Every theme ships complete.
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.
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.
How it works
From download to on-spec, in four steps.
No local setup of this site required: just two files, a folder, and a prompt. See the full guidelines for tool-specific paths.
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
A growing library. One consistent contract.
Filter by mode and category, 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.
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