nuke-design

Nuke Design

Born from a real failure: a landing page that passed every planned gate — anti-default fonts, sanctioned palette with measured AA ratios, one motion concept, artifact-authenticity rules — and still rendered as slop: a mangled wordmark, half a viewport of dead black, a "signature element" that was a table with circles in it, an idle-screen product shot. The reviewer gave it 7/10 because the checklist passed; the owner called it garbage; the owner was right. The doctrine gap: gates judge intentions; design lives in the render. Every instruction that page had was intention-side (bans, tokens, artifact rules, floors); every instruction it lacked was render-side (composition, scale tension, material, craft passes, looking at your own output). Family slot in one sentence: nuke-creative picks the destination, nuke-design builds the road, and its tell-walk checks you arrived. This skill never picks a direction and never re-bans a default — brief, direction, anti-default gate, and a11y/perf floor arrive from nuke-creative (standalone: compress each to one line and move on). Research base in references/craft-rules.md, references/composition-and-materials.md, and references/slop-science.md — Refactoring UI, Butterick, the interface-craft school, Linear/Raycast/Vercel teardowns, the 2025-26 slop-science literature; rules below carry their numbers. Family map: references/family-map.md.

The prime rule — build against pixels

Screenshot cadence is mandatory DURING build, not only at the end: after the skeleton, after each major surface, before hand-back — desktop 1440 and mobile 390, minimum. The single documented mechanism that turns competent output into designed output is iteration against rendered screenshots with a separate scored evaluator; self-evaluation by the author "confidently praises mediocre work", and advisory review ("check your output") is ignorable where a scored floor is not. No render tooling available → every verdict is marked craft: static (degraded) — never silently substitute code review for looking.

Calibration: score what a stranger sees, not the effort you know went in. Before saying any number ≥7, name the three worst things in the render out loud; if any would make a designer wince, the 7 was loyalty. And know the model's bias: unguided output already passes on craft-hygiene and functionality — it fails on originality and composition, so that is where the judgment budget goes.

The composition contract — countable, checked on your own screenshots

1. Eye path. The page's first 3 seconds are designed: trace headline → signature object → primary action with a finger on the screenshot; hesitation anywhere = the composition failed, not the styling. Elements specced individually but unrelated is the checklist disease — spec the relations.
2. Scale tension. Name the top-3 elements by rendered size; they must equal the top-3 by importance. Headline-to-body ratio ≥4:1. The signature object is the largest or brightest thing on screen and the chrome visibly recedes (nav ~55% ink, 14px). If everything could render "correct" and timid at once, this rule was skipped.
3. Asymmetry & overlap somewhere that matters. At least one of: the object cropped by the viewport/section edge (a cut-off object implies scale and invites scroll), type overlapping media by 10–20% of its height, a grid with one dominant cell (bento with unequal cells — never three equal cards). Overlap is the cheapest depth cue; perfectly contained boxes read templated. Negative space must POINT (the headline's rag and the object's edge form a diagonal toward the CTA) — whitespace points at something; void points at nothing. Crop test: crop the empty region — if nothing is lost, it was void.
4. Density arc. dense → breath → dense. A breath is one 40–56px statement with 160–240px padding, no cards. Thumbnail test: shrink the full-page screenshot; evenly-spaced stripes = no arc. Uniformity is THE meta-tell: any treatment repeated identically 3+ times (equal cards, equal section heights, same radius/shadow/padding on everything) reads generated in any palette.
5. Seams, not butt-joins. Sections hand off: an artifact bridging the boundary (margin-bottom: -6rem), a one-step background shift, or a running motif crossing the seam (hairline, dotted grid, tick marks). A running motif threaded through every section is the cheapest "brand system" on the page.
6. Built-form hierarchy. The most important action is the most built thing near it — a primary CTA as an underlined text link fails this by definition. Conversion points and brand moments get constructed form; everything else may be prose.
7. Spacing rhythm. One fixed scale (4/8/12/16/24/32/48/64/96), no invented in-betweens; space between groups ≥2× space within groups; heading margin-top ≥1.5× its margin-bottom; section gap ≥96px, breaths 2–3× that.
8. MAYA bound. Conventional skeleton, distinctive skin, one memorable move. Keep prototypical: nav placement, affordances, scannability (trust is judged in 50ms and prototypicality wins it). Spend novelty on: type voice, color voice, texture, rhythm, motion, the one signature moment. Unguided output sits at maximal typicality — but the fix overshooting into unfamiliar affordances is the same failure mirrored.

