Pixel-Perfect Design Replication

This skill fires when the user provides a screenshot, mockup, Figma export, or any design image and asks you to replicate it in code. The reference image is the specification. Your role is translator, not designer. Every visual decision - font size, spacing, color, radius, shadow, layout proportion - comes from the image, not from your preferences.

The Pipeline

Every replication job follows this flow. No phase can be skipped. No phase can start before the previous one completes.