# Design Pipeline Skill

Orchestrates the Design phase with artifact generation and visual cards.

## Overview

When a product proceeds to Design phase, this pipeline runs 3 sequential steps. **After each artifact is created, generate an HTML card with visual assets.**

1. **Brand Guidelines** → `brand-guidelines.md` → `brand-guidelines.html` (with generated images)
2. **Design Brief** → `design-brief.md` → `design-brief.html`
3. **Screens** → `screens.md` → `screens.html` (with generated screen mockups)

## Image Generation

Use the **nano-banana-pro** skill for all image generation:

```bash
uv run /home/aria/.nvm/versions/node/v24.13.0/lib/node_modules/openclaw/skills/nano-banana-pro/scripts/generate_image.py \
  --prompt "description" \
  --filename "output.png" \
  --resolution 1K
```

Save images to: `agency/products/{slug}/design/assets/`

## Pipeline Execution

### Step 1: Brand Guidelines (33%)

**Input:** Discovery artifacts (brief.md, target-market.md, prd.md)
**Output:** `brand-guidelines.md` + `brand-guidelines.html` + images

**Generate these assets:**
1. **Logo** — Generate with nano-banana-pro
   - Prompt: "Modern minimalist logo for [product name], [sector] industry, clean vector style, white background"
   - Save as: `assets/logo.png`
   
2. **Color Palette** — Define 5-6 colors
   - Primary, Secondary, Accent, Background, Text, Muted
   - Generate color swatch image with nano-banana-pro
   - Prompt: "Color palette swatch showing 6 colors: [hex codes], modern design, clean layout"
   - Save as: `assets/colors.png`

3. **Typography** — Define font pairings
   - Headings font, Body font
   - Font sizes scale

4. **Visual Pegs** — 2-3 mood/inspiration images
   - Prompt based on target audience and product vibe
   - Save as: `assets/peg-1.png`, `assets/peg-2.png`, etc.

**brand-guidelines.md structure:**
```markdown
# Brand Guidelines: [Product Name]

## Logo
![Logo](assets/logo.png)
- Usage guidelines
- Clear space requirements

## Color Palette
![Colors](assets/colors.png)
| Color | Hex | Usage |
|-------|-----|-------|
| Primary | #XXXXXX | Main actions, headers |
| Secondary | #XXXXXX | Supporting elements |
...

## Typography
- **Headings:** [Font Name]
- **Body:** [Font Name]
- Scale: 12/14/16/20/24/32/48px

## Visual Style
### Mood/Pegs
![Peg 1](assets/peg-1.png)
![Peg 2](assets/peg-2.png)
- Design principles
- Do's and Don'ts
```

