skills.rest
chadsmith-webdev
chadsmith-webdevCOMMUNITY
Explore all skills by this author →
GitHub

landing-page-design

Create conversion-focused landing pages with layout rules and persuasive design elements.

Updated Apr 4, 2026
Search Tags:#design#conversion#landing-page#cta#hero-image#social-proof#a/b-testing
One-click install
npx skills add https://github.com/chadsmith-webdev/roofer-demo-v2 --skill landing-page-design-chadsmith-webdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: landing-page-design
Source: https://github.com/chadsmith-webdev/roofer-demo-v2/tree/main/.agents/skills/landing-page-design
Command: npx skills add https://github.com/chadsmith-webdev/roofer-demo-v2 --skill landing-page-design-chadsmith-webdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design and optimize landing pages to maximize conversions by applying proven layout rules, persuasive copy, and effective visual hierarchy.

Core Features & Use Cases

  • Above-the-fold optimization: ensure essential value propositions are visible within seconds.
  • CTA and social-proof guidance: craft primary actions and trust signals that boost interaction.
  • Use cases: ideal for startup landing pages, product pages, SaaS marketing sites, and campaign microsites needing rapid, high-conversion design iterations.

Quick Start

Provide a complete, conversion-focused landing page design outline and visuals for a SaaS product.

Frequently Asked Questions about landing-page-design

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

FAQPage Schema
How do I design a high-converting landing page for a SaaS product?▼

Optimize landing page conversions by applying an above-the-fold formula for instant value propositions, positioning accessible CTAs, placing social proof, and enforcing responsive mobile design with performance targets for page weight and LCP.

What is the best way to structure a hero section for conversion optimization?▼

The best way to structure a hero section for conversion optimization is to apply an above-the-fold formula that ensures essential value propositions and primary CTAs are visible within seconds of page load.

Why does my landing page conversion rate drop on mobile devices?▼

Landing page conversion rates drop on mobile when responsive design rules are ignored, failing to meet performance targets like page weight and Largest Contentful Paint (LCP) while leaving CTAs inaccessible on smaller screens.

Can I use this landing page design framework for campaign microsites?▼

Yes, you can apply this landing page design framework to campaign microsites, as it supports startup landing pages, product pages, and SaaS marketing sites by guiding layout rules and persuasive visual hierarchy.

How do I place social proof and CTAs to maximize landing page conversions?▼

Maximize landing page conversions by placing accessible primary CTAs above the fold, reinforced by trust signals and social proof positioned strategically within the visual hierarchy to guide user interaction.

Related Skills

Explore More Design & Creative Skills→
BasharAmsoBasharAmso
1

Copywriting

Generate conversion-focused copy using AIDA, PAS, and BAB frameworks.

Community
Intermediate
flitzrrrflitzrrr
4

landing-pages

Optimize landing pages for conversion with single-goal architecture and A/B testing.

Community
Intermediate
abhilash-nandkumarabhilash-nandkumar

visual-cues-cta-psychology

Applies visual cues and gaze psychology to optimize CTA placement and design.

Community
Intermediate
wwloreywwlorey

storybrand-website

Transform a StoryBrand SB7 BrandScript into a Hero / 3Ps / FOMO website structure.

Community
Advanced