landing-structure
npx machina-cli add skill Dragoon0x/Product-Skills/landing-structure --openclawLanding Structure
Information architecture that guides visitors from curiosity to commitment.
How to use
/landing-structureApply these constraints to landing page work in this conversation.
Constraints
Section Order (high-intent traffic)
- Hero: Problem + solution in one screen. CTA visible without scrolling.
- Social proof: logos, numbers, or one strong testimonial.
- How it works: 3 steps max. Show, don't tell.
- Features/benefits: lead with outcomes, support with features.
- Deeper social proof: case studies, detailed testimonials.
- Pricing or next step.
- FAQ: handle remaining objections.
- Final CTA: repeat the primary action.
Section Order (low-intent traffic)
- Hero: Lead with the problem. Make them feel understood.
- Problem amplification: show the cost of the status quo.
- Solution introduction.
- How it works: simple, visual, concrete.
- Social proof: trust before asking for commitment.
- Low-commitment CTA: free trial, demo, newsletter.
Rules
- MUST have exactly one primary CTA per page (repeated, not different)
- MUST make the hero scannable in under 5 seconds
- MUST answer "what is this, who is it for, why should I care" before first scroll
- Hero headline: 6-12 words. Subheadline: 15-25 words
- NEVER start with "Welcome to..." or the company name
- NEVER bury CTA below 3+ scrolls
- NEVER have two consecutive text-heavy sections without visual break
Source
git clone https://github.com/Dragoon0x/Product-Skills/blob/main/skills/conversion/landing-structure/SKILL.mdView on GitHub Overview
Landing-Structure defines the information architecture that guides visitors from curiosity to commitment on conversion surfaces like landing pages and product pages. It enforces a strict section order, clear content hierarchy, and scroll-depth rules to surface the right messages at the right moments. Use it to ensure a single primary CTA and a hero that communicates what this is, who it's for, and why it matters before the user scrolls.
How This Skill Works
Apply a fixed section order aligned to intent (high or low). Craft the hero to be scannable within 5 seconds and include a single primary CTA visible above the fold. Stage social proof, 'how it works' steps, features/benefits, deeper proof, pricing, and FAQ in order to guide the visitor toward the CTA while maintaining visual breaks.
When to Use It
- Launching a high-intent product or campaign landing page aimed at immediate action
- Redesigning a product or feature page to optimize messaging and information flow
- Running paid campaigns that require a tight, scroll-controlled user journey
- Building a long-form service page with clear social proof and FAQ to reduce objections
- Creating a pricing or next-step page with a single, primary CTA
Quick Start
- Step 1: Map your page to either the high-intent or low-intent section order and lock a single primary CTA
- Step 2: Write a hero with the required word counts and ensure it answers what, who, and why before scrolling
- Step 3: Build each section in order (social proof, how it works, features/benefits, deeper proof, pricing, FAQ) with visual breaks and a final CTA
Best Practices
- Define and lock the single primary CTA early and ensure it appears above the fold
- Answer what this is, who it's for, and why it matters before the first scroll
- Adhere to the exact section order appropriate for your intent (high vs low)
- Keep hero headline 6-12 words and subheadline 15-25 words
- Provide visual breaks between text-heavy sections and never bury the CTA
Example Use Cases
- A high-intent SaaS landing page with hero, social proof logos, a concise 'how it works' block, key features, pricing, and a clear final CTA
- A product feature page that uses a guided flow to explain value, supported by visuals and testimonials
- A paid-campaign landing page with a problem-first hero, rapid proof, and a single CTA for trial signup
- A long-form service page leveraging case studies, detailed testimonials, and an FAQ to address objections
- A pricing/next-step page that presents pricing clearly and ends with the single, dominant CTA
