# Screenshot Replication Workflow

Replicate a design exactly from a provided screenshot.

## Prerequisites
- Activate `ck:ui-ux-pro-max` skill first for design intelligence
- Have `ck:ai-multimodal` skill ready for visual analysis

## Workflow Steps

### 1. Analyze Screenshot Details
Use `ck:ai-multimodal` skill to extract:
- Design style and visual trends
- Font names (predict Google Fonts), sizes, weights
- Color palette with exact hex codes
- Border radius, spacing patterns
- Element positions, sizes, shapes
- Textures, materials, lighting
- Shadows, reflections, blur, glow effects
- Background transparency, transitions
- Image treatments and effects

**Font Prediction**: Avoid defaulting to Inter/Poppins. Match actual fonts visible.

### 2. Create Implementation Plan
Use `ui-ux-designer` subagent:
- Create plan directory (use `## Naming` pattern from hooks)
- Write `plan.md` (<80 lines, generic overview)
- Add `phase-XX-name.md` files with:
  - Context links, Overview, Key Insights
  - Requirements, Architecture, Related files
  - Implementation Steps, Todo list
  - Success Criteria, Risk Assessment

### 3. Implement
- Follow plan step by step
- Default to HTML/CSS/JS if no framework specified
- Match screenshot precisely

### 4. Generate Assets
Use `ck:ai-multimodal` skill:
- Generate images, icons, backgrounds
- Verify generated assets match design
- Remove backgrounds if needed with `ck:media-processing`

### 5. Verify & Report
- Compare implementation to screenshot
- Report changes summary to user
- Request approval

### 6. Document
If approved, update `./docs/design-guidelines.md`

## Quality Standards
- Match screenshot at pixel level where possible
- Preserve all visual hierarchy
- Maintain exact spacing and proportions
- Replicate animations if visible in source

## Related
- `design-extraction-overview.md` - Extract design guidelines
- `extraction-prompts.md` - Detailed analysis prompts
- `visual-analysis-overview.md` - Verify quality