UI/UX Design Principles for AI Agents

Chapter 1: How to Use This Book

This is a reference manual for AI agents building web and mobile user interfaces. Every chapter is a self-contained module of concrete, actionable rules — read any chapter independently without needing context from others.

---

What This Book Is

A systematic collection of UI/UX design rules with specific thresholds, values, and anti-patterns. This is not a design philosophy book. It is an instruction set. Each rule tells you exactly what to do, when to do it, and what to avoid.

The rules are derived from established design systems, accessibility standards, and production-tested patterns. They prioritize correctness and usability over novelty.

A second layer of rules comes from the Impeccable design skill (impeccable.style). That layer targets the tells of AI-generated interfaces: the fonts, palettes, card grids, glow effects, easing curves, and copy habits that models reach for by default. Those rules tell you which defaults to refuse, and what to decide instead. They appear throughout the chapters, in the AI-Generated Interface Tells section of Chapter 15, and in Chapters 16 through 19.

---

How to Use It

Each chapter is independent. You do not need to read chapters in order. Jump to the chapter that matches your current task. If a concept from another chapter is relevant, it is briefly restated in context — no cross-referencing required.

Each rule follows a consistent format:

### Rule: [Name]

**When:** The condition or context that triggers this rule.
**Do:** The specific action to take.
**Values:** Concrete numbers, measurements, or thresholds.
**Don't:** The anti-pattern to avoid.

• When defines scope. A rule only applies when its condition is met.
• Do is the directive. It uses imperative language with no hedging.
• Values are specific. "Use 16px" not "use an appropriate size."
• Don't is the failure mode. It describes what happens when the rule is ignored.

---

Conventions

Priority Levels:

• Critical — Violating this rule causes usability failures or accessibility violations.
• Recommended — Following this rule produces measurably better interfaces.
• Optional — Context-dependent; apply when it fits.

Platform Notation:

• Web — Browser-based interfaces (HTML/CSS/JS frameworks).
• iOS — Native or hybrid iOS applications.
• Android — Native or hybrid Android applications.
• All — Applies to every platform.

Measurement Units:

• Use px for absolute values in web contexts.
• Use pt for iOS, dp for Android.
• Conversion: 1pt = 1dp = 1px at 1x density.

---

Quick Lookup

If you need to...	Go to
Decide element importance and layout structure	Chapter 3: Visual Hierarchy & Layout
Choose fonts, sizes, and text spacing	Chapter 4: Typography System
Build a color palette with proper contrast	Chapter 5: Color System
Apply spacing, shadows, and depth	Chapter 6: Spacing & Depth
Implement specific UI components	Chapter 7: Component Patterns
Choose between design approaches for a scenario	Chapter 2: Decision Matrix
Handle navigation and information architecture	Chapter 8: Navigation & Information Architecture
Reduce cognitive load and manage attention	Chapter 9: Cognitive Load & Attention
Design feedback, motion, and engagement loops	Chapter 10: Behavioral Triggers & Engagement
Apply persuasion and trust patterns	Chapter 11: Persuasion & Trust Patterns
Design forms and user input	Chapter 12: Form Design & User Input
Handle responsive layout and images	Chapter 13: Responsive & Adaptive Design
Meet accessibility requirements	Chapter 14: Accessibility Checklist
Recognize anti-patterns and AI-generated interface tells	Chapter 15: Anti-Pattern Catalog
Choose a visual direction and a visitor mode	Chapter 16: Design Direction & Visitor Modes
Run a design critique and score what you find	Chapter 17: Critique & Audit Method
Harden performance, edge cases, and UX copy	Chapter 18: Hardening, Performance & Copy Clarity
Apply native iOS and Android conventions	Chapter 19: Native Platform Conventions
Automate UI/UX review in a pipeline	Chapter 20: An Automated UI/UX Review Skill

---

Key Principle

Every rule in this book is falsifiable. If a rule says "use 16px base font size," you can verify whether your implementation uses 16px. Vague guidance like "make it readable" does not appear here. When you apply a rule, you should be able to check a specific value, ratio, or structural property to confirm compliance.

Start with the chapter that matches your immediate task. Apply rules in order within each chapter — they are sequenced from foundational to specific.

---

---

---

---

---

---