UI Consistency System Blueprint preview
QUICK_START.md
DESIGN.md
docs/ (3 templates)
.claude/skills/ (3 skills)
.claude/hooks/ (2 hooks)
ADAPTING.md
Browse the repo โ†’
The system is fully public. Clone the repo and have everything running in 15 minutes. git clone https://github.com/mrnelke/aba-blueprint-design-context-starter
Free Blueprint

Stop Fixing the Same UI Mistakes Every Time You Use AI

Turn inconsistent UI into a system that enforces itself.

AI forgets your design rules every session. This makes it follow them - automatically.

Your design rules load before every AI session
Every component follows the same patterns
Violations are caught automatically after each change
Every consistency fix you redo costs 15-20 minutes of session time. This catches it before it happens.

We send the GitHub link to your email. No spam, no subscription required.

What this actually fixes

One setup. Every session after that follows your rules.

Without this
  • Every AI session resets your design decisions
  • Components drift - spacing, fonts, borders never match
  • You fix the same issues again and again
  • Inconsistency compounds as your project grows
With this
  • Your rules are enforced automatically
  • Every component follows the same system
  • Violations are caught instantly
  • You stop correcting - the system enforces

Why this keeps happening

AI does not remember your decisions. Every session starts from zero. Every component is generated in isolation. That is why your UI keeps breaking.

Consistency is not maintained - it is lost between sessions
Slight differences turn into visible inconsistency across components
Your system breaks as your project grows
You spend more time fixing than building

This removes repeated fixes

1 Define your design rules once
2 Rules load automatically before every session
3 Generate components with correct patterns pre-applied
4 Every edit is validated automatically

Consistency is not enforced by you. It is enforced by the system.

How it works

1
Define your design rules

Fill in colors, fonts, spacing, and component patterns using the included templates. Every placeholder maps to a specific file and section - nothing is ambiguous.

2
Load them automatically

Start every UI session with /design-context. Your rules are injected before the first edit. A hook fires before every .svelte file to remind Claude of your standards.

3
Generate components correctly

Use /generate-component to scaffold new components with your patterns pre-applied. No drift, no manual correction, no starting from scratch each time.

4
Validate every change

After every save, /check-design runs automatically and catches violations - wrong borders, incorrect fonts, missing patterns - before they become habits.

See the setup in 15 minutes

A full walkthrough - from clone to working enforcement system.

Video walkthrough coming soon

Everything you need to run this

6 files - the working system, skills, hooks, and full documentation.

MD

QUICK_START.md

15 minutes from download to a working design enforcement system in your project

MD

DESIGN.md + docs/

Three templates: design-tokens.md, design-consistency.md, design-system.md - fill in your rules

MD

.claude/skills/ (3 skills)

design-context, check-design, generate-component - drop into any project

MD

.claude/hooks/ (2 hooks)

remind-design-context (PreToolUse) + validate-component (PostToolUse) - wired and ready

MD

SvelteKit example

Golden ratio tokens.css + Svelte 5 component template with correct patterns pre-applied

MD

ADAPTING.md

Step-by-step guide to adapt the system to Next.js, Vue, or Astro

You are not designing a system. You are deploying one.

What this removes

Fixing UI inconsistencies every session gone
Re-explaining design rules to AI gone
Manual correction loops gone
Setup time 15 minutes

Who this is for

This is for you if
  • You build UIs with AI and your components are inconsistent
  • You repeat the same corrections every session
  • You want structure without slowing down your workflow
  • You use Claude Code and want it to follow your design rules
This is not for you if
  • You build static sites with no ongoing AI-assisted development
  • You are not using AI in your UI workflow

Common questions

Do I need a full design system already?

No. The templates guide you through defining one. You fill in your colors, fonts, spacing, and component patterns - each placeholder maps to a specific file and section.

Does this work outside SvelteKit?

Yes. The system is framework-agnostic. An adaptation guide for Next.js, Vue, and Astro is included. The enforcement layer - skills and hooks - works in any project that uses Claude Code.

Is this only for developers?

You need basic project access and Claude Code. The setup takes 15 minutes following the included QUICK_START.md. If you get stuck, write to support@agentbuilderacademy.com directly.

Do I own the files? Is this a subscription?

Completely free. You get the full source - templates, skills, hooks, and documentation. No license, no SaaS dependency, no ongoing fee. Clone it, modify it, and deploy it in any project.

What if I get stuck?

Write to support@agentbuilderacademy.com directly - describe where you are stuck and we will sort it out.

What you need

Claude Code is the only requirement.

Claude Code

The agent the hooks and skills are built for - runs the enforcement system

Included with Claude Pro / Max
Browse the repo on GitHub

Stuck on setup?

Write to support@agentbuilderacademy.com - describe where you are stuck and we will sort it out.

UI Consistency System

One setup. Design rules enforced before every AI session - permanently. Every consistency fix you skip is 15-20 minutes of session time reclaimed. Across a growing project, that compounds fast.

Get Free Access