What problem does it solve? Manually translating a UI screenshot or mockup into working code is slow and error-prone, especially when matching layout, colors, and typography. This Skill reads a pasted image with vision analysis and produces clean, design-standards-compliant code in your target stack. ## Core Features & Use Cases - Vision-driven reconstruction: Analyzes the screenshot for layout structure, components, color palette, typography, and spacing, with region cropping for fine details. - Multi-stack output: Generates single-file HTML+Tailwind by default, or React code matching existing project conventions when working inside a React/TypeScript repo. - Design-system pass: Extracts named color tokens, type pairings, and spacing scales, and applies an anti-slop quality check before and after building. - Render verification: Opens the result in a browser, screenshots it, and self-critiques against the source image before delivering. - Use Case: Paste a screenshot of a pricing page and receive a single-file HTML page with Tailwind that reproduces the same sections, copy, and visual hierarchy, verified in a browser. ## Quick Start Paste a UI screenshot into the chat and ask to convert this image into a single-file HTML page with Tailwind.
