cinematic-hero-landing

name

cinematic-hero-landing

description

Build premium landings with painterly pastoral/storybook hero plates (layered depth, atmospheric perspective, copy-safe zones), then implement a responsive animated page in the detected stack. Forces Asset Inventory + per-asset English imagegen prompts before code. Use for cinematic illustrated heroes, pastoral fantasy environments, storybook landscape art, or image-first animated landings. Not for dashboards, mobile app screens, multi-section UI comps only, or redesigns without hero plate generation.

CINEMATIC HERO LANDING

Two-phase skill. Images are the visual source of truth. Code comes second and must stay faithful to what was generated.

Phase 1 — Asset Inventory → per-asset English prompts → GenerateImage → deep analysis gate → regen if needed → WebP. Phase 2 — Implement a lean, anti-slop landing in the project's stack.

Use when the user asks for:

• a landing with a cinematic / pastoral / storybook hero background
• a beautiful animated landing from a brief
• a painterly or illustrated hero plate + site implementation

Do NOT use for:

• dashboards or data-heavy product UI
• pure mobile app screens (use imagegen-frontend-mobile)
• multi-section UI reference boards only (use imagegen-frontend-web)
• redesigns that skip hero background generation

---

0. BRIEF INFERENCE (Before Anything Else)

Do not jump to pastoral defaults. Read the room, then lock dials and a pastoral mode.

0.A Signals to read

1. Page kind — SaaS / consumer / agency / event / retreat / education / health / security.
2. Vibe words — calm, bold, premium, playful, serious B2B, editorial, atmospheric.
3. References — URLs, screenshots, competitor brands, existing logo/colors.
4. Audience — buyers, consumers, recruiters, travelers, parents, engineers.
5. Quiet constraints — accessibility-first, regulated, trust-first commerce. These override aesthetic preference.

0.B Design Read (mandatory, one line)

Before any image or code, state:

Reading this as: <page kind> for <audience>, with a <vibe> language, pastoral mode <MODE>, dials V/M/D = <n>//.

Example:

Reading this as: B2B fintech landing for risk-averse buyers, with a calm-trust language, pastoral mode pastoral-night, dials V/M/D = 6/4/3.

If the brief is ambiguous on one material fork only, ask one question. Otherwise declare the read and proceed.

0.C The three dials

Dial	Low	High	Default
DESIGN_VARIANCE	Symmetric, safe	Asymmetric, art-directed	7
MOTION_INTENSITY	Hover / static	Cinematic scroll / physics	6
VISUAL_DENSITY	Gallery / airy	Packed marketing	3

Dial inference

Signal	V	M	D
minimalist / clean / calm	5-6	3-4	2-3
premium consumer / luxury / brand	7-8	5-7	3-4
playful / Awwwards / agency	8-9	7-9	3-4
trust-first / regulated	4-5	2-3	3-4
landing default	7	6	3

Do not ask the user to edit this file. Override dials conversationally from the brief.

0.D Pastoral modes (pick exactly one)

Same painting technique. Different worlds. Never default every brief to sunny valley.

Mode	When	World
pastoral-day	Default calm / health / education / retreat / hospitality / restaurant / regional culture / countryside brand	Soft daylight, wide sky, warm greens
pastoral-night	Security / trust / fintech evening / premium dark	Blue-hour or night-blue sky, soft cyan/gold accents, still layered depth
pastoral-urban	SaaS / AI / cities / infrastructure	Serene city-in-hills, translucent structures, no cyberpunk neon
pastoral-interior	Product intimacy / hospitality / learning spaces	Library, atrium, greenhouse, warm interior volumes with deep windows
pastoral-abstract-geometry	Fintech / growth / systems	Terraces, canals, geometric landforms as metaphor — still painterly, not hard-edge UI

Lock the mode in the Design Read. Every asset prompt must name that mode.

0.E Anti-default discipline

