Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

UI_SPEC

Category: 01. AI / ML Hackathons
Section: Phase 3: Execution & Quality


Act as a senior UI/UX designer.
Using the PRD and System Architecture below, create a UI Specification document for an AI/ML hackathon project.

PRD: [PASTE PRD]
ARCHITECTURE: [PASTE SYSTEM_ARCHITECTURE]

Provide:
1. Design system (Colors, typography, spacing)
2. Component hierarchy (List all major components)
3. Screen-by-screen breakdown (Login, Dashboard, AI Chat, Results)
4. Loading states (Crucial for AI: Skeletons, spinners, streaming text indicators)
5. Error states (How errors are displayed to the user)
6. Empty states (What the user sees before data is loaded)
7. Responsive design guidelines (Mobile and Desktop)
8. Accessibility considerations (Contrast, keyboard navigation)

Keep the UI simple, clean, and realistic for a 24-48 hour hackathon. 
Focus on demonstrating the core AI user journey.

---