181 lines
5.9 KiB
Markdown
181 lines
5.9 KiB
Markdown
# 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** |