Do not default to: AI-purple gradients, Inter + slate, three equal feature cards, trust-logo ticker, KPI triple columns, left-text/right-image every section, or the same sunny valley for every industry.

---

1. AESTHETIC SYSTEM (The Visual Grammar)

The aesthetic is: painterly digital illustration + cinematic animation environment art + optimistic pastoral fantasy.

Also described as anime background art, painterly environment concept art, storybook landscape. Not photoreal. Not fully cartoon. Carefully stylized middle ground.

1.1 What makes it beautiful

1. Layered composition — Foreground (high contrast detail) → midground → distant (bluer, softer) → sky.
2. Breathing room — Often >50% calm sky/atmosphere. Detail concentrated; copy zones quieter.
3. Edge framing — Large edge elements guide the eye inward.
4. Atmospheric perspective — Distance = less contrast, more blue, less detail.
5. Soft optimistic light — Diffuse daylight or mode-appropriate soft light; no harsh noir unless pastoral-night.
6. Reduced palette — Few color families + one accent.
7. Uneven detail — Rich edges/foreground; soft copy-safe regions.

1.2 Reusable formula

Thematic scene for the chosen pastoral MODE
+ panoramic (or intimate) composition
+ 3–4 depth planes
+ edge framing elements
+ large calm area for copy
+ soft volumetric light
+ reduced palette
+ painterly finish, no hard black outlines
+ lower detail in the text-safe region

Useful starting ratio (not literal): 55% calm / 30% mid forms / 15% strong detail + framing.

1.3 Visual bible (multi-image continuity)

Never change across assets

• painterly semi-realistic finish
• soft cinematic light (tuned to mode)
• three+ depth planes
• edge framing language
• large atmospheric calm areas
• no hard black outlines
• stronger detail in foreground
• reserved copy-safe region
• locked pastoral MODE + atmospheric base color

May change per asset

• scene / objects / metaphor
• time of day within the mode
• accent color intensity
• focal side
• intimacy (panoramic hero vs intimate section)

Palette strategy

Keep one atmospheric base; vary only the accent:

Product vibe	Atmosphere	Accent
Default / main	sky blue	green
Finance	deep blue	gold
Security	navy	cyan
Creativity	blue	violet
Health	light blue	coral
Retreat / connection	deep green	solar yellow

Rule: keep the visual grammar; swap the narrative.

1.4 Mode-specific prompt locks (English fragments)

Include the matching lock line in every positive prompt:

• pastoral-day: soft warm daylight, wide luminous sky, yellow-green fields, optimistic summer atmosphere
• pastoral-night: tranquil blue-hour night valley, soft volumetric moonlight, navy and cyan accents, calm secure mood, no neon cyberpunk
• pastoral-urban: serene futuristic town nested in hills, translucent white structures, gentle light paths, optimistic intelligent mood, no dark cyberpunk
• pastoral-interior: painterly interior with deep window light, warm volumes, storybook architecture, intimate depth planes
• pastoral-abstract-geometry: luminous geometric terraces and canals as landscape metaphor, painterly soft edges, growth and stability symbolism, no coins no charts no UI

1.5 Place-authentic vs metaphor-first (binary)

Before writing any hero prompt, pick exactly one strategy:

Brief type	Strategy	What to invent
Restaurant, hotel, lodge, regional culture, local event, countryside brand, hospitality	Place-authentic	Real-feeling place + region + building type + subtle cultural props (see §2.3 anatomy). Do not replace with abstract SaaS metaphor.
SaaS, AI, fintech, security, infra, abstract product	Metaphor-first	Pastoral-mode metaphor world (urban / night / geometry). Do not fake a literal office photo.

Place-authentic is how the gaucho restaurant prompt succeeds: specific geography and culture, still painterly. Metaphor-first is for products without a physical place.

1.6 Industry examples (distinct worlds, same grammar)

Use as inspiration. Adapt to the brief. Do not clone the same valley.

