hero-section-designer

Design and implement above-fold hero sections with layout patterns and CTAs.

11|4|Updated Jan 30, 2026

Search Tags:#copywriting #visual-design #landing-page #cta-optimization #ux-copy #hero-design

Ready to run

npx skills add https://github.com/leadgenjay/claude-skills --skill hero-section-designer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: hero-section-designer
Source: https://github.com/leadgenjay/claude-skills/tree/main/skills/hero-section-designer
Command: npx skills add https://github.com/leadgenjay/claude-skills --skill hero-section-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Creating landing-page hero sections that hook visitors immediately by combining compelling visuals, persuasive copy, and clear CTAs, reducing drop-off at the fold.

Core Features & Use Cases

Frameworks for structuring hero sections with essential components like headline, subheadline, CTA, hero image or video, trust elements, and responsive layouts.
Practical layout patterns (Split Hero, Centered Hero, Product Showcase) with implementation guidance and prompts.
Copy and design guidance, including Dan Kennedy-based headline formulas and mobile-first optimization for high-conversion experiences.

Quick Start

Create a hero-section design outline for a new landing page by selecting a layout pattern, writing a compelling headline and subheadline, and choosing a primary CTA.

Frequently Asked Questions about hero-section-designer

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

FAQPage Schema

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

To design a high-converting hero section, structure your above-fold layout with a strong headline, clear CTA, supporting subhead, and trust elements. Apply proven patterns like Split Hero or Centered Hero while ensuring mobile-first responsive behavior to maximize conversions.

What is the best way to write UX copy for a landing page hero?▼

The best way to write UX copy for a landing page hero is using the Dan Kennedy copy framework. This involves structuring persuasive headline formulas and supporting subheads that immediately hook visitors, reducing drop-off at the fold.

Can I use a Split Hero layout pattern for a product launch?▼

Yes, you can use a Split Hero layout pattern for a product launch. The Product Showcase, Centered Hero, and Split Hero patterns are specifically provided to implement and optimize above-fold sections for product launches and landing page redesigns.

How do I optimize a hero section for mobile-first conversions?▼

Optimizing a hero section for mobile-first conversions requires structuring a responsive layout with a strong headline, clear CTA, and supporting subhead. You must ensure responsive behavior scales trust elements and visuals appropriately for smaller screens.

What components should a high-converting hero section include?▼

A high-converting hero section should include a strong headline, clear CTA, supporting subhead, hero image or video, and trust elements. These essential components combine compelling visuals and persuasive copy to hook visitors immediately.

Why does my landing page hero section have high drop-off rates?▼

Landing page hero sections suffer high drop-off rates when they lack a structured layout combining compelling visuals, persuasive copy, and clear CTAs. Missing trust elements or weak Dan Kennedy-based headline formulas fail to hook visitors immediately at the fold.