Landing Page Builder
Formula: our structure × competitors' best practices, built to the reference standard.
Every page is unique to its niche. From scratch, the design comes from the topic + the competitors (phases 2–3), never from a previous page or a template. What carries over between pages is the quality level, not the look:
- clear hierarchy in every block: eyebrow → headline → lead → real media → CTA with microcopy;
- real product media in proper frames, with blank labeled frames where it's missing;
- a type pair and one accent chosen for the niche;
- one contrast section for rhythm;
- results captioned one by one;
- a recap before the price;
- FAQ and a closing CTA built from our facts;
- screenshot QA.
The approved Vidpeak redesign (references/examples.md §D) shows that level. Match its finish,
never its look.
- Our structure decides what jobs the page must do and in what proportion (5 blocks, weights, base rules). It is the same in every niche.
- Competitors decide how each job is done in this niche: hero formula, proof types, how the product is shown, pricing format, objections, visual system. That changes per niche.
- Gaps — what no competitor says or shows well — become our differentiation.
- The reference standard (
references/reference-standard.md) sets the quality bar: four landings the owner picked as good. Their block patterns, copy craft and visual craft are what "done well" means. Niche decides the look; the references decide how well it is made.
Never build from the framework alone (generic page) and never clone one competitor (me-too page).
Two modes — pick one first
| Mode | When | Workflow |
|---|---|---|
| A. Build from scratch | No page yet, or the owner wants a new one | Below (phases 1–6) |
| B. Improve the design | A page exists (URL / repo file / screenshot) and the owner wants it to look and work better | references/redesign.md |
Signals for B: "make it better / prettier", "redesign", "improve the design", "here's my landing", a link to a live page. Unclear → ask one question: "New page, or improve the design of this one?" Both modes use the same house structure, base rules and reference standard.
Workflow — Mode A (from scratch)
Follow in order. Phases 2–3 are the core of this skill — don't skip them to save time.
| # | Phase | Output | Reference |
|---|---|---|---|
| 1 | Brief — product, avatar, benefit, CTA type, price, language, assets | Brief in 10 lines | references/brief.md |
| 2 | Competitor research — find 3–5 competitors, open their landing pages, capture every section | research/ screenshots + raw notes | references/competitor-research.md |
| 3 | Teardown & synthesis — per-block patterns, market baseline, best practices, gaps, visual lock | research/teardown.md | references/competitor-research.md |
| 4 | Page plan — our 5 blocks, each filled with chosen practices + a pattern from the reference standard + our content | Plan table → checkpoint with the owner | references/framework.md, references/reference-standard.md |
| 5 | Build — stack, copy, media, CTA, visual system unique to this niche | The page | references/build.md, references/visual-system.md |
| 6 | QA — in the browser, desktop + mobile, against the plan, the competitors and the reference standard | Fixed page + handoff | references/build.md §QA |
| 7 | SEO & GEO — before the page goes live (or on request): one address, robots/sitemap/llms.txt, meta and og, JSON-LD, speed, AI-bot access, Search Console | Live page indexable and quotable by AI search | references/seo-geo.md |
Checkpoint (after phase 4). Show the owner, briefly: the market baseline, the 3–5 practices you're adopting, the gaps you'll attack, the visual lock, and the plan table. Get an "ok", then build. If the owner asked for speed, state the plan and build in the same turn.
Don't stall. If something is missing (product URL, screenshots, prices), mark a TODO and keep
going. Ask only what blocks the CTA type or the language.
The house structure (always)
Five jobs. A job can span several sections (e.g. Offer = recap + pricing + FAQ + final CTA). Weights are share of page length/attention — a target shape, not a law.
| # | Job | Weight | Must achieve |
|---|---|---|---|
| 1 | First screen | 5% | What it is or the payoff, for whom, one primary CTA (none if pre-product) |
| 2 | Pains & situation | 15% | Only if competitors use a pains block. Then: the problem, sharp, with real facts only. Otherwise skip — its share goes to Benefits + Product |
| 3 | Benefits (преимущества) | 20% | What the reader gains, each advantage backed by a visual or proof |
| 4 | Product | 40% | What it is + how it works, graspable in one screen |
| 5 | Offer & CTA | 20% | Recap of benefits, what happens after the click, price + risk reversal, objections, CTA |
Benefits + Product ≈ 60% of the page. If a live LP already exists, keep its section order and map the jobs onto it.
How competitors and our structure combine
- Map every competitor section to one of our 5 jobs (testimonials → Benefits proof, FAQ → Offer objections, logo bar → First-screen proof, integrations → Product…). This gives a per-job view of the market.
- Market baseline = patterns used by most competitors. Buyers expect them — include them (logo bar, free trial, comparison table, before/after… whatever this niche treats as standard).
- Best practice = a pattern that is (a) used by the category leader or by ≥2 competitors, or on pages they run paid ads to, and (b) serves the job of its block. Adopt it, in our words.
- Gaps = objections nobody answers, benefits nobody proves, segments nobody names, formats nobody uses (e.g. no one shows real output). Lead with 1–2 of them — that's the positioning.
- Conflicts. House rules win by default; flag the conflict at the checkpoint and let the owner decide. Typical: competitors use lead/quiz forms → we keep one primary action (see base rules).
- Visual system comes from the competitor set (usually the leader): palette roles, type, density, media format, CTA shape. Copy the system, never their copy, numbers, logos or assets.
Base rules (any niche)
- Strong first screen: a crisp description or a hook benefit, plus the avatar.
- Every CTA is paired with a concrete benefit and says what happens next.
- Show how the product works with the real interface — every how-it-works step paired with a real screenshot/recording of that step, or let them use it if competitors do. Nothing ready → leave a blank, correctly sized frame labeled with what goes there. Never replace the interface with a text list, icons or a made-up UI.
- One primary action, two CTA types only: into the product (Start / Try / Download / Sign up) or book a call (ideally an embedded scheduler). No lead or quiz forms on the page. Allowed: a product input that starts using the product (paste a link, upload a file, enter an address) when that is how competitors let people try.
- Never invent proof, prices, stats, testimonials or logos. Empty slot → visible
TODO. - Real product media only — no fake UI, no stock where product media should be.
- When a market practice is unclear or risky, ask the owner instead of guessing.
Files
references/reference-standard.md— the four reference landings: the quality bar, a pattern library per job, copy craft and visual craft. Read in both modes.references/redesign.md— Mode B: audit an existing page and raise its design.references/brief.md— card-first brief, card row → block mapping, language, CTA type.references/competitor-research.md— finding competitors, which pages, capture, teardown template, synthesis rules. The core of the skill.references/framework.md— the 5 jobs in detail, per-block rules, market maturity, plan table.references/visual-system.md— derive and lock a visual system from competitors (any niche).references/build.md— stack, copy, media, CTA wiring, offer/pricing, QA, handoff.references/seo-geo.md— before going live: SEO and GEO (AI-search) technical checklist, from the domain to Search Console.references/examples.md— worked examples (different niches). Examples, not rules.scripts/capture.mjs— screenshots + structure/visual extraction for competitor URLs.templates/teardown.md— the teardown file to fill in.