hero-generator
npx machina-cli add skill kostja94/marketing-skills/hero --openclawComponents: 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 product marketing context first: If .claude/product-marketing-context.md or .cursor/product-marketing-context.md exists, read it for value proposition, audience, and Section 12 (Visual Identity).
Identify:
- Page type: Homepage, landing, product, pricing
- Primary goal: Signup, trial, purchase, learn more
- 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
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
Technical
- Mobile-first design
- Lightweight for quick loading
- Ensure LCP (Largest Contentful Paint) optimization
SEO Considerations
- Headline often contains
<h1>; include primary keyword - Hero content in initial HTML; avoid JS-only rendering
- Alt text for hero images
UX Guidelines
Hierarchy
- Headline > Subheading > CTA
- Visual should complement, not compete with, text
Accessibility
| Requirement | Practice |
|---|---|
| Contrast | Text over images: >=4.5:1; use overlay if needed |
| Touch targets | CTA >=44x44px |
| Keyboard | CTA keyboard-accessible; visible focus indicator |
| Screen readers | Proper heading order; image alt text |
| Reduced motion | Respect prefers-reduced-motion for animations |
Testing
- A/B test headline, CTA copy, and visuals
- Measure bounce rate, conversion rate, time to first interaction
Output Format
- Hero structure (headline, subheading, CTA, visual)
- Copy suggestions
- Technical checklist (LCP, accessibility)
- Testing recommendations
Related Skills
- cta-generator: Hero typically contains primary CTA
- trust-badges-generator: Trust cues in hero
- logo-generator: Logo appears in hero context
- brand-visual-generator: Typography, colors, spacing for hero design
- homepage-generator: Hero is central to homepage design
- landing-page-generator: Hero is step 1 of landing page flow; campaign pages
Source
git clone https://github.com/kostja94/marketing-skills/blob/main/skills/components/hero/SKILL.mdView on GitHub Overview
Hero sections are the first fold users see and drive initial impression and conversions. The hero-generator guides you through crafting a clear, compelling hero by focusing on headline, subheading, primary CTA, and a supporting visual, aligned to your product marketing context. It also outputs a concrete hero structure, copy suggestions, and a technical checklist to ensure fast loading and accessibility.
How This Skill Works
On invocation, it references any product-marketing-context files to align messaging. It identifies page type, primary goal, and platform, then prescribes a hero structure (headline, subheading, CTA, visual) and optional trust cues. It returns copy, a technical checklist (LCP, accessibility), and testing recommendations.
When to Use It
- Designing a new hero for a homepage, landing page, product, or pricing page.
- Auditing an existing hero for clarity, speed, and conversion.
- Aligning hero messaging with a recent brand or product marketing context.
- Optimizing for mobile-first delivery and fast loading (LCP).
- Adding or testing trust cues and a secondary CTA for non-ready visitors.
Quick Start
- Step 1: Run the initial assessment to determine page type, goal, and platform.
- Step 2: Draft the hero structure (headline, subheading, primary CTA, visual) and craft copy.
- Step 3: Output the hero structure, copy suggestions, technical checklist (LCP, accessibility), and testing plan.
Best Practices
- 3-Second Rule: The hero must answer What is this? Why should I care? What should I do next? within 3 seconds.
- Messaging: ensure instant clarity with a single primary CTA and benefit-focused copy; evoke emotional intent first.
- Visuals: fast-loading, brand-aligned visuals that amplify the message.
- Technical: mobile-first, lightweight assets, optimize LCP.
- Accessibility: ensure contrast, touch targets, keyboard accessibility, and screen reader-friendly structure.
Example Use Cases
- SaaS homepage hero with a concise 6–10 word headline and a single primary CTA.
- E-commerce landing hero featuring product image/video and a strong 'Shop now' CTA.
- Mobile app landing hero using app-store badges and a quick signup CTA.
- Pricing/enterprise hero highlighting ROI with trust logos and a supporting stat.
- Brand-refresh hero with updated typography and a prominent CTA plus testimonial.