Restaurant / regional culture → pastoral-day, place-authentic Specific region and building (e.g. pampas galpão, coastal tavern, mountain lodge) integrated into landscape; subtle cultural props; warm hospitality mood. See §2.3.B canonical example.

SaaS / AI → pastoral-urban, metaphor-first Serene hill-town with translucent white structures, soft light paths between buildings, wide calm sky, clean left or center sky for copy.

Fintech → pastoral-abstract-geometry, metaphor-first Ascending geometric terraces, quiet golden canals, elegant distant tower as stability metaphor. No coins, dollar signs, or charts.

Education → pastoral-day + interior hint, metaphor-first or place-authentic Fantastic campus garden with a glowing library in the mid-distance, flowered paths, edge trees, discovery mood.

Cybersecurity → pastoral-night, metaphor-first Quiet night valley sheltered by translucent light arches, distant citadel, layered dark mountains, navy/cyan - secure, not aggressive.

Sustainability → pastoral-day, metaphor-first Green future hills with discreet solar forms and distant turbines integrated into landforms, clear rivers, hopeful morning light.

Retreats → pastoral-day or pastoral-interior, place-authentic Framed valley lake at golden hour, or warm lodge atrium with deep windows - human connection without stock handshake clichés.

---

2. PHASE 1 — IMAGE PIPELINE

Images first. Never start freeform coding when image generation is available.

2.1 Tool binding

Use the environment's image generator:

Environment	Tool	Notes
Cursor	GenerateImage	Pass description (full EN prompt), filename, aspect_ratio when supported (16:9, 9:16, 1:1, 4:3, 3:4)
ChatGPT Images / Codex image mode	native image gen	Same prompts; generate sequentially until inventory is complete
Claude / other	available image tool	Same contract

Announce each asset: Generating 2/5: hero-mobile (9:16).

Do not invent a fake image path. Do not skip generation when the tool exists.

2.2 Asset Inventory (mandatory before any GenerateImage call)

Print an inventory table, then generate. Do not improvise mid-flight.

Minimum set

ID	Role	Aspect	Required?
hero-desktop	Full-bleed hero plate	16:9	Always
hero-mobile	Vertical hero plate	9:16	Always (unless user forbids mobile)
section-*	Image-led section plates	16:9 / 4:3 / 1:1	Only for sections you mark image-led
og-share	Social share	16:9 (~1.91:1)	Always
detail-*	Extraction re-gen	match parent	Only if analysis gate fails

How to choose section images

1. From the section palette (Phase 2), mark each section image-led or type-led.
2. Generate plates only for image-led sections (typically 2–4, not every section).
3. Type-led sections use color, type, and spacing — no decorative filler image.
4. Never generate one collage of the whole page.
5. Never crop a section out of the hero; generate a fresh plate with the same bible.

Inventory row format (print all fields)

- id: hero-desktop
  filename: hero-desktop.png
  aspect_ratio: 16:9
  pastoral_mode: pastoral-day
  safe_zone: upper-left
  focal_third: right
  role: full-bleed hero background plate (no UI)
  bible_lock: <one-line continuity phrase>

2.3 Per-asset English prompts

Skill docs may be bilingual. Prompts sent to the image model must be English.

Do not paste a short one-paragraph stub for hero-desktop. Fill the 10-beat anatomy (§2.3.A), then assemble the expanded template. Section / mobile / OG plates may be shorter but must keep bible lock + mode lock + negatives.

Shared negative constraints (append to every call)

no text, no letters, no logos, no watermark, no UI, no buttons, no browser chrome,
no dashboard, no purple neon glow, no cyberpunk haze, no photoreal stock people,
no hard black outlines, no clutter in the copy-safe region,
no harsh realism, no crowded composition

Bible lock line (every positive prompt)

same painterly storybook world: soft volumetric light, atmospheric perspective,
layered depth, organic soft edges, no hard outlines, [PASTORAL_MODE_LOCK]

