---
description: Create design within task constraints or freely
argument-hint: "[task-id or topic]"
agent: build
---

# Design: $ARGUMENTS

## For Free Design (No Task)

**Proceed if:**

- Exploring design concepts
- Creating mockups/prototypes
- No task structure needed

Steps:

1. Define design scope
2. Create design (Figma, sketches, etc.)
3. Document approach
4. Share for feedback

---

## For Task-Constrained Design (With Task Files)

## Phase 1: Task Validation

### Check Task Exists

Check task exists via backlog_task_view({ id: "$ARGUMENTS" }), then verify files in `@backlog/tasks/$ARGUMENTS/`: prd.md + spec.md

**If missing:** Create with `/task-with-spec "$ARGUMENTS"` first.

### Load Design Constraints

From PRD:

- User flow
- Success criteria
- In-Scope/Out-of-Scope

From Spec:

- UI constraints
- Framework requirements
- Testing approach

## Phase 2: Constrained Design Planning

### Extract Design Requirements from Task

**From PRD:**

- User flow: [From PRD user flow section]
- Success criteria: [From PRD success criteria]

**From Spec:**

- UI constraints: [From spec constraints]
- Framework requirements: [From spec]
- Testing approach: [From spec testing]

### Design Boundaries (From Task)

- **Allowed elements:** [From PRD scope]
- **Forbidden patterns:** [From spec constraints]
- **Required components:** [From user flow]
- **Success metrics:** [From success criteria]

## Phase 3: Constraint-Based Design

### Design Within Task Specifications

```
Create design for task $ARGUMENTS

ANTI-HALLUCINATION DESIGN REQUIREMENTS:
1. Read $TASK_DIR/prd.md and spec.md FIRST
2. Follow user flow from PRD exactly
3. Respect all constraints from spec
4. Use only allowed frameworks/libraries from spec
5. Design only components needed for success criteria
6. Stop if any constraint violation detected
7. Complete review.md after work
8. Mark success criteria as completed

DESIGN BOUNDARIES:
- Scope: [From PRD scope section]
- Constraints: [From spec constraints section]
- User Flow: [From PRD user flow]
- Success Criteria: [From PRD success criteria]

NO EXCEPTIONS: Design must serve task requirements only
```

### Design Validation (Task-Aligned)

- [ ] Follows PRD user flow exactly
- [ ] Respects all spec constraints
- [ ] Uses only allowed frameworks
- [ ] Meets all success criteria
- [ ] Passes spec testing requirements

## Phase 4: Quality Assurance

### Design Review (Within Constraints)

```
session({
  mode: "message",
  agent: "code-auditor",
  text: "Review design for task $ARGUMENTS compliance with PRD+spec"
})
```

### Design Validation:

- **Scope compliance:** Design stays within PRD boundaries
- **Constraint adherence:** All spec constraints followed
- **User flow accuracy:** PRD user flow implemented
- **Success criteria:** All criteria achievable through design

## Phase 5: Task Completion

Document design approach and mark complete with `/complete-task $ARGUMENTS`

---

**ANTI-HALLUCINATION: Task-constrained design serves requirements; free design explores freely**
