Imagegen Frontend Web
Generate one horizontal reference image per landing section so you or your coding agent can recreate premium, conversion-aware marketing UI with consistent palette and varied composition.
Overview
Imagegen Frontend Web is an agent skill most often used in Validate (also Build) that generates one premium horizontal website section image per requested block with enforced palette and composition variety.
Install
npx skills add https://github.com/leonxlnx/taste-skill --skill imagegen-frontend-webWhat is this skill?
- Hard rule: one separate horizontal image per section—8 sections means 8 images, never one tall full-page frame
- Composition variety enforced—not locked to left-text/right-image; supports background-image freedom
- Varied hero scales (giant, mid, mini minimalist), CTAs, and narrative concept spine across sections
- Single consistent palette across all generated section images
- Optimized for landing pages, marketing sites, and product comps developers can accurately rebuild
- Default 6 section images when landing page count unspecified
- Default 8 section images for full website template requests
Adoption & trust: 65.1k installs on skills.sh; 37.9k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need distinct visual references for every landing section, but generic image prompts collapse the whole page into one unusable tall mockup.
Who is it for?
Indie founders and builders preparing landing pages, marketing sites, or product comps before handoff to Claude Code or Cursor for implementation.
Skip if: Backend work, app-store screenshots, icon-only asset packs, or cases where a single mood image is enough.
When should I use this skill?
Generating premium, conversion-aware website design references for landing pages, marketing sites, or product comps with one horizontal image per section.
What do I get? / Deliverables
You receive a numbered set of section images—each horizontal—with consistent branding cues your agent can map to real layout and CTA patterns.
- One horizontal reference image per section with announced section index
- Consistent palette and varied composition across the set
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Landing validation is where builders need visual comps before committing engineering time to full frontend implementation. Landing subphase is the shelf for section-by-section hero, trust, pricing, and CTA direction prior to build.
Where it fits
Produce six section images for a waitlist page before writing Tailwind markup.
Hand each horizontal comp to an agent implementing grid and typography per section.
Refresh hero and social-proof visuals for a campaign landing without redesigning the whole site in one shot.
Explore narrative spine and second-read moments across features before committing to component structure.
How it compares
Use for section-level design direction—not as a Figma replacement or automatic code generator.
Common Questions / FAQ
Who is imagegen-frontend-web for?
Solo builders and designers who want conversion-minded website section references that coding agents can follow section by section.
When should I use imagegen-frontend-web?
In Validate landing work when scoping page structure; in Build frontend when you need hero, trust bar, and feature section visuals before CSS implementation; anytime you must avoid multi-section single-frame outputs.
Is imagegen-frontend-web safe to install?
It steers image generation only—review the Security Audits panel on this Prism page and avoid embedding confidential product data in prompts.
SKILL.md
READMESKILL.md - Imagegen Frontend Web
# 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 only when it is genuinely the strongest choice — not by default. --- # CORE DIRECTIVE: AWWWARDS-LEVEL IMAGE ART DIRECTION You are an elite frontend image art director. Your job is not to generate generic AI art. Your job is to generate highly creative, premium, frontend design reference images that feel like real high-end website concepts. Standard image generation tends to collapse into repetitive defaults: - centered dark hero - purple/blue AI glow - floating meaningless blobs - generic dashboard card spam - weak typography hierarchy - cloned sections - "luxury" that is just beige serif text - "creative" that is actually messy and unreadable - text-heavy layouts with not enough imagery - overly dense sections with no breathing room Your goal is to aggressively break these defaults. The output must feel: - art-directed - premium - visually memorable - structured - readable - implementation-friendly - clearly usable as a frontend reference Do not generate random mood art unless explicitly asked. Default to website design comps. --- ## 1. ACTIVE BASELINE CONFIGURATION - DESIGN_VARIANCE: 8 `(1 = rigid / symmetrical, 10 = artsy / asymmetric)` - VISUAL_DENSITY: 4 `(1 = airy / gallery-like, 10 = packed / intense)` - ART_DIRECTION: 8 `(1 = safe commercial, 10 = bold creative statement)` - IMPLEMENTATION_CLARITY: 9 `(1 = loose moodboard, 10 = very codeable UI reference)` - IMAGE_USAGE_PRIORITY: 9 `(1 = mostly typographic, 10 = strongly image-led)` - SPACING_GENEROSITY: 8 `(1 = compact / tight, 10 = very spacious / breathable)` - LAYOUT_VARIATION: 8 `(1 = same anchor repeats, 10 = bold composition variety across sections)` - CONVERSION_DISCIPLINE: 8 `(1 = pure art moodboard, 10 = clear funnel + premium design balance)` AI Instruction: Use these as global defaults unless the user clearly asks for something else. Do not ask the user to edit t