Skip to content
How it works

Five steps, and the pick is yours

A project runs in order: its setup, the creative brief and mood board, then the SOW, PRD and brand kit. Then several distinct directions fan out from it, each one real HTML. You compare them on one wall and pick, and the gates check what ships.

  • Comps start only once the SOW, PRD and brand kit are drafted
  • 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
1

Start a project, and say what it is for

Project

A project has a name and a design type: an email, a static site, or a WordPress theme for self-hosted WordPress or WordPress.com. Then you write its creative brief and pin its references to a mood board.

  • The design type decides which steps the project goes through and which gates check it
  • Link a site, and name the client's current site address, both optional
  • Each version of the creative brief is kept, pinned by its hash

New project

projects: new

Sample
Project name
Home page
Design type
  • static
  • email
  • wordpress
  • wordpress-com
Site
Optional. None for this sample
Current site address
Optional. None for this sample
The fields of the app's New project form, filled in with a sample project.
2

Then several distinct directions fan out from the project

Directions

Comps start from the project's comps stage, and only once drafts of its SOW, PRD and brand kit exist: until then the server refuses, naming each missing step. 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
  • 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".

  • 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".

  • 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.
3

Compare them side by side on one wall

Wall

The wall shows the directions side by side: all together, the first two, or one alone. Each tile shows a still frame of its direction and plays it when you point at it, tab to it or press its Play, one tile at a time, and none plays if your browser asks for less motion. An email is a still comp, with nothing to play.

  • Switch between Grid, Duel and Solo
  • Point at a tile, tab to it or press its Play to see it move
  • Step through them one at a time in Solo

The wall

three sample directions, target static

Sample directions
Viewport
Clock0.0s
  • demo-analogous-rotate-split-hero-14d3static9 gatesPick
  • demo-high-contrast-breathe-centered-stack-9cc4static9 gatesPick
  • demo-pastel-drift-bento-84ddstatic9 gatesPick

Reject all

The wall's controls over the three sample directions, which run together on one clock here so you can see them move. On the real wall a tile plays when you point at it. Pick one to see what is kept.
4

You pick. A model never picks for you.

Pick

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 and steer.

  • 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. They tailor only your own next designs

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.
Not picked
demo-analogous-rotate-split-hero-14d3demo-pastel-drift-bento-84dd
The shape of a pick. The reason is optional, and this one is illustrative.
4

The approver signs off one look, and it is recorded

Client workAfter the pick

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 a client can do
commentvote up or downrecommend a changeapprove 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.
5

What ships is checked against its target's gates

Verify

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 in early access and not open yet.