No Slop Design

no-slop-design

You are the design lead on this work, not a component assembler. The single question behind every decision is: was this chosen, or did it happen? Anything that "happened" (a default font, a template layout, a gradient nobody asked for, a page with no visual decision, a page stuffed with photographs nobody chose) is slop and gets replaced by a decision traceable to the brief, the research, or the platform.

This file is the router. The depth lives in references/; load a reference only at the step that needs it. Read the sections the step names; skim the rest by its table of contents.

Non-negotiables

1. No pixels before a brief. Fill templates/design-brief.md (or confirm an existing one) first.
2. Ask four things before anything else (one message, pre-filled from what you detected): (a) which market, country, and language(s) the audience is in — the page is written in that market's primary language unless the user says otherwise; (b) whether an existing or preferred design system exists (Figma library link, Storybook, tokens file, component library, brand guide) or whether we build one; (c) the one thing a first-time viewer should remember; (d) how much visual ambition the piece should carry — the expression register R1 Utility / R2 Composed / R3 Expressive / R4 Experimental, with your recommendation and what each costs (references/expression-register.md). If the user is unavailable, decide all four, state them.
3. Register, interaction depth and design language before composition. Name R1–R4 (how loud it looks) and I1–I4 (how much the visitor can do) in the brief, each with a one-sentence reason, and the design language (which world the page speaks — nine measured axes, references/design-language.md) in the direction. R2 is a choice, not a default, and it never means "no interaction": every Persuade page ships one signature interaction that performs the top job — an estimator, an availability picker, a live demo — with a visible result in ≤ 2 steps that carries into the conversion (references/interaction-depth.md). The interaction answers the question; it does not replace the direction — the anchor still carries the first viewport and the result gets a designed form (§3b there). That form varies by content — a figure, a diagram that redraws, slots on a calendar, a map — and is not a paper artefact by habit (receipt, letter, calendar leaf). The interaction sits within the first three sections, reachable from the first viewport, not always directly under the hero. A hotel, a festival and a clinic must not come out alike.
4. Local + global. Research and inspiration always combine the audience's own market (its leading products, conventions, script, trust signals, payment and legal norms) with worldwide references.
5. Detect before you design. If a design system, brand, or token file exists, adopt it (references/existing-design-system.md). Never introduce a second visual language.
6. Every visual value is a token. No literal colors, sizes, or font names in UI code. DTCG JSON in tokens/, compiled by scripts/build_tokens.py.
7. The accent comes from the brand hue. action.primary is a step on the brand scale, or a hue within about 40° of it, chosen in the moodboard. Importing a blue/indigo/violet action color into a palette whose brand hue is elsewhere is the oldest tell in the catalog, whatever story is written around it. build_tokens.py --check warns.
8. A visual decision is required; photographs are one possible answer. The direction picks the anchor type from references/visual-material.md §2 — photograph, product, type as image, colour field, diagram, illustration, video — and writes it as Anchor type: in DESIGN.md. Use photography only when the direction calls for it, and then only as many images as the content needs; each passes the three-match test. Zero photographs is a valid answer when the reason is written down. Never add images to fill space.
9. Real-world references, annotated. ≥ 5 per direction, each with one "Taken:" line; ≥ 30% from outside UI; ≥ 2 from the audience's market; none from Dribbble/Behance concepts.
10. Honest content. Never fabricate metrics, testimonials, logos, names, avatars, or urgency. Use [bracketed placeholders] and list what must be supplied. The one exception is the signature interaction's answer: when price or time is the question it shows sample rates labelled as samples, never [n] — an estimator without an estimate answers nothing. A service, policy, guarantee, packaging or delivery option the client did not state is a proposal: listed under "Proposals to confirm" in DESIGN.md and marked on the page (data-nsd-proposed, with visible "proposed" wording), never written as the business's fact (slop_lint.py flags proposal-unmarked).
11. Platform first on native. iOS follows HIG (references/mobile-ios.md); Android follows Material 3 (references/mobile-android.md).
12. Accessibility is a floor at every register. WCAG 2.2 AA, verified with scripts/contrast.py; keyboard, focus, target sizes, reduced motion. Ambition is bought with craft, never with accessibility.
13. Nothing ships on the first pass. Render it with scripts/shoot.py (never a home-made harness), look at it, run the review gate (references/review-checklist.md) and scripts/slop_lint.py; grade B or better. Review evidence stays out of the deliverable. A rerun is judged beside the run before it: less expressive is a regression. Passing every rule is not the bar: the page is pinned beside the best earlier pages (scripts/crit_board.py) and scored on Gate 14 — idea, memorability, imagery and craft, type and rhythm, completeness, interaction — and revised until every axis is ≥ 4 or the budget is spent. Report the score honestly.
14. Converge on the market, diverge from the skill. The page speaks its category's language, not this skill's: in Phase 2 measure the competitors' first screens (scripts/shoot.py --profile <urls>, the market line), write the page's nine-word language beside it in DESIGN.md with every departure named and bought by the brief (design-language.md §3–4; slop_lint.py flags design-language-unrecorded / -unmeasured), and read every rule below relative to that language (§5 there): a genre is never slop, its untouched default is. The skeleton follows the market too: layout, controls and type class come from the market line, and the first viewport opens the way the category opens (shoot.py --profile "opening" line) — the signature interaction sits in the first viewport only in a product or tight language, elsewhere in section 2–3. Leaving any of these needs the brief's reason under "Departs on:" (slop_lint.py flags departure-unwritten). Ten 1.22 pages in ten languages still opened heading-left + panel in seven cases: that was the skill, not the markets. Then run scripts/design_log.py check before choosing a direction and obey what it reports — a warning kept is answered in writing under "Convergence overrides" in DESIGN.md, never kept silently (slop_lint.py flags convergence-unanswered). Runs in parallel see each other's plans ("in progress" warnings) and must not answer the same history the same way; add --record re-checks when the page is finished; record the finished one with design_log.py add --screenshot <full-page.png>, which measures surface polarity from the pixels instead of trusting a label: a light hero on a mostly dark page is a dark page. The per-project log is empty on a new project, so the cross-project history is the one that catches a house style forming. Differ on ≥ 2 axes: surface polarity, hue family, typeface class, first-viewport composition, UI dialect (shoot.py "dialect" line: control shape, dividers, labels, section headers, display face) — but never on an axis the market fingerprint fixes; two unrelated industries in one language is the repeat that matters ("design language" warning). Record the composition shoot.py names ("compose" line) with add --composition; a composition the log reports as repeated changes even for a different industry. Never the register: it comes from the brief, and a streak of R2 runs for R2 briefs is correct. Do not let this skill's own outputs become a template. Known self-tells: dark surface + serif display + label/value table + one button; the label/value spec table used as the primary layout device in every section; imagery that contradicts the direction (photographs added where it chose type or colour, or a lone photo where it chose photography).
15. Brief beats skill. If the user's brand uses Inter or purple, use it well and document the tension.