2.3.A Proven prompt anatomy (mandatory for hero-desktop)

Fill each beat with 1–3 sentences before calling GenerateImage. Skip none for hero-desktop.

#	Beat	What to write
1	Job + format	Panoramic hero background plate for a landing page of [SPECIFIC BRAND OR PLACE TYPE].
2	Place identity	Where and what: region, landscape type, building/place type (place-authentic) OR locked metaphor world (metaphor-first).
3	Environment inventory	4–7 landscape elements (fields, sky, trees, hills, water, clouds, etc.).
4	Feeling stack	3–5 mood adjectives (e.g. warm, inviting, elegant, authentic).
5	Subtle props	Cultural/product hints only - integrated into landscape, not prop spam, not a city building dropped on a field.
6	Style + light	Cinematic painted environment, refined digital illustration, semi-realistic, soft brushwork, vibrant but natural color, glowing soft sunlight (or mode light).
7	Layered depth	Explicit foreground, middle ground, distant planes.
8	Safe-zone block	Multi-sentence: large clean negative space on [side]; visually calm; fewer details; softer contrast; main focal point on the opposite third.
9	Mood closer	The overall feeling should be … a visual mix of [A], [B], and [C].
10	Negatives + format	Shared negatives + Hero background, panoramic composition, 16:9.

Anti-slop: do not ship only beats 6+10. Place identity, environment inventory, safe-zone block, and mood closer are what separate a premium plate from a generic valley.

Template — hero-desktop (16:9, expanded)

Assemble from the filled beats:

Create a beautiful panoramic hero background for a landing page of [PLACE_OR_PRODUCT].

Show [PLACE_IDENTITY: region, landscape, building/place type].
Surrounded by [ENV_1], [ENV_2], [ENV_3], [ENV_4], and [ENV_5+].
The scene should feel [FEEL_1], [FEEL_2], [FEEL_3], and [FEEL_4],
evoking [CULTURE_OR_BRAND_PROMISE].

Include subtle regional or brand elements such as [PROP_1], [PROP_2], and [PROP_3].
[INTEGRATION_RULE: e.g. The building should feel integrated into the landscape, not like a city building.]
Keep props as hints - no clutter, no prop spam.

[PASTORAL_MODE_LOCK]
[BIBLE_LOCK]

Use a cinematic painted environment style, refined digital illustration look, semi-realistic,
soft brushwork, atmospheric perspective, vibrant but natural colors, glowing soft sunlight,
and a peaceful high-end mood. Keep the composition layered with foreground, middle ground,
and distant [hills/mountains/horizon] for strong depth.

Important: leave a large clean negative-space area on the [LEFT/RIGHT/UPPER-CENTER] side
of the image for landing page text and CTA buttons. Keep this text area visually calm,
with fewer details and softer contrast. Place the main focal point on the [OPPOSITE] third
of the composition.

The overall feeling should be premium, welcoming, and beautiful -
a visual mix of [IDENTITY_A], [IDENTITY_B], and [IDENTITY_C].

No text, no logos, no interface elements, no watermark, no clutter,
no harsh realism, no crowded composition.

Hero background, panoramic composition, 16:9.

2.3.B Canonical worked example (adapt anatomy - do not clone the theme)

Use case: pastoral-day + place-authentic + hospitality / regional culture.
Role: gold-standard hero-desktop density and beat order. For other briefs, keep this structure; swap place, props, and identity mix.

Create a beautiful panoramic hero background for a landing page of a traditional Brazilian gaucho restaurant.

Show a charming rustic gaucho restaurant set in the pampas of southern Brazil, surrounded by rolling green fields, wildflowers, soft hills, scattered trees, and a vast luminous sky with large soft clouds. The scene should feel warm, inviting, elegant, and authentic, evoking traditional gaucho culture and countryside hospitality.

