The family doctrine pointed at a different failure (map: references/family-map.md — creative picks the direction; nuke-design carries the render-side build craft). Elsewhere cheap generation fails toward bugs; on UI it fails toward the default: the same centered hero, the same gradient, the same three-card grid every model produces when nobody forces divergence. So the protocol forces it — commit to a direction before code, ban the defaults by name, and put a fresh critic with a screenshot between the code and the word "done". Rendered output is the material under judgment; code review alone judges the wrong artifact.
Modes
Tier vocabulary and platform mechanics: references/model-tiers.md.
| light (default) | full | |
|---|---|---|
| Shape | in-session discipline — no preflight, no run_dir, like nuke-lean | preflighted ceremony with concept wave |
| Direction | the session writes the brief + ≥3 directions itself | 3 concept agents (session), assigned stances, one artifact each |
| Judge | the session picks, reason named in the brief | 1 judge (top) scores against the brief |
| Implementer | the session | worker+, loaded with the winning concept |
| Critic | 1 fresh agent (session) | fresh critic (top) |
| Critique cycles | cap 2 | cap 3 |
| Typical trigger | any UI task where look matters | "awwwards", "best you can do", flagship pages |
plan (full only) → run preflight, print the plan block, STOP. --ask → pause at the plan for confirmation; default is no gate — the plan prints and the run starts (references/preflight.md).
The brief — before any direction
Four lines, written down, never skipped: audience (who judges this), feel (2–3 adjectives the design must earn — "precise, fast, quietly confident"), one reference point (a real site, era, or aesthetic school — not "clean and modern"), constraints (brand tokens, existing design system, a11y level, performance budget). An existing design system or brand guideline caps divergence: the brief then targets the most distinctive design inside those tokens, and directions explore layout, motion, and hierarchy instead of palette and type.
Diverge — ≥3 directions, assigned stances
Before any code, ≥3 genuinely different directions, each committing to: type pairing (display + body, named) · palette (dominant + accent, values) · layout stance (what breaks the expected grid) · one signature element (the thing a viewer remembers). Directions are forced apart by assigned stances — pick 3 that fit the brief, e.g.: editorial (type-led, print rhythm) / brutalist (raw, high-contrast, exposed structure) / retro-futurist (a named era's futurism) / luxury (restraint, space, serif authority) / playful (shape-led, motion-led) / technical (data-dense, monospace, engineered). Two directions that differ only in accent color are one direction.
Pick one, name why in one line, and record the runner-up. The winner is a commitment: every later choice (spacing, motion, empty states) answers to it.
The anti-default gate — countable, checked before ship
The direction must clear every row. A row it cannot clear is a redesign, not a caveat:
- Type: neither font is Inter/Roboto/Open Sans/system-ui default (body may stay system only when the brief's constraints mandate it — then display must carry the identity).
- Palette: not the blue-purple gradient on dark navy; accent count ≤2; colors picked, not defaulted.
- Layout: at least one deliberate break from the centered-hero / three-card-grid template — asymmetry, overlap, diagonal flow, oversized type, unexpected density.
- Signature: the one memorable element exists and is nameable in a sentence.
- Cliché scan: no glassmorphism-because-default, no emoji-as-feature-icons, no placeholder "Lorem"-grade copy — microcopy is part of the design.
- Motion: if present, it has one concept applied consistently — not a pile of unrelated fade-ins;
prefers-reduced-motionrespected.
The floor — creativity never trades these
Non-negotiable, checked by the critic: WCAG contrast (AA unless the brief says otherwise) · visible focus states · real responsive behavior (mobile is a layout, not a shrink) · semantic HTML under the styling · performance sanity (no multi-MB hero assets, no layout thrash). A stunning direction that fails the floor is a failing direction.
Critique loop — before the word "done"
- Render it. Screenshot the result at desktop + mobile widths (browser tooling per the platform — Playwright-class skill, chrome-devtools, or the harness's screenshot tool). No rendering available → the critic reads the code and its verdict is marked
critic: static (degraded). - Fresh critic — never the authoring context. It receives the brief, the chosen direction, the anti-default gate, the floor, and the screenshots — not the author's reasoning. Charter, in order: does the render earn the brief's feel adjectives? does it clear every gate row? does it hold the floor? Verdict per item (
earned | missed, gate rowspass | fail), each with what to change — concrete ("the hero type is timid: 96px minimum at this layout"), never "polish it". - Fix and re-critique. Cap per the mode table. Cap hit → honest hand-back: what the design earns, what it still misses. Never "looks great" past a failed gate row.
Hand-back carries: the brief, the chosen direction + named reason, gate result, critic verdict per cycle, screenshots' paths.
Full mode — the ceremony
Read references/preflight.md; run its plan-then-apply gate (scope = the surfaces to design, brief inputs, the design-amplifier skill map per references/stack-adapters.md; run_dir = .nuke/<YYYY-MM-DD>-<HHmmss>-creative-<slug>/). Then:
- Brief as above, written to
brief.md— with the user, not for them: ambiguous feel or audience → ask, up to 3 questions. - Concept wave: 3 concept agents (session tier), each assigned a different stance from the diverge list, each producing a self-contained concept artifact (a static comp: one HTML file or equivalent) plus its direction sheet (type/palette/layout/signature). Concepts are throwaway by design — the deliverable is the direction, proven by a render.
- Judge (top): scores each concept against the brief's feel words, the gate, and the floor — evidence from the renders, never eloquence. Picks the winner; may transplant one named element from a loser. Dissent note recorded in
brief.md. - Implement the winning direction on the real stack (worker+ implementers; mapped stack skills and design amplifiers are mandatory loads).
- Critique loop as above, critic at top, cap 3. Artifacts (brief, direction sheets, screenshots, critic verdicts) live in the run_dir.
As a charter (loaded by other skills)
An implementer role in nuke-code, nuke-exec, or nuke-verify touching UI files loads this skill when the task is visual (new component, page, landing, restyle): it applies the brief (compressed to one line), one direction chosen from two, the anti-default gate, and the floor — no concept wave, and the engaged loop's own validator doubles as the critic, given the gate and the floor as extra charter rows. Pure logic changes inside UI files: the gate does not apply.
Rationalizations
| Excuse | Reality |
|---|---|
| "Clean and minimal is a style" | Unchosen minimal is the default wearing a compliment. Minimal chosen against a brief names its type, spacing scale, and signature. |
| "The gradient looks good" | It looks familiar — it is the median of the training set. The gate exists precisely because it feels good. |
| "No time for three directions" | Directions are sentences, not comps. Ten minutes of divergence is cheaper than one templated result. |
| "It passed the linter and renders fine" | Rendering is the entry ticket. The material under judgment is the screenshot against the brief. |
| "Users don't care about fonts" | They don't name the font; they feel the sameness. Distinctiveness is the brief's point. |
When NOT to apply
- Internal tools, admin CRUD, and dashboards where the brief is genuinely "fast and conventional" — there the design system IS the direction; consistency beats distinctiveness.
- A repo with a strict design system and the task is one more component inside it — follow the system; the gate would fight documented intent.
- Non-visual work in UI files (logic, data wiring) — nuke-code's ordinary loop governs.