# imagegen-frontend-web

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

Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.

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/imagegen-frontend-web ~/.claude/skills/imagegen-frontend-web
```

## From README

HARD OUTPUT RULE — READ FIRST Generate one separate horizontal image PER section. Always. No exceptions. 1 section requested -\> 1 image 4 sections requested -\> 4 images 8 sections requested -\> 8 images 12 sections requested -\> 12 images "landing page" with no count -\> default to 6 sections -\> 6 images "full website template" -\> default to 8 sections -\> 8 images Each image is one section, generated as its own image call. Never combine multiple sections into one frame. Never return a single tall image that contains the whole page. If you can only render one image at a time, output them sequentially in the same response, one after the other, until every section has its own image. Announce each one ("Section 1 of 8: Hero", "Section 2 of 8: Trust bar", etc.). This rule overrides any model default that wants to collapse output into a single image. --- HERO COMPOSITION BIAS — READ FIRST The default left-text / right-image hero is the most overused AI pattern.

## Links

- HTML page: https://omgskills.com/skills/leonxlnx/taste-skill/imagegen-frontend-web/
- 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