What problem does it solve? Building frontend UI from a design description or live website often relies on subjective judgment, leading to implementations that drift from the intended look. This Skill replaces guesswork with a measured loop: an approved visual reference becomes the source of truth, and every iteration is scored against it until the match passes a defined threshold. ## Core Features & Use Cases - Reference-driven implementation: Works from a generated mockup, a static reference image, or a captured live URL baseline, with explicit user approval before any code is written. - Measured iteration loop: Each edit cycle runs a Visual Verdict producing a JSON score, differences, and suggestions; implementation continues until the score reaches 90 or higher, with pixel-diff overlays as secondary debugging evidence. - Reproducible design system output: The final result is encoded as repo-native design tokens and reusable components (colors, spacing, typography, radii, shadows, variants), not a one-off screenshot match. - Use Case: Provide a live URL of a landing page you want recreated; the Skill captures the baseline with viewport and interaction notes, gets your approval, then drives autonomous implementation until the clone visually matches and passes build/lint/test. ## Quick Start Ask the agent to implement a frontend page matching this reference image or live URL using the visual-ralph loop with a verdict score threshold of 90.
