You design. AI ships.
Turn AI agents into product designers—not just UI generators.
# View the docs
git clone https://github.com/smileynet/ui-optimizer.git
cd ui-optimizer
pip install -r requirements.txt
mkdocs serve
# → http://localhost:8000# Run the interactive demo
cd ui-design-demo
bun install && bun run dev
# → http://localhost:5173| Component | Description |
|---|---|
| Product Design Docs | JTBD, personas, user stories, journey maps |
| UI Design Docs | Design systems, tokens, accessibility, atomic design |
| Agent Workflow | 6-phase process with prompts and quality gates |
| Interactive Demo | Persona-driven UI patterns in action |
flowchart LR
U[Understand<br/>Users] --> D[Define<br/>Problems]
D --> E[Explore<br/>Solutions]
E --> De[Design<br/>UI]
De --> V[Validate<br/>Testing]
V --> R[Refine<br/>Polish]
style U fill:#e8f5e9,stroke:#4caf50
style D fill:#e3f2fd,stroke:#2196f3
style E fill:#fff3e0,stroke:#ff9800
style De fill:#fce4ec,stroke:#e91e63
style V fill:#f3e5f5,stroke:#9c27b0
style R fill:#e0f2f1,stroke:#009688
Each phase has a specialized agent, structured outputs, and quality gates.
| Section | What You'll Learn |
|---|---|
| Product Design | Jobs-to-be-Done, personas, user stories, journey maps |
| UI Design | Design systems, tokens, accessibility, atomic design |
| Agent Workflow | 6-phase process for AI-driven UI creation |
| Agent Prompts | Copy-paste prompts for each workflow phase |
See how the same interface adapts to different users:
| Example | Personas | Pattern |
|---|---|---|
| Dashboard | Executive, Analyst | Progressive Disclosure |
| Settings | Power User, Casual | Layered Complexity |
| E-commerce | Quick Buyer, Researcher | Parallel Paths |
| Data Table | Data Analyst, Team Lead | Context-Aware Revelation |
Toggle between personas to see UI elements appear/hide based on user needs.
- Use design tokens (no hardcoded values)
- Follow existing component patterns
- Docs follow Diataxis structure
See Contributing docs for diagram guidelines.