UI Optimizer Documentation¶
This documentation follows the Diataxis framework - organizing content into four distinct types based on user needs.
Documentation Structure¶
docs/
├── product-design/ # Product design methodologies
│ ├── how-to/ # Task-oriented guides
│ ├── explanation/ # Understanding-oriented content
│ └── reference/ # Information-oriented content
│
├── ui-design/ # UI design methodologies
│ ├── how-to/ # Task-oriented guides
│ ├── explanation/ # Understanding-oriented content
│ └── reference/ # Information-oriented content
│
├── workflow/ # Agent workflow system
│ └── phases/ # Phase-by-phase guides
│
└── contributing/ # Contributor documentation
The Four Types¶
| Type | Purpose | User Question |
|---|---|---|
| Tutorials | Learning by doing | "I want to learn" |
| How-to Guides | Accomplishing tasks | "I need to do something" |
| Explanation | Understanding concepts | "I want to understand why" |
| Reference | Looking up information | "I need the details" |
Quick Navigation¶
Product Design¶
- Overview - Product design methodologies
- How-to Guides - Apply methodologies to real work
- Explanation - Understand the theory
- Reference - Quick lookup for frameworks
UI Design¶
- Overview - UI design principles
- How-to Guides - Implement design patterns
- Explanation - Understand design theory
- Reference - Design tokens, components, specs
Agent Workflow¶
- Overview - 6-phase UI creation workflow
- Orchestrator - How to coordinate agents
- Quality Gates - Pass/fail criteria
- Agent Prompts - Detailed prompts for each agent
Progressive Disclosure¶
Each topic follows progressive disclosure: 1. Overview - Quick summary (1 min read) 2. Core Concepts - Essential knowledge (5 min read) 3. Deep Dive - Comprehensive detail (linked documents) 4. Reference - Complete specifications (lookup as needed)