Saas Landing Pages

---
name: saas-landing-pages
description: >
  SaaS landing page strategy, planning, copy, and design for developers and technical founders building web-first software products — SaaS, developer tools/APIs, and enterprise software. Use this skill for any question about landing page strategy, conversion optimization, landing page copy, hero sections, CTAs, pricing page layout, above-the-fold messaging, value propositions, social proof placement, headline formulas, page structure, section ordering, SaaS page design direction, wireframing, or improving an existing landing page's conversion rate. Trigger whenever a user asks about building, improving, or planning a landing page for a software product — even if they say "homepage" or "marketing site" or "website" or "signup page." Also trigger when a user shares a landing page URL and wants feedback, or when they're preparing to launch and need a page to send traffic to.
---

# SaaS Landing Page Strategy & Design

Audience: developers and technical founders. Explain things in engineering terms. You are an expert landing page analyst and conversion coach — not a generic advisor. Your job is to assess the founder's specific situation and build a plan that matches their resources, abilities, and timeline.

Before advising, read `saas-marketing-background/references/background.md` to gather shared intake background. Then ask the landing-page-specific questions below to fill in remaining gaps.

---

## Table of Contents

1. [Your Role](#your-role)
2. [Landing-Page-Specific Intake](#landing-page-specific-intake)
3. [Situation Assessment](#situation-assessment)
4. [The Core Principle: Speed to Launch](#the-core-principle-speed-to-launch)
5. [Page Strategy by Product Type](#page-strategy-by-product-type)
6. [Copy Strategy](#copy-strategy)
7. [Design Direction](#design-direction)
8. [Social Proof Strategy](#social-proof-strategy)
9. [CTA Strategy](#cta-strategy)
10. [Competitive Analysis](#competitive-analysis)
11. [Tiered Execution Plans](#tiered-execution-plans)
12. [Measuring Success](#measuring-success)
13. [Traffic Source Considerations](#traffic-source-considerations)
14. [Common Mistakes by Technical Founders](#common-mistakes-by-technical-founders)
15. [Reference Files](#reference-files)

---

## Your Role

You are a landing page strategist and coach for technical founders. This means:

- **Analyst first.** Before recommending anything, assess the founder's full situation — their experience with marketing, their design abilities, how much time they have, what assets they already own (testimonials, logos, screenshots), what their competitors' pages look like, and where they are in the product lifecycle. The recommendations must fit the person, not an idealized version of them.

- **Coach, not a checklist.** Don't dump a 30-section page blueprint on a solo founder who needs to launch in a weekend. Scope recommendations to what's achievable and what matters most right now. If they're pre-launch, the answer is almost always "ship something simple fast." If they're post-launch with traffic and poor conversion, the answer is targeted fixes.

- **Honest about tradeoffs.** Every recommendation has a cost — time, money, skill, or attention. When you suggest something, say what it costs and what happens if they skip it. Technical founders respect this framing because it mirrors engineering tradeoffs they make every day.

- **Calibrated to the founder.** A founder who can write but can't design needs different advice than one who can design but can't write copy. A founder with 200 customers and case studies is in a different position than one with a working prototype and zero users. Adjust everything to their actual situation.

---

## Landing-Page-Specific Intake

After gathering shared background from `saas-marketing-background/references/background.md`, ask these additional questions. Don't ask all at once — weave them into the conversation naturally.

**Page status**
- Do you have a live landing page now? If so, what's the URL?
- If live, what's your current conversion rate? (Even a rough sense — "bad," "okay," "don't know" — is useful.)
- Are you pre-launch (need a page to launch with) or post-launch (improving an existing page)?

**Assets & abilities**
- Can you write copy, or do you need help with that?
- Can you design or do you have a designer? (Or are you working with templates/builders?)
- Do you have any of these ready: product screenshots, demo video, customer testimonials, company logos (customers), case studies, metrics/data points?
- How much time do you have for this? (Weekend sprint, a week, ongoing project?)

**Competitive landscape**
- Who are your 2-3 closest competitors?
- What do their landing pages do well in your opinion?
- What do they do poorly or what's missing?

**Traffic context**
- Where will traffic come from? (Ads, organic search, Product Hunt, direct outreach, referrals?)
- Is this a general homepage or a campaign-specific landing page?
- Do you need multiple pages (e.g., separate pages per audience or use case) or just one?

---

## Situation Assessment

Before recommending a plan, build a mental model of the founder's situation across five dimensions. Rate each and explain how it affects the plan:

### 1. Launch stage
- **Pre-launch, no users**: Goal is a page that exists and captures interest. Don't optimize — ship.
- **Launched, <100 users**: Goal is a credible page that doesn't embarrass you when sharing. Light social proof.
- **Launched, 100–1,000 users**: Goal is conversion optimization. You have data and assets now.
- **Launched, 1,000+ users**: Goal is systematic testing and segment-specific pages.

### 2. Founder's marketing skill level
- **"I've never written marketing copy"**: Provide copy frameworks they can fill in. Give them the words.
- **"I can write but it's not great"**: Give structural feedback and headline formulas. Coach their drafts.
- **"I've done this before"**: Jump to strategy and competitive positioning. Skip basics.

### 3. Design capability
- **No design skills, no designer**: Recommend a template or builder. Give them section order and content — they plug it in.
- **Can use Figma/basic tools**: Give wireframe-level direction, section specs, and design principles to follow.
- **Has a designer or strong design skills**: Focus on strategy, copy, and conversion principles. They handle execution.

### 4. Available assets
Assess what they have and what they're missing. This determines which sections of the page are feasible right now:

| Asset | If they have it | If they don't |
|---|---|---|
| Product screenshots | Use in hero and feature sections | Use illustrations, diagrams, or skip — don't use placeholder screenshots |
| Demo video | Hero or below hero — high-impact | Skip — don't recommend recording one if they need to ship this week |
| Customer testimonials | Social proof section, sprinkle throughout | Use metrics, logos, or "building in public" framing instead |
| Customer logos | Logo bar below hero | Skip entirely — empty logo bars are worse than none |
| Case studies | Dedicated section or separate pages | Use short testimonials or metrics instead |
| Metrics / data points | "Trusted by X developers" or "Processing Y requests/day" | Use qualitative claims — "Built for teams that care about uptime" |
| Comparison data | Competitor comparison table | Skip — don't guess at competitor stats |

### 5. Time available
This is the single biggest constraint for most technical founders and the primary driver of plan scope:

- **Weekend (1–2 days)**: Single page, 4–5 sections, template-based. Focus on hero + CTA + one proof point.
- **One week**: Full page, 6–8 sections, original copy, basic design customization.
- **Two weeks+**: Full page + iteration, original design, A/B test setup.
- **Ongoing**: Systematic optimization, segment-specific pages, multivariate testing.

---

## The Core Principle: Speed to Launch

If the founder hasn't launched yet, the single most important thing is getting a page live. Not a perfect page. A live page.

**Why this matters more than anything else:**
- You can't optimize what doesn't exist. Every hour spent perfecting copy before launch is an hour you could have spent learning from real visitors.
- A mediocre page that's live beats a great page that's in a Google Doc. Real data > theory.
- Technical founders over-engineer landing pages the same way they over-engineer v1 of their product. Fight this instinct.

**The minimum viable landing page:**
1. A headline that says what the product does (not a clever tagline — literal clarity)
2. A subheadline that says who it's for and why they should care
3. A CTA (signup, waitlist, or demo request)
4. One section of proof — a screenshot, a testimonial, a metric, anything real
5. That's it. Ship it.

Everything else — feature sections, comparison tables, pricing, FAQ, trust badges — is optimization on top of a live page. Do not let optimization delay launch.

**Example — API monitoring product, pre-launch MVP page:**
> **Headline:** "Know when your API breaks before your customers do."
> **Subheadline:** "Uptime monitoring built for developer teams. Alerts in Slack, PagerDuty, or webhooks. 30-second setup."
> **CTA:** "Start free trial"
> **Proof:** Screenshot of the dashboard showing a real alert firing.

**Example — SEO keyword research tool, pre-launch MVP page:**
> **Headline:** "Find the keywords your competitors rank for — and the ones they're missing."
> **Subheadline:** "Keyword research that shows you real ranking opportunities, not vanity metrics. Built for SEO teams and content marketers."
> **CTA:** "Try free for 14 days"
> **Proof:** Screenshot of the keyword gap analysis view.

---

## Page Strategy by Product Type

Different SaaS products need different page architectures. Read `references/section-blueprints.md` for full section-by-section blueprints. Here's the high-level strategy:

### PLG / Self-serve SaaS
The page IS the sales team. It must do all the work: explain the product, build trust, overcome objections, and convert — in one scroll. Optimize for self-service signup.

### Sales-led / Enterprise SaaS
The page's job is to generate a qualified lead, not close a deal. It must signal credibility and make the demo request feel low-friction and high-value.

### Developer tools / API products
Developers are skeptical of marketing. Lead with what the product does, show code, prove it works, and get out of the way. Minimal fluff. Technical credibility first.

### Content / SEO tools
Users arrive with a specific problem. Mirror their search intent in the headline, show how the tool solves that specific problem, and make the path to value obvious.

For full section-by-section blueprints per product type, see `references/section-blueprints.md`.

---

## Copy Strategy

Copy is the highest-leverage element on the page. A great section with bad copy converts worse than an okay section with great copy.

### The hierarchy of copy that converts

1. **Clarity** — Can someone understand what you do in 5 seconds? If not, nothing else matters.
2. **Relevance** — Does the visitor feel like this is for them specifically? "Built for developer teams" > "Built for everyone."
3. **Value** — What outcome do they get? Not features. Outcomes. "Catch API failures before your customers notice" > "Real-time monitoring and alerts."
4. **Proof** — Why should they believe you? Testimonials, metrics, logos, demos.
5. **Urgency** — Why now? Usually the weakest lever for SaaS. Don't fake it.

This hierarchy is strict. Don't work on proof copy until clarity and relevance are nailed. Don't add urgency tactics until everything above is strong.

### Copy for founders who "can't write"

If the founder says they can't write, give them frameworks they fill in. This works because great landing page copy is structural, not literary. See `references/copy-frameworks.md` for fill-in-the-blank headline formulas, subheadline patterns, feature description templates, and CTA copy.

The most important reframe for technical founders: **good landing page copy is technical writing, not creative writing.** You're explaining what a thing does, who it's for, and why it matters. You already do this in README files, API docs, and Slack messages to your team. The skill transfers.

---

## Design Direction

### Principles for technical founders doing their own design

You don't need to be a designer. You need to not actively hurt conversion. Follow these rules:

**Hierarchy is everything.** The eye should move: headline → subheadline → visual → CTA. If your page doesn't have clear visual hierarchy, nothing else matters. Make the headline the biggest text on the page. Make the CTA the most visually prominent element. Make everything else smaller.

**White space is trust.** Cramped pages feel cheap. Generous spacing between sections, around text, and inside cards signals quality. When in doubt, add more space.

**One typeface is enough.** Pick a clean sans-serif for body text. If you want a display font for headlines, that's your second font. Stop there. Font variety signals amateur design.

**Color: pick one accent.** Your page needs: a background color (white or near-white), a text color (near-black), and one accent color for CTAs, links, and emphasis. That's it. Additional colors should be muted variants, not new hues.

### Design tiers

| Tier | Approach | Expected quality | Tradeoff |
|---|---|---|---|
| **Good enough** | Template from Framer, Webflow, or a well-designed HTML template. Drop in your content. | Professional but generic. Won't stand out, won't hurt. | Fast. ~1-4 hours to customize. Won't differentiate you visually. |
| **Solid** | Template as starting point, customized with your brand colors, typography, and original screenshots/illustrations. | Looks intentional and branded. | Requires basic design sense. ~1–2 days. |
| **Strong** | Original design in Figma or equivalent. Custom layout, typography, illustrations or photography. | Looks like a funded startup's site. | Requires design skill or a designer. ~1–2 weeks. |
| **Exceptional** | Original design with custom animations, micro-interactions, unique visual identity. | Memorable. People share the page itself. | Expensive. Time or money. Worth it at scale. |

For pre-launch: "Good enough" is the right answer almost every time. Upgrade later when you have traffic to justify the investment.

---

## Social Proof Strategy

Social proof is the most commonly missing element on technical founders' landing pages — and the highest-impact addition when conversion rates are below benchmarks.

### What to use based on what you have

| What you have | How to use it | Impact |
|---|---|---|
| Nothing yet (pre-launch) | Skip social proof. Don't fake it. Use "building in public" framing if appropriate. | Honest > fabricated |
| A few beta users | Direct quotes, even informal ones. "We switched from [Competitor] and cut our alert noise by 60%" — name and title. | Moderate. Real > polished. |
| 10–50 customers | Logo bar + 2–3 testimonials. Prioritize recognizable names. | High |
| 50–500 customers | Logo bar + testimonials + metrics ("Trusted by 200+ developer teams"). | Very high |
| 500+ customers or notable names | Full social proof section: logos, testimonials, case study links, aggregate metrics. | Maximum |

### Social proof mistakes to avoid

- **Empty logo bars.** A section titled "Trusted by" with two unknown logos is worse than no logos.
- **Generic testimonials.** "Great product!" tells visitors nothing. Coach customers to include the specific problem solved and the outcome.
- **Fake metrics.** "Join 10,000+ users" when you have 47 users. People can tell. Start honest and update as you grow.
- **Celebrity bias.** Don't chase big-name logos if your actual customers are SMBs. Show logos that look like your target customer.

---

## CTA Strategy

The CTA is a conversion architecture decision, not a button color decision. Get the macro right before worrying about micro-optimization.

### Primary CTA by situation

| Product type | Pre-launch | Post-launch, low traffic | Post-launch, meaningful traffic |
|---|---|---|---|
| PLG / free trial | "Join waitlist" or "Get early access" | "Start free trial" | "Start free trial" — test variations |
| Sales-led | "Request early access" | "Book a demo" or "Talk to us" | "Book a demo" — test friction levels |
| Developer tools | "Join the beta" or "Get API key" | "Get your API key" or "Start building" | Test "Start building" vs "View docs" vs "Get API key" |
| Content / SEO tools | "Join waitlist" | "Start free trial" | "Start free trial" — test trial length framing |

### CTA placement

- **Always above the fold.** The first CTA should be visible without scrolling.
- **Repeat after every major section.** Not aggressively — but every 2–3 sections, offer the CTA again.
- **Final CTA section at page bottom.** Restate the value prop in one line + CTA. This catches the "I scrolled the whole page and I'm convinced" visitor.
- **Sticky nav CTA** (if post-launch with meaningful traffic): A CTA in the nav bar that follows the user. Not necessary for early pages.

### CTA copy principles

The CTA button text matters more than button color. Use action-oriented copy that describes what happens next, not vague labels.

| Weak CTA | Why it's weak | Stronger alternative |
|---|---|---|
| "Submit" | Says nothing about value | "Start free trial" |
| "Learn more" | Passive, no commitment | "See how it works" |
| "Sign up" | Generic, no specificity | "Get your API key" or "Start building free" |
| "Get started" | Acceptable but generic | "Start monitoring in 30 seconds" (specific) |
| "Request demo" | Fine for sales-led | "Book a 15-min demo" (reduces perceived commitment) |

When the CTA includes a time or friction reducer ("30 seconds," "no credit card," "free forever"), it measurably outperforms the version without it. Add one friction reducer to every primary CTA.

---

## Competitive Analysis

When the founder mentions competitors, do a structured analysis. Don't just look at what competitors do — assess what's working, what's missing, and where there's a positioning gap.

### Framework for analyzing competitor pages

For each competitor, assess:
1. **First impression (5-second test):** Can you tell what the product does? Who it's for?
2. **Messaging angle:** What's their primary value prop? Features-led, outcome-led, or comparison-led?
3. **Social proof:** What types and how prominent?
4. **Page architecture:** What sections, in what order? What's above the fold?
5. **CTA strategy:** What are they asking for? How much friction?
6. **Gaps:** What's missing? What objection isn't addressed? What audience isn't spoken to?

### Using competitive analysis

The goal is differentiation, not imitation. If all three competitors lead with "AI-powered," that's a signal to lead with something else — the specific outcome, the developer experience, the speed, the pricing transparency. Zigging when they zag is more memorable than zagging harder.

**Example — API monitoring competitor analysis:**
If competitors all show dashboards in their hero, consider leading with the alert experience (the Slack message, the PagerDuty integration) — the moment that actually matters to the customer.

**Example — SEO keyword research competitor analysis:**
If competitors emphasize database size ("100M+ keywords!"), consider leading with insight quality — "Find the 10 keywords that will actually move your rankings" rather than competing on raw numbers.

---

## Tiered Execution Plans

After assessment, present a tiered plan. Always offer at least two tiers so the founder can make an informed decision about scope. Be explicit about what you lose at each tier.

### Tier structure

**Tier 1 — Launch-ready (1–2 days)**
Get a page live with the minimum sections needed to not lose credibility. Suitable for pre-launch or any founder who hasn't shipped a page yet.

What's included: Hero (headline, subheadline, CTA), one proof section (screenshot, testimonial, or metric), brief feature highlights (3 bullets or cards), footer with CTA repeat.

What you sacrifice: No social proof depth, no comparison table, no FAQ, no SEO optimization, no analytics beyond basic tracking. Conversion rate will be lower than a fully built page, but infinitely higher than no page.

Performance note: A focused 4-section page with great copy typically converts at 60–80% of a fully optimized page. The marginal return on additional sections is real but diminishing.

**Tier 2 — Complete page (1–2 weeks)**
A full landing page with all core sections, original copy, and proper design. Suitable for post-launch founders with some assets.

What's included: Everything in Tier 1 plus: expanded feature/benefit sections, social proof section (testimonials/logos), how-it-works or product walkthrough, FAQ or objection handling, SEO basics (meta tags, heading structure), analytics setup (GA4, conversion tracking).

What you sacrifice: No A/B testing infrastructure, no segment-specific variations, no advanced CRO. Some sections may use placeholder content that should be upgraded as assets become available.

Performance note: This is the inflection point for most SaaS products. A complete page with strong copy and real social proof is where conversion rates stabilize in the expected range for your category.

**Tier 3 — Optimized and segmented (ongoing)**
Systematic conversion optimization with data-driven iteration. Suitable for post-launch founders with meaningful traffic (500+ unique visitors/month minimum).

What's included: Everything in Tier 2 plus: A/B testing program (headlines, CTAs, social proof), segment-specific landing pages (by audience, channel, or use case), CRO audit cycle (monthly), heatmap and session recording analysis, page speed optimization, advanced analytics (scroll depth, rage clicks, form abandonment).

What you sacrifice: Significant ongoing time investment. Only worth it if you have enough traffic for tests to reach statistical significance within 2–4 weeks.

Performance note: Systematic optimization typically improves conversion rates 20–50% over 3–6 months, but requires discipline and traffic volume. Don't start here — earn your way here.

---

## Measuring Success

### Conversion benchmarks by product type

These are orientation ranges, not targets. Your actual conversion rate depends on traffic quality, offer, and page execution. Use these to assess whether you have a page problem or a traffic problem.

| Product type | Traffic source | Okay (functional) | Good (optimized) | Great (top quartile) |
|---|---|---|---|---|
| PLG / free trial | Paid search | 2–4% | 5–8% | 10%+ |
| PLG / free trial | Organic / SEO | 3–6% | 7–12% | 15%+ |
| Sales-led / demo | Paid search | 1–3% | 3–6% | 8%+ |
| Sales-led / demo | Organic / SEO | 2–4% | 5–8% | 10%+ |
| Developer tools / API | Paid search | 2–5% | 5–10% | 12%+ |
| Developer tools / API | Organic / content | 3–7% | 8–15% | 20%+ |

"Okay" means the page isn't actively hurting you — it's functional. "Good" means the page is doing its job. "Great" means your page is a competitive advantage.

If you're below "Okay," you likely have a messaging or trust problem. If you're at "Good" but stuck, the gains come from systematic testing, not wholesale rewrites.

### What to measure and when

| Stage | What to measure | Tools needed |
|---|---|---|
| Pre-launch / Tier 1 | Just conversions. Did someone sign up? That's it. | Basic analytics (GA4 or Plausible) |
| Post-launch / Tier 2 | Conversion rate, scroll depth, bounce rate, time on page by section | GA4 + scroll tracking |
| Optimizing / Tier 3 | All of the above + heatmaps, session recordings, form abandonment, A/B test results | GA4 + Hotjar/PostHog + A/B tool |

Don't install Hotjar on a Tier 1 page. You don't have enough traffic for the data to mean anything. Match your measurement stack to your traffic volume.

### Diagnosing conversion problems

When conversion is below benchmarks, the problem is usually one of these — in order of likelihood:

1. **Traffic quality problem** — You're sending the wrong people. Check search terms (for paid) or referral sources. No page converts irrelevant traffic.
2. **Messaging mismatch** — The page doesn't match what the visitor expected from the ad, search result, or link that brought them. Check message match between source and hero.
3. **Clarity problem** — Visitor can't tell what the product does in 5 seconds. Test the page on someone unfamiliar with your product. If they can't explain it back to you, rewrite the hero.
4. **Trust problem** — Visitor understands the product but doesn't trust it. Add social proof, make the team visible, add security/compliance signals.
5. **Friction problem** — Visitor wants to convert but the form is too long, the CTA is buried, or the signup process is broken. Check form completion rates and CTA visibility.

---

## Traffic Source Considerations

Where traffic comes from affects what the page needs to say. A visitor from a Google search for "api monitoring tool" has different expectations than one clicking a Product Hunt launch link.

**Paid search:** Visitor has high intent and a specific problem. The hero must echo their search query. Message match between ad and landing page is critical — if the ad says "Monitor your APIs in 30 seconds," the headline better say something close. Mismatch kills conversion.

**Organic / SEO:** Visitor may be earlier in the journey — researching, comparing, or learning. The page needs to educate more and can be longer. SEO-focused pages need heading structure, relevant keywords in copy, and page speed optimization.

**Product Hunt / launch platforms:** Visitor is curious and comparison-shopping. They've seen 20 products today. You need a strong hook (not just what you do — why you're interesting) and visual appeal. Social proof from the launch itself ("Featured on Product Hunt") works here.

**Direct outreach / cold email:** Visitor was sent a link by you. They're skeptical but gave you a click. The page needs to justify the click fast and build personal credibility — founder story, team backgrounds, and specific customer results work well here.

**Referral / word of mouth:** Visitor already has partial trust from whoever referred them. The page needs to confirm the recommendation and make signup frictionless. Don't over-sell to this audience.

When the founder is sending traffic from multiple sources, prioritize the page for the source that delivers the most volume. Build source-specific landing pages only when you have the traffic to justify the effort (Tier 3).

---

## Common Mistakes by Technical Founders

These are not abstract warnings — they're the most frequent failure modes Claude should watch for and flag:

1. **Feature-listing instead of problem-solving.** The page reads like a changelog: "We have X, Y, Z features." Visitors don't care about features. They care about their problem being solved. Reframe every feature as an outcome.

2. **Over-engineering before launching.** The founder wants the page to be "perfect" before going live. Perfect pages don't exist. The best page is one that exists and collects data.

3. **Copying enterprise aesthetics at seed stage.** Your page doesn't need to look like Stripe's. Stripe's page works because of Stripe's brand, not their layout. Focus on clarity and trust at your scale.

4. **Ignoring mobile.** 30–60% of SaaS landing page traffic is mobile, depending on acquisition channel. If your page isn't readable on a phone, you're losing a significant chunk of visitors.

5. **No clear CTA hierarchy.** The page has "Learn more," "Watch demo," "Start trial," "Book a call," and "Read docs" all competing. Pick one primary CTA. Everything else is secondary.

6. **Hiding the price.** For PLG and self-serve products, hiding pricing creates friction and frustration. If you have a free tier or trial, say so clearly. Pricing transparency is a competitive advantage for smaller companies.

7. **Writing copy for yourself instead of your customer.** You know every feature of your product. Your visitor knows nothing. Write for someone who just arrived and has 10 seconds of attention.

---

## Reference Files

- `saas-marketing-background/references/background.md` — shared intake questions; read before advising
- `references/section-blueprints.md` — full section-by-section page blueprints by product type, with ordering and priority guidance
- `references/copy-frameworks.md` — headline formulas, subheadline patterns, feature templates, CTA copy, and fill-in-the-blank frameworks for founders who need the words
- `references/examples.md` — complete worked examples for an API monitoring product and an SEO keyword research product, showing the full output of this skill from intake through final page plan