Give agents a checked-in design-system SKILL.md
Cursor or Claude Code authors a design-system SKILL.md with tokens, component rules, and anti-slop guardrails so agent-built UI matches your product instead of generic AI chrome.
A committed skill under .cursor/skills/ (or your team path) that agents load before UI work, with verify steps tied to your real components and Storybook or docs links.
- 1
Point at real tokens and components
Link the files agents should open first. A skill that says “match our brand” without paths drifts into generic layouts.
- 2
Commit under the team skills folder
Use .cursor/skills/design-system/SKILL.md or the path you already document in AGENTS.md. One pointer line in project rules, not a second copy of the rules.
- 3
Run one UI task through the skill
Ask for a small screen or component using the skill. Reject diffs that introduce new primitives when an existing component already fits.
The prompt to paste
Write a design-system SKILL.md for this repository. Agents must follow our product UI, not default Tailwind or “AI dashboard” patterns. Design sources (paste or link paths): [design tokens file, Figma link, Storybook URL, or internal style guide excerpt] Stack: [framework, component library path e.g. src/components/ui, CSS approach] SKILL.md sections, in order: 1. Purpose — one sentence: agent UI work must match our design system. 2. When to use / when not to use (include: stop if no token or component source is linked). 3. Required inputs before editing UI: route or feature name, which existing screen to mirror, and the token/component files to read first. 4. Design rules (bullets): typography scale, spacing grid, color usage (semantic tokens only), border radius, motion limits, dark mode if applicable. 5. Component rules: which primitives to import (exact paths), composition patterns we use, forbidden patterns (e.g. random gradients, hero blobs, three-column card grids unless listed). 6. Anti-slop checklist: five concrete “reject this diff” signals (generic purple gradients, invented icon sets, new button styles, etc.). 7. Steps for the agent: read tokens → find nearest existing page → implement using existing components → run [confirm lint/story command] → compare to reference screen. 8. Two example prompts: one small component fix, one new page section that must match an existing layout. 9. Pitfalls: inventing tokens, duplicating shadcn with inline styles, ignoring mobile breakpoints we already define. 10. Done means: checklist including “no new color hex outside tokens” and “screenshot or Storybook story matches reference.” Rules: - Use real paths from the repo paste; write [confirm path] if unknown. - Do not paste the entire design guide — point to files agents should open. - Output only SKILL.md markdown. No preamble.
Agents optimize for plausible UI, not your catalog. The anti-slop section needs reject signals a reviewer can see without design taste debates.
Sample case written by Hidden Logic Lab. Not affiliated with Cursor or Claude Code.
More in Coding
Get new cases in your inbox
Weekly notes on new use cases and agent workflows. No product pitches.