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.
---