02-visual-analyzer

name	02-visual-analyzer
description	영상 프레임에서 디자인 시스템(레이아웃, 페이스, 텍스트 스타일, 그래픽 스타일, 색상 체계)을 추출하여 02-design-system.md 생성. Use when "디자인 시스템", "시각 분석", "visual analysis", "design system", "레이아웃 분석", "색상 분석".

Visual Analyzer

Extract a reusable design system from sampled video frames and 01-analysis.md, producing {videoId}/02-design-system.md.

Pipeline position: 01-shorts-analyzer → **02-visual-analyzer** → 03-dynamic-analyzer → 001-pattern-extractor → 04-shorts-asset-extractor

Prerequisite: 01-shorts-analyzer Phase 0~3 완료 ({videoId}/frames/ + {videoId}/01-analysis.md 필요)

Input: {videoId}/frames/, {videoId}/01-analysis.md Output: {videoId}/02-design-system.md

Required Tools

Vision Agent (frame sampling) | 01-analysis.md (text synthesis)

Execution

Step 1: Layout Analysis

Read {videoId}/01-analysis.md to collect the full scene list and each scene's frame range.

For each scene, sample 1~2 representative frames (avoid transitions — pick mid-scene frames).

Pass sampled frames to Vision agent with the prompt:

Classify the layout type for this frame.
Reference categories: references/layout-types.md (15 types).
Return: layout_type, notes (e.g. safe-zone position, overlay placement).

Synthesize per-scene results into:

• Dominant layout type(s) — the 1~2 types that appear most
• Per-scene layout table — Scene N.N | frame | layout_type

Reference: references/layout-types.md

Checklist

• All scenes have at least 1 sampled frame
• Each scene assigned a layout type
• Dominant layout type(s) identified

---

Step 2: Face Presence

From Step 1's sampled frames, classify face presence for each scene.

Pass frames to Vision agent:

Classify face presence in this frame.
Reference categories: references/face-categories.md (9 categories).
Return: face_category, notes (e.g. partial crop, stylized illustration).

Synthesize:

• Primary face category — category appearing in majority of scenes
• Consistency — note any scenes that deviate from the primary category

Reference: references/face-categories.md

Checklist

• Face presence classified for all sampled frames
• Primary face category identified
• Deviations noted

---

Step 3: Text Taxonomy

Extract all text entries from {videoId}/01-analysis.md (텍스트 sections across all scenes).

Group by functional category (examples: hook, subtitle, info-label, CTA, chapter-title, stat, quote).

For each category, sample 1~2 representative frames containing that text type and pass to Vision agent:

For the text visible in this frame, identify:
- font_weight: thin / regular / semibold / bold / extrabold
- size_range: relative (small / medium / large / xlarge) or px estimate if discernible
- color: hex or color name
- background: none / solid / gradient / blur-pill / outline-box
- effects: shadow / stroke / glow / none (list all that apply)
- alignment: left / center / right
Reference: references/text-styles.md for style attributes and animation taxonomy.

Output: text category → style mapping table.

Reference: references/text-styles.md

Checklist

• All text categories from 01-analysis.md identified
• Each category has a style entry (weight, size, color, bg, effects, alignment)
• Animation patterns noted where visible (slide-in, fade, typewriter, etc.)

---

Step 4: Graphics Style

Collect all 그래픽 entries from {videoId}/01-analysis.md (asset names, positions, sizes, effects).

Classify the visual style of each asset type appearing in the video:

• flat — vector, minimal shading
• 3d — rendered/extruded shapes
• photo — real photograph
• meme — meme image/template
• emoji — emoji or emoji-style icon
• icon — line/filled icon (UI-style)
• illustration — custom drawn art

Note common placement patterns (e.g. "icons always top-left", "memes center-screen").

No Vision call required for this step — derive from 01-analysis.md text data. Use Vision only if asset style is ambiguous.

Checklist

• All graphic asset types from 01-analysis.md listed
• Each asset type has a visual style classification
• Common size/position patterns noted

---

Step 5: Color System

From Step 1's sampled frames, extract the dominant color palette.

Pass a representative cross-section of frames (1 per Act: Hook, Context, Evidence, Challenge, CTA) to Vision agent:

Extract the dominant colors from this frame.
For each color, identify its role:
- surface: main background color
- primary: primary brand/accent color used for emphasis
- accent: secondary highlight color
- text-light: text color on dark backgrounds
- text-dark: text color on light backgrounds
- border: outline/stroke color
Return hex values where possible.
Reference: references/design-tokens.md for token naming.

Synthesize into a unified color palette. Note any per-Act color shifts (e.g. "Challenge Act turns red").

Reference: references/design-tokens.md

Checklist

• At least 1 frame per Act analyzed for color
• Each dominant color assigned a token role
• Per-Act color variation noted if present

---

Step 6: Design Token Summary

Synthesize Steps 1~5 into {videoId}/02-design-system.md.

Structure:

# Design System — {videoId}

## Layout
- dominant_layout: [type from Step 1]
- per_scene: [table]

## Face
- primary_face_category: [from Step 2]
- consistency: [note]

## Typography
| category | weight | size | color | background | effects | alignment |
|----------|--------|------|-------|------------|---------|-----------|
| hook     | ...    | ...  | ...   | ...        | ...     | ...       |
| subtitle | ...    | ...  | ...   | ...        | ...     | ...       |
| ...      |        |      |       |            |         |           |

## Graphics
| asset_type | style | size | position | notes |
|------------|-------|------|----------|-------|
| ...        | ...   | ...  | ...      | ...   |

## Colors
| token   | hex | role |
|---------|-----|------|
| surface | ... | main background |
| primary | ... | emphasis |
| accent  | ... | highlight |
| text-light | ... | text on dark |
| text-dark  | ... | text on light |
| border  | ... | stroke/outline |

## Spacing & Sizing (Remotion hints)
- safe_zone_padding: [px estimate or % of 1080w]
- subtitle_bottom_offset: [px from bottom]
- graphic_scale_range: [e.g. 80px~200px icons]

## Remotion Implementation Notes
- Layout: [component strategy hint]
- Typography: [font family guess, weight mapping]
- Colors: [CSS variable or inline style approach]
- Graphics: [staticFile() path convention]

Reference: references/design-tokens.md

Checklist

• {videoId}/02-design-system.md written
• All 6 sections present (Layout, Face, Typography, Graphics, Colors, Spacing)
• Remotion implementation notes included for each section
• No "미상" or unknown values — use best estimate with (estimated) marker

---

Final Checklist

• Step 1: All scenes classified by layout type; dominant layout identified
• Step 2: Primary face category identified; deviations noted
• Step 3: All text categories mapped to style properties; animations noted
• Step 4: All graphic asset types classified by visual style; placement patterns noted
• Step 5: Color palette extracted; token roles assigned; per-Act shifts noted
• Step 6: {videoId}/02-design-system.md written with all sections and Remotion hints