Clean up: Remove architect mockups
This commit is contained in:
parent
4bc3849ded
commit
09c99c5c82
@ -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**
|
||||
Loading…
Reference in New Issue
Block a user