Open Source

Your AI agent keeps ignoring your design system. Put it on rails.

design-guardrails hooks into your AI coding agent and enforces your components, tokens, and conventions on every file write. The agent self-corrects. You never intervene.

GitHub

    $ npx design-guardrails
    Detected: Next.js + TypeScript
    Generated: guardrails.config.ts
    Installed: Claude Code hooks
    Ready. Every file write is now checked.

Without design-guardrails

You are the linter

claude code your-project/

❯ pls use <Button> instead of <button>

claude code your-project/

❯ noo, no hard coded colors, use colors defined in tailwind.config

With design-guardrails

Your agent stays on track

<button> detected

replaced by <Button> component

design-guardrails running…

Before & After

Same prompt. Different output.

Without guardrails

#63g5fh

#ffffff

→

With guardrails

<Input>

<Link>

text-secondary

bg-background

Why not just use CLAUDE.md?

	Prompt instructions	design-guardrails
Rules run as code, not suggestions	No	Yes
Catches every violation, every time	No	Yes
Corrects drift mid-session	No	Yes
Zero babysitting	No	Yes

How it works

Setup once. Enforce forever.

Run the CLI

One command detects your framework, asks which components to enforce, and writes your config.

$ npx design-guardrails

Hooks run silently

Every time your agent writes a file, hooks check it against your rules and surface violations instantly.

2 violations found →

Agent self-corrects

The agent reads the feedback, fixes the code, and moves on. Zero manual intervention. You keep building.

✓ All violations fixed

Stop babysitting your agent’s output.

Install design-guardrails in one command.

Install Now GitHub