Include subtle regional elements such as a rustic wooden building or galpão-style restaurant, a traditional open-fire barbecue area, light smoke rising gently, wooden fences, and small visual hints of chimarrão culture and countryside life. The restaurant should feel integrated into the landscape, not like a city building.

Use a cinematic painted environment style, with a refined digital illustration look, semi-realistic, soft brushwork, atmospheric perspective, vibrant but natural colors, glowing sunlight, and a peaceful high-end mood. Keep the composition layered with foreground, middle ground, and distant hills or mountains for strong depth.

Important: leave a large clean negative-space area on the left side of the image for landing page text and CTA buttons. Keep this text area visually calm, with fewer details and softer contrast. Place the main focal point of the restaurant on the right third of the composition.

The overall feeling should be premium, welcoming, rustic, traditional, and beautiful - a visual mix of countryside elegance, Brazilian southern identity, and appetizing warmth.

No text, no logos, no interface elements, no watermark, no clutter, no harsh realism, no crowded composition.

Hero background, panoramic composition, 16:9.

When continuing the same site, append the bible lock + pastoral-day mode lock to section/mobile/OG prompts so the world stays consistent.

Template — hero-mobile (9:16)

Same world and palette. Change framing; still name place identity in one sentence:

Vertical digital illustration for a mobile website hero background plate, same world as the desktop hero.
[PASTORAL_MODE_LOCK] + bible lock.
[One-sentence place identity reminder.]
Landscape massed in the lower third; large clean low-detail sky in the upper half for title and CTA.
Edge framing still present but scaled for portrait.
Painterly cinematic animation background art, semi-realistic, atmospheric perspective,
vibrant but natural colors, no harsh realism, no crowded composition.
Background plate only. Vertical hero website background, 9:16.

Template — section plate

Intimate painterly digital illustration for a landing-page section background,
same storybook world as the hero ([bible lock] + [PASTORAL_MODE_LOCK]).
Subject: [SECTION_METAPHOR_OR_PLACE_DETAIL]. Composition more focused and closer than the hero.
[SAFE_ZONE multi-sentence: calm, fewer details, softer contrast.]
Palette locked to [BASE] + accent [ACCENT]. Soft volumetric light. No UI, no text.
Format [16:9 | 4:3 | 1:1].

Guidance by section job:

• Quote / testimonial mood: calmer, closer, natural foreground, soft overlay-friendly sky.
• Experience / product metaphor: clear focal metaphor, mid intimacy.
• Final CTA mood: minimal, dominant calm sky/atmosphere, few elements.

Template — og-share (16:9)

Painterly storybook landscape key art for social sharing, same world as the site hero.
[PASTORAL_MODE_LOCK]. Balanced composition, recognizable focal element, no text, no logo, no UI.
Luminous reduced palette. Vibrant but natural. 16:9.

Variable fill order

1. Place-authentic vs metaphor-first (§1.5)
2. Place identity / theme from brief
3. Feeling stack (3–5 adjectives)
4. Environment inventory (4–7 elements)
5. Subtle props + integration rule
6. Time of day matching emotion + mode
7. Base palette + accent
8. Safe-zone side + focal third (vary across assets - do not put every safe zone on the left)
9. Mood closer identity mix (A, B, C)

2.4 Safe zones (decide before generating)

Think in two layers: functional (type, CTA) and emotional (scene). The emotional layer must not fight the functional layer.

Copy placement	Prompt fragments
Left	Multi-sentence: large clean negative-space area on the left; text area visually calm, fewer details, softer contrast; main focal point on the right third
Center	Multi-sentence: large clean negative space in the upper center / sky; detail on edges and lower third; softer contrast in the copy sky
Right	Multi-sentence: large clean negative-space area on the right; main focal point on the left third; calm low-detail copy side
Mobile top	Multi-sentence: large clean sky in the upper half; landscape concentrated in the lower third

Bad copy region: busy flower-filled foreground. Good: soft sky / upper calm atmosphere.

