| name | web-image |
| description | Activate when a user requests website section design images — generating one horizontal image per section as a high-fidelity frontend art direction reference, without writing code. |
| version | 1 |
| category | image-generation |
| outputs | images |
Web Image
Purpose
This skill generates horizontal design reference images for website sections. Each section is its own image. The images serve as art direction references for developers, coding agents, or design handoff — not as final production assets. The output should feel like concept work from a senior product designer: strong composition, clear hierarchy, implementation-friendly layout, and a consistent brand world across all frames.
When to Activate
- User requests website design images, mockups, or design references
- User wants to visualize a website concept before building it
- User wants frontend art direction without writing code
- User asks to "design" a landing page, hero, or marketing site in image form
When Not to Activate
- User needs working code (use
frontend or build-from-image)
- User wants mobile app screens (use
mobile-image)
- User needs brand identity images (use
brand)
- User wants a mood board rather than a buildable frontend reference
Core Principles
-
One image per section, always horizontal. Never compress multiple sections into one vertical image. Each section is an independent 16:9 or 16:10 horizontal frame. Text must be legible and spacing must be readable.
-
Images form one coherent brand world. Across all per-section images: same palette, same type family and scale logic, same CTA style, same image treatment, same border-radius language. A viewer seeing all frames must recognize one website.
-
Composition varies across sections. No more than two consecutive sections share the same layout anchor. Across a multi-section site, use at least three different composition structures.
-
Images must communicate implementation. A developer should be able to look at each frame and understand: the layout grid, spacing relationships, type scale, CTA hierarchy, and color palette. Vague mood art is not a frontend reference.
-
The hero must work at small desktop width. The hero image should show a composition that holds together at approximately 1280px — not only at ultra-wide.
-
Section density and size must vary. Not every section should feel the same scale. Some sections are large and content-rich; some are mid-scale editorial; some are minimal negative-space separators. This creates scroll rhythm.
-
Background variety is required. In any multi-section site, vary background modes: solid surface, full-bleed image with overlay, editorial side-image, and subtle texture should each appear at least once.
Configuration
| Dial | Scale | Default |
|---|
| DESIGN_VARIANCE | 1–10 | 8 |
| VISUAL_DENSITY | 1–10 | 4 |
| ART_DIRECTION | 1–10 | 8 |
| IMAGE_USAGE | 1–10 | 9 |
| SPACING_GENEROSITY | 1–10 | 8 |
Workflow
-
Select a visual direction. Before generating any images, commit to: one theme (light / dark / bold-solid / quiet-neutral), one typography character, one hero architecture, one narrative concept threading through the visual copy.
-
Plan the section set. Determine section count and names. For each section assign: a composition anchor, a background mode, and a CTA variation. Ensure no anchor repeats more than twice in a row; at least one full-bleed background image must appear.
Composition anchors (rotate across sections):
- Centered statement
- Top-left lead, support bottom-right
- Bottom-left text over background image
- Left-third caption, right-two-thirds visual
- Right-third caption, left-two-thirds visual
- Centered low (text in lower 40% over full-bleed image)
- Off-grid editorial offset
- Stacked center (label / headline / sub / CTA all centered, ultra minimal)
Background modes (vary across sections):
- Solid surface with inline asset
- Subtle texture or grid as background
- Full-bleed image with tonal overlay (text fully readable)
- Editorial side-image (50/50, 60/40, or 40/60)
- Flat color block with small product or detail crop
-
Select 4 signature components from: asymmetric bento grid, cascading card stack, accordion slice layout, gapless bento, brand marquee strip, polaroid arc composition, product UI panel stack, split quote wall, oversized metrics strip, layered image crop frames, off-grid editorial layout, vertical rhythm strip.
-
Select the hero scale:
- Giant Statement — massive type, dominant first viewport
- Mid Editorial — balanced type/image, cinematic
- Mini Minimalist — short statement + thin CTA + significant negative space
-
Generate images one section at a time. For each image: apply the assigned composition anchor and background mode. Keep CTA hierarchy clear. Keep typography readable. Ensure the section communicates its function.
-
After each image, verify brand consistency. Palette, type treatment, and component language must match the previous images.
-
Run the Clarity Check.
Default Section Packs
4-section pack
- Hero
- Features
- Social proof / testimonials
- CTA
8-section pack
- Hero — 2. Trust bar — 3. Features — 4. Product showcase — 5. Benefits / use cases — 6. Testimonials — 7. Pricing — 8. CTA
12-section pack
- Hero — 2. Trust bar — 3. Feature grid — 4. Product preview — 5. Problem / solution — 6. Benefits — 7. Workflow — 8. Metrics / integrations — 9. Testimonials — 10. Pricing — 11. FAQ — 12. CTA + footer
Forbidden Patterns
Layout patterns:
- Multiple sections compressed into one image
- Same composition anchor repeating more than twice consecutively
- Zero full-bleed background images in a multi-section set
- Every section using the same background mode
Visual patterns:
- Purple/blue AI gradient as the site's primary brand expression
- Floating ambient blobs with no structural purpose
- Glassmorphism stacked without clear depth rationale
- Generic placeholder art with no frontend reference value
Typography patterns:
- Hero headline exceeding 3 lines
- Gradient text as the primary headline treatment
- Every section using identical type size and weight
Content patterns:
- Generic brand names: Acme, Nexus, Flowbit, Quantumly, NovaCore
- Filler copy: "Unleash," "Elevate," "Revolutionize," "Seamless," "Next-Gen"
- Three identical stat columns with placeholder metrics when the brand doesn't logically have them
- Carousel logos repeating the same unreadable thumbnails
Output Requirements
- One horizontal image per section
- All text in each image legible at normal viewing size
- Consistent brand world across all images
- At least 3 distinct composition anchors in a multi-section set
- At least one full-bleed image background in a multi-section set
Quality Gates
Failure Modes
"Collapsed board": Multiple sections compressed into one tall image. Detection: image is taller than 16:9 and shows multiple content areas. Fix: regenerate with one section per image.
"Cloned composition": Five sections all use the same layout anchor with minor variations. Detection: review anchors — more than two consecutive identical anchors is a failure. Fix: switch to a different anchor for the next section.
"Brand drift": A later section uses a different color family from earlier sections. Detection: compare accent colors and backgrounds across all frames. Fix: re-apply the palette from section 1.
"Vague mood art": Images look atmospheric but communicate no implementation information (no text hierarchy, no CTA, no readable type). Fix: add explicit headline text, a CTA element, and section-purpose markers to every frame.
Response Format
Generate images directly. Optionally precede with a 5-bullet design decision note (theme, type choice, hero architecture, narrative spine, palette). Do not append analysis after the images.
