Prompting for Design-System Compliance Without Dumping the Whole Library

Description and use

A concise cheat sheet for the design system enables LLMs to generate code that strictly follows tokens and components, avoiding the creation of new elements.

Problem

Agents often generate new components or use raw values when given a large design‑system catalog in the prompt, leading to non‑compliant PRs.

Outcome

The slim cheat sheet approach reduces reinvent‑the‑wheel PRs, enforces token usage, and keeps the agent’s output compliant with the design system.

Workflow

• 1. Create a design‑system cheat sheet listing legal imports, token names, and composition defaults.
• 2. Include a hard stop rule: if a required primitive is missing, the agent must ask instead of inventing.
• 3. Provide the cheat sheet in the prompt before the task description.
• 4. Ask the agent to build the component using only the listed primitives and tokens.
• 5. After the agent returns code, run a pre‑merge smell check: search for hex/rgb, new files in components/ui, unexpected imports, and reimplemented spacing.
• 6. If any violations are found, update the cheat sheet and re‑prompt; otherwise, merge the PR.

Evidence

Agents drown in component catalogs. What they need is a small, sharp contract: which primitives exist, which props are legal, and what “done” looks like when the diff lands.

Source

The model saw the library. It didn’t treat the library as the only legal surface. Catalog dumps read like inspiration boards, not constraints.

Source

Build X using only the Legal UI imports below. Do not create new primitives. If something is missing, stop and name the gap — don’t invent a component.

Source