What problem does it solve? Turning a mockup or screenshot into code often produces fragile markup full of magic values that breaks at any other viewport width. This Skill enforces a system-first method: extract the grid, spacing scale, typography, and color tokens from the image before writing any markup, so the result is maintainable and responsive. ## Core Features & Use Cases - Structural image reading: Measures columns, gutters, spacing base (4 or 8), type scale, colors grouped by role, radii, shadows, and repeated components before coding. - Token extraction and reconciliation: Converts measurements into design tokens and reconciles them with an existing DESIGN.md instead of creating a parallel scale. - Outside-in construction and verification: Builds layout first, then components, then detail, and checks the result against the original for spacing, font weights, secondary text color, and optical alignment. - Use Case: A designer hands you a landing page screenshot. The Skill derives the 8px spacing base and type scale, writes tokens, builds the responsive layout, and fills in the states and breakpoints the image omits. ## Quick Start Implement this attached mockup as responsive interface code, extracting the design system from the image before writing any markup.
