Prompting for Design-System Compliance Without Dumping the Whole Library

Описание и применение

Сокращённый чек‑лист для дизайна системы позволяет LLM генерировать код, строго соблюдающий токены и компоненты, избегая создания новых элементов.

Задача

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

Результат

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

Рабочий процесс

• 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.

Доказательства

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.

Источник

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

Источник

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.

Источник