AI has supercharged product design. I design how the work earns the right to ship.

1+import { useId, useState } from 'react'2+ 3+// @phase concept — the markup, and the data it stands on.4+//5+// One component. One render tree. Everything that changes between phases is a6+// lookup keyed by the `phase` prop: classes from STYLE, aria wiring from A11Y,7+// gate behaviour from GATE. The tree below is never rebranched, so the node the8+// commit graph mounts is the node it still holds four phases later.9+//10+// The checks are this page's real quality floor, not sample rows — each one is a11+// rule DESIGN.md holds this build to. `keys` ships green and stale on purpose:12+// §9 requires the blocked-on-stale state to be reachable rather than asserted.13+ 14+const CHECKS = [15+  { id: 'no-js', label: 'renders without JS', passing: true, stale: false },16+  { id: 'motion', label: 'reduced motion respected', passing: true, stale: false },17+  { id: 'keys', label: 'keyboard operable', passing: true, stale: true },18+  { id: 'focus', label: 'focus visible on every control', passing: true, stale: false },19+  { id: 'contrast', label: 'contrast floor AA', passing: true, stale: false },20+  { id: 'reveal', label: 'no scroll-gated content', passing: true, stale: false },21+]22+ 23+export default function ArtifactCard({ phase = 'dev' }) {24+  const uid = useId()25+  const S = STYLE[phase]26+  const A = A11Y[phase]27+  const live = phase !== 'concept'28+  const { checks, toggle, rerun, empty, setEmpty } = useChecks()29+  const gate = GATE[phase](checks)30+  const staleNote = checks.some((c) => A.showStale(c))31+ 32+  return (33+    <div className={S.root}>34+      <div className={S.head}>35+        <div className={S.heading}>36+          <span className={S.title} id={`${uid}-title`}>37+            Quality floor38+          </span>39+          <span className={S.meta}>this page</span>40+        </div>41+        <span className={S.count}>{A.summary(checks)}</span>42+      </div>43+ 44+      <ul className={S.list} {...A.list} aria-labelledby={`${uid}-title`}>45+        {checks.map((check) => {46+          const chip = A.chip(check)47+          return (48+            <li key={check.id} className={S.item}>49+              <input50+                id={`${uid}-${check.id}`}51+                className={S.box}52+                type="checkbox"53+                checked={check.passing}54+                disabled={!live}55+                onChange={live ? () => toggle(check.id) : undefined}56+                {...A.box(check, uid)}57+              />58+              <label className={S.label} htmlFor={`${uid}-${check.id}`}>59+                {check.label}60+              </label>61+              {chip && (62+                <span aria-hidden="true" className={`${S.chip} ${S.chipTone[chip.tone]}`}>63+                  {chip.label}64+                </span>65+              )}66+              {A.showStale(check) && (67+                <button className={S.rerun} type="button" onClick={() => rerun(check.id)}>68+                  re-run69+                </button>70+              )}71+            </li>72+          )73+        })}74+      </ul>75+ 76+      {checks.length === 0 && <p className={S.note}>No checks defined. Nothing to gate on.</p>}77+ 78+      {staleNote && (79+        <p className={S.note} id={`${uid}-stale`}>80+          One check is green and stale. Green and stale is not evidence.81+        </p>82+      )}83+ 84+      <div className={`${S.gate} ${S.gateTone[gate.tone]}`} {...A.gate}>85+        {gate.label}86+      </div>87+ 88+      {A.canEmpty && (89+        <button className={S.demo} type="button" onClick={() => setEmpty(!empty)}>90+          {empty ? 'restore checks' : 'show empty state'}91+        </button>92+      )}93+    </div>94+  )95+}96+ 97+// @phase prototype — real state, real behaviour. Nothing here is a mock.98+ 99+function useChecks() {100+  const [passing, setPassing] = useState(() => CHECKS.map((c) => c.passing))101+  const [stale, setStale] = useState(() => CHECKS.map((c) => c.stale))102+  const [empty, setEmpty] = useState(false)103+ 104+  const checks = empty105+    ? []106+    : CHECKS.map((c, i) => ({ ...c, passing: passing[i], stale: stale[i] }))107+ 108+  const at = (id) => CHECKS.findIndex((c) => c.id === id)109+  const swap = (setter, i, value) =>110+    setter((prev) => prev.map((v, j) => (j === i ? value : v)))111+ 112+  return {113+    checks,114+    empty,115+    setEmpty,116+    toggle: (id) => swap(setPassing, at(id), !passing[at(id)]),117+    rerun: (id) => swap(setStale, at(id), false),118+  }119+}120+ 121+// Gate behaviour is phase data too. Prototype and design read `passing` and122+// nothing else — which is the bug: a check can be green and stale at once, and123+// both phases wave it through. The dev phase is where staleness starts to124+// count, and it is why the rule has to be worded "red or stale".125+ 126+const countRed = (checks) => checks.filter((c) => !c.passing).length127+const plural = (n) => (n === 1 ? '' : 's')128+const blocked = (n, kind) => ({129+  tone: 'blocked',130+  label: `blocked · ${n} check${plural(n)} ${kind}`,131+})132+const ready = { tone: 'ready', label: 'ready for engineering' }133+const onlyRed = (checks) =>134+  countRed(checks) ? blocked(countRed(checks), 'red') : ready135+ 136+const GATE = {137+  concept: () => ({ tone: 'inert', label: 'gate' }),138+  prototype: onlyRed,139+  design: onlyRed,140+  dev: (checks) => {141+    if (checks.length === 0) return { tone: 'inert', label: 'gate not armed' }142+    if (countRed(checks)) return blocked(countRed(checks), 'red')143+    const stale = checks.filter((c) => c.stale).length144+    return stale ? blocked(stale, 'stale') : ready145+  },146+}147+ 148+// @phase design — type, spacing, colour, motion. Not one line of behaviour.149+//150+// This is the phase that has to carry the visual argument, because the model151+// says so: design is where type, spacing and colour arrive, and dev may not152+// change them. So the stale and failing treatments are authored here, at full153+// strength, even though nothing reaches them until the dev phase turns the154+// states on. Designing a state you cannot yet see is the whole point.155+//156+// Sized against its own container rather than the viewport: this component157+// renders wide in the scrubber and roughly a quarter as wide in the static158+// four-up, and a finished component is expected to survive both.159+ 160+const REFINED = {161+  root: '@container flex h-full w-full flex-col gap-4 rounded-sm border border-line bg-panel p-5 @sm:gap-5 @sm:p-6',162+  head: 'flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 border-b border-line pb-3',163+  heading: 'flex flex-wrap items-baseline gap-x-3 gap-y-0.5',164+  title: 'font-display text-lead leading-tight text-ink @sm:text-h3',165+  meta: 'font-mono text-mono-2xs uppercase text-muted',166+  count: 'font-mono text-mono-2xs tabular-nums uppercase text-muted',167+  list: 'flex flex-col',168+  item: 'flex items-center gap-3 border-b border-line/60 py-2 last:border-b-0 @sm:py-2.5',169+  box: 'size-4 shrink-0 accent-accent',170+  label: 'min-w-0 font-mono text-mono-2xs text-ink @sm:text-mono-xs',171+  chip: 'ml-auto shrink-0 rounded-xs px-1.5 py-0.5 font-mono text-mono-2xs uppercase',172+  chipTone: {173+    ok: 'text-muted',174+    stale: 'bg-warning/12 text-warning',175+    red: 'bg-warning text-paper',176+  },177+  rerun:178+    'shrink-0 rounded-xs border border-muted px-2 py-0.5 font-mono text-mono-2xs uppercase text-muted transition-colors hover:border-ink hover:text-ink',179+  note: 'font-mono text-mono-2xs leading-relaxed text-warning',180+  gate: 'mt-auto rounded-xs px-3 py-2.5 font-mono text-mono-xs transition-colors duration-200',181+  gateTone: {182+    inert: 'bg-shade text-muted',183+    blocked: 'bg-warning text-paper',184+    ready: 'bg-accent text-panel',185+  },186+  demo: 'self-start font-mono text-mono-2xs uppercase text-muted underline decoration-1 underline-offset-2 hover:text-ink',187+}188+ 189+const STYLE = {190+  // Greybox. Real markup with the polish subtracted, not a picture of a card.191+  concept: {192+    root: 'flex h-full w-full flex-col gap-2 border border-dashed border-muted p-2',193+    head: 'flex gap-2 border-b border-dashed border-muted pb-1',194+    heading: 'flex gap-2',195+    title: 'text-sm text-muted',196+    meta: 'text-sm text-muted',197+    count: 'text-sm text-muted',198+    list: 'flex flex-col gap-1',199+    item: 'flex items-center gap-2',200+    box: 'size-4 shrink-0',201+    label: 'text-sm text-muted',202+    chip: 'text-sm text-muted',203+    chipTone: { ok: '', stale: '', red: '' },204+    rerun: 'text-sm text-muted',205+    note: 'text-sm text-muted',206+    gate: 'mt-auto border border-dashed border-muted px-2 py-1 text-sm text-muted',207+    gateTone: { inert: '', blocked: '', ready: '' },208+    demo: 'text-sm text-muted',209+  },210+  // Works. Ugly. No hierarchy, no rhythm, browser defaults left alone.211+  prototype: {212+    root: 'flex h-full w-full flex-col gap-2 border border-muted p-2',213+    head: 'flex gap-2',214+    heading: 'flex gap-2',215+    title: 'text-sm font-semibold text-ink',216+    meta: 'text-sm text-muted',217+    count: 'text-sm text-muted',218+    list: 'flex flex-col gap-1',219+    item: 'flex items-center gap-2',220+    box: 'size-4 shrink-0',221+    label: 'text-sm text-ink',222+    chip: 'text-sm text-ink',223+    chipTone: { ok: '', stale: '', red: '' },224+    rerun: 'border border-muted px-1 text-sm text-ink',225+    note: 'text-sm text-ink',226+    gate: 'mt-auto border border-muted px-2 py-1 text-sm',227+    gateTone: { inert: 'text-muted', blocked: 'text-ink', ready: 'text-ink' },228+    demo: 'self-start text-sm text-ink underline',229+  },230+  design: REFINED,231+  dev: REFINED,232+}233+ 234+// @phase dev — accessible, responsive, and honest about the states it reaches.235+//236+// Not one class changes here. What changes is which states the component is237+// willing to show you: the per-row verdict, the stale badge and its re-run, the238+// live region on the gate, and an empty state you can actually reach. The239+// design phase drew all of it; this is the phase that stops hiding it.240+ 241+const QUIET = {242+  list: {},243+  box: () => ({}),244+  gate: {},245+  chip: () => null,246+  summary: () => '',247+  showStale: () => false,248+  canEmpty: false,249+}250+ 251+const A11Y = {252+  concept: QUIET,253+  prototype: QUIET,254+  design: QUIET,255+  dev: {256+    list: { role: 'group' },257+    box: (check, uid) => ({258+      'aria-describedby': check.stale && check.passing ? `${uid}-stale` : undefined,259+    }),260+    gate: { role: 'status', 'aria-live': 'polite' },261+    // The verdict per row, in the same words the gate uses. A passing check that262+    // is out of date reads `stale`, not `pass` — the distinction the earlier263+    // phases cannot make.264+    chip: (check) => {265+      if (!check.passing) return { tone: 'red', label: 'red' }266+      return check.stale ? { tone: 'stale', label: 'stale' } : { tone: 'ok', label: 'pass' }267+    },268+    summary: (checks) => {269+      if (checks.length === 0) return 'no checks'270+      const red = checks.filter((c) => !c.passing).length271+      const stale = checks.filter((c) => c.passing && c.stale).length272+      const parts = [`${checks.length} checks`]273+      if (red) parts.push(`${red} red`)274+      if (stale) parts.push(`${stale} stale`)275+      return parts.join(' · ')276+    },277+    showStale: (check) => check.stale && check.passing,278+    canEmpty: true,279+  },280+}