Variation rule: across the inventory, use at least two different safe-zone sides. Do not clone left-safe on every plate.

2.5 Generation order

1. Print Asset Inventory
2. Generate hero-desktop
3. Generate hero-mobile (same bible)
4. Generate each section-* sequentially
5. Generate og-share
6. Run analysis gate (2.6)
7. Regen any failing asset as a fresh image (never crop)
8. Optimize to WebP (2.7)

2.6 Deep analysis gate (block implementation until pass)

For each generated image, inspect (use the Read tool on image files when available):

Check	Pass criteria
Safe zone	Clear low-detail region where copy will sit
Focal opposition	Focal interest opposite or away from copy zone
Depth	Visible atmospheric perspective / planes
Bible match	Same mode, light family, palette family as hero
Clutter	No text/UI/watermark; copy zone not busy
Overlay need	Note whether dark or light atmospheric overlay will be required in CSS

Extract and write down:

• approximate dominant colors (for CSS variables)
• safe-zone side
• suggested overlay direction (see 2.8)
• anything still ambiguous → schedule detail-* or full regen

If safe zone or bible match fails → regenerate that asset. Do not implement on top of a failed plate.

2.7 WebP optimization

cwebp -q 80 input.png -o output.webp

Use q=80 for complex illustrations; q=90 for simple/flat graphics.

2.8 Overlay in implementation (atmosphere, not a box)

Even with a clean safe zone, apply a gradient overlay between type and image. It must feel like atmosphere.

• Light text on darker plate → darken the copy side; fade to transparent (max opacity ~0.75)
• Dark text on lighter plate → lighten the copy side (max opacity ~0.94)
• Direction follows safe zone (90deg / 270deg / radial / vertical)
• ≥3 color stops; final stop fully transparent
• Overlay covers at most ~60–70% of the image
• Never a solid opaque slab hiding the plate

---

3. PHASE 2 — LANDING IMPLEMENTATION

Only after Phase 1 passes the analysis gate.

3.1 Stack detection

Before writing code:

1. Check package.json for next, react, vue, svelte, astro, nuxt
2. Check for next.config.*, astro.config.*, etc.
3. Check file extensions (.tsx, .vue, .svelte, .astro)
4. If none → vanilla HTML/CSS/JS

Stack	Markup	Styles	Images
Vanilla	index.html	styles.css	<picture> WebP + PNG
Next.js	.tsx	CSS modules or Tailwind	next/image or <picture>
Vue	.vue	scoped or Tailwind	<picture>
Svelte	.svelte	SFC styles	<picture>
Astro	.astro	scoped	astro:assets / <picture>

3.2 Section palette (no fixed 12-section template)

Pick 5–7 sections from the brief. Do not ship a SaaS kitchen-sink page by default.

Available section jobs (choose what the brief needs)

Job	Purpose	Usually image-led?
Hero	Brand + one promise + CTA	Yes (plate)
Proof	One credible proof moment	Optional
Story	Problem → shift / what you do	Optional
Craft	Benefits / how it works	Rarely (prefer type + one visual)
Showcase	Experiences / products / places	Yes
Voice	Quote / customer voice	Optional mood plate
Clarify	FAQ	No
Convert	Form or final CTA	Optional mood plate
Footer	Nav / legal	No

Default lean set when brief is vague: Hero → Story → Craft → Showcase → Voice → Convert → Footer (adjust names to the brand).

Explicitly NOT default (only if user asks)

• Trust-logo ticker / marquee
• Triple KPI stat columns
• Three identical feature cards in a row
• Fake dashboard mockups
• Autoplay hero dots

3.3 Hero budget (hard)

First viewport contains only:

1. Brand (hero-level signal, not nav-only)
2. One headline
3. One short supporting sentence
4. One CTA group (primary + optional secondary)
5. One dominant full-bleed plate

Forbidden in the first viewport: stats, schedules, address blocks, promo chips, floating badges, eyebrow piles, microcopy walls, secondary marketing modules.

