skills.rest
kostja94
kostja94COMMUNITY
Explore all skills by this author →
WebsiteGitHub

hero-generator

Design, optimize, and audit website hero sections with SEO and UX guidance.

872|122|Updated Feb 26, 2026
Search Tags:#landing page#ui design#conversion optimization#cta#hero section#above the fold
One-click install
npx skills add https://github.com/kostja94/marketing-skills --skill hero-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hero-generator
Source: https://github.com/kostja94/marketing-skills/tree/main/skills/components/branding/hero
Command: npx skills add https://github.com/kostja94/marketing-skills --skill hero-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps design, optimize, and audit hero sections (above-the-fold main visual area) to ensure they make a strong, immediate positive impression and drive user action.

Core Features & Use Cases

  • Component Identification: Analyzes and guides the creation of essential hero components: Headline (H1), Subheading, Primary CTA, and Visual.
  • Layout Guidance: Recommends optimal layout types (Split, Centered, Full-width image) based on content and goals.
  • Best Practice Adherence: Ensures adherence to the 3-second rule, clear messaging, and visual appeal.
  • SEO & UX Integration: Provides guidance on SEO considerations (H1, keywords) and UX best practices (hierarchy, accessibility).
  • Use Case: Optimize a SaaS product's landing page hero section for a higher signup conversion rate by ensuring the headline clearly communicates value and the CTA is prominent.

Quick Start

Generate a hero section design for a new SaaS product targeting small businesses.

Frequently Asked Questions about hero-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a high-converting hero section for a landing page?▼

Optimize a hero section for conversion by ensuring clear messaging, a strong H1 headline, a prominent primary CTA, and relevant visuals. Choose appropriate layout types like split or centered alignments to maximize first impressions and drive user action.

What are the essential components of an effective above the fold area?▼

An effective above the fold area requires four core components: a compelling headline (H1), a supportive subheading, a primary call-to-action (CTA), and a relevant visual. These elements work together to communicate value instantly and drive conversions.

How do I audit my website hero section for UX and SEO best practices?▼

Audit your website hero section by checking SEO integration like proper H1 usage and keywords, alongside UX best practices including visual hierarchy and accessibility. Ensure your layout supports LCP optimization for faster loading and better search performance.

When should I use a split layout versus a centered layout for a hero section?▼

Use a split layout to separate text and visual elements for detailed product showcases, or a centered layout to focus attention on a single message. Selecting the right layout type depends on your specific content goals and conversion optimization strategy.

Does hero section design impact landing page conversion optimization directly?▼

Hero section design directly impacts landing page conversion optimization by adhering to the 3-second rule for immediate comprehension. A well-structured above the fold area with clear messaging and a prominent CTA significantly increases signup conversion rates.

Related Skills

Explore More Design & Creative Skills→
BrianRWagnerBrianRWagner
390

positioning-basics

Define product positioning with ICP, problem, and differentiation mechanism.

Community
Advanced
RUSHYOPRUSHYOP

frontend-design

Generate production-grade frontend interfaces with design constraints and UX guidelines.

Community
Advanced
YeomanYeYeomanYe

core-web-vitals

Analyze LCP, INP, and CLS issues and propose concrete fixes.

Community
Advanced
Hans3010Hans3010

landing-page-design

Design landing pages with optimized layout, hero sections, and CTA psychology.

Community
Intermediate