Landing Page Anatomy: Why Every SaaS Site Has the Same 9 Sections — Dissected on the Page an AI Built Me

Note: This is Part 2 of a series improving one AI-built SaaS landing page step by step, learning web design as we go — Part 1 is the one-message build of Cadence, the demo product I invented. No affiliate links, no sponsors.

I own a landing page now. The AI wrote it in Part 1 from a single sentence — about 21 kilobytes of HTML I can't read, rendering a page that looks finished and isn't mine in any way that matters.

Before I change a single color or word on it, I need to know what I'm looking at. Not "learn to code" — I still can't, and this series won't require it. I mean something smaller and more useful: understanding what the pieces of a landing page are, why they sit in the order they do, and what each one is for. That turns out to be the skeleton key for everything that follows — because once you can name the parts of a page, you can point at them. And pointing, when you're working with an AI, is power.

So: lesson one. The anatomy of a landing page.

A landing page is a conversation

Here's the idea that made structure click for me. A landing page isn't a poster; it's a script for a conversation with a stranger who might leave at any second. Every section exists to answer the question that stranger is silently asking at that exact moment — and the sections are ordered because the questions come in order:

Read the left column top to bottom and you can feel yourself doing it — it's exactly how you behave on every product site you've ever visited. You give the hero five seconds. You glance for signs of life. You scroll to see what the thing does, check what it costs, and either leave or click the button.

This explains something that bugged me in Part 1: why every SaaS page has the same layout. It's not laziness. The structure is the same for the same reason every restaurant menu lists food before prices — it follows the order in which people decide. Structure is convention, and convention is kindness: a visitor who has seen a thousand landing pages already knows how to read yours.

Which sets up the rule I'll lean on for this whole series: the skeleton should be conventional; the skin and the words should be yours. When a page feels generic, the problem is almost never that pricing comes after features. It's what's inside the sections. We'll get there.

The skeleton, exposed

Armed with that model, I went back to my AI-built page and labeled it. This is the entire Cadence page with its skeleton drawn on:

Nine sections, in the canonical order:

1. Header / nav — the page's spine: logo left, links middle, "Start free" button right.
2. Hero — the five-second pitch: headline, one paragraph, two buttons.
3. Social proof strip — the "signs of life" bar (hold this thought).
4. Features — six cards of what the product does.
5. Stats — big numbers as a trust flex.
6. How it works — three steps. It's always three steps.
7. Pricing — three tiers, middle one highlighted. Also always.
8. Final CTA — one last button for the fully scrolled.
9. Footer — links, legal, logo again.

Here's what surprised me: the AI got the structure completely right. Textbook, actually — of all the things I could criticize about this page from Part 1, the skeleton isn't one of them. That makes sense once you know how these models work: they're trained on thousands of landing pages, and the one thing they absolutely absorb is the consensus order. Structure is where the "average of everything" instinct is a feature, not a bug.

Reading the code without reading the code

I said I can't read 21KB of HTML, and I can't. But I learned I don't have to — because HTML is just labeled boxes inside labeled boxes, and the labels are English.

I opened the file and ignored everything except lines that start a box. What's left is the whole page in twelve lines:

<header class="nav">        …the nav bar…
<main>
  <section class="hero">    …headline, buttons, proof line…
    <div class="mock">      …the fake dashboard drawing…
  <div class="strip">       …"Trusted by" logo bar…
  <section id="features">   …six feature cards…
  <section class="stats">   …2.4M / 89% / 4.9★…
  <section id="how">        …three steps…
  <section id="pricing">    …three plans…
  <section id="faq">        …final call-to-action band…
</main>
<footer>                    …link columns, copyright…

That's it. That's the page. Every landing page you've ever seen collapses to a list like this, and you can see any site's version yourself: right-click → Inspect, and click the little arrows to fold the boxes closed. The 21KB stopped being scary the moment I realized 20 of them are upholstery.

Even easier, since I have an AI on hand: I pasted the file into the chat and asked it to "list the sections of this page and what each one is for." It narrated its own work, section by section. The thing that wrote the code is also the best tutor for reading it — that one's going in my permanent toolkit.

Why names matter: my first structural edit

Now the payoff. In Part 1, my one-sentence prompt got me a whole page because the AI filled in every blank. The cost was control: I couldn't steer parts of it, because I had no words for the parts. Regenerating the whole page just reshuffles everything at once.

But now the parts have names. So I can operate.

And there's an obvious first operation. Look at sections 3 and 5 — the social proof strip and the stats band. Their job, per the conversation model, is to answer "do other people use this?" with evidence. Cadence has no users; the AI answered anyway, with six invented company names and statistics from nowhere (the full autopsy of that habit is coming in the copy-and-trust part of this series). My page currently answers a trust question with fiction.

Structure gives me a cleaner option than fixing the fiction: a section whose question you can't honestly answer yet shouldn't be on the page. Skipping a question is fine — plenty of young products launch with no logo bar. Answering it falsely is not. So both sections go, and they can return the day there's something true to put in them.

Here's the exact message I sent Claude, using the section names:

"Remove the 'Trusted by focused people at' logo strip section and the stats section (the one with 2.4M / 89% / 4.9★) entirely. Don't change anything else."

It returned the full file with both blocks gone and everything else untouched — I checked by comparing the two files, and the only difference was the removed sections. No regeneration lottery, no reshuffled page. Naming the target is what made a one-line instruction land like a scalpel instead of a dice roll.

The page is two sections shorter and nothing of value is missing — the conversation just skips a question it couldn't honestly answer. To be clear about what this didn't fix: the hero's small print still claims "4.9★ from 12,000+ users," and the pricing table is still invented. Those are content problems living inside otherwise-legitimate sections, and content gets its own part later in the series. Today was about the skeleton, and the skeleton is now honest: every section that remains has a real job.

What you actually learned (the recap)

• A landing page is an ordered conversation — each section answers one visitor question, in the order the questions occur. That's why the layout is so consistent across the industry, and why you should keep it.
• Any page collapses to a ~12-line skeleton of labeled boxes. You can read yours with Inspect, or ask the AI to narrate its own file.
• Names give you surgical control. "Remove the logo strip section" works; "make it better" reshuffles. This is the core mechanic for the whole series: learn the concept → gain the vocabulary → direct the AI precisely.
• A section earns its place by doing its job. If its question can't be answered truthfully yet, cut the section, not the truth.

The full series (so you know where this goes)

Following the classic web-design curriculum, one concept per part, all on this same page:

1. Building the page with one AI message ✅
2. Web page structure — this post ✅
3. Text and typography — rebuilding the hero headline
4. The box model and spacing
5. Flexbox — how things line up
6. CSS Grid — the feature and pricing layouts
7. Responsive design — surviving the phone
8. Color and images — retiring the purple uniform
9. Buttons, links, and interactions
10. Cards, lists, and tables
11. Forms — a signup that actually works
12. Copy and trust — real words, real numbers
13. A one-page design system + the finished page

In Part 3, typography: why the hero headline is set the way it is, what a type scale is, and whether "Turn intention into unbreakable habits" survives contact with an actual lesson in hierarchy. Same product, same rule: no code I couldn't paste from a chat.

FAQ