Component Studio

The design-system thesis, rebuilt for the AI era — one canonical knowledge object per component, with AI as reviewer, never author.

Context

The first case study on this site governs how interfaces look — tokens separating intent from implementation. Fifteen years later, the problem has moved. A single component today is described in many places, none authoritative: a Figma symbol, two code implementations with different prop names, a Storybook story, a PM ticket, an accessibility spreadsheet, tribal knowledge. They drift; when they disagree, nobody knows which is right. Onboarding is archaeology — and AI tools trained on the drift produce plausible-but-wrong documentation at scale, because there is no canonical object to ground them.

My role

Solo — product definition, information architecture, specification, and system architecture, written down the way a platform team would need to inherit it: 42 Architecture Decision Records, a full canon (vision, principles, personas, health model, AI philosophy, adapter strategy), a JSON-schema'd Passport spec, 20 first-draft passports, and a running Phase-1 local-first app that edits a real folder-based workspace.

The Component Passport Interactive

One canonical object · Health is math, not opinion

Btn

Button

cmp_button · action · passport v1

Passport sections

Knowledge on record

Switch knowledge off and watch Health recompute — the same passport always yields the same score. No model in the loop.

Deterministic Health

Section · Purpose

AI review lane · suggests, never publishes

accessibility.role → "button" 0.97 confidence grounded · evidence: ev_button_source_01 · extract-a11y@3

Same passport, same score — reproducible, diffable, CI-gateable. AI suggests; a human commits every change to canon.

The system

One canonical, structured knowledge object per component — the Component Passport — that every discipline and every AI agent reads from and writes to. Design files, code, and docs become projections of the Passport, not competing originals; Sketch, Storybook, React Native, SwiftUI, and Figma are adapters, never the source of truth. Above it, two governing mechanisms: deterministic Health — five dimensions (UX, engineering, accessibility, documentation, QA) scored by pure completeness-and-validity checks, so the same Passport always yields the same score and health can gate a merge in CI — and an AI lane where models extract, normalize, suggest, and review, always with confidence, provenance, and preserved source evidence, always landing in review rather than in canon.

The hard call

AI never becomes the source of truth. It would have been easy — and demo-flashy — to let the model score quality and write the record. Both are refused, in writing: health is deterministic because an LLM-scored metric is non-reproducible, un-auditable, and un-gate-able; AI contributions publish nothing without a human commit. The platform adopts Behavioral Orchestration as its stated posture — the same framework from the previous two case studies, now governing a knowledge platform: restraint as the feature, "no opinion" as a valid answer.

Outcome

A designed foundation a team could pick up and build — canon, spec, schemas, ADRs — plus the running Phase-1 app proving the contracts hold. And the site's oldest thread closes its loop: the tokens thesis from the first case study, matured into a governance thesis for organizational UI knowledge in the AI era.