First-use repair loop
One brief, one failing implementation candidate, one repaired candidate, and a two-attempt transcript.
Examples
Start with the replayable AI-native contract examples, then use the model UI matrix for broader before/after comparison.
AI-native design system
First-use loop and canonical contract cases
The first-use fixture shows the agent-owned loop: create contract, review, repair, resubmit, accept. The canonical examples cover setup/onboarding, an operational dashboard, and high-stakes refund review before any renderer package exists.
Canonical examples
Replay setup/onboarding, operational dashboard, and high-stakes review/refund contract failures and repairs.
Renderer boundary
The active design-system source supplies token roles, system font stacks, Lucide icon catalog policy, component contracts, and provenance expectations. Those authorities cannot bypass primitives, states, action boundaries, data visibility, accessibility, static checks, or browser QA.
Lucide icon smoke proof
Search, retrieve, and render every committed Lucide icon through the MCP catalog tools. The design-system icon page is the reference surface; this HTML remains the deterministic regression proof.
ED flow board MVP
A static in-situ feedback prototype for room occupancy, waiting acuity, turnover, holds, and charge-team next moves.
Model UI matrix
Before and after generation paths
These matrix examples compare how the same activity changes across raw brief, JudgmentKit skill context, Material UI only, and JudgmentKit skill plus Material UI paths.
Support refund triage 3x4 matrix
A support operations manager reviews refund escalation cases and decides approve, policy review, or missing evidence. Columns separate Raw brief, JudgmentKit skill context, Material UI only, and JudgmentKit skill + Material UI. This use case currently shows 10 accepted snapshots plus 2 diagnostic-only failed-candidate cells; diagnostic cells are not artifact links or release evidence.
Path
Raw brief
scripted fixture HTML
JudgmentKit skill context
scripted fixture HTML
Material UI only
Material UI SSR
JudgmentKit skill + Material UI
Material UI SSR
Generation path
Fixture-rendered baseline
Scripted renderer paths show the controlled fixture-rendered baseline for each context combination.
scripted fixture HTML
Raw brief
source brief + sample case
scripted fixture HTML
JudgmentKit skill context
source brief + sample case + reviewed handoff + frontend skill context
Material UI SSR
Material UI only
source brief + sample case + Material UI adapter
Material UI SSR
JudgmentKit skill + Material UI
source brief + sample case + reviewed handoff + frontend skill context + Material UI adapter
Generation path
Gemma 4 via LM Studio lms
Local Gemma 4 captures show how a smaller local model responds to the same four context boundaries.
static HTML/CSS
Raw brief
source brief + sample case
Diagnostic only
Failed candidate, not release evidence.
Diagnostic only
Gemma 4 via LM Studio lms - JudgmentKit skill context
JudgmentKit skill context
Status: Needs repair before evidence
Failed checks: Token provenance failed, Capture quality failed
Material UI SSR
Material UI only
source brief + sample case + Material UI adapter
Material UI SSR
JudgmentKit skill + Material UI
source brief + sample case + reviewed handoff + frontend skill context + Material UI adapter
Generation path
GPT-5.5 xhigh via codex exec
GPT-5.5 captures use extra-high reasoning to show the same matrix with a stronger model path.
static HTML/CSS
Raw brief
source brief + sample case
Diagnostic only
Failed candidate, not release evidence.
Diagnostic only
GPT-5.5 xhigh via codex exec - JudgmentKit skill context
JudgmentKit skill context
Status: Needs repair before evidence
Failed checks: Token provenance failed, Capture quality failed
Material UI SSR
Material UI only
source brief + sample case + Material UI adapter
Material UI SSR
JudgmentKit skill + Material UI
source brief + sample case + reviewed handoff + frontend skill context + Material UI adapter
Field service dispatch 3x4 matrix
A field operations manager assigns, reschedules, or escalates a repair visit using route, parts, and SLA constraints. Columns separate Raw brief, JudgmentKit skill context, Material UI only, and JudgmentKit skill + Material UI. This use case currently shows 10 accepted snapshots plus 2 diagnostic-only failed-candidate cells; diagnostic cells are not artifact links or release evidence.
Path
Raw brief
scripted fixture HTML
JudgmentKit skill context
scripted fixture HTML
Material UI only
Material UI SSR
JudgmentKit skill + Material UI
Material UI SSR
Generation path
Fixture-rendered baseline
Scripted renderer paths show the controlled fixture-rendered baseline for each context combination.
scripted fixture HTML
Raw brief
source brief + sample case
scripted fixture HTML
JudgmentKit skill context
source brief + sample case + reviewed handoff + frontend skill context
Material UI SSR
Material UI only
source brief + sample case + Material UI adapter
Material UI SSR
JudgmentKit skill + Material UI
source brief + sample case + reviewed handoff + frontend skill context + Material UI adapter
Generation path
Gemma 4 via LM Studio lms
Local Gemma 4 captures show how a smaller local model responds to the same four context boundaries.
static HTML/CSS
Raw brief
source brief + sample case
Diagnostic only
Failed candidate, not release evidence.
Diagnostic only
Gemma 4 via LM Studio lms - JudgmentKit skill context
JudgmentKit skill context
Status: Needs repair before evidence
Failed checks: Token provenance failed, Capture quality failed
Material UI SSR
Material UI only
source brief + sample case + Material UI adapter
Material UI SSR
JudgmentKit skill + Material UI
source brief + sample case + reviewed handoff + frontend skill context + Material UI adapter
Generation path
GPT-5.5 xhigh via codex exec
GPT-5.5 captures use extra-high reasoning to show the same matrix with a stronger model path.
static HTML/CSS
Raw brief
source brief + sample case
Diagnostic only
Failed candidate, not release evidence.
Diagnostic only
GPT-5.5 xhigh via codex exec - JudgmentKit skill context
JudgmentKit skill context
Status: Needs repair before evidence
Failed checks: Token provenance failed, Capture quality failed
Material UI SSR
Material UI only
source brief + sample case + Material UI adapter
Material UI SSR
JudgmentKit skill + Material UI
source brief + sample case + reviewed handoff + frontend skill context + Material UI adapter
Clinical intake review 3x4 matrix
An intake coordinator reviews administrative appointment readiness and decides schedule, return missing forms, or escalate insurance verification. Columns separate Raw brief, JudgmentKit skill context, Material UI only, and JudgmentKit skill + Material UI. This use case currently shows 10 accepted snapshots plus 2 diagnostic-only failed-candidate cells; diagnostic cells are not artifact links or release evidence.
Path
Raw brief
scripted fixture HTML
JudgmentKit skill context
scripted fixture HTML
Material UI only
Material UI SSR
JudgmentKit skill + Material UI
Material UI SSR
Generation path
Fixture-rendered baseline
Scripted renderer paths show the controlled fixture-rendered baseline for each context combination.
scripted fixture HTML
Raw brief
source brief + sample case
scripted fixture HTML
JudgmentKit skill context
source brief + sample case + reviewed handoff + frontend skill context
Material UI SSR
Material UI only
source brief + sample case + Material UI adapter
Material UI SSR
JudgmentKit skill + Material UI
source brief + sample case + reviewed handoff + frontend skill context + Material UI adapter
Generation path
Gemma 4 via LM Studio lms
Local Gemma 4 captures show how a smaller local model responds to the same four context boundaries.
static HTML/CSS
Raw brief
source brief + sample case
Diagnostic only
Failed candidate, not release evidence.
Diagnostic only
Gemma 4 via LM Studio lms - JudgmentKit skill context
JudgmentKit skill context
Status: Needs repair before evidence
Failed checks: Token provenance failed, Capture quality failed
Material UI SSR
Material UI only
source brief + sample case + Material UI adapter
Material UI SSR
JudgmentKit skill + Material UI
source brief + sample case + reviewed handoff + frontend skill context + Material UI adapter
Generation path
GPT-5.5 xhigh via codex exec
GPT-5.5 captures use extra-high reasoning to show the same matrix with a stronger model path.
static HTML/CSS
Raw brief
source brief + sample case
Diagnostic only
Failed candidate, not release evidence.
Diagnostic only
GPT-5.5 xhigh via codex exec - JudgmentKit skill context
JudgmentKit skill context
Status: Needs repair before evidence
Failed checks: Token provenance failed, Capture quality failed
Material UI SSR
Material UI only
source brief + sample case + Material UI adapter
Material UI SSR
JudgmentKit skill + Material UI
source brief + sample case + reviewed handoff + frontend skill context + Material UI adapter
B2B renewal risk review 3x4 matrix
A customer success manager reviews renewal risk and decides save plan, executive escalation, or wait for usage evidence. Columns separate Raw brief, JudgmentKit skill context, Material UI only, and JudgmentKit skill + Material UI. This use case currently shows 10 accepted snapshots plus 2 diagnostic-only failed-candidate cells; diagnostic cells are not artifact links or release evidence.
Path
Raw brief
scripted fixture HTML
JudgmentKit skill context
scripted fixture HTML
Material UI only
Material UI SSR
JudgmentKit skill + Material UI
Material UI SSR
Generation path
Fixture-rendered baseline
Scripted renderer paths show the controlled fixture-rendered baseline for each context combination.
scripted fixture HTML
Raw brief
source brief + sample case
scripted fixture HTML
JudgmentKit skill context
source brief + sample case + reviewed handoff + frontend skill context
Material UI SSR
Material UI only
source brief + sample case + Material UI adapter
Material UI SSR
JudgmentKit skill + Material UI
source brief + sample case + reviewed handoff + frontend skill context + Material UI adapter
Generation path
Gemma 4 via LM Studio lms
Local Gemma 4 captures show how a smaller local model responds to the same four context boundaries.
static HTML/CSS
Raw brief
source brief + sample case
Diagnostic only
Failed candidate, not release evidence.
Diagnostic only
Gemma 4 via LM Studio lms - JudgmentKit skill context
JudgmentKit skill context
Status: Needs repair before evidence
Failed checks: Token provenance failed, Capture quality failed
Material UI SSR
Material UI only
source brief + sample case + Material UI adapter
Material UI SSR
JudgmentKit skill + Material UI
source brief + sample case + reviewed handoff + frontend skill context + Material UI adapter
Generation path
GPT-5.5 xhigh via codex exec
GPT-5.5 captures use extra-high reasoning to show the same matrix with a stronger model path.
static HTML/CSS
Raw brief
source brief + sample case
Diagnostic only
Failed candidate, not release evidence.
Diagnostic only
GPT-5.5 xhigh via codex exec - JudgmentKit skill context
JudgmentKit skill context
Status: Needs repair before evidence
Failed checks: Token provenance failed, Capture quality failed
Material UI SSR
Material UI only
source brief + sample case + Material UI adapter
Material UI SSR
JudgmentKit skill + Material UI
source brief + sample case + reviewed handoff + frontend skill context + Material UI adapter