Image to code

Turn a reference image, screenshot, or mockup into token-driven, accessible code , infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it

Install

Run it in your project root, then ask your agent for what you want. More detail

What it does

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

Straight from the skill's own SKILL.md. This is what your agent reads.