domains / families / design / image-to-code
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop. Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.
The two skills share the name and the high-level goal of turning a visual reference into code, but they define fundamentally different procedures. The Leonxlnx skill is a self-contained, image-generation-first workflow where the agent must create the design images itself, analyze them, and then implement, with heavy emphasis on art direction, image count, and avoiding generic UI patterns. The plugin87 skill is a token-driven reconstruction workflow that assumes a user-provided reference, requires a specific external 'kit' of files and scripts, and focuses on inferring a design system, building DTCG tokens, and passing automated verification gates. Because they disagree on the source of the visual reference (generated vs. provided) and the core implementation strategy (art-directed section images vs. token-driven system reconstruction), crowning one would hide a real alternative.