directus-task-management/docs/front-end-spec/wireframes-mockups.md

Wireframes & Mockups

Design Tool Strategy

Primary Design Files: None required - wireframes described textually using proven patterns from Trello, Jira, and Asana as reference

Development Approach: Direct implementation using existing component libraries with these layouts as reference

Key Screen Layouts

1. Dashboard (Asana-inspired)

Purpose: Central hub with AI-enhanced quick actions

Layout Concept:

┌─────────────────────────────────────────────────────────┐
│ [☰] Dashboard    [🔍 Search] [🤖 Ask AI...]  [@] [⚙️]    │
├─────────────────────────────────────────────────────────┤
│ ┌─Sidebar────┐  ┌─Main Content─────────────────────────┐ │
│ │ Projects    │  │ ┌─My Tasks─────┐ ┌─AI Activity────┐ │ │
│ │ • Project A │  │ │ 5 In Progress │ │ 12 tasks today │ │ │
│ │ • Project B │  │ │ 3 In Review   │ │ 8 via AI       │ │ │
│ │             │  │ └───────────────┘ └─────────────────┘ │ │
│ │ AI Center   │  │ ┌─Recent Tasks─────────────────────┐ │ │
│ │ • Create    │  │ │ [🤖] Implement auth system       │ │ │
│ │ • Sync      │  │ │ [📝] Update API documentation    │ │ │
│ └─────────────┘  │ └─────────────────────────────────┘ │ │
│                  └───────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘

2. AI Task Creation Interface

Purpose: Dedicated interface for natural language task creation with context awareness

Layout Concept:

┌─────────────────────────────────────────────────────────┐
│ AI Center                                               │
├─────────────────────────────────────────────────────────┤
│ ┌─Create Tasks──────────────────────────────────────────┐ │
│ │ Describe what you want to build:                     │ │
│ │ ┌─────────────────────────────────────────────────────┐ │ │
│ │ │ Add user authentication to my API with OAuth2...   │ │ │
│ │ └─────────────────────────────────────────────────────┘ │ │
│ │ Context: [Current Project ▼] [🔄 Task Master Sync]   │ │
│ └───────────────────────────────────────────────────────┘ │
│                                                         │
│ ┌─Recent AI Activity─────────────────────────────────────┐ │
│ │ 🤖 Generated 5 tasks for "API Security"              │ │
│ │ 🤖 Enhanced task descriptions in Project Alpha        │ │
│ │ 🔄 Synced 12 tasks from Task Master CLI              │ │
│ └───────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