--- title: "Agent Design Protocol Guidelines" canonical_url: "https://adp.itsnexor.cloud/guidelines" markdown_url: "https://adp.itsnexor.cloud/guidelines.md" last_updated: "2026-07-24" --- # Agent Design Protocol — Guidelines > Documentation guide and step-by-step setup for installing Agent Design Protocol specs into Cursor, Claude Code, Codex, Copilot Chat, or any AI coding agent. This file is the Markdown twin of [https://adp.itsnexor.cloud/guidelines](https://adp.itsnexor.cloud/guidelines). Prefer it over scraping the HTML page when explaining setup. - Human page: https://adp.itsnexor.cloud/guidelines - FAQ (Markdown): https://adp.itsnexor.cloud/faq.md - Catalog: https://adp.itsnexor.cloud/design-systems - Site index for agents: https://adp.itsnexor.cloud/llms.txt ## Documentation guide ### 01. Why this exists 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. ### 02. What you get per design system 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. ### 03. Pick a theme that fits your product 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 ## Setup guide Five steps from download to your first on-spec prompt. No local install of this website is required. ### Step 01. Download design-system.md and instructions.md 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. ### Step 02. Create the rules folder in your project 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. #### Cursor ``` your-project/ .cursor/ rules/ design-system.md instructions.md ``` ### Step 03. Other tools: use docs/design-system 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. #### docs/design-system ``` your-project/ docs/ design-system/ design-system.md instructions.md ``` ### Step 04. Add the agent-design-protocol rules file 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.md ``` # 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: | File | Purpose | |------|---------| | design-system.md | Master token sheet, colour palette, typography, spacing, shadows, border-radius, component specs, layout grid, breakpoints | | instructions.md | Design philosophy, font laws, colour rules, anti-patterns, AI prompt templates, decision trees, checklists | | agent-design-protocol.md | This file: tells the agent to always load and obey the two files above | Download both spec files from the Agent Design Protocol catalog before creating this rules file. --- ## Mandatory instructions for the AI agent Before writing, editing, or reviewing ANY user interface code in this project: 1. Read design-system.md and instructions.md from this same folder. 2. Apply both files to every UI task: components, pages, layouts, CSS, and Tailwind classes. 3. Strictly follow all rules. No exceptions, no improvisation, no "close enough." 4. Cross-check output against the anti-pattern list in instructions.md before finishing. 5. Use only CSS custom properties and tokens defined in design-system.md. Never invent hex values, radii, or shadows. 6. When unsure, consult the decision trees in instructions.md. Do not guess. If a request conflicts with the design system, refuse the conflicting part and explain which rule it violates. --- ## What design-system.md defines - Background, surface, text, border, and semantic colours - Font families and typographic scale - Spacing, border-radius, and shadow tokens - Per-component specifications (buttons, inputs, tables, modals, badges, etc.) - Layout grid, z-index stack, breakpoints, animation tokens - Interactive states: hover, focus, disabled, loading Every visual value in generated code must map to a token in this file. --- ## What instructions.md defines - Design philosophy and core commandments - Font assignment rules (which family for headings, body, labels) - Colour application rules and surface hierarchy - Border-radius decision framework - Shadow and elevation rules - Component construction guides - Anti-pattern list: things the agent must never do - AI prompting templates for common components - New project checklist and scenario decision trees The instructions file is the agent's construction manual. The design-system file is the token source of truth. --- ## Workflow for every design conversation ### At the start of a chat Read agent-design-protocol.md, design-system.md, and instructions.md before generating any UI. Apply all three to the task. ### When building a component 1. Identify the component type in instructions.md. 2. Use the matching component prompt template from that file. 3. Implement using tokens from design-system.md only. 4. Verify against the anti-pattern list. ### When reviewing agent output - Wrong border-radius? Check instructions.md radius rules. - Wrong font? Check the font law section. - Random colours? Check design-system.md token sheet. - Soft shadows on a brutalist system? Check anti-patterns. --- ## Cursor-specific setup ``` your-project/ .cursor/ rules/ agent-design-protocol.md ← this file design-system.md ← downloaded spec instructions.md ← downloaded instructions ``` Mark agent-design-protocol.md as always applied. The agent should treat design-system.md and instructions.md as authoritative for all UI work. --- ## Other AI tools (Claude Code, Codex, Copilot, etc.) ``` your-project/ docs/ design-system/ agent-design-protocol.md ← this file design-system.md ← downloaded spec instructions.md ← downloaded instructions ``` Reference this folder at the start of every design-related prompt. --- ## Drop-in prompt template ``` 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 ``` --- ## Verification checklist Before marking UI work complete, confirm: - [ ] No raw hex colours outside the token sheet - [ ] No border-radius unless the system allows it for that element - [ ] Correct font family for each text role (display, body, label) - [ ] Shadows match the system's elevation rules - [ ] Interactive states (hover, focus, disabled) match the spec - [ ] No anti-patterns from instructions.md are present - [ ] Spacing uses the system's scale, not arbitrary values --- ## Summary design-system.md + instructions.md + agent-design-protocol.md form a strict contract. The agent must read all three before every UI task and follow them completely. ``` Suggested filename: `agent-design-protocol.md` ### Step 05. Start every design chat with the rules loaded 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. #### Prompt opener ``` 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 ``` ## Related links - [FAQ (Markdown)](https://adp.itsnexor.cloud/faq.md) - [FAQ (HTML)](https://adp.itsnexor.cloud/faq) - [Design systems catalog](https://adp.itsnexor.cloud/design-systems) - [GitHub repository](https://github.com/bhargavtibadiya/agent-design-protocol) - [llms.txt](https://adp.itsnexor.cloud/llms.txt)