advertorial-builder

name	advertorial-builder
description	Build high-converting, education-first advertorial / "infomercial" landing pages for ecommerce products — long-form scrollable HTML that warms cold paid traffic and clicks through to the product page. Covers angle selection, direct-response copy doctrine, AI image generation with a product reference, a premium anti-slop design system, and a portable build/QA convention. Use for advertorials, pre-sell pages, native/listicle ad landers, VSL pages, or any "read-an-article-then-buy" funnel page.
tier	specialized
universal	true
canon_references	["schwartz-breakthrough-advertising","whitman-cashvertising","hopkins-scientific-advertising","cialdini-influence","miller-storybrand","hormozi-value-equation","dunford-positioning"]
canon_source	brain/MARKETING_CANON.md
dependencies	["image-generation","frontend-design"]
related_assets	["brain/WRITING.md","brain/clients/<brand>.md","scripts/generate_blyss_assets.py"]
triggers	["build an advertorial","advertorial landing page","pre-sell page","infomercial page","VSL landing page","native ad lander","make a sales page for an ecom product","listicle ad page","build a funnel page for paid traffic"]
note	Brand-agnostic. Per-brand facts/voice live in brain/clients/<brand>.md. Designed to extract cleanly into a standalone ecom-copywriting agent — see § Extraction.

SKILL: Advertorial Builder

Turn a cold ad click into a warm buyer with a long-form, education-first page that teaches something true, moves the reader emotionally, proves the product, and ends with one clear click to the product page. Reads like a great article, converts like a great offer.

An advertorial is not a product page and not a hard-sell. It's the bridge a media buyer runs paid traffic to: the visitor lands, learns (the real "why" behind the problem), feels (their life, not the bottle), trusts (proof, transparency, faces), then clicks out to buy. If it feels like an ad, it's failing.

---

STEP 0 — Inputs (gather before writing a word)