Modes and budgets

Default to Standard. Use Deep only when the user asks, or for a new brand at R3–R4 where the direction is expensive to reverse. State the mode. Budgets are part of the design: a 30-minute run for a one-sentence request is a defect, and the fix is fewer artefacts, not faster typing.

Checkpoints, not hopes. Note the clock when you start. Say the elapsed time out loud at two points: at the end of Phase 3 (direction) and at the end of Phase 5 (composition). If more than half the budget is gone at the Phase 3 checkpoint, drop to the floor for the rest: one direction, four sections, the anchor the direction chose, no alternative written out beyond a single line, review gates 0 and 13 only.

Stop conditions for Standard. When any of these hit, finish what is on screen and list the rest as next steps: the register's time target passed, 8 web fetches used, 6 page sections written, 6 images placed. Two runs in a row over budget means the register or the scope was wrong, not that you were slow — say so in the review. Before you stop, record the run with scripts/design_log.py add --screenshot <full-page.png>: an unrecorded run cannot stop the next one from repeating it, and a declared surface is often wrong.

Compile only what the target consumes. build_tokens.py emits five platforms; a web page needs two. Web: --format css,tailwind (or css). iOS: --format swift. Android: --format kotlin. Flutter: --format dart. Add flat-json when you want contrast.py --tokens. Do not write documents nobody asked for.

Workflow

Phases are sequential; each ends with an artefact in the project's design/ folder. State which phase you are in.

Scope shortcuts. Single component: 0 → 1 (short) → 5 → 6 → 7. Critique only: 0 → 7, report without rebuilding. Design system only: 0 → 1 → 3 → 4 → 7. Redesign: 0 (full audit) → refine vs redesign → 5–7 or 3–7.

Decision rules that prevent slop

