## Craft: Persuade pages and the craft floor **Persuade pages** applies when the page exists to get one action from a visitor: a landing, marketing, pricing, waitlist, campaign or comparison page. Write `Surface: Persuade` or `Surface: other` as the spec's first line; on `other`, skip to Craft floor, which applies to every page. An approved mockup wins on structure and visuals; this section fills only what it leaves open. ### Persuade pages **One offer → one audience → one primary action.** **Intake.** When the context does not settle them, ask one AskUserQuestion with at most three multiple-choice questions: the primary action, the traffic source, and published or design reference. Assume the rest in one `Assumed:` line the user corrects in the refinement loop: - the conversion and the offer: exactly what they get - who it is for, the problem they came with, their top three objections, what they already know - the proof the user can supply (named customers, attributed quotes, real numbers) and the risk terms the business offers **Archetype.** When approved.json carries an `archetype`, the user already chose it on the /design-shotgun board: take it and its `sections` outline as given, name both in the spec's layout type, and do not re-pick or re-ask. Otherwise pick one and say why there: **classic hero + sections** (`classic-hero`, default; the product reads from one screenshot), **long-form story** (`long-form-story`, the visitor needs educating or is skeptical), **minimal conversion** (`minimal-conversion`, high-intent traffic or a small offer), **comparison** (`comparison`, search intent is "X vs Y"). **Structure.** Above the fold at 375×667 and on desktop, inside the hero budget: a headline naming outcome and audience, one sentence on how, one primary CTA, one proof signal only when real proof exists (named logos or one attributed quote; a metric row stays banned), one product visual. Below it, choose modules and order from the archetype and the objections. The long-form menu: problem → solution, three to five benefits, how it works in three steps, proof, an FAQ of six to twelve real objections, the risk reversal, a final CTA identical to the top. A minimal page stays minimal; a comparison page leads with the comparison. **Conversion rules.** - A page behind an ad repeats the ad's promise and tone in the hero. - One primary CTA; nothing competes with it above the fold. - Benefit first and specific: "Cut weekly reporting from 4 hours to 15 minutes", never "save time". - Show the risk reversal the business offers (free plan, trial, no card, cancel anytime). Never invent one. - Proof sits beside the claim it supports. A high-friction offer moves the FAQ up. **The primary action works.** A real destination (supplied URL or form endpoint) and every state: invalid (inline error, input kept), pending (control disabled so it cannot submit twice, announced through `aria-live`), failure (what happened, input kept, retry) and success (what happens next). With no backend, simulate the states and say so in a code comment and your summary. **Copy.** A CTA is a verb plus what they get ("Start free trial"). Draft two or three headlines in the product's voice and keep the most specific one that names outcome and audience; "{outcome} without {pain}" is a test, not a template. **Indexing.** Record the publication decision; keep the site's policy when known. A page the user keeps out of search gets ``; an indexed page gets a real title and description, and its FAQ ships as FAQPage JSON-LD. **Build order.** One section at a time, top down; a refinement edits one section. ### Craft floor (every page) **Claims come from the user, never from you.** Testimonials, customer names and logos, results, uptime, prices and guarantees appear only when supplied. Missing proof: leave the slot out, or mark it `[Needs proof: …]` in the warning color so it cannot ship by accident. A believable invented claim is worse than an obvious placeholder. **Illustrative content looks real.** Sample data in product shots and UI (table rows, chart values, people in a demo inbox): - No placeholder people or brands (John Doe, Jane Doe, Acme, Nexus, SmartFlow); distinct avatars; varied dates. - No round sample numbers (99.99%, 50%, 1,000+ customers, 10x). In a claim, a round number signals it was made up: use the supplied figure or drop it. - No buzzwords: elevate, seamless, effortless, supercharge, streamline, revolutionize, unlock, empower, unleash, next-gen, game-changer, delve, tapestry, "in the world of". - Sentence-case headings. Errors say what happened and what to do, never "Oops!". No exclamation marks in success messages. **Ship floor.** Head tags apply to a full HTML document, not a component or fragment. Every full document has `