Art-directs the website hero as a still - a headline pyramid with at most 2 CTAs, the product screenshot as the hero art at 16px radius cropped off the fold, exactly one atmosphere zone per page, and the asset budget that keeps the fold fast - emitting an implementable hero spec. Use when someone asks "design our landing page hero", "what visual should go above the fold", "our hero section looks like an AI template - rework it", or "how big should the product screenshot be in the hero". Do NOT use to write the hero copy - use landing-page-copy instead; for scroll or entrance motion in the hero, use website-hero-motion; the framed screenshot inside the hero comes from marketing-screenshot-craft; for full-page section rhythm beyond the fold, use spatial-composition-discipline.
---
name: website-hero-artwork
description: Art-directs the website hero as a still - a headline pyramid with at most 2 CTAs, the product screenshot as the hero art at 16px radius cropped off the fold, exactly one atmosphere zone per page, and the asset budget that keeps the fold fast - emitting an implementable hero spec. Use when someone asks "design our landing page hero", "what visual should go above the fold", "our hero section looks like an AI template - rework it", or "how big should the product screenshot be in the hero". Do NOT use to write the hero copy - use landing-page-copy instead; for scroll or entrance motion in the hero, use website-hero-motion; the framed screenshot inside the hero comes from marketing-screenshot-craft; for full-page section rhythm beyond the fold, use spatial-composition-discipline.
---
# website-hero-artwork
The AI-default hero is a co-occurring cluster - dark canvas plus purple mesh plus glowing orbs plus centered everything - and it codes as generated on sight in every territory; the tell is the cluster, not any single hue. The fold is the one viewport most visitors judge within seconds, so the costly mistake is a fold that makes a real product look like a template kit. This skill art-directs the hero as a still: one claim, one dominant screenshot, one atmosphere zone, a fold that loads fast, all compressed into a spec someone can implement without further design input.
## Operating procedure
Work the steps in order: message before layout, layout before atmosphere. Decoration allocated first always crowds out the claim - the atmosphere budget is spent last precisely because it is the easiest budget to overspend first.
### Step 1: Gather the charter and the fold inputs
Ask for these inputs before laying anything out. If any input is a guess, label it a guess and move on.
1. **Charter**: the client's charter block - the fork answers and fixed core, in the format defined in premium-design-foundations. Paste the charter block if one exists. If the client has a charter but the foundations pack is not installed, elicit the needed values directly and label them provisional. If no charter exists at all, halt and route to premium-design-foundations - never substitute worked-example values. (Worked example: Meridian's charter answered rectangle 8px, warm editorial, precise.)
2. **Claim**: the one-sentence claim the fold must state.
3. **Hero screenshot**: the framed still from marketing-screenshot-craft, with its frame spec. If it does not exist yet, route there first - the hero is built around it, not the other way around.
4. **CTAs**: intended count and labels. Push back past 2 before designing anything.
5. **Budget owner**: who owns the page performance budget and where the measured numbers will come from.
### Step 2: Build the headline pyramid