**brand-guidelines.html:**
- Display logo prominently
- Show color swatches with hex codes
- Typography preview
- Embed peg images
- Use dark theme (#0a0a0a, #141414, #d4ff00)
- **Image URLs must be absolute:** `/api/products/{slug}/design/assets/filename.png`

**After completion:**
```
Update progress.md: [TIMESTAMP] ✓ brand-guidelines.md + brand-guidelines.html generated
Update workflow.json: progress=33
```

### Step 2: Design Brief (66%)

**Input:** Discovery artifacts + brand guidelines
**Output:** `design-brief.md` + `design-brief.html`

**design-brief.md structure:**
```markdown
# Design Brief: [Product Name]

## Project Overview
- Product summary (from discovery brief)
- Target users (from target-market)
- Key value proposition

## Design Goals
1. [Goal 1 - e.g., "Make grading feel effortless"]
2. [Goal 2 - e.g., "Build trust through clear feedback"]
3. [Goal 3 - e.g., "Enable quick task completion"]

## User Experience Principles
- Principle 1 with explanation
- Principle 2 with explanation
- Principle 3 with explanation

## Functional Requirements
Key features that need UI (from PRD):
- Feature 1: [UI considerations]
- Feature 2: [UI considerations]

## Constraints
- Technical constraints
- Accessibility requirements
- Device/browser support

## Success Metrics
- UX metrics to track
- Usability goals

## Timeline
- Design milestones
```

**design-brief.html:**
- Clean summary card
- Goals as highlighted items
- UX principles visually presented
- Feature list with icons

**After completion:**
```
Update progress.md: [TIMESTAMP] ✓ design-brief.md + design-brief.html generated
Update workflow.json: progress=66
```

### Step 3: Screens (100%)

**Input:** PRD, user stories, design brief
**Output:** `screens.md` + `screens.html` + screen mockups

**Identify key screens from PRD/user stories:**
- Dashboard/Home
- Core feature screens (3-5)
- Settings/Profile
- Onboarding (if applicable)

**For each screen, generate a mockup:**
```bash
uv run .../generate_image.py \
  --prompt "UI mockup for [screen name], [product] [sector] app, modern dark theme, clean layout, showing [key elements]" \
  --filename "assets/screen-{name}.png" \
  --resolution 1K
```

**screens.md structure:**
```markdown
# Screens: [Product Name]

## Screen Inventory

### 1. Dashboard
![Dashboard](assets/screen-dashboard.png)
- **Purpose:** [what user accomplishes]
- **Key Elements:** [list of UI components]
- **User Stories:** US-1, US-5, US-12

### 2. [Feature Screen]
![Screen](assets/screen-feature.png)
- **Purpose:** [description]
- **Key Elements:** [components]
- **User Stories:** [related stories]

... (repeat for each screen)

## Navigation Flow
[Describe how screens connect]

## Responsive Considerations
[Mobile vs desktop notes]
```

**screens.html:**
- Gallery/grid of screen mockups
- Each screen as a card with image + description
- Click to expand (if possible)
- Navigation flow diagram (text-based)

**After completion:**
```
Update progress.md: [TIMESTAMP] ✓ screens.md + screens.html generated (X screens)
Update workflow.json: progress=100, status="complete"
```

## HTML Card Design System

Same as Discovery phase:
```css
--bg: #0a0a0a;
--card: #141414;
--border: #262626;
--text: #fafafa;
--muted: #a1a1aa;
--accent: #d4ff00;
```

**IMPORTANT: Image URLs in HTML must be absolute API paths:**
```html
<img src="/api/products/{slug}/design/assets/logo.png" />
```
NOT relative paths like `assets/logo.png` (won't work in iframe).

### Image Lightbox (Required for all images)

**All images must be clickable and expand to full size in a modal.** Include this CSS and JS in every HTML card that contains images:

```html
<style>
/* Lightbox Styles */
.lightbox-img {
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lightbox-img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(212, 255, 0, 0.15);
}
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: zoom-out;
  padding: 20px;
}
.lightbox-overlay.active {
  display: flex;
}
.lightbox-overlay img {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 60px rgba(212, 255, 0, 0.2);
}
.lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  color: #fafafa;
  font-size: 32px;
  cursor: pointer;
  z-index: 10000;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.lightbox-close:hover {
  opacity: 1;
}
</style>

<!-- Lightbox Overlay (add before </body>) -->
<div class="lightbox-overlay" id="lightbox">
  <span class="lightbox-close">&times;</span>
  <img src="" alt="Expanded view" id="lightbox-img">
</div>

<script>
// Lightbox functionality
document.addEventListener('DOMContentLoaded', function() {
  const lightbox = document.getElementById('lightbox');
  const lightboxImg = document.getElementById('lightbox-img');
  const closeBtn = document.querySelector('.lightbox-close');
  
  // Add lightbox-img class to all images in the content
  document.querySelectorAll('img:not(#lightbox-img)').forEach(img => {
    img.classList.add('lightbox-img');
    img.addEventListener('click', function() {
      lightboxImg.src = this.src;
      lightbox.classList.add('active');
    });
  });
  
  // Close on overlay click
  lightbox.addEventListener('click', function(e) {
    if (e.target === lightbox || e.target === closeBtn) {
      lightbox.classList.remove('active');
    }
  });
  
  // Close on Escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
      lightbox.classList.remove('active');
    }
  });
});
</script>
```

**Usage:** All `<img>` tags automatically become clickable. The script adds the `lightbox-img` class and click handlers to every image except the lightbox image itself.

## Progress Tracking

After each step, append to `progress.md`:
```
[TIMESTAMP] ✓ brand-guidelines.md + brand-guidelines.html generated (logo + 6 colors + 2 pegs)
[TIMESTAMP] ✓ design-brief.md + design-brief.html generated
[TIMESTAMP] ✓ screens.md + screens.html generated (7 screens)
[TIMESTAMP] ✓ Design phase complete!
```

Update `workflow.json`:
- Step 1: progress=33
- Step 2: progress=66
- Step 3: progress=100, status="complete"

## Error Handling

If image generation fails:
1. Log error to progress.md
2. Continue with placeholder text "[Image generation failed]"
3. Don't block the entire pipeline

## Key Points

1. **Generate images with nano-banana-pro** — logos, color swatches, pegs, screen mockups
2. **Save assets to design/assets/** — organized by type
3. **Embed images in HTML cards** — make them visual and useful
4. **Update progress after each artifact pair** — real-time UI updates
5. **Read discovery artifacts first** — brand guidelines should reflect the product
