Hero Generator
Design or audit above-the-fold hero sections so landing and product pages communicate value and drive signup or trial in seconds.
Overview
hero-generator is an agent skill most often used in Validate (also Launch distribution and Build frontend) that structures hero-section copy, layout, and CTA choices for conversion-focused above-the-fold areas.
Install
npx skills add https://github.com/kostja94/marketing-skills --skill hero-generatorWhat is this skill?
- Four essentials framework: headline (H1), subheading, primary CTA, and supporting visual or social proof
- Headline guidance: 6–10 words max answering “What’s in it for me?” within seconds
- Initial assessment flow: page type, primary goal, and web vs mobile platform
- Reads project context from `.claude/project-context.md` or `.cursor/project-context.md` when present
- Pairs with homepage-generator for homepage-specific work while this skill covers generic hero sections
- Headline (H1) guidance: 6–10 words max
- Hero area cited as ~80% of initial viewing time in skill framing
- Four core hero components checklist
Adoption & trust: 874 installs on skills.sh; 586 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Visitors bounce because your above-the-fold hero does not state a clear benefit, CTA, or layout matched to the page goal.
Who is it for?
Indie SaaS or product founders polishing a landing, product, or pricing hero before paid traffic or launch week.
Skip if: Full homepage information architecture or nav/footer systems—use homepage-generator for homepage-specific structure instead.
When should I use this skill?
User wants to design, optimize, or audit hero sections or mentions hero, above the fold, landing hero, main banner, or hero conversion (not full homepage—use homepage-generator).
What do I get? / Deliverables
You leave with a hero blueprint—headline, subhead, CTA, and layout guidance aligned to page type and primary conversion goal.
- Hero section structure with headline, subheading, and CTA recommendations
- Layout and alignment notes for web and mobile
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Validate → landing is the canonical shelf because heroes are foremost conversion assets for scoped landing and pricing pages before full product build. Skill targets first-fold messaging, H1/subhead, and CTA alignment—the core jobs when proving an offer on a dedicated landing surface.
Where it fits
Shape a 6–10 word H1 and trial CTA for a waitlist landing before you commit engineering time.
Align hero messaging with the channel promise before sending Product Hunt or newsletter traffic.
Choose split vs centered hero layout specs for responsive web and mobile.
Refresh subhead and proof elements when positioning shifts after early user interviews.
How it compares
Focused hero-section copy and layout checklist—not a full landing-page builder or generic SEO audit skill.
Common Questions / FAQ
Who is hero-generator for?
Solo builders and small teams optimizing conversion-focused hero sections on landing, product, pricing, or campaign pages.
When should I use hero-generator?
In Validate when drafting a landing hero; in Launch when tightening distribution pages; and in Build frontend when aligning split or centered hero layouts with your value prop.
Is hero-generator safe to install?
It is editorial and design guidance without mandatory shell access; review the Security Audits panel on this Prism page before installing any related marketing skill pack.
SKILL.md
READMESKILL.md - Hero Generator
# Components: Hero Section Guides hero section design for conversion and first impressions. The hero is where users spend ~80% of initial viewing time; first impressions form in milliseconds. **When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output. ## Initial Assessment **Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for value proposition, audience, and Section 12 (Visual Identity). Identify: 1. **Page type**: Homepage, landing, product, pricing 2. **Primary goal**: Signup, trial, purchase, learn more 3. **Platform**: Web, mobile, both ## Core Components (Four Essentials) - **Headline (H1)**: 6–10 words max; instantly communicate core value and benefit. Answer "What's in it for me?" within seconds. - **Subheading**: Clear, concise explanation reinforcing why the product/service is valuable. - **Primary CTA**: Single, prominent action button visible without scrolling. One per hero to avoid choice overload. - **Visual**: High-quality image, video, or animation that amplifies the message. ### Optional but Effective - **Trust cues**: 1–3 elements (reviews, logos, statistics) - **Secondary CTA**: For users not ready for primary action ## Layout Types Hero is a **Spotlight layout**—single focus, primary element with secondary around it. Choose layout by content balance and conversion goal. | Layout | Structure | Best for | |--------|-----------|----------| | **Split (50/50)** | Text left, visual right (or vice versa); equal weight | Product, SaaS; clear value + demo | | **Split (75/25)** | Text dominant; smaller image column | Copy-heavy; trust-first | | **Split (25/75 "Signpost")** | Small image beside primary content | Minimal visual; emphasis on headline | | **Centered** | Text + CTA centered; visual full-width or stacked | Brand, landing; single CTA | | **Full-width image** | Image background; overlay text | Emotional; lifestyle, brand | **Responsive**: Split layouts stack vertically on mobile (text above image); centered maintains center. Mobile-first; ensure CTA above fold on small screens. ## Alignment | Axis | Options | Use | |------|---------|-----| | **Horizontal** | Left, center, right | Left align for text-heavy; center for minimal | | **Vertical** | Top, center, bottom | Center for full-viewport hero; top for short hero | ## Best Practices ### 3-Second Rule The hero must answer three questions within 3 seconds: **What is this?** **Why should I care?** **What should I do next?** ~80% of users never scroll beyond the hero; make an immediate impact. ### Messaging - No guessing required; message must be instantly clear. - Single primary CTA to avoid choice overload. - Action-oriented, benefit-focused copy. - **Emotional intent first**: Evoke emotion (trust, excitement, confidence) before users read the headline. Avoid generic phrases ("Welcome to Our Website") or overly clever wordplay. ### Visuals - Fast-loading; avoid heavy assets that delay LCP - Brand-aligned; use typography and colors from brand-visual-generator - Support the message; don't distract - **Frontend aesthetics**: For motion (staggered reveals, hover), spatial composition, and backgrounds—see **brand-visual-generator** Frontend Aesthetics ### Technical - Mobile-first design - Lightweight for quick loading - Ensure LCP