english/.opencode/skills/frontend-design/references/workflow-screenshot.md

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