Design image to website code
/image-to-code-skill
/image-to-code-skill is a Claude Code skill in the Web & Design section. It is maintained by Leonxlnx and published under the MIT license. For visually important sites, first generates section-by-section design images, analyzes them, then codes the website to match them closely.
Author's description
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.
How to ask for it
Generate the design for this landing page and then implement it in codeI need my site's hero to look clean and readable on small screensCreate reference images per section before coding this site
Install
curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bashAfter installing with the script, type /image-to-code-skill. Using Cursor, Windsurf or Codex? Platform guides
Demo coming soon