claudegoodies
Skill

imagegen-frontend-web

From Leonxlnx

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.

Directs multi-image generation, one horizontal image per landing-page section, for website design comps.

Use it when

  • Generating design reference images for a landing page or marketing site
  • Need separate section-by-section visuals (hero, features, CTA, etc.) instead of one mockup
  • Want composition/palette variety across sections for a coding model to recreate
  • Producing product comps meant to be handed to developers as visual specs

Skip it if

  • You need actual code output, not image references
  • You want a single combined page mockup instead of many separate images
  • Your project isn't a marketing/landing-page style website
  • Generating 6-12 images per request is too costly or slow for your workflow

Facts

Repository
Leonxlnx/taste-skill
Status
Actively maintained
Last commit
Source file
skills/imagegen-frontend-web/SKILL.md

Source preview

The instructions Claude Code reads when this skill runs.

# 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**. It is allowed, but it should not be your first instinct.

Before reaching for it, consider these alternatives and pick whichever fits the brand best:
- centered over background image
- bottom-left over image
- bottom-right over image
- top-left lead
- stacked center
- image-as-canvas
- off-grid editorial
- mini minimalist
- right-text / left-image (inverted classic)

Use left-text / right-image onl
View full source on GitHub →

Other skills