Menu
Conversion-oriented page structure, CTA design, above-the-fold optimization, page types, and A/B testing for maximum conversion rates.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | landing-pages |
| description | Conversion-oriented page structure, CTA design, above-the-fold optimization, page types, and A/B testing for maximum conversion rates. |
Every landing page pursues exactly one primary conversion goal. Multiple competing goals reduce the conversion rate. One goal, one page.
Use this skill when you:
Every landing page pursues exactly one primary conversion goal. Multiple goals reduce the rate.
Homepages inform broadly. Landing pages sell or generate leads โ targeted and distraction-free.
Anyone who lands on a landing page has already seen an ad or searched for a keyword. The page must deliver on the promise made.
No user converts without trust. Social proof, transparency, and professional design are mandatory.
Over half of all visitors arrive on mobile. A page that does not work on a smartphone wastes half its potential.
Whether a CTA button should be red or green is decided by A/B test data, not by a designer.
| Type | Goal | Length | Distinguishing Feature |
|---|---|---|---|
| Opt-in Page | Generate leads | Shortโmedium | Freebie or value exchange |
| Sales Page | Sell product/service | Long | Address all objections |
| Click-Through Page | Advance to next funnel step | Short | Build interest, don't sell |
| Squeeze Page | Capture minimal data | Minimal | Only email field and CTA |
| Webinar/Event Page | Generate registrations | Medium | Date, speaker, countdown |
The visible area without scrolling must contain:
For sales and lead generation: 1. Name the problem directly, 2. Agitate (what happens if left unsolved), 3. Present your offer as the solution. See references/conversion-patterns.md for details.
Social proof in 3 locations: 1. Above the fold (logos, customer count), 2. After the benefits section (testimonials with photo), 3. Above the final CTA (ratings, guarantee).
For products requiring explanation: Auto-play-disabled video (max. 90 sec.) as hero, followed by text summary and CTA below.
For time-limited offers: Countdown timer above the CTA. ONLY with a real deadline. Fake countdowns permanently destroy trust.
Too much text, too many sections, too many visual elements. Solution: Every section must serve a function in the conversion flow.
CTA visually inconspicuous, too small, or only visible after extensive scrolling. Solution: CTA above the fold AND after every section. Contrast color, sufficient size.
"Welcome" or "We offer solutions." No user feels addressed. Solution: Benefit-oriented headline: "50% more leads in 30 days."
Great on desktop, unusable on mobile. 50%+ of traffic cannot convert. Solution: Design mobile-first. CTA buttons reachable by thumb.
Testing random variants. No actionable insights. Solution: Every test has a hypothesis: "If we change X, we expect Y, because Z."
customer-journey โ The landing page is a central touchpointdesign-process โ Landing page creation follows the same processai-design-workflow โ AI can generate headlines, CTAs, and copy variantswebsite-audit โ Existing landing pages are part of the audit scopeusability โ Forms and conversion optimizationui-design โ Visual design of conversion elementsWCAG conformance, BFSG compliance, semantic HTML, ARIA, keyboard navigation, contrast, forms, and assistive technologies. Defines binding rules for accessible web interfaces per WCAG 2.1 AA.
Design patterns for chat interfaces, agent UX, streaming UI, and tool visualization. Covers chat architecture, message types, streaming rendering, tool execution cards, and sandbox UI derived from 21st.dev Agents SDK documentation and templates.
AI tool integration into the design process, structured prompting for designers, creative AI usage with clear boundaries, and review workflows.
Brand strategy, visual identity, positioning, corporate design, portfolio presentation, and consistent brand management across all digital touchpoints.
Color models, palettes, contrast, color psychology, color harmonies, and dark mode for web projects. Defines the 60-30-10 rule, semantic color coding, design tokens, and WCAG contrast requirements.
Modern UI component selection, composition, and theming patterns for web applications. Covers compound components, design tokens, variant systems, responsive patterns, and form architecture derived from 21st.dev SDK, Godly featured products, and current best practices.