02 Designer

02 · Designer — realize (UX)

Sprint-scoped: invoked 02-designer sprint N. Realize the UX for sprint N's REQs — a tiered design system, a spec per key screen, and a DM-ID manifest — all referencing the spine by REQ-NNN, never copying its prose. You are the first skill to amend the spine: while realizing, you run the Reconcile step against design-intent.md and emit structured amendment-log.json rows.

Operating principle — realize, and reconcile

Two moves, run together:

• Realize. Turn the thin design-intent.md declaration + the sprint's REQs into a full design-system + screens

(the realization). Reference REQs by ID; derive freely below the governed layer.

• Reconcile (your debut of the amendment protocol). Challenge design-intent.md two ways: flesh-out —

concretize derived / [NEEDS CLARIFICATION] intent (Tier-2 gate → stated); contradiction-flag — catch where the realization violates a stated intent, the a11y floor, or a Constitution non-negotiable (Tier-2 gate, or Tier-3 defer for scope). You run Reconcile inline — no subagent: design-intent conflicts are surfaced, obvious, and gated, so the fresh-context isolation that 03/05/07 need does not apply here.

The boundary-test = the token-governance line. Reconcile fires only on the governed layer (brand · semantic tokens · the a11y floor · key screens · interaction principles · job-outcomes); the delegated layer (primitive values · component tokens · layout/spacing · internals) is free realization — no amendment, ever. Full method: references/reconcile-critique.md.

Profile switch — agent-system realizes the agent experience

Read the spine's Profile (the per-seat toggle table in shared/agentic-profile.md). Under webapp (default) the flow below is unchanged. Under agent-system (or mcp-server), Phase B designs the agent experience, not screens — the tool surface (names/descriptions are the interface; tool hit-rate is the quality metric), turns, persona/voice, refusal-UX, and HITL touchpoints — per references/agent-experience.md. Phase A (tokens) and the Reconcile machinery are unchanged; the DM-NNN manifest stays, but its rows point at tools/turns/refusals. Reconcile's governed layer shifts to the design-intent voice + the agent-contract HITL rows; the WCAG floor applies only where a GUI exists. Under skill-pack, 02 is skipped (trigger/description design folds into 03/04 + the skill-creator eval; status routes no design phase).

The flow

Two gates (Gate 1 = foundation, Gate 2 = screens), with Reconcile folded into Gate 1. Craft lives in the references — load each as its phase begins.

Phase A — Foundation → docs/design/design-system.md

1. READ UPSTREAM — docs/planning/sprints/sprint-NN.md (which REQs are in scope), docs/spec/design-intent.md

(the declaration to reconcile), the sprint's docs/spec/capabilities/.md REQ blocks, and docs/spec/specification.md (Constitution + brand/a11y non-negotiables). Optionally architecture-constraints.md.

1. STYLE DIRECTION — from design-intent.md (adjectives, tone, references). A populated design-intent is usually

a strong signal; if it's thin, pause once with a proposed direction, then proceed (don't interrogate).

1. TIERED TOKENS — primitive → semantic → component, referencing inward (never skip a tier). Start from the

seed vocabulary in templates/design-system.md; concretize per project. Apply density-as-intent (light = bg/hover · base = main/CTA · dark = text/pressed). Theming = semantic override only.

1. COMPONENT INVENTORY — a loose hierarchy (foundations → components → patterns → screens); Atomic Design as a

mental model, not rigid buckets. Define only what this sprint's screens use.

1. CONTENT & UX PATTERNS + the banned / anti-patterns list (AI-slop guardrails).
2. ⟫ RECONCILE (pass 1) ⟪ — run the dual pass (references/reconcile-critique.md) against design-intent.md

at foundation altitude: the deterministic detector (WCAG + a11y floor + token-chain) ‖ the judgment pass (Nielsen

• JTBD, every finding anchored). Classify findings into tiers; emit amendment-log.json rows + DDRs.

>>> GATE 1: present the foundation and the batched Tier-2 amendments together; wait for PROCEED / ADJUST / a decision on each amendment before Phase B. .md For each key screen (templates/screen.md): wireframe (ASCII by default at sprint 1) → annotate with REQ-IDs → **interaction table** → **state spec** → **a11y annotations**. Run the detector + heuristic pass on the *screens* as **realization quality** — you fix your own design to meet the floor; escalate to a new amendment only on the rare screen finding that can't be honored without changing a declaration. Generate the **DM-ID manifest** (templates/manifest.md`) — over wireframe regions, so it exists even on the ASCII path.

>>> GATE 2: present screen coverage + any escalations; on approval LOCK the design contract at docs/design/approved/sprint-NN/. >> GATE 1: present foundation + batched Tier-2 amendments; wait for PROCEED / ADJUST / decisions >> GATE 2: present screen coverage + escalations; on approval lock docs/design/approved/sprint-NN/ .md · docs/spec/specification.md (the Profile) · (optionally) docs/spec/architecture-constraints.md · under agent-system, docs/spec/agent-contract.md (the tool matrix + HITL rows the agent-experience realizes). **Writes:** docs/design/design-system.md · docs/design/.md (per screen) · docs/design/approved/sprint-NN/manifest.md (+ prototype/ + .png when prototypes exist) · **appends** docs/spec/amendment-log.json. **Never** writes docs/spec/capabilities/*`.

References (load when the phase needs them)

• references/design-system.md — Phase A craft: tiered tokens + seed vocabulary + density-as-intent + component

hierarchy + content/UX patterns + banned-list + quality criteria.

• references/screen-spec.md — Phase B craft: wireframe + interaction table + state spec + a11y annotations + the

component contract + the DM-ID manifest rule.

• references/reconcile-critique.md — the dual-pass Reconcile: boundary-test + deterministic detector (WCAG 2.2 AA +

a11y floor + token-chain) + Nielsen heuristics + anchoring rule + tier classification + DDR format.

• references/agent-experience.md — agent-system mode: the tool surface / turns / persona / refusal-UX / HITL

touchpoints that replace screens; the DM-NNN manifest over tools/turns; Reconcile against voice + agent-contract HITL.

• shared/agentic-profile.md — the per-seat toggle table (what 02 does per profile); repo-root-relative.
• shared/spec-amendment-protocol.md — amendment tiers + the row schema (your debut); repo-root-relative.
• shared/spine-boundary.md — declaration vs realization (the keystone); repo-root-relative.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: IncommensurableHubris
• Source: IncommensurableHubris/fullstack-director
• License: MIT

Install and usage instructions live in the source repository linked above.