skills.rest
leonanpereirapinto
leonanpereirapintoCOMMUNITY
Explore all skills by this author →
𝕏@leonanpereirapGitHub

landing-page-design

Design landing page hero sections, layouts, and CTAs for startups and SaaS.

1|Updated Mar 27, 2026
Search Tags:#landing-page#conversion-optimization#social-proof#cta-psychology#hero-design#above-the-fold#layout-rules
One-click install
npx skills add https://github.com/leonanpereirapinto/ai-utils --skill landing-page-design-leonanpereirapinto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: landing-page-design
Source: https://github.com/leonanpereirapinto/ai-utils/tree/main/skills/typescript/landing-page-design
Command: npx skills add https://github.com/leonanpereirapinto/ai-utils --skill landing-page-design-leonanpereirapinto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Landing Page Design helps teams craft high-converting landing pages by applying layout rules, hero section design, and CTA psychology to communicate value quickly and drive actions on the first screen.

Core Features & Use Cases

  • Above-the-fold rules: ensure key value is visible within seconds with a strong Headline, Subheadline, Social Proof, and primary CTA.
  • Hero and CTA guidance: design hero images that show outcomes and CTAs with action-oriented text.
  • Mobile optimization and performance: mobile-first layout and performance best practices for faster load and better UX.

Use cases include startup landing pages, product pages, SaaS marketing pages, and conversion optimization experiments.

Quick Start

Run the guidance to draft a high-converting landing page outline based on your product and audience.

Frequently Asked Questions about landing-page-design

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

FAQPage Schema
What should be included in a high-converting landing page above the fold?▼

A high-converting landing page above the fold must include a strong headline, subheadline, social proof, and a primary CTA to communicate value quickly and drive immediate user action.

How do I design a hero section for better landing page conversions?▼

Design a hero section for better conversions by using hero images that clearly show product outcomes and pairing them with action-oriented CTA text that guides the user toward the desired action.

How can I optimize my SaaS landing page for mobile users?▼

Optimize a SaaS landing page for mobile users by applying a mobile-first layout and performance best practices, ensuring faster load times and a better user experience on smaller screens.

What is the best way to use CTA psychology on a startup landing page?▼

The best way to use CTA psychology on a startup landing page is to place primary calls-to-action above the fold using action-oriented text that clearly communicates the immediate value to the visitor.

Can I use this landing page optimization approach for A/B testing?▼

Yes, you can use this optimization approach for A/B testing on startup and SaaS marketing pages to experiment with different above-the-fold layouts, social proof placements, and CTA psychology.

Related Skills

Explore More Design & Creative Skills→
mujtaba3Bmujtaba3B
2

copywriting

Write persuasive marketing copy for web pages and product messaging.

Community
Advanced
nicepkgnicepkg
276

landing-page-copywriter

Generate landing page copy using PAS, AIDA, and StoryBrand frameworks.

Official
Intermediate
jaydubya818jaydubya818

copywriting

Generate and refine marketing copy for web pages, including headlines, body text, and calls-to-action.

Community
Intermediate
Hans3010Hans3010

landing-page-design

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

Community
Intermediate