1. Brand profile — read brain/clients/<brand>.md. If none exists, create it first (voice, palette, product facts, audience, compliance). This is non-negotiable; writing without it is guesswork ([[WRITING]] pre-flight).
2. Product truth — exact name, what it physically is, price, variants, the real claims (only claim what's verifiable), how it's used, the ingredients/mechanism. Pull from the live product page (<store>/products/<handle>.json on Shopify gives title, variants, images).
3. A clean product photo — used as the image-generation reference so the product stays identical across every shot, and used directly for clean product-on-white shots.
4. Factual basis — research the real science/facts behind the problem so the educational sections are true, not invented. Cite reputable sources internally (EPA, EWG, peer-reviewed, category authorities). Truth converts and protects the brand.
5. Destination URL — the product page every CTA links to.

STEP 1 — Choose the angles (one advertorial per angle)

Different buyers are at different awareness levels (Schwartz) and want different core desires (Cashvertising LF8: survival/health, comfort, freedom-from-fear, social approval, care of loved ones, sensory pleasure). One page can't serve all — so build several, each a clean A/B-testable "big idea":

• Pick 3 angles that hit different desires + different awareness levels. e.g. sensory/aspiration (problem-unaware), mechanism/education (problem-aware), safety/protection (solution-aware).
• Name the audience and the one emotion per angle. "For everyone" = for no one (Godin).
• Headline test: does it promise a specific outcome or reveal a surprising truth? Generic = dead on arrival.

STEP 2 — The advertorial anatomy (the reusable spine)

Mobile-first single scroll. Each angle reorders emphasis but keeps the spine:

1. Trust bar + sticky header — brand wordmark; slim trust line (shipping/guarantee/social proof); a CTA that scrolls to the offer.
2. Hero "infomercial" — editorial headline + dek, a scrollytelling visual stage (parallax product-in-scene, caption ticker, crossfading B-roll) and a styled video frame (poster + play affordance) that doubles as a slot for a real VSL later. One primary CTA.
3. Hook / story — emotional opener in the reader's world (first-person or editorial). Earn the scroll.
4. Problem & root cause (EDUCATION) — teach the genuine "why." This is the heart. Make them smarter; don't sell yet.
5. The shift — introduce the product as the guide (StoryBrand: reader is the hero), explain the mechanism simply.
6. How it works — 3 steps, visual, frictionless (Hormozi: lower effort + time).
7. What's inside / what we leave out — transparency builds authority (Cialdini).
8. Sensory / benefit module — make the payoff tangible (scents, textures, the feeling).
9. Results — before/after imagery + an honest, specific stat band.
10. Reviews — 3–5 testimonial cards with faces, names, stars, specifics (proof > adjectives).
11. Comparison — product vs. the ordinary alternative (table).
12. Credibility — formulation/safety/standards, founder or expert note.
13. Risk reversal — guarantee / easy returns (lowers perceived risk → raises likelihood).
14. FAQ — accordion of real objections answered plainly.
15. Final CTA — restate the dream outcome, one big button to the product page.
16. Footer — wordmark, slim disclaimer, minimal nav.

STEP 3 — Copy doctrine

• Educate, don't sell (Hopkins/Schwartz). Lead with the problem and the mechanism, not the product. The reader should learn something they could repeat at dinner.
• Specific beats clever. Real numbers, real sensory detail, the reader's own words. "Floors that feel sticky an hour after you mop" > "amazing clean."
• Value Equation (Hormozi) in every section: raise dream outcome + perceived likelihood, lower time + effort.
• One idea per section. If a sentence can be deleted and the meaning survives, delete it.
• Anti-slop bar (auto-reject): "Unlock the power of…", "In today's world…", "It's worth noting…", "game-changer / next-level / seamless / elevate", 5-bullet padding, passive voice dodging a claim, "This isn't just X, it's Y." (Full list: [[WRITING]] § Anti-Slop.)
• Voice = the brand file. Match register exactly.
• Length: ~1,500–2,500 words of copy that earns its place.
• End each build's internal brief with the canon-citation block ([[WRITING]]).

STEP 4 — Imagery (AI, art-directed PER BUILD)

• Use Nano Banana (gemini-2.5-flash-image) per [[image-generation/SKILL]]. For any shot where the product appears, pass the real product photo as an inline reference image so the bottle/label stays identical (see scripts/generate_blyss_assets.py as the template — ref=True attaches the reference).
• Each build gets its OWN art direction — a distinct photographic treatment (warm golden-hour film / clean high-key studio / moody low-key editorial / bright airy daylight / graphic flat-lay) baked into every prompt: lighting, palette, lens, mood, composition. Never reuse a generated image across two builds — it's the fastest route to identical-looking pages.
• Build a per-build manifest: hero, the build's signature module image(s), process/how-to shots, before/after or still-life as the angle needs, 3–4 reviewer portraits.
• Use the real product PNG directly for clean product-on-white shots (most accurate, free).
• Image anti-slop: photographic not CGI/3D-render; natural light; real skin texture on people; no text overlays; no purple/blue gradients; no stocky grins. Borrow the render + psychology specs from [[image-generation/SKILL]].
• Optimize for web (resize ≤~1280px, webp) and store at each build's assets/img/ with relative paths (portability).

STEP 5 — Design DIVERGENCE (non-negotiable) + the anti-slop bar

The #1 failure mode of an advertorial agent is sameness: N builds that are one template recolored — same layout, same section order, same reused images. If a viewer lays two builds side by side and they look like the same site, you have FAILED. It screams "an AI churned these out," which destroys the exact trust the page exists to build. Each build must look like a different studio made it.

Every build must diverge on ALL of these — not just the accent color:

1. Layout archetype — a different one per build (library below). Never repeat section structures or card styles across builds.
2. Type system — a different display + body pairing per build (editorial serif vs. grotesque-display vs. condensed gothic vs. humanist sans vs. mono-accent). Self-host woff2 for portability.
3. Color world — different background tone, ink color, contrast level and surface treatment — not one palette with the accent swapped.
4. Section order & composition — lead with different sections; vary full-bleed vs. boxed, asymmetric vs. centered, single- vs. multi-column, dense vs. airy.
5. Motion signature — a different reveal / parallax / transition feel per build.
6. Image art-direction — distinct per build (see STEP 4); no image is shared between builds.

Layout archetype library — assign a DIFFERENT one to each build:

• Editorial magazine — big serif heads, drop-caps, asymmetric pull-quotes, narrow text column, photo-essay rhythm.
• Bold claim / poster — oversized condensed type, high-contrast color blocks, full-bleed stat slabs, minimal chrome.
• Story scroll / cinematic — sticky media stage, text overlaying on scroll, sequential reveal.
• Comparison / explainer / "lab" — diagram-forward, annotated visuals, tables, data aesthetic.
• UGC / social-proof-led — reviews + faces up top, feed/screenshot textures, casual and trust-heavy.
• Lookbook / sensory — large imagery, minimal text, tactile swatches/chips, gallery feel.

Hold the anti-slop bar inside whichever archetype you pick (see [[frontend-design]]): no purple/blue gradients, no generic 3-icon grids, no centered-everything; generous whitespace; mobile-first (~90% of paid traffic), 60–75ch measure, big tap targets, sticky CTA.

Litmus test before shipping: screenshot every build and lay them side by side. If swapping one stylesheet's color variable would make them interchangeable, throw them out and start over.

STEP 6 — Build & output convention (portable)

output/advertorials/<brand>/
├── README.md                 # the builds; what's illustrative; how to swap real proof; how to host
├── 01-<angle>/index.html  + assets/{img,fonts,css,js}
├── 02-<angle>/index.html  + assets/{...}
└── 03-<angle>/index.html  + assets/{...}

Each folder is self-contained (relative assets, self-hosted fonts) so it opens from file:// and can be handed off or hosted anywhere. Optionally also emit a single-file base64-inlined .html per build for email-portability.

Each build carries its OWN css/js expressing its own design language — do NOT route all builds through a single shared stylesheet (that is precisely what produces the §5 sameness failure). A _shared/ baseline, if used, may hold only brand-universal tokens (logo glyph, legal footer copy) — never the layout, type scale, or section components.

STEP 7 — QA checklist (all must pass)

• Divergence (§5 litmus): the builds laid side by side look like different studios made them — different layout, type, color world, section order, motion, and imagery. No shared images.
• Headline promises a specific outcome / reveals a true surprise.
• Educational sections are factually correct (sources noted).
• Passes the anti-slop bar (copy + UI).
• Brand voice matches the brand file.
• Every CTA href = the real product page; opens correctly.
• Motion fires; FAQ accordion works; mobile layout clean at 390px.
• Opens from file:// with no network (fonts/images resolve).
• Compliance rails checked (below).
• Independent audit (e.g. Codex) of copy + structure before shipping a user-facing build.

Compliance / honesty rails

• Claim only what the product facts support. No medical/health cure claims — educate on the category problem, position the product as the better choice.
• Category statistics (e.g. "conventional cleaners emit X") describe the category, not a test of this product — attribute to the real source.
• Stat bands, review counts, testimonials, reviewer portraits, and guarantees are illustrative/representative unless the brand supplies real ones — flag this in the README and instruct the owner to swap real proof before live traffic.
• Synthetic reviewer portraits are representative, not real customers — disclose if required.
• If the page isn't officially the brand's, carry an editable "independent informational page" footer line.

Iteration 2 — the metrics loop (roadmap)

The advertorial is creative input to a learning loop: deploy → drive paid traffic (Meta/Google) → pull performance (CTR, CVR, CPA, scroll depth, click-out rate per section) → identify the winning angle/section → write the next brief from what converted. Wire via the brand's ad + Shopify connectors. Build this once advertorials are validating.

Extraction — turning this into a standalone ecom agent

To hand a client/buyer their own agent, copy into a fresh repo and scrub:

• Copy: this skill, [[image-generation/SKILL]], [[frontend-design]], the relevant brain/canon/ files, brain/WRITING.md, the image build script, the brain/clients/<brand>.md template (blank).
• Scrub (never ship): other clients' profiles, your .env.agents / credentials, personal-brand voice, cross-agent/empire orchestration, internal state. The buyer brings their own product page, brand file, and API keys (GEMINI for images; their own ad/store creds).
• Give it its own entry point + identity. That scrubbed repo is the product.