Image To Code

This is for when you need Claude to build a website from a visual reference, but you want it to generate the design mockup first instead of winging it from memory. It forces an image first workflow: generate the design, analyze what was actually created, then code it faithfully. The skill is opinionated about avoiding common AI website clichés like tiny compressed multi-section boards, card spam, and unreadable text. In Codex it defaults to one large image per section instead of cramming everything into a single artboard, which makes typography and spacing actually extractable. It also won't crop old images when you need detail views, it regenerates them fresh. Useful for landing pages, hero sections, and anything where visual fidelity matters more than speed.

Install to Claude Code

npx -y skills add leonxlnx/taste-skill --skill image-to-code --agent claude-code