# Design Team Workflow

## Overview
This workflow takes a validated PRD and produces a complete design system plus deployable landing page.

## Orchestration

```
Input: Approved PRD from Discovery Team
Output: 1) Design System Package  2) Deployable Landing Page

┌─────────────────────────────────────────────────────────────────┐
│                      DESIGN PIPELINE                             │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │  STAGE 1: JOURNEY MAPPING                                 │   │
│  │  Agent: Journey Mapper                                    │   │
│  │  Input: PRD + Research Summary                            │   │
│  │  Output: User journey map + screen inventory              │   │
│  │  Success: All user stories mapped, states cataloged       │   │
│  └──────────────────────────────────────────────────────────┘   │
│                            │                                     │
│                            ▼                                     │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │  STAGE 2: STYLE GUIDE                                     │   │
│  │  Agent: Style Guide                                       │   │
│  │  Input: PRD + Journey Map                                 │   │
│  │  Output: Complete design system tokens                    │   │
│  │  Success: Colors, type, spacing, components defined       │   │
│  └──────────────────────────────────────────────────────────┘   │
│                            │                                     │
│                            ▼                                     │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │  STAGE 3: MOCKUPS                                         │   │
│  │  Agent: Mockup                                            │   │
│  │  Input: Journey Map + Style Guide                         │   │
│  │  Output: All screens with all states                      │   │
│  │  Success: P0 screens complete, responsive, annotated      │   │
│  └──────────────────────────────────────────────────────────┘   │
│                            │                                     │
│                            ▼                                     │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │  CRITIQUE GATE: Systematic Design Critique                │   │
│  │  Agent: Design Critique                                   │   │
│  │  Input: Mockups (or screenshot / code / URL)              │   │
│  │  Output: critique.md with actionable feedback             │   │
│  │  Iterate on mockups based on critique                     │   │
│  └──────────────────────────────────────────────────────────┘   │
│                            │                                     │
│                            ▼                                     │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │  REVIEW GATE 1: Design + UX Review                        │   │
│  │  Agents: Design Reviewer + UX Reviewer (parallel)         │   │
│  │  PASS → Continue | REVISE → Back to Mockup/Style Guide    │   │
│  └──────────────────────────────────────────────────────────┘   │
│                            │                                     │
│                ┌───────────┴───────────┐                        │
│                ▼                       ▼                        │
│  ┌─────────────────────┐  ┌─────────────────────┐               │
│  │  OUTPUT 1: Design   │  │  STAGE 4: Landing   │               │
│  │  System Package     │  │  Page Build         │               │
│  │                     │  │  Agent: Landing     │               │
│  │  - Style guide      │  │  Page               │               │
│  │  - Journey maps     │  │  Input: Mockups +   │               │
│  │  - UI mockups       │  │  Style Guide        │               │
│  └─────────────────────┘  └─────────────────────┘               │
│                                        │                        │
│                                        ▼                        │
│              ┌──────────────────────────────────────────────┐   │
│              │  REVIEW GATE 2: Technical Review              │   │
│              │  Agent: Tech Reviewer                         │   │
│              │  Checks: Lighthouse, analytics, deployment    │   │
│              │  DEPLOY → Ready | FIX → Back to Landing Page  │   │
│              └──────────────────────────────────────────────┘   │
│                                        │                        │
│                                        ▼                        │
│              ┌──────────────────────────────────────────────┐   │
│              │  OUTPUT 2: Deployed Landing Page              │   │
│              │  - Live URL                                   │   │
│              │  - PostHog dashboard link                     │   │
│              │  - Signup capture active                      │   │
│              └──────────────────────────────────────────────┘   │
│                                        │                        │
│                                        ▼                        │
│              ┌──────────────────────────────────────────────┐   │
│              │  FINAL REVIEW: VP of Design                   │   │
│              │  Holistic quality check                       │   │
│              │  PASS → Complete | POLISH → Refinements       │   │
│              └──────────────────────────────────────────────┘   │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘
```

## Execution Commands

