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: 03. Automation & Workflow
Section: Phase 3: Execution & Quality


10. UI_SPEC.md

Purpose: To define the user-facing interface (forms, dashboards, or trigger points) that interacts with the automation.

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

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

Provide:
1. Design system (Colors, typography, spacing)
2. Component hierarchy (Forms, Dashboards, Status Cards)
3. Screen-by-screen breakdown (Trigger Form, Status Dashboard, Logs View)
4. Loading states (For automation triggers)
5. Success states (What the user sees when the automation runs)
6. Error states (What the user sees when the automation fails)
7. Empty states (Before any automation has run)
8. Responsive design guidelines (Mobile and Desktop)
9. Accessibility considerations

Keep the UI simple, clean, and realistic for a 24-48 hour hackathon.
Focus on demonstrating the automation trigger and result.