What problem does it solve? Translating design screenshots and mockups into working frontend code is slow and error-prone, often producing layouts with guessed colors, wrong spacing, and mismatched components that require hours of manual correction. ## Core Features & Use Cases - 6-Pass Visual Analysis: Systematically extracts layout structure, color palettes, typography scales, spacing systems, and component inventories from any reference image before writing code. - Project Stack Detection: Reads package.json, tailwind.config, and existing component libraries to generate code that matches the project's exact framework, UI library, and conventions. - Comparison & Refinement Protocol: Compares generated output against the original design, categorizes differences by severity, and iterates toward pixel accuracy. - Use Case: A developer receives a Figma-exported dashboard screenshot and needs a Next.js page using shadcn/ui components; the Skill analyzes the image, maps every element to existing project components, and outputs production-ready JSX with correct Tailwind classes. ## Quick Start Attach a UI screenshot and ask the assistant to convert this design into code matching my project's stack.
