/design-review
Full design audit against all applicable rules. Scores 0–10 with critical issues and fixes.
Slash Command
v3.0 — Now with AI Agents
Stop your AI from
shipping amateur UI.
36 design rules + 11 AI agents. 79,444 words of design knowledge your AI loads before writing a single line of code. Claude Code, Cursor, Lovable, Codex — professional UI on the first generation.
30-day money-back guarantee. No questions asked.
Prompt
“Build a settings page”
padding: 13px ← off-grid
font-size: 12px ← unreadable body
3 blue buttons ← no hierarchy
contrast: 2.1:1 ← WCAG fail
Prompt
“Build a settings page”
padding: 16px ← 8px grid
font-size: 16px ← WCAG minimum
1 primary CTA ← clear hierarchy
contrast: 5.74:1 ← AA pass
0
Design Rules
0
Words
0
AI Agents
0
Psychology Principles
The Problem
AI builds fast.
But it designs blind.
Without design rules, every AI tool makes the same mistakes. Rainbow buttons, 12px body text, random spacing. Sound familiar?
Without Design Rules
Prompt
“Build a settings page”
× padding: 13px ← off-grid
× font-size: 12px ← unreadable body
× 3 blue buttons ← no hierarchy
× color: red / green / blue ← color soup
× CTA at top of page ← unreachable
× No loading state ← silent UI
× contrast: 2.1:1 ← WCAG fail
With Design Foundation v3
Prompt
“Build a settings page”
✓ padding: 16px ← 8px grid
✓ font-size: 16px ← proper type scale
✓ 1 primary CTA ← filled accent
✓ single accent color ← hierarchy by style
✓ CTA in thumb zone ← Fitts’s Law
✓ skeleton at 400ms ← Doherty threshold
✓ contrast: 5.74:1 ← WCAG AA pass
✓ 11 specialized agents ← expert targeted reviews
What's Inside
36 rules, organized by tier.
Rules are grouped into tiers — from always-active foundations to on-demand references. Your AI tool loads what it needs, when it needs it.
Tier 0 — Always Active
Every session
Core Principles
Visual hierarchy, 7 pillars, trade-off chain, pre-creation checklist
Tier 1 — Every UI Task
Core rules
UX Laws
Fitts, Hick, Miller, Jakob, Doherty — scientific design decisions
Layout & Spacing
8px grid, margins, padding, breathing room, content density
Typography
Font sizes, weights, line height, text hierarchy system
Colors
Palettes, semantic colors, contrast, dark/light mode
Accessibility
WCAG 2.2, contrast ratios, touch targets, screen readers
Tier 2 — On-Demand (27 files)
Loaded when relevant
Gestalt Principles
Proximity, similarity, continuity, closure, figure-ground
Buttons & CTA
Hierarchy, sizes, states, filled/outlined/text variants
Forms & Inputs
Text fields, validation, error states, progressive disclosure
Navigation
Bottom nav, tabs, drawers, headers, breadcrumbs
Cards & Lists
Content containers, transaction lists, grid layouts
Feedback & States
Loading, empty states, errors, success, toasts
Motion & Animation
Transitions, easing, micro-interactions, Dan Saffer’s framework
Nielsen Heuristics
10 usability heuristics with checklists and practical examples
Anti-Patterns
27 things to never do — always active as a guard rail
Icons
Material Symbols, sizing, containers, optical alignment
Responsiveness
Constraints, auto-layout, FILL/HUG/FIXED, adaptive components
Design Judgment
Decision frameworks, when to break rules, design maturity
Tables & Data UI
Data grids, sorting, filtering, admin panels
Data Visualization
Charts, graphs, dashboards, sparklines, KPIs
Content & UX Writing
Microcopy, voice & tone, button labels, error messages
Onboarding & Empty States
First-time UX, feature discovery, tooltips, coach marks
Modals & Overlays
Dialogs, bottom sheets, popovers, drawers
Search Patterns
Autocomplete, filters, results, command palettes
Design Tokens
Token hierarchy, component naming, theming foundations
Internationalization
i18n, RTL layouts, text expansion, locale-aware design
Design Handoff
Developer specs, redlines, component documentation
Design Critique
Review frameworks, feedback patterns, design QA
AI Design Patterns
Human-centered AI, agentic patterns, XAI, automation levels
Dark Mode
Surface system, color tokens, component overrides
Component API
Design tokens architecture, Figma-to-code bridge, W3C format
Performance Design
Skeleton screens, lazy loading, Core Web Vitals, image optimization
Platform Divergence
HIG vs Material, iOS vs Android decision framework
Tier 3 — Reference
Specialist
Visual References
Detailed analysis of Airbnb, Spotify, Linear, Nubank, Cash App, Uber, and more
Weinschenk Index
All 100 psychology principles indexed with one-line summaries
AI Agents — Claude Code Exclusive
11 Specialized Agents.
Each an Expert.
Instead of loading all 79,000 words into context, each agent loads only the rules it needs. Lean, fast, expert-level feedback on demand.
/design-critique
Structured critique using the observation → principle → impact → recommendation framework.
Slash Command
/accessibility-audit
WCAG 2.2 AA compliance check. Contrast, touch targets, focus management, semantic structure.
Slash Command
/design-checklist
Rapid pre-ship checklist. Visual, functional, content, and accessibility — in under 60 seconds.
Slash Command
dark-mode-review
Surface elevation system, contrast in dark, desaturation rules, component override verification.
motion-review
Transition timing (M3), easing curves, micro-interaction quality, reduced-motion compliance.
form-review
Labels, validation patterns, error states, progressive disclosure, inline feedback, accessibility.
responsive-review
FILL/HUG/FIXED audit, breakpoint behavior, touch targets at each viewport, scroll behavior.
data-ui-review
Tables, charts, dashboards, and KPI cards against data visualization and density rules.
component-design
Build new components from scratch using design tokens, component API patterns, and system rules.
onboarding-review
First-time UX, empty states, coach marks, Zeigarnik progress effects, habit formation patterns.
Live Excerpts
Read before you download.
These are real passages from the rule files. This is what your AI reads when it builds your UI.
Rule Zero — Fundamental Design Principles
"This document is the foundation of EVERYTHING. Before creating any visual element, these rules are inviolable."
Before creating any screen:
- → Define the visual hierarchy — What should the user see FIRST? SECOND? THIRD?
- → One primary action per screen — Never compete with 2 CTAs of equal visual weight
- → Breathe — White space is not waste, it's clarity
- → Consistency over creativity — If the design system defines a pattern, follow it. Always.
- → Mobile-first — Start from the smallest viewport and expand
The 7 Pillars of Visual Design:
Hierarchy, Contrast, Alignment, Proximity, Repetition, Whitespace, Unity
# Trade-Off Priority Chain (when goals conflict)
Accessibility > Safety > Readability > Consistency > Contextualization > Information Density > Aesthetics > Features
Accessibility > Safety > Readability > Consistency > Contextualization > Information Density > Aesthetics > Features
Anti-Patterns — What to NEVER Do
"Every anti-pattern listed here is a REAL error that has actually been made. If you violate any rule in this document, STOP and fix it before continuing."
Top 5 Most Common Errors:
- → AP-01: Cylindrical Button — Circular buttons MUST be FIXED width = FIXED height with cornerRadius = size/2. Severity: Catastrophic.
- → AP-06: Two Primary CTAs — Only 1 filled button per screen. Others are outlined or ghost. Severity: Major.
- → AP-02: Color Soup — Use exactly 1 accent color for all primary actions. Vary hierarchy by style, not color. Severity: Major.
- → AP-07: CTA at Top — Primary CTA always in the bottom half of the screen (thumb zone). Severity: Major.
- → AP-09: No Loading Feedback — Show loading within 100ms. Loading state if > 400ms. Severity: Major.
Dark Pattern Ban (Ethical Violations):
- → AP-18: Confirm-shaming — "No thanks, I don't like saving money" is forbidden. Use neutral dismiss text.
- → AP-19: Roach Motel — Sign up in 1 click, delete account in 2 steps max. Equal effort in, effort out.
- → AP-20: Hidden Costs — All costs visible from the start. No surprises at checkout.
Visual References — How World-Class Apps Design
"This is NOT a list of links. It is a detailed ANALYSIS of the best apps in the world, deconstructed screen by screen — spacing, hierarchy, color strategy, typography."
Apps Analyzed:
Nubank, Revolut, Cash App, Airbnb, Instagram, Uber, Spotify, Linear, Shopify
- → Hero element: 28-40px Bold, body 14-16px Regular — minimum 2:1 hero-to-body ratio
- → Color restraint: Maximum 1 accent color per screen, on less than 10% of surface area
- → Section spacing: 32-48px between sections, 12-16px between list items, 16-24px card padding
- → Text hierarchy: Through weight + gray shades, NOT color variation
- → Dark mode elevation: #0A0A0F → #14141A → #1C1C24 → #24242E — never use shadows
- → Density spectrum: Cash App (minimal) to Linear (dense) — match density to your product type
# Nubank Color Strategy
Brand purple (#820AD1): Used ONLY for the primary CTA
Background: Pure white (#FFFFFF)
Text primary: Very dark gray (#1A1A1A)
KEY LESSON: The purple appears in LESS than 5% of the screen.
Brand purple (#820AD1): Used ONLY for the primary CTA
Background: Pure white (#FFFFFF)
Text primary: Very dark gray (#1A1A1A)
KEY LESSON: The purple appears in LESS than 5% of the screen.
UX Laws — Scientific Foundation for Design
"Based on lawsofux.com (Jon Yablonski), cognitive psychology, and usability research. Each law includes: definition, explanation, and PRACTICAL RULE for application."
Fitts’s Law:
The time to reach a target is a function of distance and size. T = a + b × log₂(2D/W)
- → Primary CTA: ALWAYS the largest button on screen. Minimum 48px height, full-width on mobile
- → Destructive actions: Smaller and farther from the main CTA
- → NEVER place primary action in the top-left corner on mobile
Hick’s Law:
Decision time increases with number of choices. T = b × log₂(n + 1)
- → Main navigation: Maximum 5 items
- → Actions per screen: 1 primary + maximum 2 secondary
Miller’s Law (Revised):
Modern research shows working memory holds 4 items, not 7.
- → Navigation groups: Chunk into groups of 3-4 items
- → Onboarding steps: 3-4 is the sweet spot
Ready to upgrade your AI's design skills?
Less than a single design review. Yours for every project, forever.
30-day money-back guarantee · One-time payment · All future updates included
3 Packages
One tool or all of them —
One tool or all of them —
Design Foundation has you covered
One purchase includes all three packages. Start with Claude Code, switch to Cursor, use both. Same knowledge, optimized delivery.
The Full Experience
Claude Code unlocks everything. 11 specialized agents, 4 slash commands, multi-model routing, and an 80% leaner always-on context. This is Design Foundation at its best.
# One-command install
bash install.sh claude
bash install.sh claude
- 11 specialized agents — each loads only what it needs
- 4 slash commands: /design-review, /design-critique, /accessibility-audit, /design-checklist
- Path-scoped auto-loading — 6 rules activate based on the file you’re editing
- Lean core context: ~1,100 words always-on (down from ~6,000)
- Multi-model routing: haiku for fast checks, sonnet for deep audits
- CLAUDE.md with full rules index
File Structure
project-root/ └── .claude/ ├── CLAUDE.md lean core + index ├── agents/ │ ├── design-review.md slash command │ ├── design-critique.md │ ├── accessibility-audit.md │ ├── design-checklist.md │ ├── dark-mode-review.md │ ├── motion-review.md │ ├── form-review.md │ ├── responsive-review.md │ ├── data-ui-review.md │ ├── component-design.md │ └── onboarding-review.md └── rules/ ├── 01-ux-laws.md ├── 03-layout-spacing.md └── ...34 rule files
Auto-Loading Rules
Cursor’s native .mdc format with YAML frontmatter. 34 rule files, 6 auto-load via glob patterns based on what file you’re editing. No configuration needed.
# One-command install
bash install.sh cursor
bash install.sh cursor
- 34 .mdc rule files in Cursor’s native format
- 6 rules auto-activate via glob patterns (forms, tables, modals, search)
- alwaysApply: true for core principles and anti-patterns
- AI reads description field to decide which rules to include
- Rules auto-load from .cursor/rules/ — zero config
- .cursorrules system prompt for always-active context
File Structure
project-root/ └── .cursor/ ├── .cursorrules system prompt └── rules/ ├── 00-core-principles.mdc alwaysApply: true ├── 01-ux-laws.mdc agent-requested ├── 07-forms-inputs.mdc globs: **/*.form.* ├── 21-tables-data-ui.mdc globs: **/*table* ├── 25-modals-dialogs.mdc globs: **/*modal* └── ...all 34 files
Works Everywhere
Dedicated installer targets for Lovable and Codex, plus plain Markdown rules for any tool that accepts custom instructions. Windsurf, Bolt, Replit — if it has a context field, it works.
# Dedicated install targets
bash install.sh lovable
bash install.sh codex
bash install.sh all # installs everything
bash install.sh lovable
bash install.sh codex
bash install.sh all # installs everything
- Lovable — single concatenated knowledge file, ready to paste
- Codex — plain .md rules in .codex/ directory
- 36 plain .md rule files for manual reference or any tool
- Supports: Windsurf, Bolt, Lovable, Codex, Replit, Gemini CLI
- Paste individual rule files into chat for specific topics
- No tool-specific configuration required
File Structure
project-root/ ├── lovable-knowledge.md Lovable target ├── .codex/ Codex target │ ├── 00-core-principles.md │ ├── 01-ux-laws.md │ ├── ... │ └── 36-platform-divergence.md └── rules-md/ plain Markdown └── 36 .md files For Lovable: upload lovable-knowledge.md to your project
Step-by-Step
Up and running in
Up and running in
under 5 minutes
One install script. Pick your tool. Done.
1
Purchase and download
After purchase via Stripe you get instant access to the v3 zip. Unzip to a location on your machine — this is your Design Foundation source.
2
Run the install script
Navigate to your project root and run one command. The script creates the right directory structure for your tool automatically.
bash /path/to/design-foundation/install.sh claude
Replace claude with cursor or universal for other tools.
3
Verify the rules are active
Ask your AI tool this test prompt to confirm the rules loaded:
"What are the core design principles you follow? List the 7 pillars and the trade-off priority chain."
If it responds with Hierarchy, Contrast, Alignment, Proximity, Repetition, Whitespace, Unity — you’re live.
4
Run your first design review (Claude Code)
Open a component file and run the design-review agent:
/design-review src/components/MyComponent.tsx
You’ll get a scored report with critical issues, warnings, and what’s working well — in seconds.
5
Start building with design rules active
Give it a real task. The difference is immediate:
"Build a settings page for a SaaS app. Follow the design rules for layout, typography, forms, and navigation."
8px grid, proper hierarchy, single accent color, thumb-zone CTA, WCAG-compliant contrast — from the first generation.
Without Design Foundation
- Random spacing: 13px, 17px, 22px, 9px
- Four different accent colors on one screen
- 12px body text, barely readable
- Two competing primary buttons
- Mixed border-radius: 4px, 8px, 12px, 16px
- No loading states or feedback
- Generic labels: "OK", "Submit", "Confirm"
- No design review — ship and hope
With Design Foundation v3
- 8px grid: 8, 16, 24, 32, 48px everywhere
- Single accent color, hierarchy via filled/outlined/ghost
- 16px body, clear type scale from hero to caption
- One primary CTA, secondary is outlined
- Max 2 border-radius values + pill
- Loading at 400ms, skeletons, toast notifications
- Descriptive labels: "Save settings", "Delete account"
- /design-review catches issues before they ship
Created by
Written by a Senior Product Designer with 15+ years of experience building design systems, leading product teams, and shipping products used by millions.
15+
Years in Product Design
50+
Products Shipped
10M+
End Users Reached
5+
Design Systems Built
For Whom
Two audiences, one foundation
For Designers
- Codify your knowledge — Turn your design expertise into rules that AI tools follow consistently
- Design QA at scale — /design-checklist and /accessibility-audit catch errors before they ship
- Shared language — When AI follows the same rules you do, handoff friction disappears
- Psychology grounding — 100+ Weinschenk principles give your decisions scientific backing
- Critique framework — /design-critique uses observation → principle → impact → recommendation
- Visual reference library — 9 world-class app analyses with exact spacing, color, and type breakdowns
For Developers
- Ship professional UI without a designer — The agents replace having a designer review every screen
- No more guessing — Exact values: 8px grid, 16px min body, 44px touch targets, 4.5:1 contrast
- Works with your tool — Claude Code, Cursor, or any tool via Universal package
- Catch issues before PR — Run /design-review on any component, get a scored report in seconds
- Dark mode done right — Surface elevation system, not just “invert the colors”
- Accessibility built in — WCAG AA compliance is a rule, not an afterthought
Pricing
One purchase.
One purchase.
Every project. Forever.
Pay once, use on every project. All future rule and agent updates included.
Free
Core rules that stop the worst design mistakes. The always-active foundation layer — no card required.
€0
Free forever
- ✓ Core Principles — 7 pillars, visual hierarchy, trade-off chain
- ✓ Anti-Patterns — 27 things your AI will never do again
- ✓ Design Judgment — decision frameworks for when rules conflict
- ✓ system-prompt.md for any tool
- ✓ Works with Claude Code, Cursor, Lovable, Codex
No credit card required
Most popular
Pro
The complete design knowledge system. All 36 rules, all 11 agents, all 3 packages.
€25
One-time payment · Less than a single design review
- ✓ Everything in Free
- ✓ 11 Claude Code agents — /design-review and more
- ✓ 4 slash commands for instant expert audits
- ✓ All 36 design rule files (79,444 words)
- ✓ Claude Code + Cursor + Universal packages
- ✓ One-command install script
- ✓ 9 world-class app analyses (Airbnb, Spotify, Linear…)
- ✓ 100+ Weinschenk psychology principles indexed
- ✓ Lifetime updates — agents, rules, new features
30-day money-back guarantee
30-day money-back guarantee. No questions asked.
FAQ
Frequently asked questions
What are the AI Agents?
Agents are specialized sub-processes in Claude Code that spawn with their own context window, load only the design rules relevant to their task, and return compact, actionable results. Instead of loading all 79,000 words every time, a form-review agent loads only the 5 rules needed to audit a form. This keeps context lean and results sharp. Agents are a Claude Code-exclusive feature — other tools use the Cursor or Universal packages.
Does it work with Cursor?
Yes. Cursor gets 34 .mdc files with YAML frontmatter in Cursor’s native format. 6 rules auto-activate via glob patterns based on what file you’re editing — form rules load when you edit a form file, table rules load when you edit a data grid. The rest are available on-demand. Core principles and anti-patterns always apply via alwaysApply: true.
What if I switch tools later?
Pro includes all three packages. Start with Cursor today, switch to Claude Code tomorrow, or use both simultaneously. The same 36 design rules power every package — only the delivery format changes. Run
bash install.sh cursor on one project and bash install.sh claude on another. No additional cost.How is this different from writing rules myself?
79,444 words of battle-tested rules took hundreds of hours to compile, cross-reference, and encode for AI consumption. Each rule file includes the theory (why), the framework (how), and specific numeric values your AI can act on directly. The Weinschenk psychology cross-references, world-class app analyses, and anti-pattern catalog would take months to assemble from scratch. Plus: the agent architecture for Claude Code is pre-built and ready to use.
Does it work with Windsurf, Bolt, Lovable, or Codex?
Yes. The installer has dedicated targets:
install.sh lovable creates a single concatenated knowledge file, and install.sh codex copies rules to .codex/. For Windsurf and Bolt, use the Universal package — paste the plain Markdown rules into the project instructions field. Individual rule files can also be pasted into any chat prompt for targeted guidance.What does “path-scoped auto-loading” mean?
6 rules in the Cursor and Claude Code packages activate automatically based on which file you’re currently editing. When you open a form file, the Forms & Inputs rule loads. When you open a table component, the Tables & Data UI rule loads. You never have to manually include rules — the right knowledge surfaces exactly when you need it, without bloating context when you don’t.
Is there a money-back guarantee?
Yes. 30-day money-back guarantee, no questions asked. If Design Foundation doesn’t improve the quality of your AI-generated UI, email us and you’ll get a full refund.
Ready?
Stop shipping amateur UI.
Stop shipping amateur UI.
Start shipping with 11 expert agents.
One purchase. Every project. Professional UI from the first generation.
bash install.sh claude # or cursor | lovable | codex | all