mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
200 lines
3.6 KiB
Markdown
200 lines
3.6 KiB
Markdown
# TASK-{ID}: {Title}
|
|
|
|
> **Template**: Design
|
|
> **Created**: YYYY-MM-DD
|
|
> **Last Updated**: YYYY-MM-DD
|
|
|
|
---
|
|
|
|
## Status
|
|
|
|
| Field | Value |
|
|
|-------|-------|
|
|
| **State** | `pending` |
|
|
| **Priority** | P{0-3} |
|
|
| **Cell** | ux_ui |
|
|
| **Assigned To** | {agent-id or "unassigned"} |
|
|
| **Requested By** | {agent-id} |
|
|
| **For Initiative** | {initiative-id or "standalone"} |
|
|
|
|
## Timeline
|
|
|
|
| Milestone | Date |
|
|
|-----------|------|
|
|
| Requested | YYYY-MM-DD |
|
|
| Started | - |
|
|
| First Draft | - |
|
|
| QA Review | - |
|
|
| Revisions Complete | - |
|
|
| Handed Off | - |
|
|
|
|
---
|
|
|
|
## Overview
|
|
|
|
{What needs to be designed and why?}
|
|
|
|
## User Problem
|
|
|
|
{What user problem does this design solve?}
|
|
|
|
## Context
|
|
|
|
{Business context, previous attempts, constraints}
|
|
|
|
---
|
|
|
|
## Requirements
|
|
|
|
### Functional Requirements
|
|
- {Requirement 1}
|
|
- {Requirement 2}
|
|
- {Requirement 3}
|
|
|
|
### User Flows
|
|
{What user actions need to be supported?}
|
|
1. {Flow 1}
|
|
2. {Flow 2}
|
|
|
|
### Constraints
|
|
- {Technical constraint}
|
|
- {Brand constraint}
|
|
- {Platform constraint}
|
|
|
|
---
|
|
|
|
## Deliverables
|
|
|
|
### Required
|
|
- [ ] Mobile design (320-480px)
|
|
- [ ] Desktop design (1280px+)
|
|
- [ ] All interaction states
|
|
- [ ] Component specifications
|
|
- [ ] Handoff documentation
|
|
|
|
### Optional
|
|
- [ ] Tablet design (768-1024px)
|
|
- [ ] Interactive prototype
|
|
- [ ] Animation specifications
|
|
- [ ] Micro-interactions
|
|
|
|
---
|
|
|
|
## Design Assets
|
|
|
|
### Figma Links
|
|
| Asset | Link | Status |
|
|
|-------|------|--------|
|
|
| Main Design | {link} | {in progress / complete} |
|
|
| Prototype | {link} | {in progress / complete / N/A} |
|
|
| Component Specs | {link} | {in progress / complete} |
|
|
|
|
### States Checklist
|
|
|
|
| Component | Default | Hover | Active | Focus | Disabled | Loading | Error | Empty |
|
|
|-----------|---------|-------|--------|-------|----------|---------|-------|-------|
|
|
| {component} | ☐ | ☐ | ☐ | ☐ | ☐ | ☐ | ☐ | ☐ |
|
|
| {component} | ☐ | ☐ | ☐ | ☐ | ☐ | ☐ | ☐ | ☐ |
|
|
|
|
---
|
|
|
|
## Design System
|
|
|
|
### Existing Patterns to Use
|
|
- {Pattern 1}
|
|
- {Pattern 2}
|
|
|
|
### New Patterns Introduced
|
|
- {New pattern - document in design system}
|
|
|
|
### Design Tokens Used
|
|
| Category | Tokens |
|
|
|----------|--------|
|
|
| Colors | {list} |
|
|
| Spacing | {list} |
|
|
| Typography | {list} |
|
|
|
|
---
|
|
|
|
## Accessibility
|
|
|
|
- [ ] Color contrast verified (4.5:1 text, 3:1 large)
|
|
- [ ] Focus states designed
|
|
- [ ] Touch targets adequate (44px min)
|
|
- [ ] Color not sole indicator
|
|
- [ ] Keyboard flow considered
|
|
|
|
---
|
|
|
|
## Responsive Behavior
|
|
|
|
| Breakpoint | Behavior |
|
|
|------------|----------|
|
|
| Mobile (<768px) | {description} |
|
|
| Tablet (768-1024px) | {description} |
|
|
| Desktop (>1024px) | {description} |
|
|
|
|
---
|
|
|
|
## Design Decisions
|
|
|
|
### Decision 1: {Title}
|
|
- **Options**: {what was considered}
|
|
- **Decision**: {what was chosen}
|
|
- **Rationale**: {why}
|
|
|
|
---
|
|
|
|
## Frontend Handoff
|
|
|
|
### Handoff Checklist
|
|
- [ ] All states complete
|
|
- [ ] All breakpoints complete
|
|
- [ ] Specs documented in Figma
|
|
- [ ] Interactions documented
|
|
- [ ] Assets exportable
|
|
- [ ] Design tokens referenced (not hardcoded values)
|
|
|
|
### Implementation Notes
|
|
{Specific notes for frontend developers}
|
|
|
|
### Animations/Transitions
|
|
{Any animation specifications}
|
|
|
|
---
|
|
|
|
## QA Review
|
|
|
|
### Design QA Checklist
|
|
- [ ] Design system compliance
|
|
- [ ] All states present
|
|
- [ ] Accessibility requirements met
|
|
- [ ] Responsive designs complete
|
|
- [ ] Handoff documentation complete
|
|
|
|
### QA Notes
|
|
{Filled in by UX-QA}
|
|
|
|
---
|
|
|
|
## Quick Context Restore
|
|
|
|
**Current state**: Not started
|
|
**Design progress**: 0%
|
|
**States complete**: 0/X
|
|
**Breakpoints complete**: 0/3
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
{Additional context, inspiration, user research insights}
|
|
|
|
---
|
|
|
|
## Changelog
|
|
|
|
| Date | Agent | Change |
|
|
|------|-------|--------|
|
|
| YYYY-MM-DD | {agent} | Design requested |
|