영상 프레임에서 디자인 시스템(레이아웃, 페이스, 텍스트 스타일, 그래픽 스타일, 색상 체계)을 추출하여 02-design-system.md 생성. Use when "디자인 시스템", "시각 분석", "visual analysis", "design system", "레이아웃 분석", "색상 분석".
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
Vision Agent (frame sampling) | 01-analysis.md (text synthesis)
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:
Scene N.N | frame | layout_typeReference: references/layout-types.md
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:
Reference: references/face-categories.md
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
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 shading3d — rendered/extruded shapesphoto — real photographmeme — meme image/templateemoji — emoji or emoji-style iconicon — line/filled icon (UI-style)illustration — custom drawn artNote 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.
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
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
{videoId}/02-design-system.md written(estimated) marker{videoId}/02-design-system.md written with all sections and Remotion hints