wireframe-writer

name	wireframe-writer
description	Use when planning the structure of a website page, landing page, or sales page for any niche or business — when you need a section-by-section wireframe aimed at one conversion. For critiquing an existing page, use wireframe-reviewer.

Wireframe Writer

• A high-converting page is a story scrolled top to bottom: hero → problem → proof → offer → objections → action.
• This arc synthesizes the proven copywriting frameworks: PAS (problem–agitate–solve) drives sections 2–3, AIDA (attention–interest–desire–action) is the rising-conviction order, and StoryBrand supplies the stance — the visitor is the hero, the brand is the guide.
• Each section has one job and hands momentum to the next, the same way a video chains open loops.
• Built on the six levers — see storytelling-hooks. Recap: 1. Curiosity gap · 2. Emotional mirror · 3. Conflict engine · 4. Relatability · 5. Pattern + surprise · 6. Three-act.

When to Use

• Planning a landing page, sales page, homepage, or product page structure.
• Turning an offer, product, or message into a section-by-section wireframe.
• Briefing a designer/developer with intent (the "why" of each block), not just boxes.
• Any niche or business. For reviewing an existing page, use wireframe-reviewer.

Intake (Before Wireframing)

• Confirm: the offer and its one conversion action, exact audience (who buys, in one sentence), traffic source, and available proof assets (testimonials, numbers, logos, case results).
• Use the traffic source: cold arrivals (ads/social) need a heavier problem section and more proof; search arrivals already feel the problem — tighten the top and get to mechanism and offer sooner.
• Ask if missing when the user can respond; otherwise state assumptions explicitly at the top and proceed — never invent proof or numbers.

Output Format

• Read patterns.md (same folder) for headline, problem-opener, mechanism, CTA, and objection copy-direction structures — adapt, don't copy.
• For each section, specify three things:
  • Job — what this section must accomplish.
  • Message — the core line/idea (copy direction, not final copy).
  • Lever — which storytelling lever it pulls.

Page Arc (Quick Reference)

#	Section	Job	Lever
1	Hero	Hook + promise + primary CTA	1, 4, 2
2	Problem / agitate	Name the pain, make it "me"	3, 4
3	Solution / mechanism	Show the path out	6
4	Proof	Make the claim believable	—
5	Benefits / outcomes	Paint the after-state	2
6	Offer	What they get, clearly	—
7	Objections / FAQ	Remove the last "but"	3
8	Final CTA	One action + bookend	1

Section Playbook

• Hero: headline = curiosity gap + promise; subhead clarifies; one primary CTA above the fold. Don't bury the hook in branding.
• Problem/agitate: mirror the reader's pain so they think "this is me" (relatability + emotional mirror). The conflict engine starts here.
• Solution/mechanism: introduce the path/method — the "how it works". This is the resolution turn of the three-act.
• Proof: testimonials, logos, data, before/after, screenshots. Both a dedicated proof section and proof distributed beside individual claims — the section carries the weight, the inline pieces defuse specific doubts.
• Benefits: outcomes and the after-state feeling, not feature lists. One idea per block.
• Offer: make exactly what they get unmissable — components, price, terms.
• Objections/FAQ: pre-empt the self-made obstacles ("too expensive", "won't work for me", "no time").
• Final CTA: restate the promise (bookend the hero), one action, remove friction.

Conversion-Flow Rules

• One primary action per page; repeat the same CTA, don't introduce competing ones.
• Each section should leave a small open loop pulling the scroll downward.
• Order by rising conviction: hook → relevance → belief → desire → action.
• Match section length to its weight; cut anything that doesn't move toward the CTA.
• CTAs repeat at natural decision points (after hero, after proof, at the end).

Common Mistakes

Mistake	Fix
Hero about the company ("Crafting Digital Experiences")	Hero about the visitor's outcome, in their words
Proof stacked in one distant section	Distribute proof beside the specific claims it supports
Every section same length and weight	Size sections by their persuasion weight; cut ruthlessly
Navigation full of exits on a landing page	Strip or minimize nav — one page, one action
Desktop-only thinking	Hero + CTA must work in a single mobile viewport
Proof or numbers invented to fill the template	Use only real assets from intake; mark gaps as "needs proof"

Wireframe Checklist

• Does the hero hook + promise + show one CTA above the fold?
• Is the reader's problem mirrored so it feels personal?
• Is there a clear solution/mechanism turn?
• Is proof placed beside the claims it supports?
• Are benefits framed as outcomes/feelings, not features?
• Are top objections pre-empted before the final CTA?
• One primary action, repeated — no competing CTAs?
• Does the final section bookend the hero's promise?
• Each section answers: what's its job, what's the message, which lever?

Related

• wireframe-reviewer — critique an existing page against this arc.
• storytelling-hooks — the six levers (read for depth).