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.

---

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 responsive layout and images	Chapter 8: Responsive Design
Handle interaction states and feedback	Chapter 9: Interaction & Feedback
Meet accessibility requirements	Chapter 10: Accessibility
Apply platform-specific conventions	Chapter 11: Platform-Specific Patterns
Optimize performance perception	Chapter 12: Performance & Perceived Speed

---

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.

---

---

---

---

---

---