Brand test: if you remove the nav and the first viewport could belong to another brand, branding is too weak.

Composition bias: do not default to left-text / right-empty every time. Prefer bottom-left over plate, centered-low, or stacked-center when it fits the plate's safe zone.

3.4 Layout family ban

Each layout family may appear at most once on the page:

• full-bleed type-over-image
• split editorial (text | visual)
• single-column story
• asymmetric showcase
• quote wall
• form / convert band
• FAQ accordion

A page with 6 sections should use at least 4 different families. Never clone left-text/right-image twice in a row.

3.5 Cards policy

Default: no cards.
Cards only when they wrap a real interaction (form controls, accordion headers, selectable plans the user asked for).
If removing border/shadow/radius does not hurt understanding, do not use a card.
Never card-in-card-in-card. Never three equal feature cards as the craft section.

3.6 One job per section

One purpose, one headline, usually one short supporting sentence. No multi-promo stacks inside a single section.

3.7 Image HTML

<picture>
  <source srcset="hero-desktop.webp" type="image/webp" media="(min-width: 768px)">
  <source srcset="hero-mobile.webp" type="image/webp">
  <img src="hero-desktop.png" alt="" width="1920" height="1080" fetchpriority="high">
</picture>

• Hero: fetchpriority="high"; no lazy
• Below-fold: loading="lazy"
• Always width / height to prevent CLS
• Decorative plates: alt=""; meaningful images: descriptive alt
• Prefer <picture> art-direction for desktop vs mobile hero plates

3.8 CSS system

Define tokens in :root: colors (from extracted plate palette), radii (one scale), shadows (subtle, brand-tinted), fonts, easings, container width, header heights.

Typography

• Expressive heading font (e.g. Manrope, Satoshi, Cabinet, Fraunces, Newsreader) — pick to match the Design Read
• Readable body font that is not Inter, Roboto, Arial, or system-ui-as-the-only-voice
• Strong scale contrast; heading tracking slightly tight (-0.02em to -0.04em)
• Body line-height ~1.6–1.7
• Headlines: short; avoid 6-line wraps

Spacing

• Section padding ~80–120px desktop, ~48–64px mobile
• Container ~1200px max, ~24px gutters
• Generous section gaps — the page must breathe (VISUAL_DENSITY low by default)

Breakpoints

• Desktop >1024 · Tablet 768–1024 · Mobile <768
• Always honor prefers-reduced-motion: reduce

Easing

Default premium ease-out: cubic-bezier(0.16, 1, 0.3, 1).

3.9 Motion (dial-gated — pick 2–3, not the whole menu)

Choose intentional motions from the dial; do not enable every effect.

Motion	When	Notes
Atmospheric Ken Burns on hero plate	M ≥ 5	scale(1→1.08..1.12), slow, alternate; animate the img, not the parallax parent
Parallax plate container	M ≥ 6, desktop only	translateY(scroll * ~0.2–0.25); disable on mobile
Staggered fade-up on enter	M ≥ 4	IntersectionObserver; opacity + translateY only
Smooth accordion	If FAQ exists	JS max-height + easing; not abrupt native <details> alone
Scroll progress	M ≥ 5, optional	scaleX from left
Nav underline	M ≥ 3	::after scaleX
Counters	Only if user asked for KPIs	rAF; never invent vanity metrics

Rules:

• Animate transform / opacity only
• Durations: ~0.3s micro, ~0.6s entrance, long loops for atmosphere
• Always provide reduced-motion fallbacks (static plate, no parallax)

3.10 Interactions

• Header gains solid state after small scroll
• Mobile menu with scroll lock
• Smooth in-page nav with header offset
• Forms (if present): real validation, loading, success — no fake “Acme” demos
• Passive scroll listeners; rAF for scroll-driven motion

3.11 SEO & a11y baseline

