/design-method

name: design-method
description: "Use when starting any design task — resolves register, sets the 3 dials, locks Gate 0, and routes to the right move and target skill."
when-to-use: "Start of any design task, before picking a move or writing/editing a single line of HTML/CSS/tokens."
keywords: register, brand, product, dials, gate-0, absolute-bans, anti-slop, routing, moves, method
priority: critical
related: design-system, design-web, design-webapp, design-ios, design-android, design-review, ux-copy

<objective> The core design method and entry point for any design task: resolves the Register (brand vs product), states the Design Read one-liner and sets the 3 numeric dials (DESIGN_VARIANCE, VISUAL_DENSITY, MOTION_INTENSITY) against a scale anchored on the fifteen reference pages, enforces the Gate 0 brief lock before any HTML/CSS/tokens are touched, applies the Absolute bans, runs the 2-level AI-slop test, and routes to the matching move (generate, critique, audit, bolder, quieter, distill, harden, polish, redesign) and its target skill.

Read this first — before `design-system`, any `register/*.md` file, or any `moves/*.md` file. This skill owns the gate and the routing table, not the move procedures themselves. </objective>

<!-- Grounding: grounding-corpus.md §A (impeccable anatomy — thin router, Register, dials, Absolute bans, 2-level slop test), §G (root-cause fix: template reproduction demoted, register-first), §H (kept anchors: Gate 0, Signature Dominance, Focal-Block Floor, Competitor Lift Test, MOTION_INTENSITY). -->

Design Method — The Core

This is the one place the design pipeline is defined. The agent (`agents/design-expert.md`) always loads this file before dispatching to a move; every `references/register/*.md` and `references/moves/*.md` file assumes you've read this first and references it instead of restating it — if a rule elsewhere contradicts this file, this file wins.

Setup

How this core gets loaded, every time, no exceptions:

1. Read this file once per task — not once per move. Skip the re-read for a later move in the same task if neither the Register nor the codebase changed. 2. **Read `../design-system/SKILL.md`** — always, unconditionally, before anything else below. Thin pointer file, cheap to reload, and the harness's phase-1 trigger, so it runs even on a task needing no new token. Existing `design-system.md` tokens still win over its defaults once resolved. 3. Resolve **Register** (below), then write the **Design Read + 3 dials** one-liner. 4. Pass **Gate 0 — Brief Lock** (below) before touching any HTML/CSS/tokens. 5. Read the ONE matched `references/moves/<move>.md` from the Routing table — not two, not a skim of several to "compare." The move file owns the how; this file owns the gate and the pointer. 6. If the move builds or touches code, read the matching `references/register/{brand,product}.md` floors too, once.

Register

Resolve **before anything else downstream** — brand vs product gates every floor (Signature Dominance, Focal-Block Floor, tone bounds, motion budget, dial presets). Never default silently.

• **brand** — one dominant, expressive message: marketing site, launch page, identity.
• **product** — dense, predictable, motion stays discreet: dashboard, SaaS tool, utility

screen.

**Priority order (fixed, first match wins):** 1. The owner states it explicitly. 2. An existing `design-system.md`/`PRODUCT.md` already classifies it. 3. Inferable from the concrete surface (dashboard/settings/internal tool → `product`; landing/marketing/campaign/identity → `brand`). 4. Still unclear → ask **ONE** question. Never guess past this point.

Once resolved, load `references/register/brand.md` or `references/register/product.md` — each carries the floors, tone bounds and motion budget for that lane. For copy/microcopy tone, load `references/register/copy.md` (any move touching user-facing text, plus `ux-copy`).

Design Read + the 3 dials

Before any palette/font/layout choice, state one line:

Design Read: {page kind} for {audience}; vibe = {2-4 adjectives}; assets = {existing brand assets or "none"}; constraints = {quiet constraints or "none"}.

Then set the 3 numeric dials it implies — **contractual inputs** for every step after this one, not decoration:

| Dial | 1 | 10 | |------|---|----| | `DESIGN_VARIANCE` | rigid, symmetrical, conventional | highly art-directed, asymmetric | | `VISUAL_DENSITY` | airy, gallery-like, calm | packed, information-dense | | `MOTION_INTENSITY` | static / near-still | cinematic, scroll-driven |

Preset-by-use-case table, partial-brief fallbacks and `MOTION_INTENSITY` bands (calm <4 / expressive 4–7 / cinematic >7) live in `../design-system/references/design-read-dials.md` — don't restate them here. The brief always overrides any default; an unresolvable dial uses the documented fallback and says so in the Design Read line, never a silent guess.

What each number means — anchored on the corpus

Poles alone are unusable: nobody knows what a 7 looks like, so an unanchored dial drifts to the middle and the middle is where every generated page already lives. The scales below are anchored on the fifteen reference pages, each value read from that page's own `design-system.md` under `../design-web/references/refs-design/` (short names below are those directories). These are not scores. All fifteen pages were judged good; the numbers say what kind of page it is, never how well it was done.

**`DESIGN_VARIANCE` — how far the composition departs from the canonical skeleton.**

| n | Page | What it looks like | |---|---|---| | 3 | `fora-recode` | "Bookended Canon" — nav, hero, intro, features, what-you-get, pricing, footer, almost to the letter. Reads specific anyway: one device, a 1px rule at white 10%, is the only line in the system and carries every edge, card outline and divider. | | 3 | `cursor-recode` | "Ramp and Newsroom" — deliberately unstyled page furniture; the art