R12Show the product working
Pro

Before and after artifact

Show the starting artifact, the changed artifact and the single action that did the work.

Back to page recipes

Section sequence

5sections, in the order the visitor meets them. Bar height is the section's weight in the page.

  1. OrientProblem state
  2. DemonstrateTransformation
  3. DemonstrateAfter state
  4. ProveWhat changed
  5. ConvertRun it on your input

How the page argues

  1. 1

    Show the before state as something recognizably bad but real.

  2. 2

    Show the transformation as one action, not as a pipeline diagram.

  3. 3

    Show the after state in the same frame and format as the before.

  4. 4

    Explain what changed and why it is better, in the domain's own terms.

  5. 5

    Invite the visitor to run it on their own input immediately.

What each section has to be

OrientProblem state
The before artifact, real enough to be uncomfortable — a genuine draft, error or mess.
DemonstrateTransformation
The one action that changes it, shown as an interaction rather than described.
DemonstrateAfter state
The result in the identical frame, format and zoom as the before, so the comparison is honest.
ProveWhat changed
Two or three specific differences named in domain language, plus what was deliberately left alone.
ConvertRun it on your input
An input surface accepting the visitor's own material, with the same before/after treatment.

Is this the right sequence?

Who it is for

Visitors who will believe a visible improvement instantly and doubt an adjective about quality forever.

Products it suits

Products with a visible transformation: text, code, design, data, media, an operational state.

Not for

Products whose improvement is statistical or long-run, where a staged pair would be a lie.

Evidence strategy

Which proof modes carry the page, in the order they land.

  1. Primary: the visible delta between two real artifacts.
  2. Secondary: the named changes, which show judgment rather than random editing.
  3. Tertiary: the visitor's own input, which converts a demo into a personal result.

CTA plan

What the page asks for, what it offers instead, and where.

Primary
Try it on your own file or text
Secondary
See more before-and-after pairs
Placement
Directly under the after state, while the improvement is still on screen.

Responsive behavior

What the sequence has to do when the viewport stops cooperating.

  • The pair switches from side-by-side to stacked with before first, plus a toggle to flip between them in place.
  • Diff highlighting stays legible at small sizes; never rely on colour alone to mark a change.
  • Long artifacts crop to the changed region rather than scaling the whole document.

Anti-patterns

The failure modes that make this sequence stop working.

  • A straw-man before state that nobody would ever have written.
  • Different framing, crop or zoom between before and after, which reads as a trick.
  • Claiming an improvement the visitor cannot see in the pair shown.
  • Hiding what the product left unchanged, which is where trust is actually won.

Build spec

Pro

What an agent needs in order to build Before and after artifact: what each section must contain, the copy rule that keeps it honest, the slots to resolve from your product, and the order to build in.

Checking access to the build spec

Agent tags

The vocabulary an agent matches this recipe on.

  • before-after
  • visible-delta
  • single-action
  • diff-callout
  • own-input-cta