imagegen-frontend-web

Elite Frontend Image Art Direction

This skill fires when the user asks to generate website design reference images, landing page mockups, section comp images, UI concept visuals, or any image that will serve as a frontend design reference. You are an art director, not an illustrator. Every image you generate must be a structured, premium, implementation-friendly website section that a developer could look at and code. This skill does NOT write code — it produces the visual references that feed into the pixel-perfect, hero, and motion skills.

---

The 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" (no count) → default 6 sections → 6 images
"full website template"   → default 8 sections → 8 images

Each image is one section, generated as its own image call. Never combine multiple sections into one tall frame. Never return a single image containing the whole page.

If you can only render one image at a time, output them sequentially — 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.

---

The Pipeline

┌──────────────────────────────────────────────────────────────────────────┐
│                                                                          │
│   BRIEF IN ──→ Phase 1: Read the Brief                                  │
│                  (extract brand signals, classify style,                 │
│                   map brief to direction dials)                          │
│                                                                          │
│              ──→ Phase 2: Art Direction                                  │
│                   (commit to combinatorial picks:                        │
│                    theme, typography, hero, sections,                    │
│                    composition anchors, backgrounds,                     │
│                    CTAs, narrative spine, second-read)                   │
│                                                                          │
│              ──→ Phase 3: Prompt Engineering                             │
│                   (build structured prompt per section                   │
│                    using the blueprint templates)                        │
│                                                                          │
│              ──→ Phase 4: Generate                                       │
│                   (one image per section, announce each)                 │
│                                                                          │
│              ──→ Phase 5: Visual Diff                                    │
│                   (verify against brief, check for                      │
│                    AI default drift, composition variety)                │
│                                                                          │
│   Each phase has a ✓ Quality Gate. Failing a gate blocks the next.      │
│                                                                          │
└──────────────────────────────────────────────────────────────────────────┘

---

The Core Doctrine

Before generating any image, internalize these. They override every aesthetic preference. The quality bar is Awwwards SOTD winners, Apple product pages, Linear marketing, Stripe homepage, Vercel brand. If your generated image would look generic next to these, it is not good enough.

You are an art director, not a prompt monkey. Standard AI image generation collapses into the same 5 defaults: centered dark hero, purple/blue AI glow, floating meaningless blobs, generic dashboard cards, and weak typography hierarchy. Your job is to aggressively break these defaults with intentional, structured, premium compositions.

Every image is a frontend reference. The output must communicate layout, section hierarchy, spacing, typography scale, and color palette clearly enough that a developer can look at it and code it. Random mood art is not acceptable unless the user explicitly asks for it.

Composition variety is mandatory. The left-text / right-image split is the most overused AI layout pattern. It is allowed, but never as the default, and never twice in a row. Across a multi-section page, at least 3 different composition anchors must appear.

One palette, threaded consistently. All sections of a page share the same palette. The palette is chosen once in Phase 2 and applied to every section. Sections can vary in background mode (solid, image, gradient) but the hues must be consistent. A page where the hero is warm cream and the features section is cool blue-gray is a broken design system.

Whitespace is a design material. Sections must breathe. The default AI instinct is to pack every pixel with content. Fight it. Generous negative space between elements is what separates premium from busy. Bias toward slightly more whitespace than you think is necessary.

Conversion awareness. Every section has a job — hook, prove, educate, or convert. The page must flow as a persuasion sequence, not a random collection of pretty sections. Even purely visual references should imply where the user's eye goes and what action they should take.

---

Phase 1: Read the Brief

Before generating anything, extract design signals from the user's request. Do not project your own aesthetic onto the brief. Read what is actually there.

→ Extract these signals

→ Output the Direction Brief

State in 2-3 lines the art direction you are committing to:

"Direction Brief: Dark cinematic SaaS landing page for an AI infrastructure product. 7 sections. Palette: deep charcoal base + warm off-white text + single amber accent. Typography: compressed display grotesk (Monument Extended energy). Giant statement hero with product screenshot as focal. Photography-led backgrounds with tonal color grading. Conversion-driven AIDA flow. Feels like: Linear meets Vercel with a warmer accent."

→ Brief-to-Direction Mapping

Read the brief. Then bias your picks:

→ If the brief is vague

Ask exactly ONE question: "What's the brand name, one-line value prop, and preferred mood — closer to [dark cinematic] or [light editorial]?"

If you can infer from context (e.g., user said "AI startup" or "luxury agency"), skip the question and declare your Direction Brief.

✓ Quality Gate: Brief

Before moving to Phase 2, confirm:

• All 8 signals are extracted (or inferred)
• Direction Brief is written
• You know the mood, palette direction, hero scale, and section count
• You have NOT started generating any images yet