• meta description ~150–160 chars
• Open Graph + Twitter card using og-share
• JSON-LD Organization or Service when appropriate
• lang on <html>
• One h1; logical heading order
• Buttons for actions, links for navigation
• aria-expanded on accordions
• WCAG AA contrast for text over overlays

3.12 Anti-slop rules (binary)

Unless the user explicitly requests the pattern, these are banned:

Layout

• Endless centered slabs
• Identical card rows section after section
• Cloned left-text/right-image blocks
• Lifeless perfect symmetry everywhere
• Card-in-card-in-card

Visual

• Purple/blue AI gradient defaults
• Glow stacks, floating blobs, purposeless glassmorphism
• Noise that hides hierarchy

Typography

• Inter / Roboto / Arial as the design voice
• Giant H1 + anemic subcopy
• Gradient text as “premium”
• Em-dash (—) anywhere in UI copy (use hyphen -)

Content

Banned vibes: unleash, elevate, revolutionize, next-gen, seamless, powerful solution, transformative platform.
Banned fake brands: Acme, Nexus, Flowbit, Quantumly, NovaCore, Jane Doe testimonials.

Density / chrome

• Trust-logo marquees
• Triple vanity KPI columns
• Autoplay hero dots
• Filling every empty region

---

4. WORKFLOW

Step 1 — Brief inference

Design Read + dials + pastoral mode + stack detection.

Step 2 — Announce

One line: “Generating N assets (inventory: …) then implementing in [stack] with dials V/M/D = …”

Step 3 — Asset Inventory

Print the full inventory (ids, filenames, aspects, safe zones, mode).

Step 4 — Generate

Per-asset English prompts via GenerateImage / imagegen, sequential, labeled.

Step 5 — Analysis gate

Inspect each plate. Regen failures. Optional detail plates.

Step 6 — Optimize

WebP for all raster assets.

Step 7 — Implement

Section palette (5–7), hero budget, layout family ban, tokens from extracted palette, 2–3 dial-gated motions, anti-slop.

Step 8 — Pre-flight

Section 5 checklist. Any fail blocks delivery.

Step 9 — Deliver

Short summary + how to preview.

---

5. PRE-FLIGHT CHECK (binary — fix before delivery)

Images

• Inventory was printed before generation
• hero-desktop used the 10-beat anatomy (not a short stub); place-authentic vs metaphor-first chosen
• Each asset used a distinct EN prompt (not one paragraph pasted N times)
• hero-desktop + hero-mobile + og-share exist (unless user waived mobile)
• Section plates only for image-led sections; no full-page collage
• Safe-zone sides vary across at least two assets
• Analysis gate passed (or failed assets regenerated)
• WebP + <picture> (or framework equivalent) in place
• Hero fetchpriority="high"; below-fold lazy; width/height set

Structure & hero

• Design Read stated
• Pastoral mode locked and visible in prompts
• 5–7 sections from palette — not a default 12-block SaaS template
• Hero budget respected (brand, 1 headline, 1 sentence, CTA group, one plate)
• No stats/chips/badges in first viewport
• Layout family ban respected
• No three equal feature cards; no default trust ticker; no vanity KPIs unless asked

Craft

• CSS variables from plate palette
• No Inter/Roboto/Arial as primary voice
• No em-dashes in UI copy
• Overlay is atmospheric, not an opaque box
• 2–3 intentional motions only; reduced-motion honored
• Cards only for real interaction
• Banned content/brand slop absent
• Mobile: single column, working menu, hero plate art-directed
• Contrast AA for text on hero

If any item fails, fix it before delivering.

---

6. AESTHETIC ONE-LINER

Painterly panoramic (or intimate) storybook environment plates — layered depth, soft volumetric light, reduced luminous palette, edge framing, copy-safe calm regions — paired with a lean landing that treats those plates as source of truth, not decoration.

Keep the visual grammar. Swap the narrative. Identify every needed asset, prompt each one specifically in English, gate on quality, then code.