UI_SPEC

Category: 15. Beginner / Student / Community
Section: Phase 3: Execution & Quality

10. UI_SPEC.md

Purpose: To define a simple, clean frontend design that beginners can build.

Act as a senior UI/UX designer who loves teaching beginners.
Using the PRD and System Architecture below, create a simple UI Specification document for a beginner hackathon project.

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

Provide:
1. Design system (Simple: 2 colors, 1 font, basic spacing)
2. Component hierarchy (Maximum 5 components)
3. Screen-by-screen breakdown (Maximum 3 screens)
4. Simple layouts (Text-based wireframes)
5. Loading states (Simple spinners)
6. Error states (Simple messages)
7. Empty states (Simple placeholders)
8. Responsive design (Mobile-first, simple breakpoints)
9. Accessibility basics (Contrast, Alt text)
10. Free design tools (Figma, Canva, Coolors)
11. A checklist for beginners

Keep the UI extremely simple.
Do not over-design.
Focus on functionality over beauty.
Explain every design choice in beginner-friendly language.
Suggest free templates where possible.