Material doctrine — surfaces, depth, and the signature as an object

• One surface system, declared once, obeyed everywhere: border weight, radius, shadow philosophy, texture — then no element freelances. One radius personality per page; one edge treatment per surface: hairline border XOR shadow elevation (the 1px-border-plus-diffuse-glow card is the loudest craft tell; the sanctioned hybrid is an inset hairline acting as the shadow's own edge: inset 0 1px 0 rgb(255 255 255/.06)).
• Dark themes get depth from surface steps, not shadows: canvas ≈ L10–12%, cards L17–20%, steps of 3–5 lightness points, each elevation = next surface + a border lighter than its surface (rgb(255 255 255/.08)), inset top highlight for the machined edge. Never #000 (blooming); tint the canvas toward the brand hue and let it fall off at the edges (radial vignette) so near-black reads as space, not a flat fill.
• Shadows are layered and hue-tinted: tight contact shadow + soft ambient (0 1px 2px .12, 0 8px 24px .08), tinted toward the background hue, one global light source (same offset ratio everywhere). Single fat blurs look puffy.
• Atmosphere lives in exactly ONE place — a blurred multi-stop radial wash or glow behind/below the hero, never repeated, never on buttons/cards/text. Grain overlay (SVG turbulence, opacity ≤ .06) kills banding and adds print materiality. Glass on at most 1–2 elements per screen, blur 8–16px + saturate(180%), only over content that can actually blur.
• The accent has a job description: neutrals carry ~97% of the page; the accent appears in ≤3 element types (mark, primary action, focus/emphasis); semantic colors only for status; greys tinted toward the brand hue; never literal grey text on a colored background — use the background's own hue darker/lighter.
• The signature is an object, not a layout. It gets material the rest of the page does not (its own border system, inner light, texture, weight), one physical interaction (something responds to the hand), and a size that declares importance. Test: screenshot it alone, cold — would anyone call it an object and remember it tomorrow? Still a table? The build is wrong or the direction is — escalate direction-level doubts to nuke-creative's owner, never quietly redesign.

Type craft at scale

• Display: weight 500–600 (700+ reads cheap at size), line-height 1.0–1.1, negative tracking scaling with size (≈ −0.02em at 40px → −0.035em at 60px+; stop before letterforms touch). Body: 16px floor, 1.5–1.7 leading, tracking ~0, measure ≤65ch. Caps/eyebrow labels: +5–12% tracking, one line max. Leading scales INVERSE to size.
• 2–3 sizes + 2–3 weights + 2–3 ink colors per screen; adjacent scale steps ≥1.25× apart or merged. Contrast inside one line (one word in italic/serif/muted/gradient) beats another size jump.
• text-wrap: balance on headings, pretty on body; no one-word orphan under a headline; font-variant-numeric: tabular-nums on anything numeric that stacks or updates; hover must never change font weight.
• Wordmark/ASCII lock rule (the pixels the mangled-wordmark failure lived in): character art renders on a fixed cell grid (hard px font-size and line-height, white-space: pre) and is sized ONLY via one transform: scale() — never via font-size/line-height responsive math; reserve its box with the scaled dimensions so layout never reflows it. If it must shrink below legibility, swap to a compact tier — never squeeze.

Proof art-direction

Choose the loudest honest moment BEFORE capture: the frame must show the product mid-performance — the thing the page claims, happening. An idle screen at 0:00 is a real capture and still proof of nothing. Never composite; always reselect or regenerate the moment. Real content everywhere — real copy, real numbers, real UI; juries literally score placeholder content as unfinished work, and real data is what forces non-template layout. The money shot is never lazy-loaded, hidden behind interaction, or below-the-fold-only: screenshot the page the way a crawler sees it — the argument must survive.

The craft pass — last, zoomed in, refine-don't-add

One final sweep at zoom over exactly: marks and character art, text wraps (no mid-URL breaks, no orphans), optical alignment (icons nudged to visual center, hanging punctuation, equal-looking gaps), stray fragments and unfinished corners, loading/empty/error states, ::selection, focus rings. Nothing new is added in this pass. Named output line, always emitted:

craft pass: 3 fixes — wordmark grid-lock, hero rag, YAML frame alignment

or craft pass: clean. A hand-back without the line skipped the pass.

Verification — the tell walk

Judge SCREENSHOTS (desktop 1440, mobile 390, full-page — current build), never code or intentions. Walk all eleven; every hit named as tell #N — location — one-line evidence — concrete fix:

1. Broken craft — mangled marks, mid-URL breaks, stray fragments, misalignment. Anything accidental-looking. A hit on brand mark or hero caps the score at 4/10.
2. Void space — emptiness that points at nothing (crop test).
3. Compliance render — everything specced exists, nothing composes (finger test hesitates).
4. Signature that isn't — the memorable object renders as a default-styled layout (cold-screenshot test).
5. Proof of nothing — idle-moment captures, trivial demos.
6. Timid accents — squint: zero hot spots is timid, four+ is spam; exactly 1–2.
7. Text where a component belongs — unbuilt CTAs, bare-anchor footers.
8. Uniform density — thumbnail reads as stripes; any identical treatment ×3.
9. Self-contradiction — numbers/labels/claims disagreeing with the artifacts beside them.
10. Hidden money shot — the argument invisible to crawler/preview/first paint.
11. Distribution-center styling — the statistical-average look regardless of tokens: centered-everything, eyebrow-pill hero, icon-in-tinted-tile grids, purple-blue gradient family, rounded-2xl shadow-lg uniformity, emoji icons, "Empower/Seamless/Supercharge" copy. (nuke-creative bans these by name up front; here they are caught in the render, including second-generation variants — ghost index numbers, overline+big-stat cards — via rule 8's uniformity test.)

Caps: floor violation (horizontal scroll, contrast fail, keyboard trap) → max 5/10. Three+ distinct tells → max 6/10. Scoring is binding, not advisory: fix and re-walk until clean or the cycle cap from the engaged loop is hit — then an honest hand-back of what stands and what doesn't. Anchor sentences: 9–10 a designer would sign it · 7–8 shippable, tweaks not redos · 5–6 structure right, craft missing · 3–4 reads generated, recompose don't patch · 1–2 broken.

As a charter (loaded by other skills)

Implementer roles in nuke-creative/nuke-code/nuke-exec touching visual surfaces load the build half whole (prime rule → craft pass) and self-walk the tells on their own screenshots before hand-back — a hand-back without screenshots and the two output lines (craft pass: … + tell-walk result) skipped both. Fresh critics in nuke-creative's critique loop load the verification half as their charter: the tells, the caps, the stranger calibration, and the name-three-worst rule — the critic grades the render, not the gate table (a critic whose verdict rows mirror the spec's gate rows has been captured by the checklist). Direction-level failures (the signature concept itself is wrong, the palette can't carry the feel) route to nuke-creative's owner — never patched silently at the craft layer.

Rationalizations

Excuse	Reality
"Every token and gate row passes"	Gates judge intentions. The render is the deliverable. Walk the tells.
"Every specced element exists"	Existence isn't composition. Trace the eye path; name the top-3 by size vs importance.
"The critique loop will catch it at the end"	Rendering is a working method, not a gate. You look at every surface as you build it.
"Whitespace is intentional minimalism"	Whitespace points at something. Crop it — if nothing is lost, it pointed at nothing.
"It's a real screenshot"	Real and idle. Proof shows the product mid-performance or it proves nothing.
"It just needs polish"	Tells 2/3/8/11 are compositional — no token change cures them. Recompose, then polish tell 1.
"The effort deserves a 7"	The stranger doesn't see effort. Three worst things out loud first.

When NOT to apply

• Wireframes and deliberate lo-fi prototypes — the tells assume shipping intent.
• One more component inside a strict design system — the system IS the design; judge compliance instead (and nuke-lean governs the diff).
• Direction not yet chosen — that is nuke-creative's territory; this skill starts where the direction sheet ends.
• Non-visual work in UI files — nuke-code's ordinary loop governs.