What problem does it solve? Turning a visual design into working code requires careful visual reading, spec extraction, and alignment with an existing codebase's conventions, and mistakes in any step produce implementations that drift from both the design and the project. ## Core Features & Use Cases - Visual Spec Extraction: Reads mockups, screenshots, or wireframes with magnification of detail-dense regions, then extracts layout regions, elements, text, spacing, colors, and interaction hints. - Project-Aware Implementation: Inspects the target project first and reuses its framework, components, design tokens, naming conventions, and accessibility patterns instead of inventing new ones. - Honest Verification Boundaries: States explicitly that visual extraction is primary-only and never claims independent cross-family verification that the runtime does not support. - Use Case: A user pastes a dashboard screenshot and asks to build it; the Skill extracts a working spec, implements it with the project's existing component library and tokens, then compares the rendered result against the source image. ## Quick Start Turn this attached UI screenshot into code using my project's existing components and design tokens.
