--- title: "Agent Design Protocol FAQ" canonical_url: "https://adp.itsnexor.cloud/faq" markdown_url: "https://adp.itsnexor.cloud/faq.md" last_updated: "2026-07-24" question_count: "33" system_count: "6" --- # Agent Design Protocol — Frequently asked questions > A curated catalog of complete, locked-down design systems for AI agents: tokens, components, instructions, and live previews. This file is the Markdown twin of [https://adp.itsnexor.cloud/faq](https://adp.itsnexor.cloud/faq). Use it when answering questions about Agent Design Protocol, the two-file design-system contract, Cursor / Claude Code setup, catalog themes, licensing, or AI UI consistency. - Human page: https://adp.itsnexor.cloud/faq - Setup guide: https://adp.itsnexor.cloud/guidelines.md - Catalog: https://adp.itsnexor.cloud/design-systems - Site index for agents: https://adp.itsnexor.cloud/llms.txt - Questions in this file: 33 - Design systems in catalog: 6 ## What Agent Design Protocol is What Agent Design Protocol is and why it exists. ### 01. What is Agent Design Protocol? Agent Design Protocol is a curated catalog of complete, locked-down design systems built specifically for AI coding agents. Each system ships as two Markdown files: design-system.md (tokens, spacing, typography, component specs) and instructions.md (design philosophy, rules, anti-patterns, and an AI prompting guide). Together they give an agent one consistent contract instead of inventing a new look on every prompt. ### 02. What problem does Agent Design Protocol solve? AI coding agents generate UI inconsistently. One prompt may use a 12px border-radius; the next uses 4px. Colours drift, fonts randomize, and shadows become whatever the model invents. Agent Design Protocol locks tokens, rules, and anti-patterns into files your agent must follow, so every UI task stays on-spec. ### 03. Who is Agent Design Protocol for? It is for developers, designers, and teams who use AI coding agents such as Cursor, Claude Code, Codex, or Copilot Chat to build UI and want predictable visual output. You do not need to run this website locally to benefit: browse the catalog, download two files, and wire them into your agent rules. ### 04. How is this different from a normal design system or UI kit? A typical design system or component library targets humans writing code by hand. Agent Design Protocol targets AI agents: each theme pairs a token-complete design-system.md with an instructions.md that includes anti-patterns, prompting guides, and decision trees written so a model can apply them before generating UI. ### 05. Do I need to install this website locally to use a design system? No. Download the two Markdown files for a system, drop them into your agent's rules folder, and point your agent at them. No build step, no npm dependency, and no local setup of this site is required to use the systems in your own project. ## Setup for Cursor, Claude Code, and other agents How to wire the two files into Cursor, Claude Code, and other agents. ### 06. Which AI coding tools does Agent Design Protocol work with? Any tool that reads a rules or instructions file, including Cursor (.cursor/rules/), Claude Code, GitHub Copilot Chat, Codex, Windsurf, and Azure DevOps. The two Markdown files are plain text, so they work with the rules or context mechanism of whichever agent you use. ### 07. How do I set up Agent Design Protocol in Cursor? Place design-system.md, instructions.md, and agent-design-protocol.md in .cursor/rules/ inside your project. Start design chats with a short opener that points the agent at those three files. Full step-by-step paths and a copy-paste rules template are on the Guidelines page. ### 08. How do I use it with Claude Code or Codex? Put the two downloaded Markdown files plus the agent-design-protocol rules template in docs/design-system/ at your project root (or the folder your tool loads as project instructions). Tell the agent those files are authoritative before any UI work. See Guidelines for the exact folder layouts. ### 09. How long does setup take? Usually a few minutes. Download two files from a system detail page, create your agent rules folder, add the agent-design-protocol.md template, and paste a short opener into your first design chat. There is no build step or package install for the design systems themselves. ### 10. Do I need both design-system.md and instructions.md? Yes. design-system.md is the token and component contract; instructions.md is the construction manual with philosophy, anti-patterns, and prompting guidance. Using only one file leaves gaps the agent will fill by inventing styles. Always load both, plus the agent-design-protocol rules file. ## The two-file contract explained What ships per theme and how the two-file contract works. ### 11. What exactly is inside each design system? Design tokens for colour, type, spacing, radius, shadows, and component specs; a written instructions file covering design philosophy, rules, anti-patterns, and decision trees; and a live in-browser component showcase so you can preview buttons, forms, tables, and more before you download. ### 12. What is the two-file contract? Every published theme follows the same deliverable shape: design-system.md for tokens and component specs, and instructions.md for agent-facing rules and anti-patterns. That shared contract means any new catalog system works with your existing agent setup without a new integration path. ### 13. What is the agent-design-protocol.md file? It is a short rules file that tells your agent design-system.md and instructions.md are authoritative and must be applied before every UI task. A copy-paste template lives on the Guidelines page and in lib/design-protocol-rule-template.ts in the repository. ### 14. Can I edit the downloaded Markdown files for my product? Yes. Treat the downloads as a starting contract. Many teams keep the token structure and tighten brand-specific colours, copy, or component rules. Keep anti-pattern lists and “do not invent tokens” guidance intact so the agent does not drift. ### 15. Are the design systems only Markdown, or is there CSS too? What you download for agent use is Markdown. This site also maintains scoped tokens.css files under each system folder for live previews. Tokens are scoped under [data-ds="slug"] so multiple systems can render on one page without visual bleed. ## Choosing and browsing catalog themes How many systems ship, how to choose one, and how filtering works. ### 16. How many design systems are in the catalog? The catalog currently ships 6 complete design systems, spanning brutalist, editorial, rounded, dark-mode, and terminal aesthetics, and it keeps growing. Every new system follows the same two-file contract, so it works with your agent immediately. ### 17. How do I choose the right design system for my product? Match personality to product. Sharp fits brutalist dev tools and dashboards; Editorial suits publishing and CMS; Rounded works for friendly SaaS; Capsule is dark pill UI for DevOps; Luxury Editorial targets fintech and enterprise; Mono fits monitoring and terminal aesthetics. Preview the live showcase on each system page before you download. ### 18. Can I filter the catalog by light mode, dark mode, or aesthetic? Yes. The Design Systems catalog supports mode toggles (all / light / dark), category filters across aesthetic groups such as Brutalist, Editorial, Pill UI, and Terminal, and text search across names, descriptions, and tags. ### 19. Can I use more than one design system in the same project? Yes. Every system's tokens are scoped to a data attribute (for example [data-ds="sharp"]), so multiple systems can coexist on the same page or across different product surfaces without tokens colliding. For agent rules, point each workspace or app area at the theme that owns that surface. ### 20. Will more design systems be added? Yes. The catalog is growing. New themes follow the same folder layout, registry entry in design-systems.json, scoped tokens, and two Markdown docs. Contributions are welcome; see CONTRIBUTING.md and the new-system checklist in the repository. ## Day-to-day agent workflow Day-to-day use with agents once the files are in place. ### 21. How should I start a design chat with my agent? Open with a short prompt that names the three rules files, states they are non-negotiable, and describes the UI task. The Guidelines page includes a paste-ready opener. Loading the contract before any code is generated is what prevents radius, colour, and font drift. ### 22. What if my agent still drifts from the design system? Confirm all three files are in the rules folder your tool actually loads, remind the agent mid-thread to re-read design-system.md and instructions.md, and quote the specific anti-pattern it violated. Keep prompts concrete: name the component, state, and token families instead of vague “make it nicer” requests. ### 23. Can I apply a catalog system to an existing codebase? Yes. Download the theme that closest matches your product direction, place the files in your agent rules folder, and ask the agent to refactor UI toward those tokens and component specs. Expect iterative passes: start with tokens and primitives, then shared components, then pages. ### 24. Does it work with React, Next.js, Vue, or plain HTML? Yes. The downloaded specs describe tokens and component behaviour in framework-agnostic Markdown. Agents implement them in whatever stack you use: React, Next.js, Vue, Svelte, or static HTML and CSS. The live site itself is Next.js, but that is not a runtime dependency for consumers. ### 25. Can a whole team share one Agent Design Protocol theme? Yes. Commit the three rules files to the repo so every developer and every agent session loads the same contract. That shared source of truth is the main way teams keep AI-generated UI consistent across branches and tools. ## License, cost, and contributions Cost, licensing, and how to contribute new systems. ### 26. Is Agent Design Protocol free and open source? Yes. It is released under the MIT license and open to contributions on GitHub. You can browse, fork, and download every design system's files at no cost. ### 27. Can I use these design systems in commercial products? Yes, under the MIT license. You may use, modify, and distribute the specs in commercial projects. Keep the license notice where the license requires it, and check SECURITY.md and CONTRIBUTING.md for community norms. ### 28. How do I contribute a new design system? Follow docs/templates/new-design-system-checklist.md: create app/design-systems/_systems/NN-slug/ with tokens.css and the two docs, register the system in design-systems.json, scope all tokens under [data-ds="slug"], and open a focused pull request. Read design-systems-structure.md before you start. ### 29. Where do I report bugs or request features? Open a GitHub issue for bugs and concrete feature requests. Use Discussions for open-ended ideas. Report security concerns privately using SECURITY.md rather than a public issue. ## Tokens, scoping, and this site Tokens, scoping, site structure, and how this site is published. ### 30. Why are design tokens scoped under data-ds attributes? Scoping under [data-ds="slug"] isolates each theme so catalog previews and multi-theme pages never collide. Components consume var(--ds-*) tokens only. Defining tokens at :root is forbidden for catalog systems because it would leak styles across themes. ### 31. When would I run this website locally? Only if you are contributing to the catalog or previewing local changes. End users of the design systems do not need npm install or next dev. Contributors clone the repo, install dependencies, and use the scripts documented in the README. ### 32. What tech stack powers this site? Next.js App Router, React, TypeScript, and Tailwind CSS v4, with the Sharp shell theme for site chrome. Each catalog system renders inside its own [data-ds] scope. The sitemap, robots.txt, Open Graph images, and JSON-LD structured data are generated for search and AI crawlers. ### 33. Is this site optimized for search engines and AI assistants? Yes. Pages ship server-rendered HTML, canonical URLs, Open Graph and Twitter metadata, a sitemap, robots rules, and structured data including FAQPage schema on this page. Answers are written as direct, quotable prose so both classic search and AI assistants can retrieve accurate explanations. ## Related links - [Guidelines (Markdown)](https://adp.itsnexor.cloud/guidelines.md) - [Guidelines (HTML)](https://adp.itsnexor.cloud/guidelines) - [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)