diff --git a/architect/01-mockups/generation-prompts.md b/architect/01-mockups/generation-prompts.md deleted file mode 100644 index b993348..0000000 --- a/architect/01-mockups/generation-prompts.md +++ /dev/null @@ -1,181 +0,0 @@ -# Mockup Generation Instructions - -## Required Mockups for TaskFlow - -### 1. Task List Dashboard - Desktop (1440px) - -**Prompt for generation:** -TaskFlow Task List Dashboard - Desktop Layout (1440px width) - -Clean, professional web application interface showing a task management dashboard for small teams. The layout should be: - -HEADER: -- Top navigation bar with "TaskFlow" logo/title on left -- User avatar and name on right -- Clean, minimal header design - -MAIN CONTENT AREA: -- Left sidebar (250px) with navigation menu: "My Tasks", "All Tasks", "Create Task" -- Main content area showing task list in card/table format -- Each task card shows: Task title, Assigned user, Status (Open/In Progress/Blocked), Priority, Due date -- Clear visual indicators for task status (color coding: green=open, blue=in progress, red=blocked) -- Action buttons for Edit/Assign on each task card - -VISUAL DESIGN: -- Modern, clean interface with plenty of white space -- Professional color scheme (blues, grays, subtle accents) -- Clear typography hierarchy -- Accessibility-focused design with high contrast -- Card-based or table layout for tasks -- Status badges clearly visible and color-coded -- Hover states and interactive elements clearly defined - -The interface should feel professional, organized, and make it immediately clear who owns what tasks and their current status. Focus on clarity and quick scanning rather than fancy graphics. - -**Command to run:** -```bash -# 1. Encode prompt to base64 -$prompt = '...[above prompt]...' -$b64 = [Convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes($prompt)) - -# 2. Generate on ws -ssh ws "~/kiro/bin/genmockup $b64 /home/sam/kiro/out/task-list-desktop.png 16:9" - -# 3. Copy back -scp ws:/home/sam/kiro/out/task-list-desktop.png scratch/taskflow/architect/01-mockups/ - -# 4. Cleanup ws -ssh ws "rm -f /home/sam/kiro/out/task-list-desktop.png" -``` - ---- - -### 2. Task List Dashboard - Mobile (375px) - -**Prompt for generation:** -TaskFlow Task List Dashboard - Mobile Layout (375px width) - -Mobile-responsive task management interface for small teams. Design should be: - -HEADER: -- Compact header with hamburger menu on left, "TaskFlow" title center, user avatar right -- Touch-friendly navigation elements - -MAIN CONTENT: -- Collapsible navigation menu accessed via hamburger -- Vertically stacked task cards optimized for mobile scrolling -- Each task card shows: Task title (larger), Status badge, Assigned user, Due date -- Large, touch-friendly action buttons -- Swipe-to-action capabilities (edit, assign) - -MOBILE OPTIMIZATIONS: -- Large tap targets (44px minimum) -- Clear visual hierarchy with larger text -- Status indicators prominently displayed -- Thumb-friendly button placement -- Vertical card layout for easy scrolling -- High contrast for outdoor visibility - -Professional mobile-first design that maintains task clarity and ownership visibility on small screens. - -**Command to run:** -```bash -# Similar process with 9:16 aspect ratio for mobile -ssh ws "~/kiro/bin/genmockup $b64 /home/sam/kiro/out/task-list-mobile.png 9:16" -``` - ---- - -### 3. Create/Edit Task - Desktop (1440px) - -**Prompt for generation:** -TaskFlow Create/Edit Task Form - Desktop Layout (1440px width) - -Clean task creation/editing interface with form-based layout: - -HEADER: -- Same navigation as dashboard -- Breadcrumb: "Tasks > Create New Task" or "Tasks > Edit Task" - -FORM LAYOUT: -- Two-column layout: Main form (left 60%), Task preview (right 40%) -- Form fields: Task Title (required), Description (textarea), Assign To (dropdown), Priority (Low/Medium/High), Due Date (date picker), Status (Open/In Progress/Blocked) -- Clear field labels and validation indicators -- Save/Cancel buttons prominently placed - -PREVIEW PANEL: -- Live preview of how task will appear in task list -- Shows all entered information formatted as task card -- Helps users understand what they're creating - -VISUAL DESIGN: -- Clean, spacious form design -- Clear validation states (errors, required fields) -- Professional color scheme consistent with dashboard -- Accessibility-focused with proper form labels -- Progressive disclosure for advanced options - -The interface should make task creation feel quick and straightforward, with immediate visual feedback. - ---- - -### 4. Create/Edit Task - Mobile (375px) - -**Prompt for generation:** -TaskFlow Create/Edit Task Form - Mobile Layout (375px width) - -Mobile-optimized task creation form: - -LAYOUT: -- Single column, vertically stacked form -- Full-screen modal or dedicated page -- Sticky header with Cancel/Save buttons - -FORM ELEMENTS: -- Large, touch-friendly input fields -- Mobile-optimized dropdowns and date pickers -- Auto-expanding textarea for descriptions -- Clear visual separation between form sections -- Touch-friendly button placement - -MOBILE SPECIFIC: -- Keyboard-aware design (form adjusts when keyboard appears) -- Swipe gestures for navigation -- Large tap targets for all interactive elements -- Simplified field layouts for thumb navigation -- Clear save/cancel actions always visible - -Clean, focused mobile form design that makes task creation effortless on mobile devices. - ---- - -### 5. Blocked Task States - Mobile (375px) - -**Prompt for generation:** -TaskFlow Blocked Task and Error States - Mobile Layout (375px width) - -Mobile interface showing empty states and error handling: - -EMPTY STATE: -- Center-aligned illustration or icon -- "No blocked tasks" message -- Encouraging call-to-action: "Great! No tasks are currently blocked" -- Secondary action: "View all tasks" button - -ERROR STATE: -- Clear error message with friendly language -- "Oops! Something went wrong" with specific error details -- Retry button prominently displayed -- Alternative action options -- Maintain TaskFlow branding and color scheme - -BLOCKED TASK DISPLAY: -- Task cards with prominent "BLOCKED" status -- Clear visual indicators (red color scheme) -- Reason for blocking clearly stated -- Unblock action button -- Contact information for task owner - -Mobile-first design focused on clear communication and recovery actions. - -**All files should be generated and placed in `scratch/taskflow/architect/01-mockups/` directory** \ No newline at end of file