• Register: decided in Phase 1 from the audience's decision type, the category norm, and the asset budget — never from design_log.py history; every technique used is on that register's row in expression-register.md §7 or justified in writing.
• Interaction: decided in Phase 1 from the top job. The signature interaction answers it with a result the visitor produces, carries that result into the conversion, and degrades to a static equivalent. Carousels, hover effects, language switchers and FAQ accordions do not count.
• Language: the page copy is written in the market's primary language, set as <html lang> and recorded as Primary language: in DESIGN.md. A second language is a switcher, not the default. English for a non-English market only when the user asks or the audience is demonstrably international (an expat service, a conference); write the reason. "AZ and RU to follow" is not a reason. slop_lint.py flags page-language.
• Audience and market: the brief names country, language(s), script, device mix, and local conventions; research includes the market's leading products; the moodboard includes local references; copy and formats follow the locale.
• Design system: existing system → adopt and extend only; a named external system (Material, HIG, a Figma library) → its rules win; none → build from the template and hand over the tokens.
• Visual anchor first: the direction picks the anchor type from what the business has to show and what the register needs; everything else is composed around it. Photographs only if the anchor is photographic, each one three-match tested, placeholders mapped to a shot list. A typographic, colour or diagram anchor needs none.
• Typeface: chosen by attribute from typography.md; a serif is not the automatic answer to "warm", "craft" or "heritage"; watch-list faces need a written reason. Native UI text may use SF / Roboto on purpose.
• Color: one decided hue; accent derived from it; 60/30/10; neutrals tinted; OKLCH; dark mode is its own palette; no purple/indigo gradients, gradient text, glow blobs, neon-on-black.
• Layout: compose, don't assemble. One focal point per viewport; separation by the cheapest device; radius hierarchy; varied rhythm and varied devices between sections; no 3-icon-card grid, bento by reflex, centered-everything, card-in-card, and no page built entirely from label/value rows.
• Components: full state matrix; native elements first; browser surfaces themed.
• Motion: per the register's budget; transform/opacity; reduced-motion path always.
• Copy: verb + object buttons; errors say what happened and what to do; no banned words; delete 30%.
• A genre is not slop; its untouched default is. Brutalism, mono, editorial serif, the dark developer tool, the neutral component library, grain, cream + terracotta, dense utility pages are legitimate languages when the market line or a brand attribute puts the page there (design-language.md §5–6). What stays slop inside any of them is the default nobody chose: Arial + 2px borders and nothing else, an italic serif and "Vol. 01", a black page with a glow. Never stack more than two trend signals the market does not speak.

Tools

External tools when present: a browser for capturing references and rendering the prototype (screenshots are the review evidence; render in the color scheme the audience will see); Figma MCP for reading an existing library and pushing tokens/screens (load the Figma skills first); an image-generation tool for art-directed hero imagery per visual-material.md §7; simulators/emulators for native. Without them, say what you could not verify.

Project layout the skill creates

Copy code
design/   Standard: brief.md · DESIGN.md (direction + review) · assets.md · design-log.json · contrast-pairs.txt
          Deep: + research.md · moodboard.html · screens/*.md · components/*.md · review-{date}.md · handoff.md
tokens/   primitives.json · semantic.json · semantic.dark.json · components.json
build/    (generated)

Every file on the Standard line is required: a run without brief.md or contrast-pairs.txt has no written reason for its decisions and no AA evidence (slop_lint.py flags design-record-incomplete). The project holds the product and its design record only. Screenshots and any review scratch go to shoot.py's temp folder, or design/review/ if the user wants them kept.

Working with the user

• One intake message, pre-filled; accept prose. Push once on a generic memorable-thing answer.
• Present the direction (Standard: one + alternative; Deep: 2–3) with the recommendation tied to the brief. That is the one check-in that matters.
• Autonomous: proceed on stated assumptions; never fabricate inputs; stop only for irreversible choices.
• Report in the user's language, plainly: decisions and why, evidence, open items, review grades, the screenshots.
• Refuse dark patterns and fake proof; offer the honest version.

Reference index

Templates: templates/design-brief.md, templates/DESIGN.md (direction, art direction and review of record live here in Standard mode), templates/assets.md, templates/tokens/*.json, templates/contrast-pairs.txt, templates/design-log.json; Deep mode also uses templates/research-synthesis.md, templates/moodboard.html, templates/component-spec.md, templates/review-report.md.