---

Phase 2: Art Direction (The Combinatorial Variation Engine)

This is the engine that prevents repetitive AI output. For each category below, commit to ONE option based on the brief. Do not blend. Do not hedge. Pick and commit.

The picks must be internally consistent — a "Quiet Premium Neutral" theme with "Monument-like compressed statement typography" is a valid pairing. A "Pristine Light Mode" theme with a "Deep Dark Mode" background character is not.

---

→ Theme Paradigm (pick 1)

→ Background Character (pick 1 global default)

→ Typography Character (pick 1)

⚠ Drift Warning: Never drift into default web typography energy. The heading must feel like an architectural element, not "big text." If the generated image shows a heading that could be from any WordPress template, the typography pick was wrong.

→ Hero Architecture (pick 1)

⚠ Drift Warning: The left-text / right-image hero is the most overused AI image generation pattern. It is allowed but should NOT be your first instinct. Before reaching for it, consider: centered over background image, bottom-left over image, top-left lead, stacked center, image-as-canvas, off-grid editorial. Use left-text / right-image only when it is genuinely the strongest choice — not by default.

→ Hero Scale (pick 1)

Mini does not mean weak — it means confident restraint.

→ Section System (pick 1 dominant structure)

→ Composition Anchor (assign 1 per section)

Each section picks 1 anchor. Across the site, at least 3 different anchors must appear. Never use the same anchor twice in a row.

→ Background Mode (assign 1 per section)

Pick 1 per section. Vary across the page — never all the same mode. Backgrounds are a primary design tool, not a risk.

→ CTA Variation (assign 1 per section)

Pick the CTA style that fits each section. Not a default pill every time. Across the site, vary CTA style at least once. The primary action stays unmistakable.

→ Signature Components (pick exactly 4)

→ Motion-Implied Language (pick exactly 2)

These are NOT code instructions. They are visual-direction cues that the generated image should visually imply through composition, blur, positioning, and element arrangement.

→ Narrative / Concept Spine (pick 1)

One conceptual thread that runs through the visual language of the entire page.

→ Second-Read Moment (pick exactly 1)

One unobvious but legible motif, placed deliberately once across the page. It rewards closer inspection without disrupting scan order.

Avoid gimmick-for-gimmick. The moment must aid scan order or brand recall.

✓ Quality Gate: Art Direction

Before moving to Phase 3, confirm:

• ONE option selected from each category (no blending, no hedging)
• Picks are internally consistent (theme + typography + hero make sense together)
• At least 3 different composition anchors assigned across sections
• Background modes vary across sections (not all the same)
• CTA style varies at least once across sections
• Exactly 4 signature components selected
• Exactly 2 motion languages selected
• Exactly 1 narrative spine selected
• Exactly 1 second-read moment selected
• No left-text / right-image used as the default hero composition

---

Phase 3: Prompt Engineering

Each section gets its own structured prompt built from the Phase 2 picks. This is where art direction becomes generation-ready instructions.

→ The Prompt Blueprint

Every section prompt follows this structure. Fill in every field — skipping fields produces generic output.

PROMPT BLUEPRINT — Section [N] of [Total]: [Section Name]
─────────────────────────────────────────────────────────

FRAME:
  Format: horizontal website section, 16:9 aspect ratio
  Viewport: 1440×900 desktop browser frame
  Render style: [photorealistic UI mockup / flat design comp / editorial layout]

COMPOSITION:
  Anchor: [from Phase 2 — e.g., "centered statement" or "bottom-left over background"]
  Visual weight: [where the eye lands first — e.g., "center-left, massive heading"]
  Reading flow: [how the eye moves — e.g., "heading → subtext → CTA → background visual"]

