Stop Fixing the Same UI Mistakes Every Time You Use AI
A system that forces consistent design across your project - so your components follow rules automatically, not manually.
+ Blueprint Consultation (€180) can be added at checkout
Or get all blueprints with the Builder Pass
What this actually fixes
One setup. Every session after that follows your rules.
- Inconsistent spacing, fonts, and borders across components
- AI ignores your previous decisions every new session
- You correct the same mistakes again and again
- Components that do not match each other
- Every component follows the same rules
- Your design stays consistent across sessions
- Mistakes are caught automatically after every edit
- You stop fixing. The system enforces.
Why AI breaks your UI consistency
AI does not remember your design decisions. Every session starts from zero.
This replaces manual correction
Consistency is not something you enforce. It is something the system enforces.
How it works
Fill in colors, fonts, spacing, and component patterns using the included templates. Every placeholder maps to a specific file and section - nothing is ambiguous.
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.
Use /generate-component to scaffold new components with your patterns pre-applied. No drift, no manual correction, no starting from scratch each time.
After every save, /check-design runs automatically and catches violations - wrong borders, incorrect fonts, missing patterns - before they become habits.
Everything you need to run this
6 files - the working system, skills, hooks, and full documentation.
QUICK_START.md
15 minutes from download to a working design enforcement system in your project
DESIGN.md + docs/
Three templates: design-tokens.md, design-consistency.md, design-system.md - fill in your rules
.claude/skills/ (3 skills)
design-context, check-design, generate-component - drop into any project
.claude/hooks/ (2 hooks)
remind-design-context (PreToolUse) + validate-component (PostToolUse) - wired and ready
SvelteKit example
Golden ratio tokens.css + Svelte 5 component template with correct patterns pre-applied
ADAPTING.md
Step-by-step guide to adapt the system to Next.js, Vue, or Astro
You are not writing rules from scratch. You are deploying a system.
What this saves you
This is not about design theory. It is about removing repeated work.
Who this is for
- 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
- You build static sites with no ongoing AI-assisted development
- You are not using AI in your UI workflow
Choose how you want to use it
UI Consistency System. Set it up yourself using the full system and documentation included.
Blueprint + Setup Session. We map your design rules and set up the enforcement system with you live.
Full design system setup. We define, structure, and implement your complete design system - ready on delivery.
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. Or book the guided session and we set it up with you live.
Do I own the files? Is this a subscription?
One-time purchase. You get the full source - templates, skills, hooks, and documentation. No license, no SaaS dependency, no ongoing fee. You can read it, modify it, and deploy it in any project.
What if I get stuck?
Use the Blueprint Consultation - we resolve blockers with you live. Or post in the support Telegram group where other builders and the ABA team can help.
Preview before you buy
The preview repo on GitHub shows the complete file structure and partial content. No surprises.
github.com/mrnelke/aba-blueprint-design-context-previewTools you will need
Claude Code is the only requirement. The enforcement system is built around it.
The agent the hooks and skills are built for - runs the enforcement system
Stop Fixing the Same UI Mistakes Every Time You Use AI
Set your rules once. Let the system enforce them every time.
+ Blueprint Consultation (€180) can be added at checkout
Or get all blueprints with the Builder Pass
Need help applying this to your existing project? Book a 90-minute Blueprint Consultation at €180 - we map your design system and wire the enforcement layer together.
Book a Blueprint Consultation - €180