image-to-codelisted

# Image to Code Treat the design image as an implementation specification, then ship working code that matches its hierarchy, rhythm, assets, and responsive intent. ## Precedence - Use this skill as the single orchestrator for image-first web implementation. - Invoke image generation as an internal step when references are missing; do not independently run a second competing web-design workflow. - Use `design-taste-frontend` instead for normal code-first frontend work. - Use `imagegen-frontend-web` alone when the user wants images but no code. ## Workflow 1. Inspect the repository, runtime, existing design system, routes, assets, and supplied images. 2. Determine the section list and identify which sections lack a readable reference. 3. Generate fresh, standalone section images only where needed. Prefer large section-specific references over a tiny full-page board. 4. Analyze each reference for layout, type, spacing, color, surfaces, imagery, components, and responsive behavior. 5. Implement with the existing stack, matching the reference before introducing stylistic reinterpretation. 6. Compare the rendered page against the reference and correct the largest visual deltas first. 7. Verify responsive behavior, interactions, reduced motion, accessibility, and build/tests. ## Non-negotiables - Do not crop old images to manufacture missing section references. - Keep the hero readable and visible on a small laptop; do not let decorative art bury copy or CTAs. - Recreate hie