---
name: conversion-design
description: "Use when someone asks how to structure a landing page, product homepage, pricing page, or acquisition flow so a qualified visitor understands the offer and can act. Produces information architecture and structural specifications for a conversion surface. Use `content-design` for its message hierarchy and `copy-direction` for its copy goals; use `user-flow` and `interaction-design` for product UI. Go-to-market strategy belongs upstream; shaping the acquisition initiative belongs to `frame-intent`; writing final copy or building the page is not this skill's job."
---

# Skill: conversion-design

Converts the content brief and design-principles artefact into a **structural specification for a marketing surface** — the above-fold contract, the scroll story, and the social-proof architecture that carries a visitor from "not sure" to "ready to act." This skill is IA and structure; it does not write copy (that is `content-design` for section structure and `copy-direction` for per-surface copy voice and goals; `tone-of-voice` defines the brand-level register that `copy-direction` grounds against) and does not derive tokens or color (that is `design-system` and `creative-direction`).

## Output rendering

Table — When presenting several items that share the same fields, render a Markdown table. Cap at ~5 columns; beyond that, switch to a per-item detail list. Right-align numeric columns.

## When to invoke

Confirm all three before specifying:

1. **The surface goal is acquisition or conversion** — the primary measure is whether a visitor takes a defined next action (trial, sign-up, purchase, demo request). If the primary goal is informational, use `informational-design`.
2. **A content brief exists or can be elicited** — `content-design` defines what each section must accomplish; conversion-design defines where each section sits and what the visitor's eye should hit first.
3. **Design principles exist** — the principles arbitrate structural choices (which hero type, which proof tier) so decisions are grounded, not gut-feel.

## Hero approach selection (5 types)

Choose one hero type based on the product's awareness stage and the dominant buyer psychology:

1. **Statement hero** — leads with a conviction statement the reader immediately agrees or disagrees with. Best when product category is understood; awareness is medium-high. Risk: vague statements read as noise.
2. **Problem-agitation hero** — leads with the reader's pain, amplified. Best when awareness is low and the category needs creating. Risk: must name a pain the reader actually feels, not the pain the company imagines.
3. **Social-proof hero** — leads with a credibility signal (customer count, recognizable logo wall, compelling testimonial). Best when the product is in a crowded category and trust is the primary objection.
4. **Demo-first hero** — leads with a live or animated product demo. Best when the product's interface IS the differentiator and seeing beats reading. Risk: requires the product to be visually legible without context.
5. **Narrative hero** — leads with a story or scenario the reader recognizes as their situation. Best for complex products where the category is unfamiliar or the use case requires imagination.

**IC-first principle:** whichever hero type is chosen, the reader's identified pain, goal, or situation must appear before the product's name or features. A hero that opens with the product's name fails the IC-first check.

## Above-fold 6-element spec

The above-fold zone carries exactly these six elements; their absence or conflation is a structural finding:

1. **Headline (≤10 words)** — the conviction statement; what the product does and for whom, in reader-benefit language.
2. **Subheadline** — one sentence expanding the headline: the mechanism or proof that makes the headline believable.
3. **Primary CTA** — one action, one label, one next state. Label names the reader's outcome, not the system's action ("Start building" not "Submit").
4. **Secondary CTA** — the lower-commitment option (watch a demo, see pricing, read a case study). Present only if the primary CTA asks for meaningful commitment.
5. **Proof signal** — one credibility element visible without scrolling: a recognizable customer logo, a specific number (not "thousands"), or a third-party rating.
6. **Friction microcopy** — one line that removes the dominant objection to clicking the primary CTA ("No credit card required" / "Cancel anytime" / "Takes 2 minutes").

## Scroll story — 7-zone structure

Each zone has exactly one job; assign content to zones before designing sections:

| Zone | Job |
|------|-----|
| 1. Above fold | Conviction + CTA (the 6-element spec above) |
| 2. Problem amplification | Name the cost of not solving the problem |
| 3. Solution fit | Show how the product solves specifically for the declared audience |
| 4. Proof | Social proof at the appropriate tier for the product's maturity stage (see Social proof hierarchy) |
| 5. How it works | Remove the "but how does it actually work" objection — process, not feature list |
| 6. Objection handling | Address the dominant objections before the CTA repeats |
| 7. Bottom CTA | Repeat the primary CTA for visitors who scrolled; add any final urgency or risk-reversal |

**One-job-per-zone rule:** a zone that does two jobs (proof AND objection handling) dilutes both. If content doesn't fit one zone's job, it needs its own zone or it is cut.

## Social proof hierarchy — by maturity stage

Tier the social-proof selection to the product's market maturity:

| Maturity stage | Primary proof tier | Secondary |
|----------------|-------------------|-----------|
| Pre-PMF / early | Specific outcomes from beta users; named case study; founder credibility | Number of users (if non-trivial) |
| Growth | Customer logos (recognizable in category); quantified outcomes | Press mentions in respected outlets |
| Scale | Analyst recognition; industry certifications; customer count with specificity | Net Promoter Score (if exceptional) |

Higher-tier proof on a lower-maturity product reads as fabricated. Match the tier to the actual stage.

## Numbered product tour spine

When a product tour section is warranted (zone 5), structure it as a numbered spine:

1. **Trigger** — what event or decision point causes the user to turn to this product?
2. **First action** — what does the user do first?
3. **Intermediate result** — what do they see after the first action that confirms they're on track?
4. **Primary outcome** — what does the finished state look like?

Each step names the product capability serving it; none reprints UI labels. The spine reveals the workflow, not the feature list.

## Canonical aesthetic reference tier (study subjects, not prescriptive tools)

For grounding creative-direction on a marketing surface, study how these sites handle conversion structure: Evil Martians (developer tools aesthetic), Linear (enterprise SaaS clarity), Vercel (demo-first product confidence). Internalize the structural philosophy — information hierarchy, proof placement, CTA legibility — not the surface treatment.

## Editorial quality gate

Before the structural specification is complete, run both passes against the above-fold spec and scroll story. Load `references/editorial-quality-gates.md`.

**Deletion pass.** Assume the specification is 30% too long. Work through the 10 deletion questions against the above-fold contract and each zone of the scroll story. Remove from the specification anything that does not increase the reader's understanding, desire, credibility, differentiation, or intent to act.

**Human copy tests.** Run all four tests and record which passed and which raised a concern in the specification output:
- **5-second test** — after 5 seconds on the above-fold spec, can a reader answer all six questions (what is this / who is it for / why care / why different / why believe / what next)?
- **Specificity test** — could any section of the above-fold contract be pasted onto another company's landing page unchanged? If yes, it is not yet specific enough.
- **Point-of-view test** — does the copy have a clear opinion about the problem, the status quo, and why current approaches fail?
- **Distinctiveness test** — does this read as a specific human with something specific to say, or as an AI explaining a category?

The structural specification output must include a one-line gate summary: which tests passed, which raised a concern.

## Anti-patterns to refuse

- **Feature-list hero.** Lists of features above the fold are not a conviction statement; they assume the reader already cares. Move features to zone 3 (solution fit) where they answer a question the reader now has.
- **"We" language in the headline.** "We help companies do X" centers the company. "Do X faster" centers the reader. The headline belongs to the reader.
- **Proof without specificity.** "Trusted by thousands of teams" is noise. "Used by 12,000 engineering teams at Shopify, Stripe, and Notion" is proof. Specificity is the signal; vagueness is the absence of proof.
- **Above-fold without friction microcopy.** If the primary CTA asks for commitment (sign-up, trial, purchase) and there is no risk-reversal line, the dominant objection ("what am I committing to?") is unhandled.