roboco/.tasks/templates/design.md

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