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