Your AI agent keeps ignoring your design system. Put it on rails.
design-guardrails prevents AI agents from using native html elements or hard coded styling when they should be using your design system. Deterministic errors force the agent to self-correct during the session, without your intervention.
1 return (
2 <form className="bg-[#F8F9FA] p-8 rounded-xl">
3 <h2 className="text-[#1A1A2E] text-xl font-bold">
4 Create account
5 </h2>
6 <input
7 type="email"
8 placeholder="Email"
9 className="border-[#CCCCCC] rounded p-2"
10 />
11 <input
12 type="password"
13 placeholder="Password"
14 className="border-[#CCCCCC] rounded p-2"
15 />
16 <button
17 className="bg-[#4F46E5] text-[#FFFFFF] px-4 py-2"
18 >
19 Sign up
20 </button>
21 </form>
22 ) 1 return (
2 <form className="bg-surface p-8 rounded-xl">
3 <Typo mode="heading" size="xl">
4 Create account
5 </Typo>
6 <Input
7 type="email"
8 placeholder="Email"
9 />
10 <Input
11 type="password"
12 placeholder="Password"
13 />
14 <Button
15 variant="primary"
16 >
17 Sign up
18 </Button>
19 </form>
20 )Built on Claude Code's PostToolUse hooks: every file write is checked against your design system in real-time, and violations are fed back to the agent before it moves on.
You are the linter
❯ pls use <Button> instead of <button>
❯ noo, no hard coded colors, use colors defined in tailwind.config
Your agent stays on track
Same prompt. Different output.
Why not just use CLAUDE.md or a skill?
| 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 |
Setup once. Enforce forever.
Run the CLI
One command detects your framework, asks which components to enforce, and writes your config.
Hooks run silently
Every time your agent writes a file, hooks check it against your rules and surface violations instantly.
Agent self-corrects
The agent reads the feedback, fixes the code, and moves on. Zero manual intervention. You keep building.
$ npx design-guardrailsDetected: Next.js + TypeScriptGenerated: guardrails.config.tsInstalled: Claude Code hooksReady. Every file write is now checked.
Stop babysitting your agent’s output.
Install design-guardrails in one command.