imagegen-frontend-web
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 co
npx skills add Leonxlnx/taste-skill --skill imagegen-frontend-web --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Generates one separate horizontal image per section for a landing page, producing 8 images for an 8-section page. Each section is rendered as its own image call, never combining sections into a single frame. If only one image can be rendered at a time, images are output sequentially in the same response with announcements for each section. The skill stresses avoiding the default left-text / right-image hero pattern as the default and encourages alternative hero compositions. It enforces a hard rule to create premium frontend design references with deliberate composition variety, background freedom, varied CTAs, varied hero scales, a narrative spine, second-read moments, and a single consistent palette across all images. It aims to be readable and implementation-friendly for developers to recreate in frontend code.
How it works
- The hard rule requires one image per section: 1 section -> 1 image; 8 sections -> 8 images; a landing page with no count defaults to 6 sections; a full website template defaults to 8 sections.
- If only one image can be rendered at a time, output images sequentially, announcing each as "Section X of Y: Hero/Trust bar/etc.".
- It discourages collapsing multiple sections into a single frame and prohibits returning a single tall image containing the whole page.
- The rule emphasizes not defaulting to the left-text / right-image hero pattern; alternatives are listed as preferred anchors.
When to use it
- Used when you need frontend design reference images that map directly to page sections, suitable for landing pages, marketing sites, and product comps intended to be implementable by developers.
- Apply when a page requires consistent palette across all images and a narrative spine through all sections.
What it can touch
- Tools declared: claude-code, codex. The skill directs generation of per-section horizontal images and uses these tools for content-to-image translation.
Caveats
- License: MIT. The output must comply with the hard rule of one image per section and avoid combining sections.
- The skill mandates varied composition and hero scales, and prohibits default AI patterns unless genuinely best fit.
- If rendering constraints limit to one image at a time, images must be announced per section in sequence.
# 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 -
- 1. ACTIVE BASELINE CONFIGURATION
- Brief-to-direction mapping
- 2. THE COMBINATORIAL VARIATION ENGINE
- Theme Paradigm
- Background Character
- Typography Character
- Hero Architecture
- Section System
- Signature Component Set
- Motion-Implied Language
- Composition Anchor (per-section)
- Background Mode (per-section)
- CTA Variation
- Hero Scale (per-page)
What does the imagegen-frontend-web skill do?
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 co
How do I install it?
Run `npx skills add Leonxlnx/taste-skill --skill imagegen-frontend-web --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Leonxlnx/taste-skill, a repository with 71,680 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.