### Full Pipeline Run
```bash
# Using Gas Town
gt convoy create design-run-$(date +%Y%m%d) \
  --stages "journey,style-guide,mockups,landing-page" \
  --input "./outputs/prds/approved/[product-name]/" \
  --output "./outputs/designs/[product-name]/"
```

### Stage-by-Stage

```bash
# Stage 1: Journey Mapping
gt sling --rig team-design \
  --agent journey-mapper \
  --input "./outputs/prds/approved/[product]/" \
  --output "./outputs/designs/[product]/journey/"

# Stage 2: Style Guide
gt sling --rig team-design \
  --agent style-guide \
  --input "./outputs/designs/[product]/journey/" \
  --output "./outputs/designs/[product]/style-guide/"

# Stage 3: Mockups
gt sling --rig team-design \
  --agent mockup \
  --input "./outputs/designs/[product]/journey/,./outputs/designs/[product]/style-guide/" \
  --output "./outputs/designs/[product]/mockups/"

# Review Gate 1 (parallel)
gt sling --rig team-design \
  --agent design-reviewer \
  --input "./outputs/designs/[product]/mockups/" \
  --output "./outputs/designs/[product]/reviews/design/" &

gt sling --rig team-design \
  --agent ux-reviewer \
  --input "./outputs/designs/[product]/mockups/" \
  --output "./outputs/designs/[product]/reviews/ux/" &

wait

# Stage 4: Landing Page
gt sling --rig team-design \
  --agent landing-page \
  --input "./outputs/designs/[product]/mockups/,./outputs/designs/[product]/style-guide/" \
  --output "./outputs/landing-pages/[product]/"

# Review Gate 2: Tech Review
gt sling --rig team-design \
  --agent tech-reviewer \
  --input "./outputs/landing-pages/[product]/" \
  --output "./outputs/landing-pages/[product]/tech-review.md"

# Deploy (if passed)
cd ./outputs/landing-pages/[product]/
vercel --prod

# Final Review
gt sling --rig team-design \
  --agent vp-design \
  --input "./outputs/designs/[product]/" \
  --output "./outputs/designs/[product]/final-review.md"
```

## Iteration Loops

### Design/UX Revision Loop
```
Mockup → Design Reviewer + UX Reviewer → [REVISE] → 
  If style issues → Style Guide → Mockup
  If UX issues → Journey Mapper → Mockup
Max iterations: 3
```

### Landing Page Revision Loop
```
Landing Page → Tech Reviewer → [FIX] → Landing Page
Max iterations: 2
If still failing: Escalate to VP or pair with engineer
```

## Output Artifacts

After successful run:
```
outputs/
├── designs/
│   └── [product-name]/
│       ├── journey/
│       │   └── user-journey.md
│       ├── style-guide/
│       │   ├── design-system.md
│       │   └── tokens.css
│       ├── mockups/
│       │   ├── screens/        # Individual screen files
│       │   └── mockups.md      # Documentation
│       └── reviews/
│           ├── design/
│           └── ux/
└── landing-pages/
    └── [product-name]/
        ├── index.html
        ├── styles.css
        ├── script.js
        ├── assets/
        ├── package.json
        ├── vercel.json
        └── tech-review.md
```

## Deliverables Summary

### Design System Package
Ready for development team:
- Complete style guide with all tokens
- User journey documentation
- All screen mockups with states
- Interaction annotations
- Responsive specifications

### Landing Page
Ready for marketing:
- Deployed and live
- PostHog tracking active
- Signup capture working
- Lighthouse scores > 90
- Social/OG tags configured
- **QA PASSED** (all automated tests green)

### QA Checkpoint (MANDATORY)
After any deployment:
1. Run: `./scripts/qa-runner.sh <url> outputs/<project>/qa/`
2. Parse JSON report for issues
3. If issues found → auto-assign to agents, fix, verify
4. Loop until all tests pass
5. Only proceed to launch when QA status = PASSED

## Integration Points

### From Discovery Team
Receives:
- Approved BRD
- Approved PRD
- Research summary
- Validation scorecard

### To Development Team
Hands off:
- Design system (if building full product)
- Component specifications
- Screen mockups
- Journey documentation

### To Marketing
Delivers:
- Live landing page URL
- PostHog project access
- Signup data access
