# Nuke Design > Use when a UI must not just pass its checklist but actually look designed — building any landing, marketing page, or visual surface after a direction is chosen, or judging a render that "passes every gate but looks generated" — "this looks AI-generated", "make it actually beautiful", a post-build design review, or any moment a score above 6/10 is about to be given to a render nobody screenshotted. Also loadable as a charter by implementer roles in nuke-creative/nuke-code/nuke-exec (build half) and by fresh critics (verification half). Triggers: "nuke design", "anti-slop design", "design pass". - Skill: `b4r7x/nuke-design` (Agent Skill, multi-file: 5 files) - Install (CLI): `npx skillmds@latest add b4r7x/nuke-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/b4r7x/nuke-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: b4r7x (https://skillmd.com/u/b4r7x) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/b4r7x/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.