Design System for AI, without the hallucinations

A final gate before any UI task is called done. Your AI agent reuses approved components, sticks to your tokens, and never promotes its own work into the design system.

Get the skill

About

Your design system, respected by every agent. Design Guard is a final gate that runs before any UI task is called done. Only components a human marked @approved count. Everything else gets reported, never quietly shipped.

How Design Guard works

One gate before “done”, so your AI builds with your library instead of inventing its own.

Get the skill

@approved

Approval is a human signal

A component is part of your system only when its own file carries @approved in the first five lines. Not its folder, not how finished it looks. The agent can never add the marker itself.

Get the skill

Button.tsx

/**
 * @approved 2026-09-12
 * Primary action button.
 */
export function Button(props) {
  …
}

Lint

Catches what hallucinates

A deterministic linter flags raw buttons and inputs, unmarked components in use, and inline overrides on approved ones, even with semantic tokens. The point is component authority, not theme safety.

Get the skill

Design system check