Hero Generator is a specialized design and optimization skill for creating high-converting above-the-fold website sections.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install hero-generator
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install hero-generator using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Hero Generator?
Hero Generator is an essential tool within the Openclaw Skills ecosystem designed to help developers and designers craft high-impact hero sections. Since users spend approximately 80% of their initial viewing time above the fold, this skill focuses on the critical first milliseconds of user interaction. It provides a structured framework for designing headlines, subheadings, primary calls-to-action (CTAs), and visual assets that instantly communicate value.
By leveraging project context and visual identity, Hero Generator ensures that the most important part of any landing page, product page, or homepage is optimized for both user experience and conversion. It bridges the gap between technical implementation and marketing psychology, ensuring that every hero section answers the three vital questions: What is this? Why should I care? and What should I do next?
Hero Generator Use Cases
- Designing high-converting landing pages for SaaS and E-commerce.
- Auditing existing above-the-fold content for LCP (Largest Contentful Paint) and SEO performance.
- Creating split-layout or centered hero designs for brand-new web projects.
- Optimizing mobile-first hero sections to ensure CTAs remain visible without scrolling.
- Generating benefit-driven copy for H1 headlines and subheadings.
How Hero Generator Works
- The skill performs an initial assessment by checking project-context.md for the brand's visual identity and value proposition.
- It identifies the specific page type, primary conversion goal, and target platforms (Web/Mobile).
- It selects an optimal layout structure (e.g., Split 50/50, Centered, or Full-width) based on the content balance.
- It generates the core components, including a punchy H1 headline, descriptive subtext, and a single prominent CTA.
- It applies technical and accessibility checklists to ensure fast loading times and inclusive design.
- It outputs a comprehensive hero structure with copy suggestions and testing recommendations.
Hero Generator Setup
To integrate this skill into your AI workflow, ensure it is available in your Openclaw Skills directory:
# Example: Adding the hero-generator to your local AI agent configuration
cp skills/hero-generator.md .claude/skills/
Ensure that your .claude/project-context.md or .cursor/project-context.md file is updated with your brand's visual identity (typography, colors) for the best results.
Hero Generator Data Schema & Taxonomy
Hero Generator organizes output into a structured format to ensure technical accuracy and design consistency:
| Data Point | Description |
|---|---|
| Hero Structure | Defined H1, Subheading, CTA, and Visual Asset type. |
| Layout Strategy | Categorization (e.g., Spotlight layout) and alignment settings. |
| Technical Specs | LCP optimization targets and image format requirements (WebP). |
| Accessibility | Contrast ratios, touch target sizes (min 44x44px), and ARIA labels. |
| Copy Metrics | 6-10 word count limit for headlines to maximize impact. |
Hero Generator Advanced Features
- Multi-agent integration with brand-visual-generator for automatic typography and color application.
- Cross-skill referencing with cta-generator and trust-badges-generator for complex layouts.
- Emotional intent mapping to align visual aesthetics with desired user psychological response.
- Mobile-first stacking logic for responsive split-layout transformations.
- SEO-ready HTML structure recommendations using SSR/SSG rendering strategies.
SKILL.md
Loading
Related Openclaw Skills
Favicon Generator
An expert utility for implementing, optimizing, and auditing favicons and app icons to ensure brand consistency across all platforms.
Audio Script Writer
A professional transformation tool that converts dense medical and scientific text into structured scripts for podcasts, videos, and audiobooks.
Email Sequence Design
A professional framework for designing, writing, and optimizing automated multi-email flows that drive user conversion and retention.
SuperClaw
A systematic 4-phase development workflow that brings professional software engineering rigor and TDD to AI coding agents.
Content Strategy
A comprehensive framework for planning content that balances search engine visibility with viral shareability to drive leads and authority.
Referral Program Strategy
A specialized AI agent skill designed to architect and optimize referral marketing loops for AI and SaaS products.
Featured*
