Design-to-Code Skill — Pixel-Accurate Conversion

The Core Problem This Skill Solves

Claude's default behavior when given a screenshot is to glance at it, form a rough mental model, and start coding immediately — skipping details, guessing colors, approximating spacing, and missing decorative elements entirely. The result is code that captures maybe 30% of the original design.

This skill forces a mandatory analysis phase before any code is written. Claude must deconstruct the design layer by layer, document what it sees, and THEN code — referencing its own analysis throughout.

THE GOLDEN RULE

If you can see it in the screenshot, it must exist in the code. Every border, shadow, gradient, icon, divider, badge, rounded corner, background color, and pixel of spacing. If you skip it, the output is wrong. There is no "close enough."

Step 1: STOP — Do Not Write Code Yet

When the user provides a design screenshot, your FIRST response must be analysis, not code. Resist the urge to start coding. Instead, perform the 7-Layer Scan below.

If the user explicitly says "just code it" or "skip the analysis," you may abbreviate — but still perform the scan internally before writing any code.