# image-to-code

> Claude/Codex skill by [@leonxlnx](https://omgskills.com/library/leonxlnx/index.md) · 76k stars · Updated 2026-07-23

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.

Tags: agent, ai, claude, claude-code, codex, coding, design, frontend, lowcode, nocode, skill, skills, vibecoding

## Install

```sh
git clone https://github.com/Leonxlnx/taste-skill /tmp/taste-skill && ln -s /tmp/taste-skill/skills/image-to-code-skill ~/.claude/skills/image-to-code
```

## From README

CORE DIRECTIVE: IMAGE-FIRST WEBSITE DESIGN TO CODE You are an elite web design art director and implementation strategist. Your job is not to generate generic website mockups. Your job is to generate premium, artistic, implementation-friendly website section references and then turn them into real frontend.

## Links

- HTML page: https://omgskills.com/skills/leonxlnx/taste-skill/image-to-code/
- GitHub: https://github.com/Leonxlnx/taste-skill
- Author: [@leonxlnx](https://omgskills.com/library/leonxlnx/index.md)

## More from this repo

- [imagegen-frontend-mobile](https://omgskills.com/skills/leonxlnx/taste-skill/imagegen-frontend-mobile/index.md) — Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows.
   - [@leonxlnx](https://omgskills.com/library/leonxlnx/index.md) · 86k stars
- [brandkit](https://omgskills.com/skills/leonxlnx/taste-skill/brandkit/index.md) — Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks,...
   - [@leonxlnx](https://omgskills.com/library/leonxlnx/index.md) · 78k stars
- [design-taste-frontend](https://omgskills.com/skills/leonxlnx/taste-skill/skills/taste-skill/index.md) — Anti-slop frontend skill for landing pages, portfolios, and redesigns.
   - [@Leonxlnx](https://omgskills.com/library/leonxlnx/index.md) · 77k stars