screenshot-to-code-expert

screenshot-to-code-expert — vibes-plug Skill

English | Bahasa Indonesia

---

English

Orchestration & Integration

Connects and orchestrates with senior-frontend, design-system-architect, tailwind-expert, ui-ux-pro-max, modern-css-native-expert, multimodal-spatial-video-cloner, website-design-cloner, hig, svg-animation-motion-expert, frontier-ai-models-expert, and anti-slop to produce pixel-perfect, accessible, production-grade code from visual inputs.

Description

Production workflow for transforming visual design artifacts (screenshots, Figma exports, whiteboard photos, PDF mockups) into clean, semantic, responsive frontend code. Leverages the native vision capabilities of frontier models (Gemini 4 Pro's 2M multimodal context, Claude 5.5's pixel-level visual understanding, GPT Astra 6's design comprehension) to extract layout structure, color palettes, typography, spacing, and interaction patterns — then maps them to the project's existing design system and component library.

Trigger Conditions

Activate this skill when:

• The user provides a screenshot, mockup, or design image and asks to "build this" or "convert to code."
• Translating Figma frames or exported design assets into React, Vue, Svelte, or HTML/CSS components.
• Reverse-engineering competitor UIs from screenshots for inspiration (not exact cloning).
• Rapidly prototyping UI from hand-drawn sketches or whiteboard photos.
• Performing visual QA by comparing rendered output against original design.

---

Core Concepts & Patterns

1. Multi-Pass Extraction Pipeline

Single-pass screenshot-to-code produces fragile output. Use a structured multi-pass approach:

PASS 1: STRUCTURAL ANALYSIS
  ├── Identify layout grid (columns, rows, flex/grid containers)
  ├── Detect component boundaries and nesting hierarchy
  └── Map semantic HTML elements (header, nav, main, aside, footer)

PASS 2: DESIGN TOKEN EXTRACTION
  ├── Extract color palette (convert to OKLCH for design system)
  ├── Identify typography (font family, size, weight, line-height)
  ├── Measure spacing rhythm (padding, margin, gap patterns)
  └── Detect border radii, shadows, and elevation levels

PASS 3: COMPONENT DECOMPOSITION
  ├── Break UI into reusable atomic components
  ├── Identify repeated patterns (cards, list items, badges)
  ├── Map to existing project components where possible
  └── Define component props and variant slots

PASS 4: RESPONSIVE BEHAVIOR INFERENCE
  ├── Predict mobile/tablet adaptations from desktop layout
  ├── Identify collapsible navigation patterns
  ├── Map breakpoint-appropriate layout shifts
  └── Infer touch targets and mobile interaction patterns

PASS 5: CODE GENERATION & REFINEMENT
  ├── Generate semantic HTML + CSS/Tailwind classes
  ├── Apply project's design tokens and component library
  ├── Add accessibility attributes (ARIA roles, alt text)
  └── Refine with anti-slop review (no placeholder content)