design

Design Refinement

Focused design session for improving video scene visuals using the frontend-design skill.

Purpose

Deep-dive visual refinement for slides and components:

• Elevate generic aesthetics to distinctive, memorable visuals
• Ensure visual narrative coherence across scenes
• Iterate on typography, color, motion, and atmosphere

Usage

/design              # Discover project, list scenes, choose one
/design [scene-id]   # Jump directly to a specific scene

---

Step 1: Discover Project Context

First, find and understand the current project:

1. Locate the project

   • Check if in a project directory (has project.json or template config)
   • If not, scan projects/ for active projects
   • If multiple, ask user which project

2. Read project configuration

   • project.json if exists (scenes, phase, brand)
   • Or template config: src/config/sprint-config.ts or src/config/demo-config.ts
   • Brand/theme: src/config/theme.ts

3. Build scene inventory

   • List all scenes from config
   • Identify which are slide-type (designable) vs demo-type (video playback)
   • Note each scene's purpose from config content

---

Step 2: Identify Target Scene

If no scene specified in command, show discovered scenes:

## Design Refinement

**Project:** {project_name}
**Template:** {template_type}

Which scene would you like to refine?

| # | Scene ID | Type | Description |
|---|----------|------|-------------|
{list slide-type scenes discovered from config}

(Demo/video scenes are not shown - they display recorded content)

Enter scene ID or number:

---

Step 3: Understand Scene Context

Before invoking frontend-design, gather specific context:

1. Read the target slide component

   • Find component file from scene type mapping
   • e.g., src/components/slides/{Type}Slide.tsx

2. Read scene content from config

   • What text/data does this scene display?
   • What's the intended message?

3. Understand position in sequence

   • What scene comes before? What mood does it leave?
   • What scene comes after? What mood should we set up?