What problem does it solve? Turning an exported design image (Figma export, retina screenshot, competitor-site capture) into working HTML/CSS is error-prone: retina scale factors break pixel comparison, small text gets mistranscribed, and there is no reference page to calibrate against. This Skill normalizes the image, transcribes the mock's content, and drives a deterministic verification loop until the page matches. ## Core Features & Use Cases - Image normalization: vlmkit scan mock infers @2x/@3x device-pixel scale and writes a normalized @1x target, with degraded-capture tolerances for JPEG-history screenshots via --capture real. - Guided transcription: one-pass vision transcription of structure, sizes, colors, and exact copy, with a pixel-side check copy --target review that must be read by a second reader to catch transcription errors. - Deterministic verify loop: vlmkit verify markup runs to a DONE verdict (composition 0/0, height in tolerance), with strict rules for declaring design-tool rendering residuals and model-selection guidance (Sonnet vs Haiku) for the 1px endgame. - Use Case: Given a 2560px-wide Figma export of a landing page, normalize it, transcribe the copy, build the page, and iterate the verify loop until the rendered page matches the mock within tolerance. ## Quick Start Ask the agent to implement the page shown in mock.png as HTML/CSS and iterate with vlmkit verify markup until it reports DONE.
