How it works

Five steps, and the pick is yours

One brief fans out into several distinct directions, each one real HTML. You compare them on one wall and pick. Then the gates check what ships, and say what they could not check.

  • Several distinct directions from one brief, each one real HTML
  • You pick. A model never picks for you
  • Checked against its target's gates: 13 for an email, 9 for a static site
  • What a gate could not check is written down
1Brief

Say what you want built, and for which target

A brief is a subject and a few sentences in plain words. You choose the target: an email, a static site, or a WordPress theme for self-hosted WordPress or WordPress.com.

  • The target sets which gates the result is checked against
  • The subject can be a route, a component folder, a URL or a name
  • Name a live site, and it is read into the brief before the review is stored

New review

the fields the app asks for

sample
Target
  • static
  • email
  • wordpress
  • wordpress-com
Subject
Home page
Brief
A home page for a design review app
Site to scout
Optional. None for this brief
The fields of the app's New review form, filled in with the brief the sample directions below were made for.
2Directions

One brief fans out into several distinct directions

Not one result you keep regenerating. You choose how many to generate, and each direction is given its own lane: for a static site, a palette, a motion and a layout. Each one is real HTML, not a picture of one.

  • A deterministic referee turns away any direction too close to another
  • Each one is served sandboxed from a preview host apart from the app; its policy refuses every fetch and form post, and it sets no cookie
  • Steer one with a short note, and a new direction forks from it

Directions

three sample directions, target static

sample directions
  • A still of a sample direction: demo-analogous-rotate-split-hero-14d3

    demo-analogous-rotate-split-hero-14d3

    • analogous palette
    • rotate motion
    • split-hero layout

    A stand-in direction built from analogous palette, rotate motion, split-hero layout, for "A home page for a design review app".

  • A still of a sample direction: demo-high-contrast-breathe-centered-stack-9cc4

    demo-high-contrast-breathe-centered-stack-9cc4

    • high-contrast palette
    • breathe motion
    • centered-stack layout

    A stand-in direction built from high-contrast palette, breathe motion, centered-stack layout, for "A home page for a design review app".

  • A still of a sample direction: demo-pastel-drift-bento-84dd

    demo-pastel-drift-bento-84dd

    • pastel palette
    • drift motion
    • bento layout

    A stand-in direction built from pastel palette, drift motion, bento layout, for "A home page for a design review app".

Three sample directions, rendered from a retired offline template with lanes chosen by hand. Not lanes the engine assigned, and not the work of a model.
3Wall

Compare them side by side on one wall

The wall shows the directions side by side: all together, the first two, or one alone. For a page that moves, one shared clock can drive every tile the wall runs live, and a direction built to follow it plays in step.

  • Switch between Grid, Duel and Solo
  • Pause, restart or scrub the wall's shared clock
  • Onion-skin two directions to see how they differ

The wall

three sample directions, target static

sample directions
  • A still of a sample direction: demo-analogous-rotate-split-hero-14d3
    demo-analogous-rotate-split-hero-14d3
  • A still of a sample direction: demo-high-contrast-breathe-centered-stack-9cc4
    demo-high-contrast-breathe-centered-stack-9cc4
  • A still of a sample direction: demo-pastel-drift-bento-84dd
    demo-pastel-drift-bento-84dd
Stills of the three sample directions, each held at one frame. On the real wall, the tiles it runs live are the directions themselves, in sandboxed frames.
4Pick

You pick. A model never picks for you.

Only your pick is the label. Say why in a sentence if you like, and it is kept with the pick. If none of them is right, reject them all, or steer one with a note.

  • Your reason, if you give one, is kept with the pick
  • Reject all is an answer too, and it is recorded
  • Nothing trains on your picks

Pick recorded

kept with the review

sample record
Outcome
picked
Direction
demo-high-contrast-breathe-centered-stack-9cc4
Why
Calm, and the type carries it.
Also offered
demo-analogous-rotate-split-hero-14d3demo-pastel-drift-bento-84dd
The shape of a pick. The reason is optional, and this one is illustrative.
Client workClient sign-off

The approver signs off one look, and it is recorded

Client review is built in the API today. Publish a round of directions, invite your client with a single-use token, and they comment, vote and recommend changes. Their signatory, or someone they designate, approves one direction of the round. The client's own screens, and sending the invite, are not built yet.

  • The approval pins the exact HTML by its sha256
  • It records which account approved, on what basis, and when
  • Append-only: one approval per direction per round, and a second is refused

Approval

append-only, one per direction per round

sample record

What happens in a round

  • comment
  • vote up or down
  • recommend a change
  • approve a look
Approved by
A client, the signatory (illustrative)
Basis
signatory
When
2026-10-06 14:32 UTC
Round
2
Direction
demo-high-contrast-breathe-centered-stack-9cc4
sha256
e3f1a9c0b7d24e6f8a1c5b9d0e7f2a4c6b8d1e3f5a7c9b0d2e4f6a8c1b3d5e7f
Note
This one. Keep the type as it is.
The shape of an approval as the API stores it. Every value here is illustrative.
5Verify

What ships is checked against its target's gates

The pick is finalized into its target and run through that target's gates: 13 for an email, 9 for a static site. Each gate passes, fails, or says it could not measure, and why.

  • A gate that cannot measure is never counted as a pass
  • Every reason is written next to its gate
  • For a static site, the page on the wall is the page that ships

Verify: email

every email gate, in the order it runs

incomplete
  • email.sizepass
  • email.no-script-or-externalpass
  • email.inline-stylespass
  • email.table-layoutpass
  • email.imagespass
  • email.widthpass
  • email.preheaderpass
  • email.dark-modepass
  • email.compliance-footerpass
  • email.tokens-only-colorspass
  • email.plain-textpass
  • email.chromium-renderpass
  • email.client-rendercould not measure

    Outlook (Word engine), Gmail and Apple Mail rendering cannot be reproduced locally. Check the email in real clients, or a rendering service, before it is sent.

Not a recorded run: the best an email can do. When the 12 gates that can run locally pass, email.client-render still cannot measure, so the verdict is incomplete.
The honesty rule

A gate that cannot measure never passes

Every gate reports what it found, and why. A gate that could not check is never counted as a pass: when nothing failed, the verdict is incomplete. Outlook cannot be rendered locally, so the best an email can get is incomplete, and Nucleus says so rather than calling it a pass.

  • pass

    The gate measured, and what ships met it.

  • fail

    The gate found a problem in what ships, or the page hung or ran out of memory as it rendered. The reason is next to it.

  • could not measure

    The gate could not check. It never counts as a pass: when nothing failed, the verdict is incomplete.

Bring a brief when Nucleus opens

Nucleus is not open yet.