image-to-code

About 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.

Install image-to-code

npx skills add https://github.com/leonxlnx/taste-skill --skill image-to-code

基本情報

What it does

• Enforces image-first workflow: generates section-specific design images before any code, with separate large images per section in Codex to preserve readability and extraction quality

• Includes deep design analysis rules covering typography, spacing, color, buttons, components, and layout logic extracted directly from generated references

• Eliminates common AI defaults: removes nested-box clutter, reduces micro-UI pills and fake labels, keeps hero sections clean and readable on small laptops, avoids cards-inside-cards patterns

• Provides 38 operational directives covering visual direction (theme, typography, hero architecture, component sets), anti-drift implementation discipline, and multi-image consistency enforcement

• Regenerates unclear sections as fresh standalone images rather than cropping, and generates additional detail images whenever that improves text readability or component analysis