Ship on-spec, every time.

AI coding agents generate UI inconsistently. One prompt gives you 12px border-radius; the next gives 4px. Colours drift. Fonts randomize. Shadows become whatever the model hallucinates.

Agent Design Protocol solves that with locked-down, token-complete design systems. Each system ships as two files: a design system spec and a companion instructions file, that together act as a strict contract any agent must follow.

Every theme in the catalog ships as two downloadable files:

• design-system.md: CSS custom properties, colour palette, typography, spacing, border-radius, shadows, component specs, layout grid, animations, breakpoints, and state definitions.
• instructions.md: design philosophy, font laws, colour rules, anti-pattern lists, AI prompting guides, component build guides, checklists, and decision trees.

Browse the Design Systems catalog and preview the live component showcase before you download. Match personality to product: brutalist for dev tools, editorial for publishing, pill UI for dark dashboards, monospace for monitoring, and so on.

• Sharp: brutalist, zero radius, dev tools and dashboards
• Editorial: warm cream, serif display, publishing and CMS
• Rounded: friendly curves, SaaS and productivity apps
• Capsule: dark pill UI, DevOps and CI/CD
• Luxury Editorial: gold accent, fintech and enterprise
• Mono: terminal dark mode, monitoring and API consoles

Open the Design Systems catalog, choose your theme, and use the two download buttons on the system detail page. Save both files locally: design-system.md is the token spec, instructions.md is the agent construction manual. Download directly from the catalog; you do not need to run this website locally.

Create the folder your AI tool reads from. Cursor uses .cursor/rules/. Claude Code, Codex, Copilot Chat, and other agents typically use docs/design-system/ at the project root. Put both downloaded files in that folder.

your-project/
  .cursor/
    rules/
      design-system.md
      instructions.md

If you are not using Cursor, create docs/design-system/ and place the same two files there. Keep filenames exactly as downloaded so the agent can find them.

your-project/
  docs/
    design-system/
      design-system.md
      instructions.md

Create agent-design-protocol.md in the same folder as the two spec files. This rules file tells the agent that design-system.md and instructions.md live in the same directory, must be applied before every chat, and must be followed strictly. Copy the template below or download it.

# Agent Design Protocol: Project Design Rules

> Place this file in the same folder as design-system.md and instructions.md.
> Cursor: save as .cursor/rules/agent-design-protocol.md
> Other tools: save as docs/design-system/agent-design-protocol.md

---

## Folder contents (required)

This directory must contain exactly these companion files:

Paste this opener at the start of any UI task. It points the agent at the three files in your rules folder and sets non-negotiable constraints before any code is generated.

I'm building [describe your feature or page]. Use the design system in this project.

Before writing any UI code:
- Read agent-design-protocol.md, design-system.md, and instructions.md from the same folder
- Apply all three files to this task

Constraints:
- Follow ALL rules from design-system.md and instructions.md
- Cross-reference the anti-pattern list before finalizing
- Use only CSS custom properties from the master token sheet