███████╗███████╗███╗   ██╗ ██████╗███████╗
  ██╔════╝██╔════╝████╗  ██║██╔════╝██╔════╝
  █████╗  █████╗  ██╔██╗ ██║██║     █████╗
  ██╔══╝  ██╔══╝  ██║╚██╗██║██║     ██╔══╝
  ██║     ███████╗██║ ╚████║╚██████╗███████╗
  ╚═╝     ╚══════╝╚═╝  ╚═══╝ ╚═════╝╚══════╝

Design memory for your vibe code.

The reason vibe-coded UIs look inconsistent isn't the AI. It's that the AI has no design memory and nothing stops it from breaking your brand.

Screen 1 looks great. Screen 5 looks like a different product. Fence fixes that.

Get started

npx create-fence-app my-dashboard
cd my-dashboard
npm run dev

Open in Cursor, Windsurf, or Claude Code. Tell it what to build.

"Add a patients table with status badges and a view button"
"Build a form to add a new record with validation"
"Create a detail panel that slides in when I click a row"

Every screen stays on-brand. Every component looks like the same designer built it.

Works with every AI editor

Fence auto-loads design rules into whichever editor you use - no setup, no manual steps.

| Editor | How Fence loads | | --------------------- | ---------------------------------------------------------------- | | Cursor | .cursor/rules/fence.md - active on every session automatically | | Windsurf | .windsurfrules - active on every session automatically | | Claude Code | CLAUDE.md at project root - read before every task | | Codex | AGENTS.md at project root - active automatically | | VS Code + Copilot | .github/copilot-instructions.md - loaded per workspace |

Open the project. Start building. The AI already knows your rules.

Bring your brand

At setup, Fence asks for your colors and fonts - not ours.

npx create-fence-app my-dashboard

  Primary color:   #EF4444   (or Enter for indigo default)
  Secondary color: #1E293B   (or Enter for purple default)
  Heading font:    Cal Sans  (or Enter for Poppins default)
  Body font:       DM Sans   (or Enter for Inter default)

Your brand gets locked into the design system from line one. Change your mind later? Edit fence.config.json and run npm run fence:sync.

Fix anything. Surgically.

Every Fence project ships with Agentation pre-wired.

When npm run dev is running, a toolbar appears in the bottom-right corner of your browser. Instead of describing UI problems in words and hoping the AI finds the right element, you point directly at it.

1. Click the Agentation icon (bottom-right)
2. Click any element - a badge, a button, an input, anything
3. Type your note: "wrong color, should use warning tokens"
4. Click Copy
5. Paste into Cursor chat → AI fixes exactly that element

No more "fix the blue button in the sidebar." The AI gets the exact selector, computed styles, and position. It changes one thing. Nothing else moves.

The fence enforces itself

Before every deploy, Fence scans your code for design violations:

npm run ship "added patient form"

  Fence check
  ─────────────────────────────────────
  ⚠  Hardcoded hex color (2)
     Fix: Use bg-primary, text-success, etc.
     app/page.tsx:47 → className="bg-[#EF4444]"

  2 violations found.
  Fix them or ship anyway - your call.

No broken builds. No hard failures. Just a clear signal before you go live.

How it works

Fence generates a workspace with design guardrails already wired in.

When you open the project and describe what to build, the AI reads the fence before writing a single line. It knows your colors, your fonts, your components, your rules. It stays inside them - automatically, every session, in every editor.

You don't configure anything. You don't learn a design system. You just build.

What you get

A running Next.js 15 app, ready in under 2 minutes:

• A working dashboard to start from immediately
• Your brand colors and fonts locked into the design system from line one
• Design rules auto-loaded into your AI editor - no reminders, no manual steps
• Agentation pre-wired - click any element to give the AI a precise fix target
• Pre-deploy fence check - catches color and style drift before it ships
• One command to deploy: npm run ship "what you built" → live in 30 seconds

Commands

npm run dev                         # localhost:3000
npm run setup                       # connect GitHub + Netlify (run once)
npm run ship "added patient table"  # fence check + commit + push + deploy
npm run fence:check                 # scan for design violations without shipping
npm run fence:sync                  # regenerate tokens after editing fence.config.json

Who is this for?

PMs, designers, and design engineers who prototype in AI editors but end up with UIs that drift after the third screen.

You don't need to understand design systems. Fence enforces them for you.

Requirements

• Node.js >= 18
• Cursor, Windsurf, or Claude Code
• Git

License

PolyForm Shield 1.0.0

Built by @monfortbrian.