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

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.