TYPOGRAPHY:
  Heading: [exact description — e.g., "massive compressed sans-serif, all-caps,
            approximately 80pt equivalent, tight letter-spacing, 2 lines max"]
  Subtext: [e.g., "16pt equivalent, regular weight, muted color, max 20 words,
            1.5 line-height"]
  Eyebrow: [e.g., "11pt monospace, uppercase, wide letter-spacing, muted opacity"]
  CTA text: [e.g., "14pt, medium weight, uppercase, inside pill button"]

PALETTE:
  Background: [exact description — e.g., "#0a0a0a deep charcoal with subtle
               radial glow from center"]
  Text primary: [e.g., "#f5f5f5 warm off-white"]
  Text secondary: [e.g., "rgba(255,255,255,0.5) muted"]
  Accent: [e.g., "#E8A04A warm amber — used on CTA only"]

BACKGROUND MODE:
  [from Phase 2 — e.g., "full-bleed cinematic photograph of server rack room,
   cool blue-teal color grade, 40% dark overlay for text readability"]

CTA:
  Style: [from Phase 2 — e.g., "solid pill, amber background, dark text"]
  Placement: [e.g., "centered below subtext, 32px gap"]
  Count: [1 — never more in a hero]

ATMOSPHERE:
  [e.g., "subtle film grain overlay at 3% opacity, soft radial ambient glow
   from top-center, no hard shadows"]

CONTENT (placeholder text):
  Eyebrow: [e.g., "INFRASTRUCTURE"]
  Heading: [e.g., "Build without limits."]
  Subtext: [e.g., "The platform for teams who ship fast."]
  CTA: [e.g., "Get Started →"]

WHAT THIS IS NOT:
  [Explicit anti-patterns — e.g., "NOT a generic dark hero with purple AI glow.
   NOT a dashboard screenshot. NOT centered text over a gradient blob."]

MOTION IMPLIED:
  [from Phase 2 — e.g., "staggered float-up energy: the heading, subtext, and
   CTA appear at slightly different vertical offsets as if mid-cascade"]

→ Prompt Anti-Patterns (The Banned Defaults)

These are the patterns AI image generation collapses into. Every prompt must explicitly state what the image is NOT to counteract model defaults.

⚠ Drift Warning: The single most impactful thing you can add to any prompt is the "WHAT THIS IS NOT" section. AI models are as responsive to negative constraints as positive ones. Telling the model "NOT a purple gradient hero, NOT floating blobs, NOT a generic dashboard" eliminates 80% of default AI output.

→ Section-Specific Prompt Guidance

Different sections have different jobs. Use these section blueprints to ensure each section serves its purpose in the conversion flow.

Section: Hero

PURPOSE: Hook — the first thing the user sees. Must create an instant
         emotional response and communicate the brand's energy in < 3 seconds.

MUST HAVE:
  - ONE dominant focal point (massive heading OR cinematic image, not both competing)
  - Brand name or product name visible
  - Single CTA (never two)
  - Breathing room — the hero must NOT feel packed

MUST NOT HAVE:
  - Trust logos / "used by" badges (save for trust bar)
  - Feature lists or bullet points
  - Multiple competing CTAs
  - Scroll indicators / bouncing chevrons
  - Version labels (v2.0, BETA) unless the brief is literally a product launch

PROMPT ADDITION:
  "This is a website hero section — the first viewport a user sees.
   It must feel premium, confident, and immediately communicate the brand.
   One focal point dominates. Generous whitespace. No clutter."

Section: Trust Bar

PURPOSE: Proof — immediately after the hero, establish credibility.

MUST HAVE:
  - Logo strip OR metric strip OR testimonial quote
  - Muted, understated styling (this section supports, not competes with hero)
  - Visually lighter than surrounding sections

PROMPT ADDITION:
  "This is a trust/social-proof bar. It should be visually quiet and
   supportive — a thin horizontal strip of logos or a single powerful
   metric. Not a full section, more like a divider with authority."

Section: Features / Benefits

PURPOSE: Interest — show what the product does and why it matters.

MUST HAVE:
  - Clear visual hierarchy (section heading → feature items)
  - Distinct feature blocks (cards, columns, or bento cells)
  - Icons or micro-illustrations per feature (not just text)

MUST NOT HAVE:
  - More than 6 feature items visible (3-4 is stronger)
  - Identical card layouts without visual variation
  - "FEATURE 01", "FEATURE 02" meta-labels

PROMPT ADDITION:
  "This is a features/benefits section. Each feature should be
   visually distinct with an icon or illustration. Cards should
   NOT all look identical. Hierarchy: section heading first, then
   feature grid below."

Section: Social Proof / Testimonials

PURPOSE: Desire — make the user want what others already have.

MUST HAVE:
  - Real-looking names and avatar-style photos
  - Quote text that feels authentic (not marketing copy)
  - Company/role attribution

PROMPT ADDITION:
  "This is a testimonial section. Show 1-3 quotes with avatar photos,
   names, and company roles. The quotes should feel human and authentic.
   Layout should feel editorial, not like a review aggregator."

Section: CTA / Conversion

PURPOSE: Action — the final push. High contrast, unmistakable action.

MUST HAVE:
  - High-contrast background (inverted from the page's dominant mode)
  - Single, dominant CTA button
  - Short, punchy heading (3-7 words)
  - Minimal supporting text

PROMPT ADDITION:
  "This is the final conversion section. It should feel like a
   decisive endpoint — high contrast, bold heading, unmistakable
   CTA button. If the page is light, this section goes dark (or
   uses the accent color as background). Maximum confidence."

Section: Footer

PURPOSE: Navigation + trust — the page's foundation.

MUST HAVE:
  - Logo
  - Link columns (Product, Company, Resources, Legal)
  - Muted, structured, visually quiet
  - Copyright line

PROMPT ADDITION:
  "This is a website footer. Clean, organized link columns with
   a logo. Visually understated — it anchors the page without
   competing for attention. Dark or muted background."

✓ Quality Gate: Prompts

Before moving to Phase 4, confirm:

• Every section has a complete prompt following the blueprint structure
• Every prompt includes a WHAT THIS IS NOT section
• Palette is consistent across all section prompts
• Typography direction is consistent across all section prompts
• Composition anchors vary across sections (cross-reference Phase 2 assignments)
• Background modes vary across sections
• CTA styles vary at least once
• No prompt defaults to left-text / right-image without deliberate justification
• Placeholder content uses realistic text (no "Lorem ipsum", no "Company Name")

---

Phase 4: Generate

Execute the prompts sequentially. One image per section.

→ Generation Rules

→ Section Sequencing

For a default landing page (6 sections), generate in this order:

Section 1: Hero          — [Hook]
Section 2: Trust Bar     — [Proof]
Section 3: Features      — [Interest]
Section 4: How It Works  — [Education]
Section 5: Testimonials  — [Desire]
Section 6: CTA + Footer  — [Action]

For a full website template (8 sections):

Section 1: Hero          — [Hook]
Section 2: Trust Bar     — [Proof]
Section 3: Features      — [Interest]
Section 4: How It Works  — [Education]
Section 5: Showcase/Demo — [Demonstration]
Section 6: Testimonials  — [Desire]
Section 7: Pricing       — [Decision]
Section 8: CTA + Footer  — [Action]

Each section maps to a conversion stage. This is not arbitrary — the sequence follows AIDA (Attention → Interest → Desire → Action) with proof and education layers inserted for credibility.

✓ Quality Gate: Generation

After generating all images, confirm:

• Total image count matches section count (no missing sections)
• Each image is a separate horizontal image (no combined frames)
• Palette is visually consistent across all images (same accent, same base tones)
• No two adjacent sections use the same composition anchor
• At least 3 different composition anchors appear across all sections
• The hero is NOT a default left-text / right-image split (unless deliberately chosen)
• No purple/blue AI gradient backgrounds appear (unless the palette specifically calls for it)
• Typography scale is consistent (headings feel the same weight/family across sections)

---

Phase 5: Visual Diff

Compare the generated images against the Direction Brief from Phase 1 and the Art Direction picks from Phase 2. Walk through every check. Any FAIL means re-generating that section with a corrected prompt.

Composition Diff

Palette Diff

Typography Diff

Section Purpose Diff

AI Default Drift Diff

Implementation Readiness Diff

---

Active Baseline Configuration

These are the global default dials. They calibrate the engine's output toward premium, conversion-aware, implementation-friendly design references.

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)
CONVERSION_DISCIPLINE:  8   (1=pure art moodboard, 10=clear funnel + design balance)

These are defaults. Adapt dynamically from the brief:

• "Clean" → reduce density, increase spacing generosity
• "Crazy creative" → increase variance and art direction
• "Premium SaaS" → keep clarity high, art direction controlled
• "Editorial" → allow stronger type and more asymmetry
• The user's brief always overrides defaults

---

The Core Principles

These are the fundamentals that separate premium design references from generic AI images. They apply regardless of which combinatorial picks you make.

One focal point per section. Every section has ONE dominant visual element. Count elements competing for attention at the same scale. If the count exceeds 2, reduce until one clearly dominates.

Viewport-scale typography. Headings are architectural elements, not "big text." They should feel like they command the section. Minimum 60pt equivalent on desktop. For 1-3 word headings, go massive — 100pt+. Tight tracking. Compressed line-height.

Extreme whitespace. The background is not wasted space — it IS the design. Content lives in considered islands surrounded by intentional breathing room. If a section feels cramped, the spacing is wrong.

Tight palette, threaded consistently. Maximum 3 hues across the entire page. Dark pages: off-black + warm white + one accent. Light pages: warm cream + near-black + one accent. The accent appears in CTAs and active states. Everything else is the base palette. More than one saturated accent across a page destroys visual cohesion.

Every section has a job. Hero hooks. Trust bar proves. Features inform. Testimonials persuade. CTA converts. No section exists for decoration. Every section advances the user toward action.

The image is the spec. The generated image must be clear enough that a developer can look at it and code it using the pixel-perfect skill. If the layout, spacing, typography, or component boundaries are ambiguous in the image, it has failed as a reference.