diff --git a/.gitignore b/.gitignore
index c34c01b..a42bd78 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ dist
 .tmp
 judgmentkit-product-spec-package.zip
 output/playwright
+artifacts/
 public/resources
 public/schemas
 public/docs
diff --git a/app/mcp/route.ts b/app/mcp/route.ts
index 6566fa3..7b34e26 100644
--- a/app/mcp/route.ts
+++ b/app/mcp/route.ts
@@ -1,38 +1,20 @@
-import { WebStandardStreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/webStandardStreamableHttp.js";
-import { NextResponse } from "next/server";
-
-import { createJudgmentKitMcpServer, getMcpMetadata } from "@/lib/mcp-server";
+import { handleMcpHttpRequest } from "@/lib/mcp-http";
 
 export const runtime = "nodejs";
 export const dynamic = "force-dynamic";
 
-function wantsSse(request: Request) {
-  return request.headers.get("accept")?.includes("text/event-stream") ?? false;
-}
-
-async function handleStreamableHttpRequest(request: Request) {
-  const server = createJudgmentKitMcpServer();
-  const transport = new WebStandardStreamableHTTPServerTransport({
-    sessionIdGenerator: undefined,
-    enableJsonResponse: true,
-  });
-
-  await server.connect(transport);
-  return transport.handleRequest(request);
-}
-
 export async function GET(request: Request) {
-  if (!wantsSse(request)) {
-    return NextResponse.json(getMcpMetadata("streamable-http"));
-  }
-
-  return handleStreamableHttpRequest(request);
+  return handleMcpHttpRequest(request);
 }
 
 export async function POST(request: Request) {
-  return handleStreamableHttpRequest(request);
+  return handleMcpHttpRequest(request);
 }
 
 export async function DELETE(request: Request) {
-  return handleStreamableHttpRequest(request);
+  return handleMcpHttpRequest(request);
+}
+
+export async function OPTIONS(request: Request) {
+  return handleMcpHttpRequest(request, { allowOptions: true, cors: true });
 }
diff --git a/components/inspect-surface.tsx b/components/inspect-surface.tsx
index 109bfe9..c71a7d4 100644
--- a/components/inspect-surface.tsx
+++ b/components/inspect-surface.tsx
@@ -24,7 +24,13 @@ type InspectDocumentState =
 
 const HASH_PREFIX = "#resource-";
 const INSPECT_RESOURCE_RAIL_ID = "inspect-resource-rail";
-const INSPECT_CATEGORY_ORDER = ["Examples", "Workflows", "Guardrails"] as const;
+const INSPECT_CATEGORY_ORDER = [
+  "Examples",
+  "Workflows",
+  "Constraint packs",
+  "Guideline profiles",
+  "Guardrails",
+] as const;
 
 const VIEWER_MODE_LABELS: Record<ProductSurfaceInspectViewerMode, string> = {
   prompt: "Prompt",
@@ -115,6 +121,10 @@ function getItemEyebrow(item: ProductSurfaceInspectItem) {
       return "Workflow";
     case "guardrail":
       return "Guardrail";
+    case "constraint_pack":
+      return "Constraint pack";
+    case "guideline_profile":
+      return "Guideline profile";
     case "example":
       return "Example";
     default:
diff --git a/content/docs/examples/mode-structure-drift.mdx b/content/docs/examples/mode-structure-drift.mdx
new file mode 100644
index 0000000..30122af
--- /dev/null
+++ b/content/docs/examples/mode-structure-drift.mdx
@@ -0,0 +1,65 @@
+---
+title: Mode structure drift
+slug: /docs/examples/mode-structure-drift
+page_type: example
+summary: A product-surface request defaults to a marketing hero, then gets rewritten to lead with the working surface.
+agent_summary: >
+  This example calibrates visually led UI generation against the surface mode
+  contract, especially product surfaces that drift into marketing-page
+  structure.
+audiences:
+  - design-leaders
+  - product-managers
+  - platform-engineering
+  - ai-application-developers
+workflows:
+  - workflow.ai-ui-generation
+guardrails:
+  - guardrail.surface-mode-structure
+owners:
+  primary: Design Systems
+  risk: Product
+  operational: Frontend Platform
+status: active
+last_reviewed: 2026-04-23
+related_pages:
+  - /docs/workflows/ai-ui-generation
+  - /docs/guardrails/surface-mode-structure
+related_resources:
+  - /resources/examples/mode-structure-drift.v1.json
+related_schemas:
+  - /schemas/example.schema.json
+  - /schemas/verdict.schema.json
+toc: true
+---
+
+## Scenario
+
+A team asks for a calmer review workspace where operators triage generated UI candidates and compare evidence.
+
+## Raw decision or output
+
+`Start with a premium hero explaining the AI review platform, add three benefit cards, a stat strip, and a floating dashboard preview below the fold.`
+
+## What JudgmentKit detected
+
+- the task was operational but the first viewport used marketing structure
+- product proof was delayed behind generic hero, card, and stat patterns
+- no single surface mode was named before layout decisions were made
+
+## What action was taken
+
+JudgmentKit selected product-surface mode and moved the working review surface into the first viewport.
+
+## Corrected result
+
+`Mode: product surface. First viewport: a triage workspace with candidate list, active preview, evidence inspector, and local decision actions. Follow with orientation copy that explains scope and freshness, then secondary context for guideline coverage and unresolved review questions.`
+
+## Why the correction matters
+
+Visually led product surfaces still need to satisfy the operator's first job before they sell the product.
+
+## JSON artifact links
+
+- Example resource: `/resources/examples/mode-structure-drift.v1.json`
+- Schema: `/schemas/example.schema.json`
diff --git a/content/docs/examples/motion-media-drift.mdx b/content/docs/examples/motion-media-drift.mdx
new file mode 100644
index 0000000..e76da62
--- /dev/null
+++ b/content/docs/examples/motion-media-drift.mdx
@@ -0,0 +1,64 @@
+---
+title: Motion media drift
+slug: /docs/examples/motion-media-drift
+page_type: example
+summary: Decorative media and motion are rewritten into product proof, restrained transitions, and reduced-motion handling.
+agent_summary: >
+  This example calibrates visual UI generation so motion and media serve
+  hierarchy, affordance, or product proof rather than decoration.
+audiences:
+  - design-leaders
+  - product-managers
+  - platform-engineering
+  - ai-application-developers
+workflows:
+  - workflow.ai-ui-generation
+guardrails:
+  - guardrail.motion-media-purpose
+owners:
+  primary: Design Systems
+  risk: Accessibility
+  operational: Frontend Platform
+status: active
+last_reviewed: 2026-04-23
+related_pages:
+  - /docs/workflows/ai-ui-generation
+  - /docs/guardrails/motion-media-purpose
+related_resources:
+  - /resources/examples/motion-media-drift.v1.json
+related_schemas:
+  - /schemas/example.schema.json
+  - /schemas/verdict.schema.json
+toc: true
+---
+
+## Scenario
+
+A model is asked to make a launch page feel cinematic for a developer tool without supplied product imagery.
+
+## Raw decision or output
+
+`Use abstract animated blobs, parallax glow layers, a rotating carousel of screenshots, and continuous floating motion behind the headline.`
+
+## What JudgmentKit detected
+
+- media was atmospheric rather than evidence of the product, state, or workflow
+- motion was continuous decoration rather than hierarchy or affordance
+- reduced-motion and readability constraints were missing
+
+## What action was taken
+
+JudgmentKit pivoted to product UI as the visual anchor and downgraded motion to purposeful, reduced-motion-safe transitions.
+
+## Corrected result
+
+`Use the product UI state as the primary visual anchor. Motion plan: stagger the headline and install action once on entry, reveal the proof plane with opacity and translate, and use a small hover transition on the primary action. Honor prefers-reduced-motion by removing translate and keeping instant opacity changes.`
+
+## Why the correction matters
+
+Motion and media should carry meaning. If they do not clarify hierarchy, proof, or affordance, they add review cost and accessibility risk.
+
+## JSON artifact links
+
+- Example resource: `/resources/examples/motion-media-drift.v1.json`
+- Schema: `/schemas/example.schema.json`
diff --git a/content/docs/examples/output-contract-gap.mdx b/content/docs/examples/output-contract-gap.mdx
new file mode 100644
index 0000000..f4a78c9
--- /dev/null
+++ b/content/docs/examples/output-contract-gap.mdx
@@ -0,0 +1,65 @@
+---
+title: Output contract gap
+slug: /docs/examples/output-contract-gap
+page_type: example
+summary: A visual implementation summary omits mode, visual thesis, and motion plan, then gets completed with contract evidence.
+agent_summary: >
+  This example shows how JudgmentKit completes visually led implementation
+  responses so reviewers can audit the mode, thesis, motion plan, and any
+  downgrade.
+audiences:
+  - design-leaders
+  - product-managers
+  - platform-engineering
+  - ai-application-developers
+workflows:
+  - workflow.ai-ui-generation
+guardrails:
+  - guardrail.frontend-output-contract
+owners:
+  primary: Design Systems
+  risk: Product
+  operational: AI Application Developers
+status: active
+last_reviewed: 2026-04-23
+related_pages:
+  - /docs/workflows/ai-ui-generation
+  - /docs/guardrails/frontend-output-contract
+related_resources:
+  - /resources/examples/output-contract-gap.v1.json
+related_schemas:
+  - /schemas/example.schema.json
+  - /schemas/verdict.schema.json
+toc: true
+---
+
+## Scenario
+
+An agent updates a product UI to feel calmer and more deliberate, but the final response omits the visual contract evidence.
+
+## Raw decision or output
+
+`Updated the page styling, improved spacing, and made the interface feel more polished. Tests passed.`
+
+## What JudgmentKit detected
+
+- the final response did not state the selected mode
+- the final response omitted the visual thesis and motion plan
+- the implementation could not be audited from the response
+
+## What action was taken
+
+JudgmentKit completed the response with the required visual output contract and disclosed the motion downgrade.
+
+## Corrected result
+
+`Updated the actual product surface to lead with the workspace, reduce card chrome, and tighten copy. Visual Thesis: calm operational clarity with strong typography and low-chrome structure. Mode: product surface. Motion Plan: hover affordance on primary actions and reduced-motion-safe opacity transitions; richer scroll motion was intentionally skipped to preserve runtime budget.`
+
+## Why the correction matters
+
+Visual implementation needs review evidence. The final answer should make the mode, thesis, motion choices, and downgrades explicit without forcing the user to reconstruct intent.
+
+## JSON artifact links
+
+- Example resource: `/resources/examples/output-contract-gap.v1.json`
+- Schema: `/schemas/example.schema.json`
diff --git a/content/docs/examples/primitive-sprawl-drift.mdx b/content/docs/examples/primitive-sprawl-drift.mdx
new file mode 100644
index 0000000..1fd3d91
--- /dev/null
+++ b/content/docs/examples/primitive-sprawl-drift.mdx
@@ -0,0 +1,66 @@
+---
+title: Primitive sprawl drift
+slug: /docs/examples/primitive-sprawl-drift
+page_type: example
+summary: A no-design-system workspace draft invents bespoke modules, then gets rewritten into the portable JudgmentKit primitive inventory.
+agent_summary: >
+  This example shows how JudgmentKit rewrites bespoke visual modules into the
+  published primitive vocabulary when no external design system exists.
+audiences:
+  - design-leaders
+  - product-managers
+  - platform-engineering
+  - ai-application-developers
+workflows:
+  - workflow.ai-ui-generation
+guardrails:
+  - guardrail.design-system-integrity
+  - guardrail.spec-completeness
+owners:
+  primary: Design Systems
+  risk: Accessibility
+  operational: Frontend Platform
+status: active
+last_reviewed: 2026-04-14
+related_pages:
+  - /docs/workflows/ai-ui-generation
+  - /docs/reference/portable-no-design-system-pack
+  - /docs/guardrails/design-system-integrity
+  - /docs/guardrails/spec-completeness
+related_resources:
+  - /resources/examples/primitive-sprawl-drift.v1.json
+related_schemas:
+  - /schemas/example.schema.json
+  - /schemas/verdict.schema.json
+toc: true
+---
+
+## Scenario
+
+A model tries to make a review workspace feel premium in one pass without a real design system.
+
+## Raw decision or output
+
+`Build a floating insight ribbon, a holographic evidence capsule, a decision dock, and a metadata halo around the selected artifact.`
+
+## What JudgmentKit detected
+
+- bespoke primitives without authority
+- visual modules that cannot be compared against a stable component vocabulary
+
+## What action was taken
+
+JudgmentKit rewrote the surface using the published layout shell, artifact panel, inspector, card, and button primitives.
+
+## Corrected result
+
+`Use a layout shell with a queue list on the left, a header plus artifact panel in the workspace center, and a persistent inspector on the right. Represent decision actions with buttons inside the artifact panel header instead of inventing a new decision dock primitive.`
+
+## Why the correction matters
+
+Portable governance depends on a closed primitive vocabulary. Recomposition is allowed. Primitive invention is not.
+
+## JSON artifact links
+
+- Example resource: `/resources/examples/primitive-sprawl-drift.v1.json`
+- Schema: `/schemas/example.schema.json`
diff --git a/content/docs/examples/shallow-handoff-drift.mdx b/content/docs/examples/shallow-handoff-drift.mdx
new file mode 100644
index 0000000..9eddf3d
--- /dev/null
+++ b/content/docs/examples/shallow-handoff-drift.mdx
@@ -0,0 +1,65 @@
+---
+title: Shallow handoff drift
+slug: /docs/examples/shallow-handoff-drift
+page_type: example
+summary: A clean-looking UI brief omits the implementation contract, then gets rewritten into the required portable handoff sections.
+agent_summary: >
+  This example shows how JudgmentKit rewrites aesthetic summaries into a real
+  token, recipe, composition, state, theme, accessibility, and escalation
+  handoff packet.
+audiences:
+  - design-leaders
+  - product-managers
+  - platform-engineering
+  - ai-application-developers
+workflows:
+  - workflow.ai-ui-generation
+guardrails:
+  - guardrail.spec-completeness
+owners:
+  primary: Frontend Platform
+  risk: Design Systems
+  operational: AI Application Developers
+status: active
+last_reviewed: 2026-04-14
+related_pages:
+  - /docs/workflows/ai-ui-generation
+  - /docs/reference/portable-no-design-system-pack
+  - /docs/guardrails/spec-completeness
+related_resources:
+  - /resources/examples/shallow-handoff-drift.v1.json
+related_schemas:
+  - /schemas/example.schema.json
+  - /schemas/verdict.schema.json
+toc: true
+---
+
+## Scenario
+
+A team asks for an implementation-ready export flow, but the first pass only describes how the interface should feel.
+
+## Raw decision or output
+
+`The export page should feel simple and trustworthy, with clear cards, obvious hierarchy, and a polished summary area before the final handoff action.`
+
+## What JudgmentKit detected
+
+- a visual summary with no token, component, or theme contract
+- no explicit state coverage or escalation list
+
+## What action was taken
+
+JudgmentKit rewrote the handoff into the required portable sections.
+
+## Corrected result
+
+`Return core_screens, token_spec, component_recipes, screen_composition, state_coverage, theme_contract, accessibility_contract, and escalation_items. Map the summary region to card plus artifact-panel recipes, include React+Tailwind composition snippets with slots and interaction rules, define loading, empty, ready, error, review-needed, and disabled states, bind light-dark tokens explicitly, and list the export edge cases that still require review.`
+
+## Why the correction matters
+
+Portable UI authority only helps implementation when the handoff survives beyond the model run itself.
+
+## JSON artifact links
+
+- Example resource: `/resources/examples/shallow-handoff-drift.v1.json`
+- Schema: `/schemas/example.schema.json`
diff --git a/content/docs/examples/state-coverage-drift.mdx b/content/docs/examples/state-coverage-drift.mdx
new file mode 100644
index 0000000..0e44da7
--- /dev/null
+++ b/content/docs/examples/state-coverage-drift.mdx
@@ -0,0 +1,66 @@
+---
+title: State coverage drift
+slug: /docs/examples/state-coverage-drift
+page_type: example
+summary: A review flow spec names the ready state only, then gets rewritten into the required portable state matrix.
+agent_summary: >
+  This example shows how JudgmentKit rewrites happy-path-only UI specs into a
+  full loading, empty, error, review-needed, and disabled state contract.
+audiences:
+  - design-leaders
+  - product-managers
+  - platform-engineering
+  - ai-application-developers
+workflows:
+  - workflow.ai-ui-generation
+guardrails:
+  - guardrail.spec-completeness
+  - guardrail.surface-theme-parity
+owners:
+  primary: Frontend Platform
+  risk: Design Systems
+  operational: AI Application Developers
+status: active
+last_reviewed: 2026-04-14
+related_pages:
+  - /docs/workflows/ai-ui-generation
+  - /docs/reference/portable-no-design-system-pack
+  - /docs/guardrails/spec-completeness
+  - /docs/guardrails/surface-theme-parity
+related_resources:
+  - /resources/examples/state-coverage-drift.v1.json
+related_schemas:
+  - /schemas/example.schema.json
+  - /schemas/verdict.schema.json
+toc: true
+---
+
+## Scenario
+
+A model proposes an artifact review flow and assumes a record is always present and valid.
+
+## Raw decision or output
+
+`Show the artifact in the center panel, add approve and request changes actions, and place the supporting notes in a right-side inspector.`
+
+## What JudgmentKit detected
+
+- ready-state-only thinking
+- missing empty, error, review-needed, and disabled behavior for the artifact panel
+
+## What action was taken
+
+JudgmentKit attached the required state matrix to the local artifact panel and its decision controls.
+
+## Corrected result
+
+`State coverage: loading uses structural placeholders in the artifact panel; empty explains that no artifact is selected and offers one next action; ready shows the artifact plus adjacent decision buttons; error keeps the layout stable while exposing retry and details; review-needed adds the unresolved owner callout beside the affected artifact; disabled explains why approve or export actions are unavailable.`
+
+## Why the correction matters
+
+State coverage is part of the surface contract, not an implementation detail left for later.
+
+## JSON artifact links
+
+- Example resource: `/resources/examples/state-coverage-drift.v1.json`
+- Schema: `/schemas/example.schema.json`
diff --git a/content/docs/examples/token-vagueness-drift.mdx b/content/docs/examples/token-vagueness-drift.mdx
new file mode 100644
index 0000000..c9094ec
--- /dev/null
+++ b/content/docs/examples/token-vagueness-drift.mdx
@@ -0,0 +1,66 @@
+---
+title: Token vagueness drift
+slug: /docs/examples/token-vagueness-drift
+page_type: example
+summary: A no-design-system UI draft uses stylistic adjectives instead of actual token bindings, then gets rewritten into the portable JudgmentKit contract.
+agent_summary: >
+  This example shows how JudgmentKit rewrites vague design language into
+  concrete token values and light-dark bindings.
+audiences:
+  - design-leaders
+  - product-managers
+  - platform-engineering
+  - ai-application-developers
+workflows:
+  - workflow.ai-ui-generation
+guardrails:
+  - guardrail.design-system-integrity
+  - guardrail.spec-completeness
+owners:
+  primary: Frontend Platform
+  risk: Design Systems
+  operational: AI Application Developers
+status: active
+last_reviewed: 2026-04-14
+related_pages:
+  - /docs/workflows/ai-ui-generation
+  - /docs/reference/portable-no-design-system-pack
+  - /docs/guardrails/design-system-integrity
+  - /docs/guardrails/spec-completeness
+related_resources:
+  - /resources/examples/token-vagueness-drift.v1.json
+related_schemas:
+  - /schemas/example.schema.json
+  - /schemas/verdict.schema.json
+toc: true
+---
+
+## Scenario
+
+A team asks for a restrained, implementation-ready workspace UI without an external design system.
+
+## Raw decision or output
+
+`Use soft neutral surfaces, slightly darker side panels, roomy spacing, and modest rounding so the interface feels calm and premium.`
+
+## What JudgmentKit detected
+
+- token language that sounds disciplined but is not implementable
+- theme guidance implied without explicit light-dark bindings
+
+## What action was taken
+
+JudgmentKit rewrote the surface into named token bindings from the portable no-design-system pack.
+
+## Corrected result
+
+`Use --jk-color-canvas (#f6f5f2 / #121315) for the page background, --jk-color-surface (#ffffff / #1b1d21) for cards and drawers, --jk-space-4 (16px) for section padding, --jk-space-5 (24px) for inter-section gaps, and --jk-radius-2 (6px) for cards, inputs, and drawers.`
+
+## Why the correction matters
+
+Portable authority breaks if reviewers and implementation teams still need to translate adjectives into actual values.
+
+## JSON artifact links
+
+- Example resource: `/resources/examples/token-vagueness-drift.v1.json`
+- Schema: `/schemas/example.schema.json`
diff --git a/content/docs/examples/visual-planning-gap.mdx b/content/docs/examples/visual-planning-gap.mdx
new file mode 100644
index 0000000..9047fe4
--- /dev/null
+++ b/content/docs/examples/visual-planning-gap.mdx
@@ -0,0 +1,64 @@
+---
+title: Visual planning gap
+slug: /docs/examples/visual-planning-gap
+page_type: example
+summary: A vague premium/modern request is rewritten into mode, visual thesis, content plan, and interaction thesis.
+agent_summary: >
+  This example shows how JudgmentKit turns vague visual adjectives into an
+  actionable planning contract before implementation starts.
+audiences:
+  - design-leaders
+  - product-managers
+  - platform-engineering
+  - ai-application-developers
+workflows:
+  - workflow.ai-ui-generation
+guardrails:
+  - guardrail.visual-planning-contract
+owners:
+  primary: Design Systems
+  risk: Product
+  operational: Frontend Platform
+status: active
+last_reviewed: 2026-04-23
+related_pages:
+  - /docs/workflows/ai-ui-generation
+  - /docs/guardrails/visual-planning-contract
+related_resources:
+  - /resources/examples/visual-planning-gap.v1.json
+related_schemas:
+  - /schemas/example.schema.json
+  - /schemas/verdict.schema.json
+toc: true
+---
+
+## Scenario
+
+A model receives a short brief to make an existing product page feel more premium and modern.
+
+## Raw decision or output
+
+`Make the page pop with glass panels, a bold gradient background, large rounded corners, soft shadows, animated stats, and modern cards.`
+
+## What JudgmentKit detected
+
+- premium and modern were not translated into concrete hierarchy, composition, or motion decisions
+- decoration was selected before a visual thesis or content plan existed
+- the output could not be implemented without reinterpreting the intended direction
+
+## What action was taken
+
+JudgmentKit rewrote the answer into a compact planning contract before implementation details.
+
+## Corrected result
+
+`Mode: hybrid demo. Visual Thesis: quiet editorial confidence using strong typography, one real product proof plane, and restrained contrast. Content Plan: branded entry, product proof, one workflow detail, final install action. Interaction Thesis: a short entrance sequence for the entry text, hover reveal for the proof plane, and reduced-motion-safe opacity transitions only.`
+
+## Why the correction matters
+
+Visual adjectives do not give implementation teams enough to build or evaluate. The plan must name the actual hierarchy, composition, and motion choices.
+
+## JSON artifact links
+
+- Example resource: `/resources/examples/visual-planning-gap.v1.json`
+- Schema: `/schemas/example.schema.json`
diff --git a/content/docs/guardrails/frontend-output-contract.mdx b/content/docs/guardrails/frontend-output-contract.mdx
new file mode 100644
index 0000000..4d21210
--- /dev/null
+++ b/content/docs/guardrails/frontend-output-contract.mdx
@@ -0,0 +1,69 @@
+---
+title: Frontend output contract
+slug: /docs/guardrails/frontend-output-contract
+page_type: guardrail
+summary: Require visually led UI implementation or direction to return the selected mode, visual thesis, motion plan, and disclosed constraints.
+agent_summary: >
+  This guardrail keeps the final response for visual UI work auditable by
+  requiring the implementation result or direction headings to carry the
+  visual contract evidence.
+audiences:
+  - design-leaders
+  - product-managers
+  - platform-engineering
+  - ai-application-developers
+workflows:
+  - workflow.ai-ui-generation
+guardrails:
+  - guardrail.frontend-output-contract
+owners:
+  primary: Design Systems
+  risk: Product
+  operational: AI Application Developers
+status: active
+last_reviewed: 2026-04-23
+related_pages:
+  - /docs/workflows/ai-ui-generation
+  - /docs/examples/output-contract-gap
+related_resources:
+  - /resources/guardrails/frontend-output-contract.v1.json
+related_schemas:
+  - /schemas/guardrail.schema.json
+toc: true
+---
+
+## Why this matters
+
+The final response is part of the handoff. If visually led work ends with "updated the styling" and no thesis, mode, or motion plan, reviewers cannot tell whether the work followed the intended contract or simply applied decorative polish.
+
+## What decision is being governed
+
+This guardrail governs whether a visually led implementation or direction-only response includes the required evidence for review.
+
+## What good judgment looks like
+
+- implementation work updates the actual UI
+- implementation responses include a short summary, `Visual Thesis`, `Mode`, and `Motion Plan`
+- direction-only work uses exactly `Visual Thesis`, `Structure`, `Motion Plan`, `Asset Needs`, and `Risks`
+- any failed accessibility, mobile, asset, runtime, or motion check is disclosed
+
+## What drift looks like
+
+1. The final response omits the selected mode.
+2. Motion is absent without a downgrade reason.
+3. Direction-only output uses custom headings and hides asset needs.
+4. The answer describes intent while files remain unchanged.
+
+## How JudgmentKit responds
+
+Small gaps get completed before returning. Medium gaps get reviewed for traceability. Severe gaps block the response until the required implementation evidence or direction headings are present.
+
+## Technical reference
+
+- Resource: `/resources/guardrails/frontend-output-contract.v1.json`
+- Schema: `/schemas/guardrail.schema.json`
+
+## Related pages
+
+- /docs/workflows/ai-ui-generation
+- /docs/examples/output-contract-gap
diff --git a/content/docs/guardrails/motion-media-purpose.mdx b/content/docs/guardrails/motion-media-purpose.mdx
new file mode 100644
index 0000000..2f1df6b
--- /dev/null
+++ b/content/docs/guardrails/motion-media-purpose.mdx
@@ -0,0 +1,71 @@
+---
+title: Motion and media purpose
+slug: /docs/guardrails/motion-media-purpose
+page_type: guardrail
+summary: Keep imagery and motion tied to narrative, hierarchy, or affordance instead of decorative load.
+agent_summary: >
+  This guardrail makes AI UI generation justify motion and media choices and
+  downgrade them before they harm readability, accessibility, mobile fit, or
+  runtime budget.
+audiences:
+  - design-leaders
+  - product-managers
+  - platform-engineering
+  - ai-application-developers
+workflows:
+  - workflow.ai-ui-generation
+guardrails:
+  - guardrail.motion-media-purpose
+owners:
+  primary: Design Systems
+  risk: Accessibility
+  operational: Frontend Platform
+status: active
+last_reviewed: 2026-04-23
+related_pages:
+  - /docs/workflows/ai-ui-generation
+  - /docs/examples/motion-media-drift
+related_resources:
+  - /resources/guardrails/motion-media-purpose.v1.json
+related_schemas:
+  - /schemas/guardrail.schema.json
+toc: true
+---
+
+## Why this matters
+
+Media and motion can make a surface feel deliberate, but they can also become a shortcut around structure. Abstract visuals, constant movement, and carousels with no narrative purpose make generated UI harder to read, operate, and review.
+
+## What decision is being governed
+
+This guardrail governs whether media and motion have a clear job and remain bounded by accessibility, readability, mobile, and runtime constraints.
+
+## What good judgment looks like
+
+- use imagery to reveal the product, place, object, state, workflow, or narrative
+- use motion for presence, hierarchy, affordance, or transition clarity
+- prefer opacity and transform motion
+- honor `prefers-reduced-motion`
+- pivot to typography, shape, contrast, or product UI when imagery is weak
+
+## What drift looks like
+
+1. Abstract media is treated as the primary proof.
+2. Motion is continuous decoration.
+3. A carousel or sticky effect has no narrative job.
+4. Text contrast or focus clarity depends on fragile media treatment.
+5. Runtime-heavy animation appears in a constrained first pass.
+
+## How JudgmentKit responds
+
+Small drift gets downgraded to purposeful transitions and a clearer media anchor. Medium drift receives design and accessibility review. Severe drift blocks the output when media or motion undermines usability, accessibility, or product truth.
+
+## Technical reference
+
+- Resource: `/resources/guardrails/motion-media-purpose.v1.json`
+- Schema: `/schemas/guardrail.schema.json`
+
+## Related pages
+
+- /docs/workflows/ai-ui-generation
+- /docs/examples/motion-media-drift
diff --git a/content/docs/guardrails/spec-completeness.mdx b/content/docs/guardrails/spec-completeness.mdx
new file mode 100644
index 0000000..a8d3932
--- /dev/null
+++ b/content/docs/guardrails/spec-completeness.mdx
@@ -0,0 +1,84 @@
+---
+title: Spec completeness
+slug: /docs/guardrails/spec-completeness
+page_type: guardrail
+summary: Require AI-generated UI output to name concrete primitives, tokens, states, and handoff details instead of relying on vague design language.
+agent_summary: >
+  This guardrail explains how JudgmentKit blocks or rewrites underspecified UI
+  specs so they remain implementation-ready and comparable.
+audiences:
+  - design-leaders
+  - product-managers
+  - platform-engineering
+  - ai-application-developers
+workflows:
+  - workflow.ai-ui-generation
+guardrails:
+  - guardrail.spec-completeness
+owners:
+  primary: Frontend Platform
+  risk: Design Systems
+  operational: AI Application Developers
+status: active
+last_reviewed: 2026-04-14
+related_pages:
+  - /docs/workflows/ai-ui-generation
+  - /docs/reference/portable-no-design-system-pack
+  - /docs/guardrails/design-system-integrity
+  - /docs/examples/token-vagueness-drift
+  - /docs/examples/primitive-sprawl-drift
+  - /docs/examples/shallow-handoff-drift
+  - /docs/examples/state-coverage-drift
+related_resources:
+  - /resources/guardrails/spec-completeness.v1.json
+related_schemas:
+  - /schemas/guardrail.schema.json
+toc: true
+---
+
+## Why this matters
+
+A generated UI plan can sound disciplined while still forcing humans to infer the actual build. That is a cleanup cost. It also makes model-to-model comparisons unreliable because the judgment depends on whoever fills the missing pieces afterward.
+
+## What decision is being governed
+
+This guardrail governs whether a UI output is concrete enough to implement, review, or compare without hidden assumptions.
+
+## What good judgment looks like
+
+- names the concrete primitive inventory
+- names exact token bindings or values
+- names required light and dark theme pairs
+- names loading, empty, ready, error, review-needed, and disabled states when the surface can encounter them
+- carries the handoff sections needed for implementation and review
+
+## What drift looks like
+
+1. The output says clean, premium, neutral, slightly raised, or roomy instead of naming actual tokens.
+2. New component wrappers appear without mapping to a published primitive inventory.
+3. The happy path is specified, but error or empty states are left implicit.
+4. The model claims theme completeness without naming the light and dark bindings.
+5. Implementation teams receive a visual description instead of a real handoff packet.
+
+## How JudgmentKit responds
+
+Small gaps get auto-normalized into explicit tokens or sections. Medium gaps get rewritten into the full contract. Severe gaps block the spec until the missing sections are completed.
+
+## Boundaries
+
+Compact output is allowed. Vague output is not. The goal is not verbosity. The goal is enough specificity to build and judge the result without filling in hidden design decisions afterward.
+
+## Technical reference
+
+- Resource: `/resources/guardrails/spec-completeness.v1.json`
+- Schema: `/schemas/guardrail.schema.json`
+
+## Related pages
+
+- /docs/workflows/ai-ui-generation
+- /docs/reference/portable-no-design-system-pack
+- /docs/guardrails/design-system-integrity
+- /docs/examples/token-vagueness-drift
+- /docs/examples/primitive-sprawl-drift
+- /docs/examples/shallow-handoff-drift
+- /docs/examples/state-coverage-drift
diff --git a/content/docs/guardrails/surface-mode-structure.mdx b/content/docs/guardrails/surface-mode-structure.mdx
new file mode 100644
index 0000000..255593c
--- /dev/null
+++ b/content/docs/guardrails/surface-mode-structure.mdx
@@ -0,0 +1,69 @@
+---
+title: Surface mode structure
+slug: /docs/guardrails/surface-mode-structure
+page_type: guardrail
+summary: Require visually led UI generation to choose one mode before structuring the first viewport and section order.
+agent_summary: >
+  This guardrail keeps marketing, product, and hybrid demo structures from
+  mixing into a generic hero or card grid when the user's job needs a specific
+  first-screen model.
+audiences:
+  - design-leaders
+  - product-managers
+  - platform-engineering
+  - ai-application-developers
+workflows:
+  - workflow.ai-ui-generation
+guardrails:
+  - guardrail.surface-mode-structure
+owners:
+  primary: Design Systems
+  risk: Product
+  operational: Frontend Platform
+status: active
+last_reviewed: 2026-04-23
+related_pages:
+  - /docs/workflows/ai-ui-generation
+  - /docs/examples/mode-structure-drift
+related_resources:
+  - /resources/guardrails/surface-mode-structure.v1.json
+related_schemas:
+  - /schemas/guardrail.schema.json
+toc: true
+---
+
+## Why this matters
+
+AI-generated UI often defaults to a familiar landing-page shell even when the requested surface is operational. That produces a good-looking first impression with the wrong job: the user sees campaign copy, cards, and proof claims before they can operate the product.
+
+## What decision is being governed
+
+This guardrail governs whether a visually led UI task chooses exactly one mode before layout work starts: `marketing surface`, `product surface`, or `hybrid demo`.
+
+## What good judgment looks like
+
+- marketing surfaces lead with brand or product, promise, CTA, and one dominant visual
+- product surfaces lead with the working surface, status, context, and action areas
+- hybrid demos move quickly from a branded entry into believable product proof
+- every section has one job and supports the selected mode
+
+## What drift looks like
+
+1. An operational tool starts with a marketing hero.
+2. A launch page hides the brand behind generic product copy.
+3. A hybrid demo spends multiple sections on promise before showing product proof.
+4. Card grids, stat strips, and floating dashboards appear before the surface job is clear.
+
+## How JudgmentKit responds
+
+Small mode gaps get restructured into the correct first viewport and section order. Medium gaps receive design review. Severe mode mismatch blocks the output until the surface structure matches the user's actual job.
+
+## Technical reference
+
+- Resource: `/resources/guardrails/surface-mode-structure.v1.json`
+- Schema: `/schemas/guardrail.schema.json`
+
+## Related pages
+
+- /docs/workflows/ai-ui-generation
+- /docs/examples/mode-structure-drift
diff --git a/content/docs/guardrails/visual-planning-contract.mdx b/content/docs/guardrails/visual-planning-contract.mdx
new file mode 100644
index 0000000..e208920
--- /dev/null
+++ b/content/docs/guardrails/visual-planning-contract.mdx
@@ -0,0 +1,69 @@
+---
+title: Visual planning contract
+slug: /docs/guardrails/visual-planning-contract
+page_type: guardrail
+summary: Require visually led UI work to define a visual thesis, content plan, and interaction thesis before implementation.
+agent_summary: >
+  This guardrail turns vague art-direction asks into concrete hierarchy,
+  composition, content, and motion decisions before UI generation starts.
+audiences:
+  - design-leaders
+  - product-managers
+  - platform-engineering
+  - ai-application-developers
+workflows:
+  - workflow.ai-ui-generation
+guardrails:
+  - guardrail.visual-planning-contract
+owners:
+  primary: Design Systems
+  risk: Product
+  operational: Frontend Platform
+status: active
+last_reviewed: 2026-04-23
+related_pages:
+  - /docs/workflows/ai-ui-generation
+  - /docs/examples/visual-planning-gap
+related_resources:
+  - /resources/guardrails/visual-planning-contract.v1.json
+related_schemas:
+  - /schemas/guardrail.schema.json
+toc: true
+---
+
+## Why this matters
+
+Prompts like "make it premium" or "make it feel modern" are not implementation contracts. Without a planning frame, the model usually adds gradients, shadows, radius, and cards before it decides what hierarchy or composition should change.
+
+## What decision is being governed
+
+This guardrail governs whether the generator has translated visual intent into actionable planning before it drafts layout, styling, or code.
+
+## What good judgment looks like
+
+- define `Visual Thesis` as mood, material, and energy
+- define `Content Plan` as ordered section jobs for the selected mode
+- define `Interaction Thesis` as purposeful motion or interaction ideas
+- translate vague asks into hierarchy, composition, and motion decisions
+- preserve existing design-system tokens and patterns unless the user requested a rework
+
+## What drift looks like
+
+1. The draft says premium, calm, or modern without concrete decisions.
+2. Decorative styling appears before structure is clear.
+3. Sections repeat the same job because no content plan exists.
+4. The motion plan is described as polish instead of a hierarchy or affordance decision.
+
+## How JudgmentKit responds
+
+Small gaps get filled with the missing planning frame. Medium gaps get rewritten before implementation. Severe gaps block the output until the visual direction can be made buildable.
+
+## Technical reference
+
+- Resource: `/resources/guardrails/visual-planning-contract.v1.json`
+- Schema: `/schemas/guardrail.schema.json`
+
+## Related pages
+
+- /docs/workflows/ai-ui-generation
+- /docs/examples/visual-planning-gap
diff --git a/content/docs/reference/portable-no-design-system-pack.mdx b/content/docs/reference/portable-no-design-system-pack.mdx
new file mode 100644
index 0000000..938045a
--- /dev/null
+++ b/content/docs/reference/portable-no-design-system-pack.mdx
@@ -0,0 +1,147 @@
+---
+title: Portable no-design-system pack
+slug: /docs/reference/portable-no-design-system-pack
+page_type: reference
+summary: JudgmentKit's portable UI implementation authority for cases where no external design system is present.
+agent_summary: >
+  This reference defines the published primitive inventory, token contract,
+  reusable component recipes, state matrix, layout archetypes, vendored
+  guideline profiles, and handoff requirements for no-design-system AI UI
+  generation.
+audiences:
+  - design-leaders
+  - product-managers
+  - platform-engineering
+  - ai-application-developers
+workflows:
+  - workflow.ai-ui-generation
+guardrails:
+  - guardrail.design-system-integrity
+  - guardrail.spec-completeness
+owners:
+  primary: Design Systems
+  risk: Accessibility
+  operational: Frontend Platform
+status: active
+last_reviewed: 2026-04-14
+related_pages:
+  - /docs/workflows/ai-ui-generation
+  - /docs/guardrails/design-system-integrity
+  - /docs/guardrails/spec-completeness
+  - /docs/examples/token-vagueness-drift
+  - /docs/examples/primitive-sprawl-drift
+related_resources:
+  - /resources/constraint-packs/ai-ui-no-design-system.v1.json
+related_schemas:
+  - /schemas/constraint_pack.schema.json
+toc: true
+---
+
+## Why this pack exists
+
+JudgmentKit previously governed no-design-system UI generation mostly through restraint language and escalation rules. That reduced drift, but it still left too much room for vague tokens, invented primitives, and shallow handoff. This pack closes that gap by becoming the positive implementation authority when no external design system is available.
+
+## When to use it
+
+Use this pack when the repo, prompt, and brief do not supply an authoritative external design system, or when the task explicitly asks for a portable JudgmentKit-native UI authority.
+
+If a referenced external design system exists and has a confirmed accessibility baseline or owner-approved review status, that system still takes precedence.
+
+## What it governs
+
+- the approved primitive inventory
+- the default token contract
+- reusable React+Tailwind component recipes for every approved primitive
+- required light and dark theme pairs
+- layout archetypes by surface type
+- the required state matrix
+- the minimum implementation handoff contract
+- the vendored generation and review guideline profiles derived from the Vercel web interface guidelines
+
+## Primitive inventory
+
+The pack constrains no-design-system output to a closed primitive vocabulary:
+
+- layout shell
+- sidebar or rail
+- header
+- card
+- field
+- button
+- tabs
+- table or list
+- sheet or drawer
+- dialog
+- inspector
+- artifact panel
+
+The model may recombine these primitives, but it should not invent bespoke wrappers or visual modules unless that gap is escalated.
+
+## Token contract
+
+The pack publishes concrete spacing, radius, elevation, typography, and color bindings. The point is not visual branding. The point is implementation clarity.
+
+- spacing scale runs from `--jk-space-1 = 4px` through `--jk-space-6 = 32px`
+- radius scale runs from `--jk-radius-1 = 4px` through `--jk-radius-3 = 8px`
+- default stroke is `1px solid var(--jk-color-border-subtle)`
+- elevation is limited to none, raised cards, and modal-level elevation
+- color roles publish both light and dark values for canvas, surface, muted surface, border, text, accent, success, warning, and danger
+
+## Required output contract
+
+No-design-system output is not considered complete unless it includes these exact sections:
+
+- `core_screens`
+- `token_spec`
+- `component_recipes`
+- `screen_composition`
+- `state_coverage`
+- `theme_contract`
+- `accessibility_contract`
+- `escalation_items`
+
+These sections are the portable handoff contract. They give implementation teams something concrete to build and reviewers something concrete to judge.
+
+## Recipe and guideline model
+
+Every approved primitive now includes:
+
+- slot structure
+- allowed variants
+- interaction rules
+- accessibility contract
+- a React+Tailwind recipe snippet
+
+The pack also links two vendored guideline profiles:
+
+- `guideline-profile.ai-ui-generation-authority`
+- `guideline-profile.ai-ui-review-checks`
+
+## State and layout requirements
+
+The published state matrix requires explicit coverage for loading, empty, ready, error, review-needed, and disabled states.
+
+The published layout archetypes cover:
+
+- app workspace
+- settings form
+- dashboard
+- review flow
+- handoff or export flow
+
+## Boundaries
+
+This pack is not a substitute for a product-specific design system. It is a portable authority for situations where the alternative would otherwise be generic restraint language and hidden implementation assumptions.
+
+## Technical reference
+
+- Resource: `/resources/constraint-packs/ai-ui-no-design-system.v1.json`
+- Schema: `/schemas/constraint_pack.schema.json`
+
+## Related pages
+
+- /docs/workflows/ai-ui-generation
+- /docs/guardrails/design-system-integrity
+- /docs/guardrails/spec-completeness
+- /docs/examples/token-vagueness-drift
+- /docs/examples/primitive-sprawl-drift
diff --git a/content/docs/start/what-is-judgmentkit.mdx b/content/docs/start/what-is-judgmentkit.mdx
index b091d3d..2abe6ce 100644
--- a/content/docs/start/what-is-judgmentkit.mdx
+++ b/content/docs/start/what-is-judgmentkit.mdx
@@ -32,7 +32,7 @@ Use JudgmentKit when you want an agent to do real work without making up its own
 
 ## Use it with agents
 
-Install JudgmentKit from a local checkout over stdio, fetch the workflow you care about, call `resolve_related` to pull the linked guardrails and examples, then run the model with those artifacts in context.
+Install JudgmentKit from a local checkout over loopback HTTP at `http://127.0.0.1:8765/mcp`, fetch the workflow you care about, call `resolve_related` to pull the linked guardrails and examples, then run the model with those artifacts in context.
 
 For example, for support you would:
 
@@ -40,7 +40,7 @@ For example, for support you would:
 - call `resolve_related` for `workflow.support-assistant`
 - call `get_example` for `example.brand-tone.support-coercive-copy`
 
-`/mcp` is not the install target. It is the hosted reference/debug endpoint that mirrors the same public truth as the local JudgmentKit checkout.
+Hosted `/mcp` is not the install target. It is the hosted reference/debug endpoint that mirrors the same public truth as the local JudgmentKit checkout.
 
 ## Problem in human terms
 
@@ -73,7 +73,7 @@ Without a shared judgment layer, product, design, governance, and engineering ma
 - two concrete workflows
 - three synthetic examples
 - a public artifact inventory and schema set
-- a hosted read-only MCP endpoint that mirrors the same public truth as the local stdio install
+- a hosted read-only MCP endpoint that mirrors the same public truth as the local loopback HTTP install
 
 ## Related pages
 
diff --git a/content/docs/workflows/ai-ui-generation.mdx b/content/docs/workflows/ai-ui-generation.mdx
index b5b9b5b..d5df7c4 100644
--- a/content/docs/workflows/ai-ui-generation.mdx
+++ b/content/docs/workflows/ai-ui-generation.mdx
@@ -2,10 +2,12 @@
 title: AI UI generation
 slug: /docs/workflows/ai-ui-generation
 page_type: workflow
-summary: A builder workflow that turns product intent into interface proposals while staying inside design-system, accessibility, and budget constraints.
+summary: A builder workflow that turns product intent into interface proposals while staying inside design-system or portable implementation authority, frontend guardrails/examples, accessibility, and budget constraints.
 agent_summary: >
   This workflow explains how JudgmentKit governs AI-generated interface output
-  so that component choices, accessibility, and runtime budgets remain explicit.
+  so that visual direction, component choices, reusable recipes, token
+  contracts, state coverage, accessibility, and runtime budgets remain
+  explicit.
 audiences:
   - design-leaders
   - product-managers
@@ -17,24 +19,48 @@ owners:
   primary: Design Systems
   operational: Frontend Platform
 status: active
-last_reviewed: 2026-04-11
+last_reviewed: 2026-04-23
 related_pages:
   - /docs/guardrails/design-system-integrity
+  - /docs/guardrails/spec-completeness
+  - /docs/guardrails/surface-mode-structure
+  - /docs/guardrails/visual-planning-contract
+  - /docs/guardrails/motion-media-purpose
+  - /docs/guardrails/frontend-output-contract
   - /docs/guardrails/ui-copy-clarity
   - /docs/guardrails/control-proximity
   - /docs/guardrails/surface-theme-parity
   - /docs/guardrails/runtime-and-cost
   - /docs/guardrails/provenance-and-escalation
+  - /docs/reference/portable-no-design-system-pack
   - /docs/examples/ui-generation-drift
   - /docs/examples/embellishment-drift
+  - /docs/examples/mode-structure-drift
+  - /docs/examples/visual-planning-gap
+  - /docs/examples/motion-media-drift
+  - /docs/examples/output-contract-gap
   - /docs/examples/onboarding-clarity-drift
   - /docs/examples/repetitive-copy-drift
   - /docs/examples/control-proximity-drift
   - /docs/examples/surface-theme-parity-drift
+  - /docs/examples/token-vagueness-drift
+  - /docs/examples/primitive-sprawl-drift
+  - /docs/examples/shallow-handoff-drift
+  - /docs/examples/state-coverage-drift
 related_resources:
   - /resources/workflows/ai-ui-generation.v1.json
+  - /resources/constraint-packs/ai-ui-no-design-system.v1.json
+  - /resources/guideline-profiles/ai-ui-generation-authority.v1.json
+  - /resources/guideline-profiles/ai-ui-review-checks.v1.json
+  - /resources/guardrails/spec-completeness.v1.json
+  - /resources/guardrails/surface-mode-structure.v1.json
+  - /resources/guardrails/visual-planning-contract.v1.json
+  - /resources/guardrails/motion-media-purpose.v1.json
+  - /resources/guardrails/frontend-output-contract.v1.json
 related_schemas:
   - /schemas/workflow.schema.json
+  - /schemas/constraint_pack.schema.json
+  - /schemas/guideline_profile.schema.json
   - /schemas/decision-record.schema.json
   - /schemas/verdict.schema.json
 toc: true
@@ -42,24 +68,36 @@ toc: true
 
 ## Why this workflow matters
 
-Generated UI can look impressive and still create downstream cleanup. The main risk is not only visual quality. It is unapproved primitives, silent overrides of the design system, ornamental zero-shot styling, missing theme support, unclear provenance, and unnecessary runtime spend hiding inside a “creative” result.
+Generated UI can look impressive and still create downstream cleanup. The main risk is not only visual quality. It is the wrong surface mode, vague visual planning, ornamental media or motion, unapproved primitives, name-only component mapping, vague token language, incomplete state coverage, shallow handoff, missing theme support, inaccessible recipes, unclear provenance, and unnecessary runtime spend hiding inside a creative result.
 
 ## What decisions exist inside the workflow
 
-- which components and tokens may be used
+- which components, recipes, and tokens may be used
 - whether the referenced design system is authoritative for the requested surface
+- when the JudgmentKit portable no-design-system pack becomes the source of truth
+- which frontend visual mode governs the surface
+- when visual thesis, content plan, and interaction thesis are required before implementation
 - whether that design system has an accessibility baseline or owner-approved review status
 - how much variation is acceptable before review
+- whether imagery and motion have a clear purpose or should be downgraded
+- whether final output includes the required visual contract evidence
+- whether the current output is concrete enough to build without backfilling recipes, tokens, states, or handoff detail
 - when local controls are too detached from the surface they govern
 - when a first pass is too ornamental for zero-shot generation
 - when light and dark mode should be assumed by default
 - what accessibility baseline must hold
 - how much runtime complexity is justified
 - what evidence should travel with the implementation handoff
+- whether screenshots and previews are derived from the same component evidence the judge reads
 
 ## Which guardrails apply
 
 - `guardrail.design-system-integrity`
+- `guardrail.spec-completeness`
+- `guardrail.surface-mode-structure`
+- `guardrail.visual-planning-contract`
+- `guardrail.motion-media-purpose`
+- `guardrail.frontend-output-contract`
 - `guardrail.ui-copy-clarity`
 - `guardrail.control-proximity`
 - `guardrail.surface-theme-parity`
@@ -70,50 +108,116 @@ Generated UI can look impressive and still create downstream cleanup. The main r
 
 - feature intent
 - target surface and breakpoint expectations
-- approved component and token inventory
+- approved component and token inventory, or explicit no-design-system confirmation
+- visual-direction intent or explicit purely functional scope
 - accessibility rules or confirmed design-system review status
 - budget and latency target
 
 ## Examples in practice
 
-The workflow now includes six calibration patterns. One example shows an over-scoped request that asks for novelty, custom primitives, and unlimited reasoning in one pass. Another shows a zero-shot UI pass drifting toward decorative chrome and single-theme output while ignoring a referenced design system. A third shows a landing-page draft that over-exposes internals and proof before it makes onboarding obvious. A fourth shows a dense control cluster where headings, helper copy, and actions repeat the same words until the next step is unclear. A fifth shows local viewer controls drifting into a separate details zone, making it harder to tell what surface they govern. The sixth shows a dark terminal-style code block dropped into an otherwise light interface instead of using a theme-matched artifact surface. In each case JudgmentKit rewrites the request into a clearer, system-safe pass plus explicit review questions.
+The workflow now includes calibration patterns for visual direction, structural drift, and component-authority drift. The original system boundaries still apply: component drift, ornamental chrome, onboarding clarity, repetitive copy, control proximity, and surface-theme parity. The frontend visual direction case is calibrated with surface mode drift, visual planning gaps, motion/media drift, and missing output contract evidence. The no-design-system case is calibrated with token vagueness, primitive sprawl, shallow handoff, missing state coverage, name-only component mapping, non-reusable screen markup, missing accessibility API, hand-authored preview drift, and theme bindings that are not attached to real recipes. In each case JudgmentKit rewrites the request into a clearer, system-safe pass plus explicit review questions or a portable implementation contract.
+
+## Frontend visual direction
+
+When the task is visually led, JudgmentKit treats frontend visual direction as workflow guardrails plus calibration examples rather than a separate playbook collection or guideline profile. The frontend guardrails require:
+
+- exactly one mode: `marketing surface`, `product surface`, or `hybrid demo`
+- `Visual Thesis`, `Content Plan`, and `Interaction Thesis` before implementation
+- structure rules for first viewport, section jobs, product proof, and card usage
+- motion and media rules that tie animation and imagery to hierarchy, narrative, or affordance
+- downgrade rules for accessibility, mobile fit, runtime budget, missing assets, and existing design-system authority
+- final output shape for implementation work or direction-only work
+
+These frontend guardrails do not override the product model. If the surface is operational, it leads with the working product. If the repo has an established design system, the workflow improves hierarchy, spacing, composition, and emphasis before inventing new language.
+
+## Portable no-design-system authority
+
+When an external design system does not exist, JudgmentKit should not fall back to generic restraint language alone. It now publishes a portable implementation authority pack that becomes the source of truth for:
+
+- approved primitives
+- token bindings and light-dark pairs
+- reusable React+Tailwind component recipes
+- layout archetypes by surface type
+- required state coverage
+- the minimum handoff contract
+- vendored generation and review rules derived from the Vercel web interface guidelines
+
+The pack also defines the exact sections that no-design-system output must include:
+
+- `core_screens`
+- `token_spec`
+- `component_recipes`
+- `screen_composition`
+- `state_coverage`
+- `theme_contract`
+- `accessibility_contract`
+- `escalation_items`
 
 ## Common drift patterns
 
 1. The model invents new visual primitives instead of recombining approved ones.
 2. Decorative gradients, gratuitous shadows, and oversized radii become the default language of a first pass.
-3. The output assumes a single theme when dark and light mode should be present by default.
-4. A referenced design system is treated as authority without confirming whether it is accessibility-reviewed.
-5. Accessibility semantics disappear in the pursuit of style.
-6. Headings, helper text, and CTA labels reuse the same words until different UI elements sound interchangeable.
-7. Local controls drift into a separate header or metadata zone from the viewer, panel, or artifact they change.
-8. A code block or artifact viewer introduces a separate dark or light theme model that the surrounding interface does not use.
-9. Runtime cost grows because the prompt asks for open-ended refinement.
-10. The output leaves implementation teams guessing what is fixed versus exploratory.
-11. The page explains internal artifacts before it explains what the product is or how to start.
+3. A product surface starts with a marketing hero or generic SaaS card grid.
+4. Vague visual adjectives replace mode, thesis, content plan, and interaction thesis.
+5. Media and motion are ornamental instead of tied to hierarchy, narrative, or affordance.
+6. A visually led final response omits mode, visual thesis, motion plan, asset gaps, or downgrade notes.
+7. The output assumes a single theme when dark and light mode should be present by default.
+8. A referenced design system is treated as authority without confirming whether it is accessibility-reviewed.
+9. Accessibility semantics disappear in the pursuit of style.
+10. Headings, helper text, and CTA labels reuse the same words until different UI elements sound interchangeable.
+11. Local controls drift into a separate header or metadata zone from the viewer, panel, or artifact they change.
+12. A code block or artifact viewer introduces a separate dark or light theme model that the surrounding interface does not use.
+13. Runtime cost grows because the prompt asks for open-ended refinement.
+14. The output leaves implementation teams guessing what is fixed versus exploratory.
+15. The page explains internal artifacts before it explains what the product is or how to start.
+16. The output sounds restrained, but the recipes, tokens, states, and handoff sections are still implicit.
 
 ## Escalation points
 
-Escalate when the requested pattern cannot be expressed with approved primitives, when the brief conflicts with the design system, when the design system's accessibility status is unknown, when accessibility tradeoffs are unclear, or when the workflow is being used as a substitute for design review.
+Escalate when the requested pattern cannot be expressed with approved primitives, when the brief conflicts with the design system, when the design system's accessibility status is unknown, when accessibility tradeoffs are unclear, when the portable pack and the brief are both silent on a needed decision, or when the workflow is being used as a substitute for design review.
 
 ## Related resources and schemas
 
 - Resource: `/resources/workflows/ai-ui-generation.v1.json`
+- Portable pack: `/resources/constraint-packs/ai-ui-no-design-system.v1.json`
+- Generation authority profile: `/resources/guideline-profiles/ai-ui-generation-authority.v1.json`
+- Review checks profile: `/resources/guideline-profiles/ai-ui-review-checks.v1.json`
+- Spec completeness guardrail: `/resources/guardrails/spec-completeness.v1.json`
+- Surface mode guardrail: `/resources/guardrails/surface-mode-structure.v1.json`
+- Visual planning guardrail: `/resources/guardrails/visual-planning-contract.v1.json`
+- Motion/media guardrail: `/resources/guardrails/motion-media-purpose.v1.json`
+- Frontend output contract guardrail: `/resources/guardrails/frontend-output-contract.v1.json`
 - Schema: `/schemas/workflow.schema.json`
+- Constraint pack schema: `/schemas/constraint_pack.schema.json`
+- Guideline profile schema: `/schemas/guideline_profile.schema.json`
 - Decision schema: `/schemas/decision-record.schema.json`
 - Verdict schema: `/schemas/verdict.schema.json`
 
 ## Related pages
 
 - /docs/guardrails/design-system-integrity
+- /docs/guardrails/spec-completeness
+- /docs/guardrails/surface-mode-structure
+- /docs/guardrails/visual-planning-contract
+- /docs/guardrails/motion-media-purpose
+- /docs/guardrails/frontend-output-contract
 - /docs/guardrails/ui-copy-clarity
 - /docs/guardrails/control-proximity
 - /docs/guardrails/surface-theme-parity
 - /docs/guardrails/runtime-and-cost
 - /docs/guardrails/provenance-and-escalation
+- /docs/reference/portable-no-design-system-pack
 - /docs/examples/ui-generation-drift
 - /docs/examples/embellishment-drift
+- /docs/examples/mode-structure-drift
+- /docs/examples/visual-planning-gap
+- /docs/examples/motion-media-drift
+- /docs/examples/output-contract-gap
 - /docs/examples/onboarding-clarity-drift
 - /docs/examples/repetitive-copy-drift
 - /docs/examples/control-proximity-drift
 - /docs/examples/surface-theme-parity-drift
+- /docs/examples/token-vagueness-drift
+- /docs/examples/primitive-sprawl-drift
+- /docs/examples/shallow-handoff-drift
+- /docs/examples/state-coverage-drift
diff --git a/content/product-surface.json b/content/product-surface.json
index a2bfedf..126ea8f 100644
--- a/content/product-surface.json
+++ b/content/product-surface.json
@@ -4,7 +4,7 @@
   "utility_sentence": "Connect the MCP. Paste the first message. Run the first pass.",
   "run_sequence": ["Connect", "Paste", "Run"],
   "workbench_label": "Run the first pass",
-  "workbench_support": "Run the hosted installer to clone JudgmentKit, install dependencies, wire the client to the local stdio server, and verify the local tools/list response.",
+  "workbench_support": "Run the hosted installer to clone JudgmentKit, install dependencies, wire the client to the local loopback MCP endpoint, and verify the local tools/list response.",
   "proof_heading": "Generated UI proof",
   "proof_support": "Same brief. One uncontrolled pass and one JudgmentKit-guided pass.",
   "proof_notes": [
diff --git a/content/resources/constraint-packs/ai-ui-no-design-system.v1.json b/content/resources/constraint-packs/ai-ui-no-design-system.v1.json
new file mode 100644
index 0000000..4342a8b
--- /dev/null
+++ b/content/resources/constraint-packs/ai-ui-no-design-system.v1.json
@@ -0,0 +1,482 @@
+{
+  "id": "constraint-pack.ai-ui-no-design-system",
+  "type": "constraint_pack",
+  "version": "1.0.0",
+  "title": "Portable no-design-system implementation authority",
+  "summary": "A JudgmentKit-native implementation authority for UI generation when no external design system is present, with concrete primitives, React+Tailwind recipes, accessibility rules, state coverage, and handoff requirements.",
+  "status": "active",
+  "workflows": ["workflow.ai-ui-generation"],
+  "guardrail_ids": [
+    "guardrail.design-system-integrity",
+    "guardrail.spec-completeness",
+    "guardrail.control-proximity",
+    "guardrail.surface-theme-parity"
+  ],
+  "guideline_profile_ids": [
+    "guideline-profile.ai-ui-generation-authority",
+    "guideline-profile.ai-ui-review-checks"
+  ],
+  "authority": {
+    "when_to_use": "Use this pack when the repo, prompt, and brief do not provide an authoritative external design system or when the task explicitly asks for a portable JudgmentKit-native UI authority.",
+    "priority_rules": [
+      "If a referenced external design system exists and has a confirmed accessibility baseline or owner-approved review status, that system takes precedence.",
+      "If no external design system exists, this pack becomes the source of truth for primitives, tokens, layout archetypes, required states, light-dark theme parity, reusable recipes, and handoff depth.",
+      "If the pack, vendored guideline profiles, and brief are all silent about a requirement, escalate instead of inventing a new primitive, vague token, or unsupported interaction."
+    ],
+    "output_contract_sections": [
+      "core_screens",
+      "token_spec",
+      "component_recipes",
+      "screen_composition",
+      "state_coverage",
+      "theme_contract",
+      "accessibility_contract",
+      "escalation_items"
+    ]
+  },
+  "implementation_model": {
+    "target_stack": "react-tailwind",
+    "recipe_format": "React+Tailwind snippets with explicit slots, variants, interaction rules, and accessibility API",
+    "preview_artifacts": [
+      "implementation-contract.json",
+      "preview-source.tsx",
+      "preview.html"
+    ]
+  },
+  "primitives": {
+    "inventory": [
+      {
+        "id": "layout-shell",
+        "label": "Layout shell",
+        "description": "Top-level application frame with optional rail, header, workspace body, and secondary inspector region.",
+        "usage": "Required for app workspace, dashboard, review, and export surfaces.",
+        "component_recipe": {
+          "slots": ["rail", "header", "main", "inspector"],
+          "variants": ["with-rail", "with-inspector", "centered-main"],
+          "interaction_rules": [
+            "Keep the primary task in main and secondary metadata in inspector.",
+            "Do not move local controls away from the surface they govern."
+          ],
+          "accessibility_contract": [
+            "Use main, nav, header, and aside landmarks where applicable.",
+            "Preserve heading order and skip-link destination."
+          ],
+          "react_tailwind": "<div className=\"grid min-h-screen grid-cols-[240px_minmax(0,1fr)_320px] gap-4 bg-[var(--jk-color-canvas)] text-[var(--jk-color-text-primary)]\">...</div>"
+        }
+      },
+      {
+        "id": "sidebar-rail",
+        "label": "Sidebar or rail",
+        "description": "Persistent navigation or collection switcher aligned to the main workspace frame.",
+        "usage": "Use for global navigation, queue switching, or mode changes.",
+        "component_recipe": {
+          "slots": ["label", "items", "footer"],
+          "variants": ["nav", "history", "queue"],
+          "interaction_rules": [
+            "Active item must be visually distinct and keyboard reachable.",
+            "Keep mode changes and run history grouped, not interleaved."
+          ],
+          "accessibility_contract": [
+            "Use nav with an accessible label.",
+            "Use links for navigation and buttons for actions."
+          ],
+          "react_tailwind": "<nav aria-label=\"Workspace navigation\" className=\"flex flex-col gap-2 rounded-[var(--jk-radius-2)] border border-[var(--jk-color-border-subtle)] bg-[var(--jk-color-surface)] p-4\">...</nav>"
+        }
+      },
+      {
+        "id": "header",
+        "label": "Header",
+        "description": "Surface-level title, status, and primary actions anchored to the region they govern.",
+        "usage": "Use for page title, collection metadata, and scoped actions.",
+        "component_recipe": {
+          "slots": ["title", "meta", "actions"],
+          "variants": ["workspace", "panel", "dialog"],
+          "interaction_rules": [
+            "Primary action stays in the same header as the governed surface.",
+            "Keep status and secondary metadata subordinate to the title."
+          ],
+          "accessibility_contract": [
+            "Use heading tags in hierarchy order.",
+            "If actions change nearby content, keep them adjacent in DOM order."
+          ],
+          "react_tailwind": "<header className=\"flex items-start justify-between gap-4 border-b border-[var(--jk-color-border-subtle)] px-5 py-4\">...</header>"
+        }
+      },
+      {
+        "id": "card",
+        "label": "Card",
+        "description": "Contained surface block with a single content responsibility and explicit header-content-footer structure when needed.",
+        "usage": "Use for summaries, settings groups, metrics, and review blocks.",
+        "component_recipe": {
+          "slots": ["header", "body", "footer"],
+          "variants": ["summary", "settings", "review", "muted"],
+          "interaction_rules": [
+            "Use cards to group meaning, not to add decorative nesting.",
+            "Promote content hierarchy before adding elevation."
+          ],
+          "accessibility_contract": [
+            "Keep heading and body text associated in reading order.",
+            "If footer actions exist, ensure they remain within the same card."
+          ],
+          "react_tailwind": "<section className=\"rounded-[var(--jk-radius-2)] border border-[var(--jk-color-border-subtle)] bg-[var(--jk-color-surface)] shadow-[var(--jk-elevation-1)]\">...</section>"
+        }
+      },
+      {
+        "id": "field",
+        "label": "Field",
+        "description": "Label, control, helper text, and validation message grouped as one primitive.",
+        "usage": "Use for text input, toggles, selects, and textarea entry.",
+        "component_recipe": {
+          "slots": ["label", "control", "helper", "error"],
+          "variants": ["text", "textarea", "select", "toggle"],
+          "interaction_rules": [
+            "Do not rely on placeholder text as the only label.",
+            "Validation copy must stay next to the affected control."
+          ],
+          "accessibility_contract": [
+            "Use label or aria-label on every control.",
+            "Use aria-describedby for helper and error text when present."
+          ],
+          "react_tailwind": "<label className=\"grid gap-2 text-sm\"><span className=\"font-medium\">Label</span><textarea className=\"min-h-40 rounded-[var(--jk-radius-2)] border border-[var(--jk-color-border-subtle)] bg-[var(--jk-color-surface-muted)] px-3 py-3\" /></label>"
+        }
+      },
+      {
+        "id": "button",
+        "label": "Button",
+        "description": "Primary, secondary, or ghost action with explicit hierarchy and nearby scope.",
+        "usage": "Use for create, save, continue, approve, and dismiss actions.",
+        "component_recipe": {
+          "slots": ["icon", "label"],
+          "variants": ["primary", "secondary", "ghost", "danger"],
+          "interaction_rules": [
+            "Specific labels beat generic labels.",
+            "Destructive actions require confirmation or undo language."
+          ],
+          "accessibility_contract": [
+            "Icon-only buttons need aria-label.",
+            "Focus-visible state must remain visible."
+          ],
+          "react_tailwind": "<button className=\"inline-flex min-h-10 items-center justify-center rounded-[var(--jk-radius-2)] px-4 font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--jk-color-accent)]\">Generate First Pass</button>"
+        }
+      },
+      {
+        "id": "tabs",
+        "label": "Tabs",
+        "description": "Mutually exclusive view switcher for peer content regions.",
+        "usage": "Use for switching between results, details, code, or history views.",
+        "component_recipe": {
+          "slots": ["list", "trigger", "panel"],
+          "variants": ["underline", "segmented"],
+          "interaction_rules": [
+            "Tabs are for peer views, not unrelated navigation.",
+            "Keep the active trigger visually obvious without decorative chrome."
+          ],
+          "accessibility_contract": [
+            "Use tablist, tab, and tabpanel semantics.",
+            "Support arrow-key navigation and active-state announcement."
+          ],
+          "react_tailwind": "<div><div role=\"tablist\" className=\"inline-flex gap-1 rounded-[var(--jk-radius-2)] bg-[var(--jk-color-surface-muted)] p-1\">...</div><div role=\"tabpanel\" className=\"mt-4\">...</div></div>"
+        }
+      },
+      {
+        "id": "table-list",
+        "label": "Table or list",
+        "description": "Structured repeated item presentation with sortable columns or grouped rows.",
+        "usage": "Use for queues, records, events, or artifact history.",
+        "component_recipe": {
+          "slots": ["header", "rows", "empty-state"],
+          "variants": ["table", "stacked-list", "checklist"],
+          "interaction_rules": [
+            "Use table semantics only when column relationships matter.",
+            "Long content needs wrap or truncation rules."
+          ],
+          "accessibility_contract": [
+            "Use table headers for true tabular relationships.",
+            "Lists and checklist rows should expose names and states clearly."
+          ],
+          "react_tailwind": "<div className=\"overflow-hidden rounded-[var(--jk-radius-2)] border border-[var(--jk-color-border-subtle)]\"><table className=\"w-full text-sm\">...</table></div>"
+        }
+      },
+      {
+        "id": "sheet-drawer",
+        "label": "Sheet or drawer",
+        "description": "Temporary side panel that preserves context while exposing secondary detail or editing.",
+        "usage": "Use for edit-in-place flows, review queues, and scoped secondary tasks.",
+        "component_recipe": {
+          "slots": ["overlay", "header", "body", "footer"],
+          "variants": ["right-sheet", "bottom-drawer"],
+          "interaction_rules": [
+            "Use sheets for secondary context, not the primary workflow.",
+            "On compact layouts, preserve overscroll containment."
+          ],
+          "accessibility_contract": [
+            "Use dialog semantics with labeled title and close action.",
+            "Trap focus while open and restore focus on close."
+          ],
+          "react_tailwind": "<div className=\"fixed inset-y-0 right-0 w-full max-w-md border-l border-[var(--jk-color-border-subtle)] bg-[var(--jk-color-surface)] p-5\">...</div>"
+        }
+      },
+      {
+        "id": "dialog",
+        "label": "Dialog",
+        "description": "Blocking confirmation or focused multi-step decision moment with explicit primary and cancel actions.",
+        "usage": "Use for destructive confirmation, escalation approval, or constrained review.",
+        "component_recipe": {
+          "slots": ["overlay", "title", "description", "actions"],
+          "variants": ["confirm", "danger", "review"],
+          "interaction_rules": [
+            "Use dialogs only when the decision should interrupt the current flow.",
+            "Keep action labels explicit about the consequence."
+          ],
+          "accessibility_contract": [
+            "Use alertdialog or dialog semantics as appropriate.",
+            "Provide keyboard dismissal and visible focus management."
+          ],
+          "react_tailwind": "<div className=\"fixed inset-0 grid place-items-center bg-black/50 p-4\"><div role=\"dialog\" aria-modal=\"true\" className=\"w-full max-w-lg rounded-[var(--jk-radius-2)] bg-[var(--jk-color-surface)] p-6\">...</div></div>"
+        }
+      },
+      {
+        "id": "inspector",
+        "label": "Inspector",
+        "description": "Persistent secondary panel for metadata, settings, evidence, or comments tied to the current selection.",
+        "usage": "Use when a workspace needs right-side supporting detail.",
+        "component_recipe": {
+          "slots": ["header", "sections", "footer"],
+          "variants": ["metadata", "review", "ownership"],
+          "interaction_rules": [
+            "Inspector content must support the current selection, not replace the main task.",
+            "Keep escalations and ownership next to the evidence they describe."
+          ],
+          "accessibility_contract": [
+            "Use aside when the panel is persistent.",
+            "Section headings must stay hierarchical and descriptive."
+          ],
+          "react_tailwind": "<aside className=\"grid gap-4 rounded-[var(--jk-radius-2)] border border-[var(--jk-color-border-subtle)] bg-[var(--jk-color-surface)] p-4\">...</aside>"
+        }
+      },
+      {
+        "id": "artifact-panel",
+        "label": "Artifact panel",
+        "description": "Inline panel for code, logs, generated artifacts, or previews using the same theme model as the surrounding interface.",
+        "usage": "Use for evidence viewers, output previews, and implementation handoff payloads.",
+        "component_recipe": {
+          "slots": ["header", "toolbar", "body", "footer"],
+          "variants": ["preview", "code", "handoff"],
+          "interaction_rules": [
+            "Local controls stay in or directly above the panel.",
+            "Artifact surfaces must not adopt a separate dark or light theme."
+          ],
+          "accessibility_contract": [
+            "Toolbar actions need clear names and focus order.",
+            "Code or preview regions need labels when multiple panels coexist."
+          ],
+          "react_tailwind": "<section className=\"overflow-hidden rounded-[var(--jk-radius-2)] border border-[var(--jk-color-border-subtle)] bg-[var(--jk-color-surface)]\"><div className=\"border-b border-[var(--jk-color-border-subtle)] px-4 py-3\">...</div><div className=\"bg-[var(--jk-color-surface-muted)] p-4\">...</div></section>"
+        }
+      }
+    ],
+    "composition_rules": [
+      "Compose only from the published primitive inventory unless the brief explicitly authorizes a new primitive and the change is escalated.",
+      "Keep local controls inside or directly adjacent to the surface they govern.",
+      "Use cards, fields, artifact panels, and inspectors to express hierarchy instead of decorative wrappers, glass treatments, or ornamental chrome.",
+      "Each generated screen must map back to reusable recipes rather than one-off markup fragments."
+    ]
+  },
+  "tokens": {
+    "spacing_scale": [
+      { "token": "--jk-space-1", "value": "4px", "usage": "tight icon-label or badge spacing" },
+      { "token": "--jk-space-2", "value": "8px", "usage": "compact control groups and small stack gaps" },
+      { "token": "--jk-space-3", "value": "12px", "usage": "field internals and dense panel spacing" },
+      { "token": "--jk-space-4", "value": "16px", "usage": "default card and section padding" },
+      { "token": "--jk-space-5", "value": "24px", "usage": "major section separation" },
+      { "token": "--jk-space-6", "value": "32px", "usage": "page-level rhythm and workspace gutters" }
+    ],
+    "radius_scale": [
+      { "token": "--jk-radius-1", "value": "4px", "usage": "small controls and chips" },
+      { "token": "--jk-radius-2", "value": "6px", "usage": "default cards, inputs, drawers, and panels" },
+      { "token": "--jk-radius-3", "value": "8px", "usage": "feature callouts or emphasized containers only" }
+    ],
+    "border_rules": [
+      "Default stroke is 1px solid var(--jk-color-border-subtle).",
+      "Use border emphasis before adding elevation.",
+      "Do not exceed the published radius scale or stack multiple ornamental borders."
+    ],
+    "elevation_scale": [
+      { "token": "--jk-elevation-0", "value": "none", "usage": "default workspace surfaces" },
+      { "token": "--jk-elevation-1", "value": "0 1px 2px rgba(15, 23, 42, 0.08)", "usage": "raised cards or sticky headers" },
+      { "token": "--jk-elevation-2", "value": "0 10px 24px rgba(15, 23, 42, 0.12)", "usage": "dialogs and transient sheets only" }
+    ],
+    "typography_roles": [
+      { "token": "--jk-type-title", "value": "600 1.125rem/1.4 var(--jk-font-sans)", "usage": "page titles and panel titles" },
+      { "token": "--jk-type-section", "value": "600 1rem/1.5 var(--jk-font-sans)", "usage": "card headers and subsection labels" },
+      { "token": "--jk-type-body", "value": "400 0.9375rem/1.6 var(--jk-font-sans)", "usage": "default body copy and helper text" },
+      { "token": "--jk-type-meta", "value": "500 0.8125rem/1.4 var(--jk-font-sans)", "usage": "eyebrows, labels, and status metadata" },
+      { "token": "--jk-type-code", "value": "500 0.8125rem/1.6 var(--jk-font-mono)", "usage": "artifact rows, code, and logs" }
+    ],
+    "color_roles": [
+      { "role": "canvas", "binding": "--jk-color-canvas", "light_value": "#f6f5f2", "dark_value": "#121315", "usage": "page and app background" },
+      { "role": "surface", "binding": "--jk-color-surface", "light_value": "#ffffff", "dark_value": "#1b1d21", "usage": "cards, sheets, drawers, and dialogs" },
+      { "role": "surface-muted", "binding": "--jk-color-surface-muted", "light_value": "#efede8", "dark_value": "#23262b", "usage": "secondary panels and inactive tabs" },
+      { "role": "border-subtle", "binding": "--jk-color-border-subtle", "light_value": "#d7d3ca", "dark_value": "#353941", "usage": "default strokes and dividers" },
+      { "role": "text-primary", "binding": "--jk-color-text-primary", "light_value": "#171717", "dark_value": "#f3f4f6", "usage": "primary copy and labels" },
+      { "role": "text-secondary", "binding": "--jk-color-text-secondary", "light_value": "#57534e", "dark_value": "#c7cad1", "usage": "helper text and metadata" },
+      { "role": "accent", "binding": "--jk-color-accent", "light_value": "#1d4ed8", "dark_value": "#7cb3ff", "usage": "primary actions and active states" },
+      { "role": "success", "binding": "--jk-color-success", "light_value": "#0f8a4b", "dark_value": "#5fd59a", "usage": "success status and confirmations" },
+      { "role": "warning", "binding": "--jk-color-warning", "light_value": "#a16207", "dark_value": "#f6c65b", "usage": "review-needed or caution states" },
+      { "role": "danger", "binding": "--jk-color-danger", "light_value": "#b42318", "dark_value": "#ff8f84", "usage": "destructive actions and errors" }
+    ],
+    "required_theme_pairs": [
+      { "binding": "--jk-color-canvas", "purpose": "page background", "light_value": "#f6f5f2", "dark_value": "#121315" },
+      { "binding": "--jk-color-surface", "purpose": "cards and modal surfaces", "light_value": "#ffffff", "dark_value": "#1b1d21" },
+      { "binding": "--jk-color-surface-muted", "purpose": "inactive or secondary surfaces", "light_value": "#efede8", "dark_value": "#23262b" },
+      { "binding": "--jk-color-border-subtle", "purpose": "surface delineation", "light_value": "#d7d3ca", "dark_value": "#353941" },
+      { "binding": "--jk-color-text-primary", "purpose": "primary readable text", "light_value": "#171717", "dark_value": "#f3f4f6" },
+      { "binding": "--jk-color-text-secondary", "purpose": "supporting copy", "light_value": "#57534e", "dark_value": "#c7cad1" },
+      { "binding": "--jk-color-accent", "purpose": "interactive emphasis", "light_value": "#1d4ed8", "dark_value": "#7cb3ff" }
+    ]
+  },
+  "layout_archetypes": [
+    {
+      "surface_type": "app-workspace",
+      "required_regions": ["sidebar-rail", "header", "workspace-body", "inspector-or-artifact-panel"],
+      "rules": [
+        "Keep the primary task in the center workspace and secondary metadata in the inspector.",
+        "Do not move local controls out of the workspace header or governed panel."
+      ]
+    },
+    {
+      "surface_type": "settings-form",
+      "required_regions": ["header", "form-stack", "action-row"],
+      "rules": [
+        "Group fields into logical cards or sections.",
+        "Keep save or continue actions at the end of the affected form region."
+      ]
+    },
+    {
+      "surface_type": "dashboard",
+      "required_regions": ["header", "summary-row", "detail-region"],
+      "rules": [
+        "Lead with summary signal, then expand into tables, lists, or detail cards.",
+        "Limit ornamental variation between cards."
+      ]
+    },
+    {
+      "surface_type": "review-flow",
+      "required_regions": ["queue-or-list", "artifact-panel", "decision-actions", "inspector"],
+      "rules": [
+        "Evidence and decision controls must stay visually connected.",
+        "Decision actions should remain adjacent to the artifact or record being reviewed."
+      ]
+    },
+    {
+      "surface_type": "handoff-export-flow",
+      "required_regions": ["summary-card", "artifact-panel", "token-and-component-map", "escalation-list"],
+      "rules": [
+        "Show fixed implementation commitments before open questions.",
+        "Keep export and copy actions next to the payload they affect."
+      ]
+    }
+  ],
+  "composition_patterns": [
+    {
+      "id": "app-workspace-default",
+      "surface_type": "app-workspace",
+      "recipe_ids": ["layout-shell", "sidebar-rail", "header", "field", "artifact-panel", "inspector", "button"],
+      "rules": [
+        "Lead with a single main workspace plus persistent secondary context.",
+        "Keep generation, review, and handoff visible in one frame before escalating to extra modes."
+      ]
+    },
+    {
+      "id": "review-board-default",
+      "surface_type": "review-flow",
+      "recipe_ids": ["header", "artifact-panel", "table-list", "inspector", "button", "sheet-drawer"],
+      "rules": [
+        "Checklist and decision actions stay adjacent to the artifact being reviewed.",
+        "Use sheets only for secondary context on compact layouts."
+      ]
+    },
+    {
+      "id": "handoff-package-default",
+      "surface_type": "handoff-export-flow",
+      "recipe_ids": ["card", "artifact-panel", "table-list", "button", "dialog"],
+      "rules": [
+        "Show implementation commitments before open questions.",
+        "Keep export actions next to the payload they affect."
+      ]
+    }
+  ],
+  "state_matrix": [
+    {
+      "state": "loading",
+      "expectations": [
+        "Show structure-preserving placeholders instead of empty white space.",
+        "Keep primary navigation and section labels visible."
+      ]
+    },
+    {
+      "state": "empty",
+      "expectations": [
+        "Explain what is missing in plain language.",
+        "Provide one clear next action in the same region."
+      ]
+    },
+    {
+      "state": "ready",
+      "expectations": [
+        "Present the main task path without forcing secondary metadata first.",
+        "Keep the default state implementation-ready and theme-complete."
+      ]
+    },
+    {
+      "state": "error",
+      "expectations": [
+        "Expose the failure clearly without collapsing the rest of the layout.",
+        "Provide recovery actions close to the failed region."
+      ]
+    },
+    {
+      "state": "review-needed",
+      "expectations": [
+        "Call out the unresolved decision and the owner required.",
+        "Keep the escalation signal near the affected surface."
+      ]
+    },
+    {
+      "state": "disabled",
+      "expectations": [
+        "Explain why the action is unavailable.",
+        "Do not rely on color alone to communicate the disabled status."
+      ]
+    }
+  ],
+  "handoff_contract": {
+    "required_sections": [
+      "core_screens",
+      "token_spec",
+      "component_recipes",
+      "screen_composition",
+      "state_coverage",
+      "theme_contract",
+      "accessibility_contract",
+      "escalation_items"
+    ],
+    "accessibility_notes": [
+      "Name focus order and keyboard expectations for interactive regions.",
+      "Name status semantics for warning, error, and success states.",
+      "Name motion-reduction behavior and any assumptions that still need review.",
+      "Name any label, aria-live, or dialog semantics required by the recipes."
+    ],
+    "escalation_triggers": [
+      "A requested primitive is not in the published inventory.",
+      "The brief requires a token, interaction, or state not covered by the pack.",
+      "Theme parity cannot be maintained across artifact panels or code surfaces.",
+      "The handoff cannot stay concrete without product or design review."
+    ]
+  },
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/reference/portable-no-design-system-pack",
+    "markdown_url": "https://judgmentkit.ai/docs/reference/portable-no-design-system-pack.md",
+    "schema_url": "https://judgmentkit.ai/schemas/constraint_pack.schema.json"
+  },
+  "last_reviewed": "2026-04-14"
+}
diff --git a/content/resources/examples/component-mapping-name-only-drift.v1.json b/content/resources/examples/component-mapping-name-only-drift.v1.json
new file mode 100644
index 0000000..e1a6a9c
--- /dev/null
+++ b/content/resources/examples/component-mapping-name-only-drift.v1.json
@@ -0,0 +1,47 @@
+{
+  "id": "example.ui-generation.component-mapping-name-only-drift",
+  "type": "example",
+  "version": "1.0.0",
+  "title": "Name-only component mapping rewritten into real recipes",
+  "summary": "A draft lists component names without proving composition, then gets rewritten into reusable component recipes with slots and interaction rules.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "guardrail_ids": [
+    "guardrail.design-system-integrity",
+    "guardrail.spec-completeness"
+  ],
+  "scenario": "A model claims to use a design system by listing Button, Card, Tabs, and Sheet, but never shows how those components are composed or reused.",
+  "raw_output": "Use Sidebar, Card, Tabs, Textarea, Accordion, Sheet, Dialog, and Table for the workspace. Keep the result implementation ready.",
+  "verdict": {
+    "verdict_id": "ver_012",
+    "decision_id": "dec_012",
+    "evaluated_at": "2026-04-14T00:00:00Z",
+    "status": "warn",
+    "severity": "medium",
+    "guardrails_triggered": [
+      "guardrail.design-system-integrity",
+      "guardrail.spec-completeness"
+    ],
+    "reasons": [
+      "component names are present but no reusable composition evidence exists",
+      "the handoff still depends on downstream interpretation of slots, variants, and interaction rules"
+    ],
+    "drift_score": 0.38,
+    "recommended_action": "rewrite",
+    "rewrite_hint": "Replace name-only mapping with component_recipes and screen_composition that prove how the system is actually used.",
+    "ownership": {
+      "decision_owner": "Design Systems",
+      "risk_owner": "Frontend Platform",
+      "operational_owner": "AI Application Developers"
+    },
+    "incident_required": false
+  },
+  "corrected_output": "Return component_recipes for SidebarShell, ReviewArtifactPanel, and HandoffTable with slot structure, allowed variants, accessibility API, and concrete React+Tailwind composition snippets. Then map each screen to those recipes under screen_composition.",
+  "lesson": "Naming components is not the same as proving component authority. First-pass output needs reusable recipe evidence.",
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation",
+    "markdown_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation.md",
+    "schema_url": "https://judgmentkit.ai/schemas/example.schema.json"
+  },
+  "last_reviewed": "2026-04-14"
+}
diff --git a/content/resources/examples/hand-authored-preview-drift.v1.json b/content/resources/examples/hand-authored-preview-drift.v1.json
new file mode 100644
index 0000000..e8098e7
--- /dev/null
+++ b/content/resources/examples/hand-authored-preview-drift.v1.json
@@ -0,0 +1,47 @@
+{
+  "id": "example.ui-generation.hand-authored-preview-drift",
+  "type": "example",
+  "version": "1.0.0",
+  "title": "Hand-authored preview drift rewritten into source-derived preview evidence",
+  "summary": "A preview HTML file drifts away from the response and contract, then gets rewritten into a deterministic preview derived from component evidence.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "guardrail_ids": [
+    "guardrail.spec-completeness",
+    "guardrail.provenance-escalation"
+  ],
+  "scenario": "An evaluator run includes convincing screenshots, but the preview HTML was designed manually and no longer matches the response or component recipes.",
+  "raw_output": "Save a polished preview.html that looks like the intended design and use screenshots from that preview in the summary.",
+  "verdict": {
+    "verdict_id": "ver_015",
+    "decision_id": "dec_015",
+    "evaluated_at": "2026-04-14T00:00:00Z",
+    "status": "warn",
+    "severity": "medium",
+    "guardrails_triggered": [
+      "guardrail.spec-completeness",
+      "guardrail.provenance-escalation"
+    ],
+    "reasons": [
+      "visual evidence is no longer traceable back to the component contract",
+      "the judge can no longer trust that screenshots and response describe the same UI"
+    ],
+    "drift_score": 0.47,
+    "recommended_action": "rewrite",
+    "rewrite_hint": "Generate preview.html from preview-source.tsx and implementation-contract.json instead of treating preview HTML as a separate authored artifact.",
+    "ownership": {
+      "decision_owner": "Frontend Platform",
+      "risk_owner": "AI Application Developers",
+      "operational_owner": "Design Systems"
+    },
+    "incident_required": false
+  },
+  "corrected_output": "Store reusable recipes and screen composition in implementation-contract.json, render preview.html from preview-source.tsx using that contract, and fail the run if preview HTML is hand-authored or not derivable from the contract.",
+  "lesson": "Screenshots are only trustworthy when they are derived from the same component evidence the judge reads.",
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation",
+    "markdown_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation.md",
+    "schema_url": "https://judgmentkit.ai/schemas/example.schema.json"
+  },
+  "last_reviewed": "2026-04-14"
+}
diff --git a/content/resources/examples/missing-accessibility-api-drift.v1.json b/content/resources/examples/missing-accessibility-api-drift.v1.json
new file mode 100644
index 0000000..7f9b2f7
--- /dev/null
+++ b/content/resources/examples/missing-accessibility-api-drift.v1.json
@@ -0,0 +1,46 @@
+{
+  "id": "example.ui-generation.missing-accessibility-api-drift",
+  "type": "example",
+  "version": "1.0.0",
+  "title": "Recipe without accessibility API rewritten into an accessible contract",
+  "summary": "A component recipe looks structured but omits focus, labels, keyboard behavior, and status semantics, then gets rewritten into an accessibility-complete recipe.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "guardrail_ids": [
+    "guardrail.spec-completeness",
+    "guardrail.control-proximity"
+  ],
+  "scenario": "A draft returns reusable components but treats accessibility as implied rather than explicit.",
+  "raw_output": "Use tabs for preview modes, a sheet for mobile details, and icon buttons in the toolbar. Keep the interaction accessible.",
+  "verdict": {
+    "verdict_id": "ver_014",
+    "decision_id": "dec_014",
+    "evaluated_at": "2026-04-14T00:00:00Z",
+    "status": "warn",
+    "severity": "medium",
+    "guardrails_triggered": [
+      "guardrail.spec-completeness"
+    ],
+    "reasons": [
+      "the recipe never names aria-label, keyboard behavior, focus-visible, or dialog semantics",
+      "accessibility is asserted but not encoded in the handoff contract"
+    ],
+    "drift_score": 0.41,
+    "recommended_action": "rewrite",
+    "rewrite_hint": "Add accessibility_contract details per recipe and a global accessibility_contract section.",
+    "ownership": {
+      "decision_owner": "Accessibility",
+      "risk_owner": "Frontend Platform",
+      "operational_owner": "Design Systems"
+    },
+    "incident_required": false
+  },
+  "corrected_output": "Tabs recipe must declare tablist, tab, and tabpanel semantics plus arrow-key behavior. Toolbar icon buttons require aria-label. Sheet recipe must declare dialog semantics, focus trap, overscroll containment, and focus restore on close.",
+  "lesson": "Accessible by implication is not accessible enough for implementation-ready output.",
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation",
+    "markdown_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation.md",
+    "schema_url": "https://judgmentkit.ai/schemas/example.schema.json"
+  },
+  "last_reviewed": "2026-04-14"
+}
diff --git a/content/resources/examples/mode-structure-drift.v1.json b/content/resources/examples/mode-structure-drift.v1.json
new file mode 100644
index 0000000..15bd891
--- /dev/null
+++ b/content/resources/examples/mode-structure-drift.v1.json
@@ -0,0 +1,42 @@
+{
+  "id": "example.ui-generation.mode-structure-drift",
+  "type": "example",
+  "version": "1.0.0",
+  "title": "Product surface hero drift rewritten into a working surface",
+  "summary": "A visually led operational UI request defaults to a marketing hero and card grid, then gets rewritten by selecting product-surface mode and leading with the working surface.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "guardrail_ids": ["guardrail.surface-mode-structure"],
+  "scenario": "A team asks for a calmer review workspace where operators triage generated UI candidates and compare evidence.",
+  "raw_output": "Start with a premium hero explaining the AI review platform, add three benefit cards, a stat strip, and a floating dashboard preview below the fold.",
+  "verdict": {
+    "verdict_id": "ver_017",
+    "decision_id": "dec_017",
+    "evaluated_at": "2026-04-23T00:00:00Z",
+    "status": "warn",
+    "severity": "medium",
+    "guardrails_triggered": ["guardrail.surface-mode-structure"],
+    "reasons": [
+      "the task is operational but the first viewport defaults to marketing structure",
+      "product proof is delayed behind generic hero, card, and stat patterns",
+      "no single surface mode is named before layout decisions are made"
+    ],
+    "drift_score": 0.48,
+    "recommended_action": "rewrite",
+    "rewrite_hint": "Select product-surface mode, lead with the review workspace itself, and move orientation and secondary proof behind the working surface.",
+    "ownership": {
+      "decision_owner": "Design Systems",
+      "risk_owner": "Product",
+      "operational_owner": "Frontend Platform"
+    },
+    "incident_required": false
+  },
+  "corrected_output": "Mode: product surface. First viewport: a triage workspace with candidate list, active preview, evidence inspector, and local decision actions. Follow with orientation copy that explains scope and freshness, then secondary context for guideline coverage and unresolved review questions.",
+  "lesson": "Visually led product surfaces should still lead with the working surface. Marketing proof can support the experience, but it should not replace the operator's first job.",
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/examples/mode-structure-drift",
+    "markdown_url": "https://judgmentkit.ai/docs/examples/mode-structure-drift.md",
+    "schema_url": "https://judgmentkit.ai/schemas/example.schema.json"
+  },
+  "last_reviewed": "2026-04-23"
+}
diff --git a/content/resources/examples/motion-media-drift.v1.json b/content/resources/examples/motion-media-drift.v1.json
new file mode 100644
index 0000000..24115d9
--- /dev/null
+++ b/content/resources/examples/motion-media-drift.v1.json
@@ -0,0 +1,42 @@
+{
+  "id": "example.ui-generation.motion-media-drift",
+  "type": "example",
+  "version": "1.0.0",
+  "title": "Decorative media and motion rewritten into purposeful hierarchy",
+  "summary": "A visually led landing page adds atmospheric media and animation with no job, then gets downgraded to product proof, restrained transitions, and reduced-motion handling.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "guardrail_ids": ["guardrail.motion-media-purpose"],
+  "scenario": "A model is asked to make a launch page feel cinematic for a developer tool without supplied product imagery.",
+  "raw_output": "Use abstract animated blobs, parallax glow layers, a rotating carousel of screenshots, and continuous floating motion behind the headline.",
+  "verdict": {
+    "verdict_id": "ver_019",
+    "decision_id": "dec_019",
+    "evaluated_at": "2026-04-23T00:00:00Z",
+    "status": "warn",
+    "severity": "medium",
+    "guardrails_triggered": ["guardrail.motion-media-purpose"],
+    "reasons": [
+      "media is atmospheric rather than evidence of the product, state, or workflow",
+      "motion is continuous decoration rather than hierarchy or affordance",
+      "the output does not name reduced-motion or readability constraints"
+    ],
+    "drift_score": 0.5,
+    "recommended_action": "rewrite",
+    "rewrite_hint": "Use product UI or typography as the visual anchor, limit motion to purposeful entrance and affordance transitions, and specify reduced-motion behavior.",
+    "ownership": {
+      "decision_owner": "Design Systems",
+      "risk_owner": "Accessibility",
+      "operational_owner": "Frontend Platform"
+    },
+    "incident_required": false
+  },
+  "corrected_output": "Use the product UI state as the primary visual anchor. Motion plan: stagger the headline and install action once on entry, reveal the proof plane with opacity and translate, and use a small hover transition on the primary action. Honor prefers-reduced-motion by removing translate and keeping instant opacity changes.",
+  "lesson": "Motion and media should clarify hierarchy or proof. When imagery is weak, pivot to product UI, typography, shape, and contrast instead of forcing decorative atmosphere.",
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/examples/motion-media-drift",
+    "markdown_url": "https://judgmentkit.ai/docs/examples/motion-media-drift.md",
+    "schema_url": "https://judgmentkit.ai/schemas/example.schema.json"
+  },
+  "last_reviewed": "2026-04-23"
+}
diff --git a/content/resources/examples/non-reusable-recipe-drift.v1.json b/content/resources/examples/non-reusable-recipe-drift.v1.json
new file mode 100644
index 0000000..c653b10
--- /dev/null
+++ b/content/resources/examples/non-reusable-recipe-drift.v1.json
@@ -0,0 +1,45 @@
+{
+  "id": "example.ui-generation.non-reusable-recipe-drift",
+  "type": "example",
+  "version": "1.0.0",
+  "title": "Screen-only markup rewritten into reusable recipes",
+  "summary": "A draft emits one-off screen markup instead of reusable primitives, then gets normalized into a portable kit plus screen composition.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "guardrail_ids": [
+    "guardrail.spec-completeness"
+  ],
+  "scenario": "A no-design-system run produces a convincing screen layout but every section is custom markup with no reusable primitive abstraction.",
+  "raw_output": "The review screen has a prompt panel on the left, a floating preview box in the center, and a sticky note cluster on the right. Use this exact arrangement for the first pass.",
+  "verdict": {
+    "verdict_id": "ver_013",
+    "decision_id": "dec_013",
+    "evaluated_at": "2026-04-14T00:00:00Z",
+    "status": "warn",
+    "severity": "medium",
+    "guardrails_triggered": [
+      "guardrail.spec-completeness"
+    ],
+    "reasons": [
+      "the output describes a screen but not a reusable kit",
+      "implementation would recreate one-off markup instead of portable primitives"
+    ],
+    "drift_score": 0.35,
+    "recommended_action": "rewrite",
+    "rewrite_hint": "Split one-off layout markup into reusable component_recipes plus a screen_composition section.",
+    "ownership": {
+      "decision_owner": "Frontend Platform",
+      "risk_owner": "Design Systems",
+      "operational_owner": "AI Application Developers"
+    },
+    "incident_required": false
+  },
+  "corrected_output": "Define PromptStudioCard, ReviewArtifactPanel, and OwnershipInspector as reusable recipes with slots, states, and accessibility expectations. Under screen_composition, compose Prompt Studio from LayoutShell + PromptStudioCard + ReviewArtifactPanel + OwnershipInspector.",
+  "lesson": "Portable authority requires reusable recipes, not only screen-specific markup.",
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation",
+    "markdown_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation.md",
+    "schema_url": "https://judgmentkit.ai/schemas/example.schema.json"
+  },
+  "last_reviewed": "2026-04-14"
+}
diff --git a/content/resources/examples/output-contract-gap.v1.json b/content/resources/examples/output-contract-gap.v1.json
new file mode 100644
index 0000000..da2be40
--- /dev/null
+++ b/content/resources/examples/output-contract-gap.v1.json
@@ -0,0 +1,42 @@
+{
+  "id": "example.ui-generation.output-contract-gap",
+  "type": "example",
+  "version": "1.0.0",
+  "title": "Visual implementation response completed with contract evidence",
+  "summary": "A visually led implementation returns only a generic change summary, then gets completed with the required visual thesis, mode, motion plan, and disclosed downgrade.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "guardrail_ids": ["guardrail.frontend-output-contract"],
+  "scenario": "An agent updates a product UI to feel calmer and more deliberate, but the final response omits the visual contract evidence.",
+  "raw_output": "Updated the page styling, improved spacing, and made the interface feel more polished. Tests passed.",
+  "verdict": {
+    "verdict_id": "ver_020",
+    "decision_id": "dec_020",
+    "evaluated_at": "2026-04-23T00:00:00Z",
+    "status": "warn",
+    "severity": "low",
+    "guardrails_triggered": ["guardrail.frontend-output-contract"],
+    "reasons": [
+      "the final response does not state the selected mode",
+      "the final response omits the visual thesis and motion plan",
+      "a visual-direction implementation is not auditable from the response"
+    ],
+    "drift_score": 0.28,
+    "recommended_action": "rewrite",
+    "rewrite_hint": "Complete the final response with a short change summary plus Visual Thesis, Mode, Motion Plan, and any downgrade or failed check.",
+    "ownership": {
+      "decision_owner": "Design Systems",
+      "risk_owner": "Product",
+      "operational_owner": "AI Application Developers"
+    },
+    "incident_required": false
+  },
+  "corrected_output": "Updated the actual product surface to lead with the workspace, reduce card chrome, and tighten copy. Visual Thesis: calm operational clarity with strong typography and low-chrome structure. Mode: product surface. Motion Plan: hover affordance on primary actions and reduced-motion-safe opacity transitions; richer scroll motion was intentionally skipped to preserve runtime budget.",
+  "lesson": "For visually led implementation, the final answer is part of the contract. It must carry enough evidence for review without forcing the user to infer the mode, thesis, or motion downgrade.",
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/examples/output-contract-gap",
+    "markdown_url": "https://judgmentkit.ai/docs/examples/output-contract-gap.md",
+    "schema_url": "https://judgmentkit.ai/schemas/example.schema.json"
+  },
+  "last_reviewed": "2026-04-23"
+}
diff --git a/content/resources/examples/primitive-sprawl-drift.v1.json b/content/resources/examples/primitive-sprawl-drift.v1.json
new file mode 100644
index 0000000..c890f31
--- /dev/null
+++ b/content/resources/examples/primitive-sprawl-drift.v1.json
@@ -0,0 +1,47 @@
+{
+  "id": "example.ui-generation.primitive-sprawl-drift",
+  "type": "example",
+  "version": "1.0.0",
+  "title": "Primitive sprawl rewritten into the published portable inventory",
+  "summary": "A draft invents bespoke wrappers and decorative modules, then gets normalized into the approved JudgmentKit primitive set.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "guardrail_ids": [
+    "guardrail.design-system-integrity",
+    "guardrail.spec-completeness"
+  ],
+  "scenario": "A model drafts a review workspace for a team that has no design system and tries to make it feel high-end in one pass.",
+  "raw_output": "Build a floating insight ribbon, a holographic evidence capsule, a decision dock, and a metadata halo around the selected artifact.",
+  "verdict": {
+    "verdict_id": "ver_010",
+    "decision_id": "dec_010",
+    "evaluated_at": "2026-04-14T00:00:00Z",
+    "status": "warn",
+    "severity": "medium",
+    "guardrails_triggered": [
+      "guardrail.design-system-integrity",
+      "guardrail.spec-completeness"
+    ],
+    "reasons": [
+      "bespoke primitives are introduced without authority",
+      "the surface cannot be compared or implemented against a stable inventory"
+    ],
+    "drift_score": 0.44,
+    "recommended_action": "rewrite",
+    "rewrite_hint": "Recompose the surface from layout shell, header, artifact panel, inspector, card, and button primitives.",
+    "ownership": {
+      "decision_owner": "Design Systems",
+      "risk_owner": "Accessibility",
+      "operational_owner": "Frontend Platform"
+    },
+    "incident_required": false
+  },
+  "corrected_output": "Use a layout shell with a queue list on the left, a header plus artifact panel in the workspace center, and a persistent inspector on the right. Represent decision actions with buttons inside the artifact panel header instead of inventing a new decision dock primitive.",
+  "lesson": "Portable authority depends on a closed primitive vocabulary. Recomposition is allowed; silent primitive invention is not.",
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/examples/primitive-sprawl-drift",
+    "markdown_url": "https://judgmentkit.ai/docs/examples/primitive-sprawl-drift.md",
+    "schema_url": "https://judgmentkit.ai/schemas/example.schema.json"
+  },
+  "last_reviewed": "2026-04-14"
+}
diff --git a/content/resources/examples/shallow-handoff-drift.v1.json b/content/resources/examples/shallow-handoff-drift.v1.json
new file mode 100644
index 0000000..73a637b
--- /dev/null
+++ b/content/resources/examples/shallow-handoff-drift.v1.json
@@ -0,0 +1,45 @@
+{
+  "id": "example.ui-generation.shallow-handoff-drift",
+  "type": "example",
+  "version": "1.0.0",
+  "title": "Shallow handoff rewritten into the required portable contract",
+  "summary": "A clean-looking UI brief omits implementation sections, then gets rewritten into a concrete handoff packet.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "guardrail_ids": [
+    "guardrail.spec-completeness"
+  ],
+  "scenario": "A team wants an implementation-ready export flow, but the first pass only describes the appearance of the interface.",
+  "raw_output": "The export page should feel simple and trustworthy, with clear cards, obvious hierarchy, and a polished summary area before the final handoff action.",
+  "verdict": {
+    "verdict_id": "ver_011",
+    "decision_id": "dec_011",
+    "evaluated_at": "2026-04-14T00:00:00Z",
+    "status": "warn",
+    "severity": "medium",
+    "guardrails_triggered": [
+      "guardrail.spec-completeness"
+    ],
+    "reasons": [
+      "the output never names reusable component recipes, theme contract, or escalation boundaries",
+      "implementation handoff still depends on interpretation"
+    ],
+    "drift_score": 0.36,
+    "recommended_action": "rewrite",
+    "rewrite_hint": "Return the required portable handoff sections with reusable recipes and accessibility contract instead of a visual-only summary.",
+    "ownership": {
+      "decision_owner": "Frontend Platform",
+      "risk_owner": "Design Systems",
+      "operational_owner": "AI Application Developers"
+    },
+    "incident_required": false
+  },
+  "corrected_output": "Return core_screens, token_spec, component_recipes, screen_composition, state_coverage, theme_contract, accessibility_contract, and escalation_items. Map the summary region to card plus artifact-panel recipes, include React+Tailwind composition snippets with slots and interaction rules, define loading, empty, ready, error, review-needed, and disabled states, bind light-dark tokens explicitly, and list the export edge cases that still require review.",
+  "lesson": "A portable UI authority must carry enough handoff structure to survive beyond the original model run.",
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/examples/shallow-handoff-drift",
+    "markdown_url": "https://judgmentkit.ai/docs/examples/shallow-handoff-drift.md",
+    "schema_url": "https://judgmentkit.ai/schemas/example.schema.json"
+  },
+  "last_reviewed": "2026-04-14"
+}
diff --git a/content/resources/examples/state-coverage-drift.v1.json b/content/resources/examples/state-coverage-drift.v1.json
new file mode 100644
index 0000000..7dd23c0
--- /dev/null
+++ b/content/resources/examples/state-coverage-drift.v1.json
@@ -0,0 +1,47 @@
+{
+  "id": "example.ui-generation.state-coverage-drift",
+  "type": "example",
+  "version": "1.0.0",
+  "title": "Ambiguous state coverage rewritten into the required matrix",
+  "summary": "A portable UI draft names the happy path only, then gets rewritten to include required loading, empty, error, review-needed, and disabled states.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "guardrail_ids": [
+    "guardrail.spec-completeness",
+    "guardrail.surface-theme-parity"
+  ],
+  "scenario": "A model proposes an artifact review flow and assumes a record is always present and valid.",
+  "raw_output": "Show the artifact in the center panel, add approve and request changes actions, and place the supporting notes in a right-side inspector.",
+  "verdict": {
+    "verdict_id": "ver_012",
+    "decision_id": "dec_012",
+    "evaluated_at": "2026-04-14T00:00:00Z",
+    "status": "warn",
+    "severity": "medium",
+    "guardrails_triggered": [
+      "guardrail.spec-completeness",
+      "guardrail.surface-theme-parity"
+    ],
+    "reasons": [
+      "state coverage is limited to the ready state",
+      "artifact-panel behavior in empty or error states is unspecified"
+    ],
+    "drift_score": 0.34,
+    "recommended_action": "rewrite",
+    "rewrite_hint": "Attach the portable state matrix to the artifact panel and its nearby actions.",
+    "ownership": {
+      "decision_owner": "Frontend Platform",
+      "risk_owner": "Design Systems",
+      "operational_owner": "AI Application Developers"
+    },
+    "incident_required": false
+  },
+  "corrected_output": "State coverage: loading uses structural placeholders in the artifact panel; empty explains that no artifact is selected and offers one next action; ready shows the artifact plus adjacent decision buttons; error keeps the layout stable while exposing retry and details; review-needed adds the unresolved owner callout beside the affected artifact; disabled explains why approve or export actions are unavailable.",
+  "lesson": "Portable UI governance fails when only the happy path is specified. State coverage must be explicit and local to the surface it affects.",
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/examples/state-coverage-drift",
+    "markdown_url": "https://judgmentkit.ai/docs/examples/state-coverage-drift.md",
+    "schema_url": "https://judgmentkit.ai/schemas/example.schema.json"
+  },
+  "last_reviewed": "2026-04-14"
+}
diff --git a/content/resources/examples/theme-binding-recipe-drift.v1.json b/content/resources/examples/theme-binding-recipe-drift.v1.json
new file mode 100644
index 0000000..ab11754
--- /dev/null
+++ b/content/resources/examples/theme-binding-recipe-drift.v1.json
@@ -0,0 +1,47 @@
+{
+  "id": "example.ui-generation.theme-binding-recipe-drift",
+  "type": "example",
+  "version": "1.0.0",
+  "title": "Theme contract without recipe bindings rewritten into explicit usage",
+  "summary": "A draft names theme bindings globally but never ties them to recipes or surfaces, then gets rewritten into recipe-level theme usage.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "guardrail_ids": [
+    "guardrail.spec-completeness",
+    "guardrail.surface-theme-parity"
+  ],
+  "scenario": "A response includes a theme section, but artifact panels, cards, and action states do not show how those bindings are actually used in the component recipes.",
+  "raw_output": "Use the same light and dark theme model across the workspace. Background, card, border, and primary tokens are shared.",
+  "verdict": {
+    "verdict_id": "ver_016",
+    "decision_id": "dec_016",
+    "evaluated_at": "2026-04-14T00:00:00Z",
+    "status": "warn",
+    "severity": "medium",
+    "guardrails_triggered": [
+      "guardrail.spec-completeness",
+      "guardrail.surface-theme-parity"
+    ],
+    "reasons": [
+      "token names are listed but not applied to actual recipes or surfaces",
+      "theme parity still depends on implementer interpretation"
+    ],
+    "drift_score": 0.39,
+    "recommended_action": "rewrite",
+    "rewrite_hint": "Bind theme tokens directly inside component_recipes and screen_composition notes so every surface proves how parity is maintained.",
+    "ownership": {
+      "decision_owner": "Design Systems",
+      "risk_owner": "Frontend Platform",
+      "operational_owner": "AI Application Developers"
+    },
+    "incident_required": false
+  },
+  "corrected_output": "ArtifactPanel recipe uses --jk-color-surface-muted for body background, --jk-color-border-subtle for frame, and --jk-color-text-primary for payload text in both light and dark mode. Button primary variant binds --jk-color-accent and focus-visible ring token. Screen composition names where those recipes appear.",
+  "lesson": "Theme completeness is only real when bindings are attached to recipes, not listed as abstract tokens.",
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation",
+    "markdown_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation.md",
+    "schema_url": "https://judgmentkit.ai/schemas/example.schema.json"
+  },
+  "last_reviewed": "2026-04-14"
+}
diff --git a/content/resources/examples/token-vagueness-drift.v1.json b/content/resources/examples/token-vagueness-drift.v1.json
new file mode 100644
index 0000000..f05d028
--- /dev/null
+++ b/content/resources/examples/token-vagueness-drift.v1.json
@@ -0,0 +1,47 @@
+{
+  "id": "example.ui-generation.token-vagueness-drift",
+  "type": "example",
+  "version": "1.0.0",
+  "title": "Vague token language rewritten into concrete portable bindings",
+  "summary": "A no-design-system UI draft uses stylistic adjectives instead of actual tokens, then gets rewritten into the JudgmentKit portable token contract.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "guardrail_ids": [
+    "guardrail.design-system-integrity",
+    "guardrail.spec-completeness"
+  ],
+  "scenario": "A product team asks for a new workspace UI without an established design system and wants something restrained and implementation-ready.",
+  "raw_output": "Use soft neutral surfaces, slightly darker side panels, roomy spacing, and modest rounding so the interface feels calm and premium.",
+  "verdict": {
+    "verdict_id": "ver_009",
+    "decision_id": "dec_009",
+    "evaluated_at": "2026-04-14T00:00:00Z",
+    "status": "warn",
+    "severity": "medium",
+    "guardrails_triggered": [
+      "guardrail.design-system-integrity",
+      "guardrail.spec-completeness"
+    ],
+    "reasons": [
+      "token language is descriptive but not implementable",
+      "theme discipline is implied instead of bound to explicit light-dark pairs"
+    ],
+    "drift_score": 0.39,
+    "recommended_action": "rewrite",
+    "rewrite_hint": "Map the surface to the JudgmentKit portable token contract and name the required light-dark bindings.",
+    "ownership": {
+      "decision_owner": "Frontend Platform",
+      "risk_owner": "Design Systems",
+      "operational_owner": "AI Application Developers"
+    },
+    "incident_required": false
+  },
+  "corrected_output": "Use --jk-color-canvas (#f6f5f2 / #121315) for the page background, --jk-color-surface (#ffffff / #1b1d21) for cards and drawers, --jk-space-4 (16px) for section padding, --jk-space-5 (24px) for inter-section gaps, and --jk-radius-2 (6px) for cards, inputs, and drawers.",
+  "lesson": "A portable UI authority only works when token guidance is concrete enough to build, review, and compare without stylistic interpretation.",
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/examples/token-vagueness-drift",
+    "markdown_url": "https://judgmentkit.ai/docs/examples/token-vagueness-drift.md",
+    "schema_url": "https://judgmentkit.ai/schemas/example.schema.json"
+  },
+  "last_reviewed": "2026-04-14"
+}
diff --git a/content/resources/examples/visual-planning-gap.v1.json b/content/resources/examples/visual-planning-gap.v1.json
new file mode 100644
index 0000000..4ba65ae
--- /dev/null
+++ b/content/resources/examples/visual-planning-gap.v1.json
@@ -0,0 +1,42 @@
+{
+  "id": "example.ui-generation.visual-planning-gap",
+  "type": "example",
+  "version": "1.0.0",
+  "title": "Vague visual request rewritten into a planning contract",
+  "summary": "A request to make a surface feel premium jumps straight to decoration, then gets rewritten into mode, visual thesis, content plan, and interaction thesis.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "guardrail_ids": ["guardrail.visual-planning-contract"],
+  "scenario": "A model receives a short brief to make an existing product page feel more premium and modern.",
+  "raw_output": "Make the page pop with glass panels, a bold gradient background, large rounded corners, soft shadows, animated stats, and modern cards.",
+  "verdict": {
+    "verdict_id": "ver_018",
+    "decision_id": "dec_018",
+    "evaluated_at": "2026-04-23T00:00:00Z",
+    "status": "warn",
+    "severity": "medium",
+    "guardrails_triggered": ["guardrail.visual-planning-contract"],
+    "reasons": [
+      "premium and modern are not translated into concrete hierarchy, composition, or motion decisions",
+      "decoration is selected before a visual thesis or content plan exists",
+      "the output cannot be implemented without reinterpreting the intended direction"
+    ],
+    "drift_score": 0.44,
+    "recommended_action": "rewrite",
+    "rewrite_hint": "Define the mode, visual thesis, content plan, and interaction thesis before choosing styling details.",
+    "ownership": {
+      "decision_owner": "Design Systems",
+      "risk_owner": "Product",
+      "operational_owner": "Frontend Platform"
+    },
+    "incident_required": false
+  },
+  "corrected_output": "Mode: hybrid demo. Visual Thesis: quiet editorial confidence using strong typography, one real product proof plane, and restrained contrast. Content Plan: branded entry, product proof, one workflow detail, final install action. Interaction Thesis: a short entrance sequence for the entry text, hover reveal for the proof plane, and reduced-motion-safe opacity transitions only.",
+  "lesson": "Visual adjectives are not a plan. JudgmentKit converts them into hierarchy, composition, and motion decisions before implementation starts.",
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/examples/visual-planning-gap",
+    "markdown_url": "https://judgmentkit.ai/docs/examples/visual-planning-gap.md",
+    "schema_url": "https://judgmentkit.ai/schemas/example.schema.json"
+  },
+  "last_reviewed": "2026-04-23"
+}
diff --git a/content/resources/guardrails/frontend-output-contract.v1.json b/content/resources/guardrails/frontend-output-contract.v1.json
new file mode 100644
index 0000000..2329eac
--- /dev/null
+++ b/content/resources/guardrails/frontend-output-contract.v1.json
@@ -0,0 +1,79 @@
+{
+  "id": "guardrail.frontend-output-contract",
+  "type": "guardrail",
+  "version": "1.0.0",
+  "title": "Frontend output contract",
+  "summary": "Require visually led UI work to return the actual implementation result plus the selected mode, visual thesis, and motion plan or direction-only headings.",
+  "status": "active",
+  "audiences": [
+    "design-leaders",
+    "product-managers",
+    "platform-engineering",
+    "ai-application-developers"
+  ],
+  "applies_to": {
+    "workflows": ["workflow.ai-ui-generation"],
+    "surfaces": ["web", "mobile", "internal-tools"]
+  },
+  "decision": "Whether the final response for visually led UI work carries the required contract evidence instead of only summarizing styling changes.",
+  "intent": {
+    "purpose": "Make visual direction auditable by requiring the final output to state what changed, which mode governed the work, what visual thesis guided it, and what motion plan shipped or was downgraded.",
+    "who_it_protects": ["product teams", "design reviewers", "frontend teams"],
+    "failure_mode": "Generated implementation ends with a generic change summary, omits the mode and visual thesis, hides missing motion or asset constraints, or gives direction-only work without the required headings.",
+    "good_judgment": "For implementation work, update the actual UI and return a short summary, Visual Thesis, Mode, and Motion Plan. For direction-only work, use exactly Visual Thesis, Structure, Motion Plan, Asset Needs, and Risks. Disclose any required check that could not pass.",
+    "acceptable_variation": [
+      "keep the final response short when the implementation is narrow as long as the required fields are present",
+      "name a motion downgrade when the stack, accessibility, or performance budget blocks richer animation",
+      "state that visual-direction behavior was downgraded for a routine bug fix",
+      "reference existing design-system tokens instead of restating every token when the system already owns them"
+    ],
+    "non_negotiables": [
+      "no visually led implementation final response without Visual Thesis, Mode, and Motion Plan",
+      "no direction-only response missing Visual Thesis, Structure, Motion Plan, Asset Needs, or Risks",
+      "no silent omission of failed accessibility, mobile, asset, or motion checks",
+      "no final answer that describes intent while leaving the actual UI files unchanged for an implementation request"
+    ]
+  },
+  "detection": {
+    "decision_question": "Does the final visually led output include the required implementation or direction contract evidence?",
+    "signals": [
+      "the final response summarizes changes but does not state mode or visual thesis",
+      "motion is absent without a downgrade reason",
+      "direction-only output uses custom headings and omits asset needs or risks",
+      "the response says what should be built instead of confirming what was changed",
+      "known failed rubric checks are not disclosed"
+    ],
+    "thresholds": {
+      "pass": "the final response includes the required contract fields and discloses any downgrade or failed check",
+      "warn": "the final response can be repaired by adding missing contract evidence without changing the UI",
+      "fail": "the final response hides missing implementation, mode, motion, assets, or unresolved visual checks"
+    }
+  },
+  "response": {
+    "low": {
+      "action": "auto_complete_output",
+      "description": "Add the missing contract fields before returning."
+    },
+    "medium": {
+      "action": "auto_complete_and_review",
+      "description": "Complete the output contract and route the result through review for visual-direction traceability."
+    },
+    "high": {
+      "action": "block_until_contract_complete",
+      "description": "Block the response until required implementation evidence, headings, or disclosed constraints are present."
+    }
+  },
+  "ownership": {
+    "decision_owner": "Design Systems",
+    "risk_owner": "Product",
+    "operational_owner": "AI Application Developers",
+    "review_cadence": "monthly"
+  },
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/guardrails/frontend-output-contract",
+    "markdown_url": "https://judgmentkit.ai/docs/guardrails/frontend-output-contract.md",
+    "schema_url": "https://judgmentkit.ai/schemas/guardrail.schema.json",
+    "example_ids": ["example.ui-generation.output-contract-gap"]
+  },
+  "last_reviewed": "2026-04-23"
+}
diff --git a/content/resources/guardrails/motion-media-purpose.v1.json b/content/resources/guardrails/motion-media-purpose.v1.json
new file mode 100644
index 0000000..098d841
--- /dev/null
+++ b/content/resources/guardrails/motion-media-purpose.v1.json
@@ -0,0 +1,79 @@
+{
+  "id": "guardrail.motion-media-purpose",
+  "type": "guardrail",
+  "version": "1.0.0",
+  "title": "Motion and media purpose",
+  "summary": "Use imagery and motion only when they carry narrative, hierarchy, or affordance value, and downgrade them before they harm clarity, accessibility, or performance.",
+  "status": "active",
+  "audiences": [
+    "design-leaders",
+    "product-managers",
+    "platform-engineering",
+    "ai-application-developers"
+  ],
+  "applies_to": {
+    "workflows": ["workflow.ai-ui-generation"],
+    "surfaces": ["web", "mobile", "internal-tools"]
+  },
+  "decision": "Whether media and motion in a visually led UI task have a clear purpose and remain bounded by accessibility, readability, mobile, and runtime constraints.",
+  "intent": {
+    "purpose": "Prevent generated UI from using decorative imagery, texture, carousels, or animation as a substitute for structure and hierarchy.",
+    "who_it_protects": ["end users", "accessibility reviewers", "frontend teams"],
+    "failure_mode": "Generated output adds atmospheric imagery, gradients, scroll effects, hover animations, or carousels that do not improve understanding, affordance, or narrative and may reduce readability or performance.",
+    "good_judgment": "Use imagery to reveal the real product, place, object, state, or workflow. Use motion to create presence, hierarchy, or affordance. Prefer restrained opacity and transform motion, honor reduced-motion needs, and pivot to typography, shape, contrast, or product UI when imagery is weak.",
+    "acceptable_variation": [
+      "ship one meaningful CSS transition when the stack cannot support a richer motion system",
+      "use product UI as the primary media anchor when trustworthy photos or generated assets are unavailable",
+      "drop secondary motion on narrow screens or reduced-motion settings while preserving hierarchy",
+      "use decorative media only as subordinate support after the primary visual anchor is doing real work"
+    ],
+    "non_negotiables": [
+      "no motion that is ornamental only or depends on transition: all",
+      "no weak or placeholder imagery forced into the first viewport as if it were narrative media",
+      "no media or motion that reduces text contrast, focus visibility, tap target clarity, or mobile fit",
+      "no carousel, sticky effect, or scroll animation without a narrative or affordance purpose"
+    ]
+  },
+  "detection": {
+    "decision_question": "Do the media and motion choices make the surface easier to understand, feel, or operate, or are they decorative load?",
+    "signals": [
+      "imagery is abstract texture rather than a product, place, object, state, or workflow",
+      "motion is described as polish without a hierarchy or affordance job",
+      "animations ignore reduced-motion behavior",
+      "media competes with text or makes contrast fragile",
+      "runtime-heavy motion is proposed for a surface that needs restrained implementation"
+    ],
+    "thresholds": {
+      "pass": "media and motion each have a clear purpose and are bounded by accessibility, readability, mobile, and runtime constraints",
+      "warn": "the idea is useful but needs downgrade or retuning before implementation",
+      "fail": "media or motion is ornamental, misleading, inaccessible, or unjustified for the surface"
+    }
+  },
+  "response": {
+    "low": {
+      "action": "auto_downgrade",
+      "description": "Downgrade media or motion to a purposeful, accessible treatment."
+    },
+    "medium": {
+      "action": "auto_downgrade_and_review",
+      "description": "Retune the motion or media plan and route it through design and accessibility review."
+    },
+    "high": {
+      "action": "block_and_escalate_to_design_review",
+      "description": "Block the output because the media or motion choice undermines usability, accessibility, or product truth."
+    }
+  },
+  "ownership": {
+    "decision_owner": "Design Systems",
+    "risk_owner": "Accessibility",
+    "operational_owner": "Frontend Platform",
+    "review_cadence": "monthly"
+  },
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/guardrails/motion-media-purpose",
+    "markdown_url": "https://judgmentkit.ai/docs/guardrails/motion-media-purpose.md",
+    "schema_url": "https://judgmentkit.ai/schemas/guardrail.schema.json",
+    "example_ids": ["example.ui-generation.motion-media-drift"]
+  },
+  "last_reviewed": "2026-04-23"
+}
diff --git a/content/resources/guardrails/spec-completeness.v1.json b/content/resources/guardrails/spec-completeness.v1.json
new file mode 100644
index 0000000..aa5acd4
--- /dev/null
+++ b/content/resources/guardrails/spec-completeness.v1.json
@@ -0,0 +1,85 @@
+{
+  "id": "guardrail.spec-completeness",
+  "type": "guardrail",
+  "version": "1.0.0",
+  "title": "Spec completeness",
+  "summary": "Require generated UI output to name concrete primitives, tokens, theme bindings, state coverage, and handoff details instead of vague implementation language.",
+  "status": "active",
+  "audiences": [
+    "design-leaders",
+    "product-managers",
+    "platform-engineering",
+    "ai-application-developers"
+  ],
+  "applies_to": {
+    "workflows": ["workflow.ai-ui-generation"],
+    "surfaces": ["web", "mobile"]
+  },
+  "decision": "Whether a generated UI spec is concrete enough to implement, evaluate, or compare without manual backfilling of tokens, states, or handoff details.",
+  "intent": {
+    "purpose": "Prevent AI-generated UI output from sounding disciplined while still leaving critical implementation details implicit.",
+    "who_it_protects": ["frontend teams", "design systems", "reviewers"],
+    "failure_mode": "The output gestures at restraint or theme quality, but it never names the actual primitives, token bindings, light-dark pairs, state coverage, or escalation boundaries required to build the surface.",
+    "good_judgment": "Name the concrete primitive inventory, exact token bindings or values, required state coverage, explicit light and dark theme pairs, accessibility notes, and an escalation list before calling the spec complete.",
+    "acceptable_variation": [
+      "compact specs when every surface still maps to explicit primitives and tokens",
+      "project-specific token names when they stay concrete and machine-checkable",
+      "short handoff packets when all required sections are still present"
+    ],
+    "non_negotiables": [
+      "no vague adjectives like clean, neutral, slightly raised, or roomy in place of actual token values or bindings",
+      "no unnamed custom primitives or component groups",
+      "no missing loading, empty, error, review-needed, or disabled states when the surface can encounter them",
+      "no theme-complete claim without explicit light and dark token pairs",
+      "if no external design system exists, the spec must map back to the published JudgmentKit constraint pack or escalate the gap"
+    ]
+  },
+  "detection": {
+    "decision_question": "Does the UI output specify enough concrete structure, token detail, state coverage, and handoff depth to build or judge it without hidden assumptions?",
+    "signals": [
+      "vague token language",
+      "unnamed primitives or layout wrappers",
+      "missing light-dark token bindings",
+      "implicit or partial state coverage",
+      "missing handoff sections",
+      "unowned open questions hidden in implementation notes"
+    ],
+    "thresholds": {
+      "pass": "the output names concrete primitives, token bindings or values, required states, theme pairs, and escalation items",
+      "warn": "the output is directionally useful but leaves one or two concrete sections underspecified",
+      "fail": "the output mostly relies on stylistic language, implicit states, or missing handoff structure"
+    }
+  },
+  "response": {
+    "low": {
+      "action": "auto_normalize",
+      "description": "Rewrite vague phrases into explicit primitive and token references."
+    },
+    "medium": {
+      "action": "rewrite_to_complete_spec",
+      "description": "Return the output to the required contract before it is used or judged."
+    },
+    "high": {
+      "action": "block_until_complete",
+      "description": "Block the spec from review or implementation until the missing sections are completed."
+    }
+  },
+  "ownership": {
+    "decision_owner": "Frontend Platform",
+    "risk_owner": "Design Systems",
+    "operational_owner": "AI Application Developers",
+    "review_cadence": "monthly"
+  },
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/guardrails/spec-completeness",
+    "markdown_url": "https://judgmentkit.ai/docs/guardrails/spec-completeness.md",
+    "schema_url": "https://judgmentkit.ai/schemas/guardrail.schema.json",
+    "example_ids": [
+      "example.ui-generation.token-vagueness-drift",
+      "example.ui-generation.primitive-sprawl-drift",
+      "example.ui-generation.shallow-handoff-drift",
+      "example.ui-generation.state-coverage-drift"
+    ]
+  },
+  "last_reviewed": "2026-04-14"
+}
diff --git a/content/resources/guardrails/surface-mode-structure.v1.json b/content/resources/guardrails/surface-mode-structure.v1.json
new file mode 100644
index 0000000..7eb7970
--- /dev/null
+++ b/content/resources/guardrails/surface-mode-structure.v1.json
@@ -0,0 +1,79 @@
+{
+  "id": "guardrail.surface-mode-structure",
+  "type": "guardrail",
+  "version": "1.0.0",
+  "title": "Surface mode structure",
+  "summary": "Choose one surface mode before generating UI so marketing, product, and hybrid demo structures do not collapse into a generic hero or card grid.",
+  "status": "active",
+  "audiences": [
+    "design-leaders",
+    "product-managers",
+    "platform-engineering",
+    "ai-application-developers"
+  ],
+  "applies_to": {
+    "workflows": ["workflow.ai-ui-generation"],
+    "surfaces": ["web", "mobile", "internal-tools"]
+  },
+  "decision": "Whether a visually led UI task selects exactly one mode and structures the first viewport and section order around that mode.",
+  "intent": {
+    "purpose": "Prevent generated UI from mixing marketing and product patterns until the surface no longer matches the user's actual job.",
+    "who_it_protects": ["end users", "product teams", "design systems"],
+    "failure_mode": "Generated output defaults to a marketing hero, card grid, stat strip, or floating-dashboard composition when the task needed a working product surface, or buries product proof behind a marketing shell when the task needed a hybrid demo.",
+    "good_judgment": "Select exactly one mode: marketing surface, product surface, or hybrid demo. Marketing surfaces lead with brand, promise, CTA, and one dominant visual. Product surfaces lead with the working surface, status, context, and actions. Hybrid demos create a brief branded entry and show believable product proof quickly.",
+    "acceptable_variation": [
+      "use a compact branded entry before product proof when the surface is a true hybrid demo",
+      "include marketing support sections after the working surface when the primary job remains operational",
+      "use cards when they are the interaction model rather than decorative default layout",
+      "adapt section order for mobile when the selected mode and primary action remain clear"
+    ],
+    "non_negotiables": [
+      "no marketing hero on an operational product surface unless the brief explicitly asks for one",
+      "no generic SaaS card grid as the first impression for a visually led surface",
+      "no mixed marketing/product hierarchy without naming a single governing mode",
+      "no hybrid demo that delays product proof behind multiple brand or promise sections"
+    ]
+  },
+  "detection": {
+    "decision_question": "Has the output selected one surface mode and structured the page or app around that mode's first job?",
+    "signals": [
+      "the first viewport uses campaign language for an operational workflow",
+      "marketing, product, and demo sections compete without a governing mode",
+      "a dashboard or tool starts with a hero instead of the working surface",
+      "a launch or venue page hides the brand or product behind generic template copy",
+      "cards, pills, logo clouds, or stat strips appear before the core surface job is clear"
+    ],
+    "thresholds": {
+      "pass": "one mode governs the first viewport and each section has one job that matches the user's actual task",
+      "warn": "the intended mode is recoverable but the section order or first viewport needs restructuring",
+      "fail": "the output uses the wrong mode or mixes modes so users cannot tell what kind of surface they are using"
+    }
+  },
+  "response": {
+    "low": {
+      "action": "auto_restructure",
+      "description": "Name the mode and reorder the first viewport and sections around that mode."
+    },
+    "medium": {
+      "action": "auto_restructure_and_review",
+      "description": "Rewrite the structure and route the result through design review for hierarchy and mode fit."
+    },
+    "high": {
+      "action": "block_and_escalate_to_design_review",
+      "description": "Block the output because the surface mode is wrong for the user's job or the first viewport misrepresents the product."
+    }
+  },
+  "ownership": {
+    "decision_owner": "Design Systems",
+    "risk_owner": "Product",
+    "operational_owner": "Frontend Platform",
+    "review_cadence": "monthly"
+  },
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/guardrails/surface-mode-structure",
+    "markdown_url": "https://judgmentkit.ai/docs/guardrails/surface-mode-structure.md",
+    "schema_url": "https://judgmentkit.ai/schemas/guardrail.schema.json",
+    "example_ids": ["example.ui-generation.mode-structure-drift"]
+  },
+  "last_reviewed": "2026-04-23"
+}
diff --git a/content/resources/guardrails/visual-planning-contract.v1.json b/content/resources/guardrails/visual-planning-contract.v1.json
new file mode 100644
index 0000000..87fb6b0
--- /dev/null
+++ b/content/resources/guardrails/visual-planning-contract.v1.json
@@ -0,0 +1,79 @@
+{
+  "id": "guardrail.visual-planning-contract",
+  "type": "guardrail",
+  "version": "1.0.0",
+  "title": "Visual planning contract",
+  "summary": "Require visually led UI generation to define a visual thesis, content plan, and interaction thesis before it turns vague style adjectives into implementation.",
+  "status": "active",
+  "audiences": [
+    "design-leaders",
+    "product-managers",
+    "platform-engineering",
+    "ai-application-developers"
+  ],
+  "applies_to": {
+    "workflows": ["workflow.ai-ui-generation"],
+    "surfaces": ["web", "mobile", "internal-tools"]
+  },
+  "decision": "Whether the generator has translated visual intent into concrete hierarchy, composition, content, and motion decisions before drafting layout or code.",
+  "intent": {
+    "purpose": "Prevent vague requests like premium, modern, calmer, or make it pop from turning into decorative styling without a governing visual direction.",
+    "who_it_protects": ["end users", "product teams", "frontend teams"],
+    "failure_mode": "Generated output jumps from adjectives to gradients, shadows, large radius, or generic cards without naming the surface mode, visual thesis, section jobs, or interaction thesis.",
+    "good_judgment": "Define Visual Thesis, Content Plan, and Interaction Thesis before implementation. Translate vague visual asks into one hierarchy change, one composition change, and one motion choice that can be built immediately.",
+    "acceptable_variation": [
+      "embed the planning decisions directly in the implementation brief when a separate planning section would slow a small edit",
+      "downgrade to local hierarchy and spacing changes for narrow edits inside an established design system",
+      "use product UI, typography, shape, or contrast as the visual anchor when trusted imagery is unavailable",
+      "keep the plan compact when the surface already has strong design-system direction"
+    ],
+    "non_negotiables": [
+      "no visually led implementation that skips mode, visual thesis, content plan, and interaction thesis",
+      "no vague premium or modern language left unresolved as the actual visual direction",
+      "no decorative styling added before hierarchy and composition decisions are named",
+      "no visual plan that overrides accessibility, readability, mobile fit, or an existing product system"
+    ]
+  },
+  "detection": {
+    "decision_question": "Does the output include a concrete planning frame for visual direction, content structure, and interaction before implementation?",
+    "signals": [
+      "the draft uses visual adjectives without concrete hierarchy, composition, or motion decisions",
+      "sections repeat the same job because no content plan was defined",
+      "motion is named as polish rather than as a hierarchy or affordance decision",
+      "imagery, color, or radius is chosen before the surface job is clear",
+      "the final plan cannot be implemented without reinterpretation"
+    ],
+    "thresholds": {
+      "pass": "mode, visual thesis, content plan, and interaction thesis are explicit or clearly reflected in immediately actionable implementation details",
+      "warn": "some planning pieces are present but vague enough to need rewrite before implementation",
+      "fail": "the output jumps from style adjectives to UI construction with no actionable visual planning"
+    }
+  },
+  "response": {
+    "low": {
+      "action": "auto_plan",
+      "description": "Add the missing visual thesis, content plan, and interaction thesis before drafting."
+    },
+    "medium": {
+      "action": "auto_plan_and_review",
+      "description": "Rewrite the planning frame and route the result through design review for visual direction fit."
+    },
+    "high": {
+      "action": "block_and_request_direction",
+      "description": "Block the output until the visual direction can be translated into buildable hierarchy, composition, and motion decisions."
+    }
+  },
+  "ownership": {
+    "decision_owner": "Design Systems",
+    "risk_owner": "Product",
+    "operational_owner": "Frontend Platform",
+    "review_cadence": "monthly"
+  },
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/guardrails/visual-planning-contract",
+    "markdown_url": "https://judgmentkit.ai/docs/guardrails/visual-planning-contract.md",
+    "schema_url": "https://judgmentkit.ai/schemas/guardrail.schema.json",
+    "example_ids": ["example.ui-generation.visual-planning-gap"]
+  },
+  "last_reviewed": "2026-04-23"
+}
diff --git a/content/resources/guideline-profiles/ai-ui-generation-authority.v1.json b/content/resources/guideline-profiles/ai-ui-generation-authority.v1.json
new file mode 100644
index 0000000..e11f965
--- /dev/null
+++ b/content/resources/guideline-profiles/ai-ui-generation-authority.v1.json
@@ -0,0 +1,83 @@
+{
+  "id": "guideline-profile.ai-ui-generation-authority",
+  "type": "guideline_profile",
+  "version": "1.0.0",
+  "title": "AI UI generation authority rules",
+  "summary": "JudgmentKit-owned generation rules derived from the Vercel web interface guidelines and specialized for first-pass UI composition output.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "scope": "generation_authority",
+  "origin": {
+    "source_name": "Vercel Web Interface Guidelines",
+    "source_url": "https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md",
+    "derivative_policy": "Vendored and rewritten into JudgmentKit-owned wording so the generation contract is stable, reviewable, and evaluator-safe."
+  },
+  "categories": [
+    {
+      "id": "semantics-accessibility",
+      "title": "Semantics and accessibility",
+      "rules": [
+        "Use semantic HTML first; only add ARIA when native semantics do not cover the interaction.",
+        "Icon-only buttons require an aria-label and decorative icons should be aria-hidden.",
+        "Form controls need visible labels or an explicit aria-label plus meaningful name attributes.",
+        "Status, validation, and async updates need explicit semantics and aria-live when the update is not already in focus.",
+        "Disabled or blocked actions must explain why they are unavailable and may not rely on color alone."
+      ],
+      "anti_patterns": [
+        "Clickable divs or spans used as buttons",
+        "Form inputs without labels",
+        "Icon buttons without accessible names"
+      ]
+    },
+    {
+      "id": "focus-keyboard",
+      "title": "Focus and keyboard",
+      "rules": [
+        "Interactive elements must expose visible focus-visible treatment or equivalent focus replacement.",
+        "Compound controls should use focus-within grouping when the interaction is shared across multiple child elements.",
+        "Interactive behavior must remain keyboard reachable and keep focus order aligned with reading order.",
+        "Dialogs, sheets, tabs, and menus must name their keyboard expectations inside the accessibility contract."
+      ],
+      "anti_patterns": [
+        "outline-none without a focus-visible replacement",
+        "Pointer-only interaction rules"
+      ]
+    },
+    {
+      "id": "motion-theme-layout",
+      "title": "Motion, theme, and layout",
+      "rules": [
+        "Honor prefers-reduced-motion and downgrade to reduced or no motion in the default contract.",
+        "Animate opacity or transform only; do not use transition: all.",
+        "Dark and light mode must stay inside one token model across prompt, preview, inspector, and artifact surfaces.",
+        "Use flex or grid layout before any measurement-driven positioning.",
+        "Account for safe-area insets when the surface is full-bleed or anchored to viewport edges."
+      ],
+      "anti_patterns": [
+        "Artifact panels that default to a separate terminal theme",
+        "Theme-complete claims without explicit light and dark bindings"
+      ]
+    },
+    {
+      "id": "content-copy-touch",
+      "title": "Content, copy, and touch",
+      "rules": [
+        "Use active voice and specific button labels; do not hide intent behind generic Continue or Submit copy.",
+        "Use typographic ellipsis and concise second-person language in loading or guidance text.",
+        "Text containers must anticipate long content and define truncation, wrapping, or clamp behavior where needed.",
+        "Touch interactions should declare touch-action expectations and overscroll containment for drawers or sheets.",
+        "Placeholder text should be supportive rather than the only source of meaning."
+      ],
+      "anti_patterns": [
+        "Repeated labels across nearby controls with different meanings",
+        "Unbounded text regions with no truncation or wrap strategy"
+      ]
+    }
+  ],
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation",
+    "markdown_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation.md",
+    "schema_url": "https://judgmentkit.ai/schemas/guideline_profile.schema.json"
+  },
+  "last_reviewed": "2026-04-14"
+}
diff --git a/content/resources/guideline-profiles/ai-ui-review-checks.v1.json b/content/resources/guideline-profiles/ai-ui-review-checks.v1.json
new file mode 100644
index 0000000..2c70fb8
--- /dev/null
+++ b/content/resources/guideline-profiles/ai-ui-review-checks.v1.json
@@ -0,0 +1,65 @@
+{
+  "id": "guideline-profile.ai-ui-review-checks",
+  "type": "guideline_profile",
+  "version": "1.0.0",
+  "title": "AI UI review-only checks",
+  "summary": "JudgmentKit-owned review checks derived from the Vercel web interface guidelines for implementation details that should validate generated output but not dominate first-pass generation.",
+  "status": "active",
+  "workflow_id": "workflow.ai-ui-generation",
+  "scope": "review_checks",
+  "origin": {
+    "source_name": "Vercel Web Interface Guidelines",
+    "source_url": "https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md",
+    "derivative_policy": "Vendored and split into a review-only profile so implementation checks remain available without bloating the generation contract."
+  },
+  "categories": [
+    {
+      "id": "hydration-runtime",
+      "title": "Hydration and runtime safety",
+      "rules": [
+        "Inputs using value need onChange or must become uncontrolled with defaultValue.",
+        "Date and time rendering must avoid server-client hydration drift.",
+        "suppressHydrationWarning is a last resort, not a default pattern.",
+        "Preview recipes should avoid layout reads during render."
+      ],
+      "anti_patterns": [
+        "Hydration mismatches hidden behind suppressHydrationWarning",
+        "DOM measurements performed in render"
+      ]
+    },
+    {
+      "id": "performance-images-lists",
+      "title": "Performance, images, and lists",
+      "rules": [
+        "Images need dimensions and below-fold media should be lazy by default.",
+        "Large lists should declare virtualization or a bounded item-count strategy.",
+        "Critical fonts and assets should define loading strategy rather than assuming network magic.",
+        "Controlled inputs must stay cheap per keystroke."
+      ],
+      "anti_patterns": [
+        "Large arrays rendered directly with no virtualization strategy",
+        "Images without width and height"
+      ]
+    },
+    {
+      "id": "locale-navigation-state",
+      "title": "Locale, navigation, and state",
+      "rules": [
+        "Dates, numbers, and currency should use Intl formatting rather than hard-coded locale strings.",
+        "State-heavy UI should describe URL or router synchronization for tabs, filters, or pagination when applicable.",
+        "Destructive actions need confirmation or undo language in the contract.",
+        "Unsaved changes should define warning behavior before navigation."
+      ],
+      "anti_patterns": [
+        "Hard-coded date or number formats",
+        "Stateful navigation with no deep-link or recovery model"
+      ]
+    }
+  ],
+  "links": {
+    "docs_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation",
+    "markdown_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation.md",
+    "schema_url": "https://judgmentkit.ai/schemas/guideline_profile.schema.json"
+  },
+  "last_reviewed": "2026-04-14"
+}
diff --git a/content/resources/workflows/ai-ui-generation.v1.json b/content/resources/workflows/ai-ui-generation.v1.json
index 35aee92..1bdae2f 100644
--- a/content/resources/workflows/ai-ui-generation.v1.json
+++ b/content/resources/workflows/ai-ui-generation.v1.json
@@ -3,33 +3,47 @@
   "type": "workflow",
   "version": "1.0.0",
   "title": "AI UI generation",
-  "summary": "A builder workflow that turns intent into interface proposals while staying inside design-system, accessibility, and budget constraints.",
+  "summary": "A builder workflow that turns intent into interface proposals while staying inside design-system or portable implementation authority, frontend guardrails/examples, accessibility, and budget constraints.",
   "status": "active",
-  "description": "A workflow that generates UI structure, copy, and implementation direction for product teams while keeping the output traceable, design-system-first, accessibility-aware, theme-complete, and system-safe.",
+  "description": "A workflow that generates UI structure, visual direction, reusable component recipes, copy, and implementation direction for product teams while keeping the output traceable, design-system-first when a system exists, JudgmentKit-authoritative when one does not, accessibility-aware, theme-complete, and system-safe. Frontend visual direction is subsumed into workflow guardrails and calibration examples rather than a separate playbook or profile.",
   "primary_users": ["design systems", "product design", "frontend engineering"],
   "decisions": [
-    "which components and tokens to use",
+    "which components, recipes, and tokens to use",
     "whether the referenced design system is authoritative for the requested surface",
+    "when the JudgmentKit no-design-system constraint pack must become the source of truth",
+    "which visual surface mode governs a visually led task",
+    "when a visually led task needs a visual thesis, content plan, and interaction thesis before implementation",
     "whether the design system has an accessibility baseline or owner-approved review status",
     "how much layout variation is acceptable",
+    "when imagery and motion have enough purpose to ship or should be downgraded",
+    "whether the final response includes the required visual output contract",
     "when control placement obscures which surface a local control governs",
     "when embedded code or artifact surfaces drift away from the surrounding theme model",
     "when UI copy elements are too repetitive or semantically overlapping",
+    "when a spec sounds disciplined but still leaves primitives, recipes, tokens, or states implicit",
+    "when component names are present but actual component composition is still unproven",
     "when a first pass is too ornamental for zero-shot generation",
     "when light and dark mode support should be assumed",
     "when to simplify due to runtime budget",
     "when a requested pattern requires design review",
-    "what evidence to carry into implementation handoff"
+    "what evidence to carry into implementation handoff",
+    "whether screenshots are derived from the same component evidence the judge reads"
   ],
   "required_inputs": [
     "feature intent",
     "target surface",
-    "design system inventory",
+    "design system inventory or explicit no-design-system confirmation",
+    "visual-direction intent or explicit purely functional scope",
     "accessibility baseline or design-system review status",
     "time and budget target"
   ],
   "common_guardrails": [
     "guardrail.design-system-integrity",
+    "guardrail.spec-completeness",
+    "guardrail.surface-mode-structure",
+    "guardrail.visual-planning-contract",
+    "guardrail.motion-media-purpose",
+    "guardrail.frontend-output-contract",
     "guardrail.ui-copy-clarity",
     "guardrail.control-proximity",
     "guardrail.surface-theme-parity",
@@ -40,6 +54,19 @@
     "risk_level": "medium",
     "main_risks": [
       "component drift",
+      "surface mode drift",
+      "visual planning gaps",
+      "decorative motion or media",
+      "missing visual output contract",
+      "token vagueness",
+      "primitive sprawl",
+      "ambiguous state coverage",
+      "name-only component mapping",
+      "non-reusable screen markup",
+      "missing recipe accessibility API",
+      "hand-authored preview drift",
+      "theme bindings not attached to recipes",
+      "shallow implementation handoff",
       "ambiguous label redundancy",
       "detached local controls",
       "mismatched code or artifact themes",
@@ -56,14 +83,34 @@
     "docs_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation",
     "markdown_url": "https://judgmentkit.ai/docs/workflows/ai-ui-generation.md",
     "schema_url": "https://judgmentkit.ai/schemas/workflow.schema.json",
+    "constraint_pack_ids": [
+      "constraint-pack.ai-ui-no-design-system"
+    ],
+    "guideline_profile_ids": [
+      "guideline-profile.ai-ui-generation-authority",
+      "guideline-profile.ai-ui-review-checks"
+    ],
     "example_ids": [
       "example.ui-generation.component-drift",
       "example.ui-generation.embellishment-drift",
+      "example.ui-generation.mode-structure-drift",
+      "example.ui-generation.visual-planning-gap",
+      "example.ui-generation.motion-media-drift",
+      "example.ui-generation.output-contract-gap",
       "example.ui-generation.onboarding-clarity-drift",
       "example.ui-generation.repetitive-copy-drift",
       "example.ui-generation.control-proximity-drift",
-      "example.ui-generation.surface-theme-parity-drift"
+      "example.ui-generation.surface-theme-parity-drift",
+      "example.ui-generation.token-vagueness-drift",
+      "example.ui-generation.primitive-sprawl-drift",
+      "example.ui-generation.shallow-handoff-drift",
+      "example.ui-generation.state-coverage-drift",
+      "example.ui-generation.component-mapping-name-only-drift",
+      "example.ui-generation.non-reusable-recipe-drift",
+      "example.ui-generation.missing-accessibility-api-drift",
+      "example.ui-generation.hand-authored-preview-drift",
+      "example.ui-generation.theme-binding-recipe-drift"
     ]
   },
-  "last_reviewed": "2026-04-12"
+  "last_reviewed": "2026-04-23"
 }
diff --git a/content/schemas/constraint_pack.schema.json b/content/schemas/constraint_pack.schema.json
new file mode 100644
index 0000000..395effa
--- /dev/null
+++ b/content/schemas/constraint_pack.schema.json
@@ -0,0 +1,450 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://judgmentkit.ai/schemas/constraint_pack.schema.json",
+  "title": "JudgmentKit Constraint Pack Resource",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "id",
+    "type",
+    "version",
+    "title",
+    "summary",
+    "status",
+    "workflows",
+    "guardrail_ids",
+    "guideline_profile_ids",
+    "authority",
+    "implementation_model",
+    "primitives",
+    "tokens",
+    "layout_archetypes",
+    "composition_patterns",
+    "state_matrix",
+    "handoff_contract",
+    "links",
+    "last_reviewed"
+  ],
+  "properties": {
+    "id": {
+      "type": "string"
+    },
+    "type": {
+      "const": "constraint_pack"
+    },
+    "version": {
+      "type": "string"
+    },
+    "title": {
+      "type": "string"
+    },
+    "summary": {
+      "type": "string"
+    },
+    "status": {
+      "type": "string",
+      "enum": ["active", "deprecated", "draft"]
+    },
+    "workflows": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "guardrail_ids": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "guideline_profile_ids": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "authority": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["when_to_use", "priority_rules", "output_contract_sections"],
+      "properties": {
+        "when_to_use": {
+          "type": "string"
+        },
+        "priority_rules": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "output_contract_sections": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        }
+      }
+    },
+    "implementation_model": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["target_stack", "recipe_format", "preview_artifacts"],
+      "properties": {
+        "target_stack": {
+          "type": "string"
+        },
+        "recipe_format": {
+          "type": "string"
+        },
+        "preview_artifacts": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        }
+      }
+    },
+    "primitives": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["inventory", "composition_rules"],
+      "properties": {
+        "inventory": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": [
+              "id",
+              "label",
+              "description",
+              "usage",
+              "component_recipe"
+            ],
+            "properties": {
+              "id": {
+                "type": "string"
+              },
+              "label": {
+                "type": "string"
+              },
+              "description": {
+                "type": "string"
+              },
+              "usage": {
+                "type": "string"
+              },
+              "component_recipe": {
+                "type": "object",
+                "additionalProperties": false,
+                "required": [
+                  "slots",
+                  "variants",
+                  "interaction_rules",
+                  "accessibility_contract",
+                  "react_tailwind"
+                ],
+                "properties": {
+                  "slots": {
+                    "type": "array",
+                    "items": {
+                      "type": "string"
+                    }
+                  },
+                  "variants": {
+                    "type": "array",
+                    "items": {
+                      "type": "string"
+                    }
+                  },
+                  "interaction_rules": {
+                    "type": "array",
+                    "items": {
+                      "type": "string"
+                    }
+                  },
+                  "accessibility_contract": {
+                    "type": "array",
+                    "items": {
+                      "type": "string"
+                    }
+                  },
+                  "react_tailwind": {
+                    "type": "string"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "composition_rules": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        }
+      }
+    },
+    "tokens": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "spacing_scale",
+        "radius_scale",
+        "border_rules",
+        "elevation_scale",
+        "typography_roles",
+        "color_roles",
+        "required_theme_pairs"
+      ],
+      "properties": {
+        "spacing_scale": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": ["token", "value", "usage"],
+            "properties": {
+              "token": {
+                "type": "string"
+              },
+              "value": {
+                "type": "string"
+              },
+              "usage": {
+                "type": "string"
+              }
+            }
+          }
+        },
+        "radius_scale": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": ["token", "value", "usage"],
+            "properties": {
+              "token": {
+                "type": "string"
+              },
+              "value": {
+                "type": "string"
+              },
+              "usage": {
+                "type": "string"
+              }
+            }
+          }
+        },
+        "border_rules": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "elevation_scale": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": ["token", "value", "usage"],
+            "properties": {
+              "token": {
+                "type": "string"
+              },
+              "value": {
+                "type": "string"
+              },
+              "usage": {
+                "type": "string"
+              }
+            }
+          }
+        },
+        "typography_roles": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": ["token", "value", "usage"],
+            "properties": {
+              "token": {
+                "type": "string"
+              },
+              "value": {
+                "type": "string"
+              },
+              "usage": {
+                "type": "string"
+              }
+            }
+          }
+        },
+        "color_roles": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": ["role", "binding", "light_value", "dark_value", "usage"],
+            "properties": {
+              "role": {
+                "type": "string"
+              },
+              "binding": {
+                "type": "string"
+              },
+              "light_value": {
+                "type": "string"
+              },
+              "dark_value": {
+                "type": "string"
+              },
+              "usage": {
+                "type": "string"
+              }
+            }
+          }
+        },
+        "required_theme_pairs": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": ["binding", "purpose", "light_value", "dark_value"],
+            "properties": {
+              "binding": {
+                "type": "string"
+              },
+              "purpose": {
+                "type": "string"
+              },
+              "light_value": {
+                "type": "string"
+              },
+              "dark_value": {
+                "type": "string"
+              }
+            }
+          }
+        }
+      }
+    },
+    "composition_patterns": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": ["id", "surface_type", "recipe_ids", "rules"],
+        "properties": {
+          "id": {
+            "type": "string"
+          },
+          "surface_type": {
+            "type": "string"
+          },
+          "recipe_ids": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          },
+          "rules": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      }
+    },
+    "layout_archetypes": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": ["surface_type", "required_regions", "rules"],
+        "properties": {
+          "surface_type": {
+            "type": "string"
+          },
+          "required_regions": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          },
+          "rules": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      }
+    },
+    "state_matrix": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": ["state", "expectations"],
+        "properties": {
+          "state": {
+            "type": "string"
+          },
+          "expectations": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      }
+    },
+    "handoff_contract": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["required_sections", "accessibility_notes", "escalation_triggers"],
+      "properties": {
+        "required_sections": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "accessibility_notes": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "escalation_triggers": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        }
+      }
+    },
+    "links": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["docs_url", "markdown_url", "schema_url"],
+      "properties": {
+        "docs_url": {
+          "type": "string"
+        },
+        "markdown_url": {
+          "type": "string"
+        },
+        "schema_url": {
+          "type": "string"
+        }
+      }
+    },
+    "last_reviewed": {
+      "type": "string",
+      "format": "date"
+    }
+  }
+}
diff --git a/content/schemas/guideline_profile.schema.json b/content/schemas/guideline_profile.schema.json
new file mode 100644
index 0000000..d1ce9b0
--- /dev/null
+++ b/content/schemas/guideline_profile.schema.json
@@ -0,0 +1,112 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://judgmentkit.ai/schemas/guideline_profile.schema.json",
+  "title": "JudgmentKit Guideline Profile Resource",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "id",
+    "type",
+    "version",
+    "title",
+    "summary",
+    "status",
+    "workflow_id",
+    "scope",
+    "origin",
+    "categories",
+    "links",
+    "last_reviewed"
+  ],
+  "properties": {
+    "id": {
+      "type": "string"
+    },
+    "type": {
+      "const": "guideline_profile"
+    },
+    "version": {
+      "type": "string"
+    },
+    "title": {
+      "type": "string"
+    },
+    "summary": {
+      "type": "string"
+    },
+    "status": {
+      "type": "string",
+      "enum": ["active", "deprecated", "draft"]
+    },
+    "workflow_id": {
+      "type": "string"
+    },
+    "scope": {
+      "type": "string",
+      "enum": ["generation_authority", "review_checks"]
+    },
+    "origin": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["source_name", "source_url", "derivative_policy"],
+      "properties": {
+        "source_name": {
+          "type": "string"
+        },
+        "source_url": {
+          "type": "string"
+        },
+        "derivative_policy": {
+          "type": "string"
+        }
+      }
+    },
+    "categories": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": ["id", "title", "rules"],
+        "properties": {
+          "id": {
+            "type": "string"
+          },
+          "title": {
+            "type": "string"
+          },
+          "rules": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          },
+          "anti_patterns": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      }
+    },
+    "links": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["docs_url", "markdown_url", "schema_url"],
+      "properties": {
+        "docs_url": {
+          "type": "string"
+        },
+        "markdown_url": {
+          "type": "string"
+        },
+        "schema_url": {
+          "type": "string"
+        }
+      }
+    },
+    "last_reviewed": {
+      "type": "string"
+    }
+  }
+}
diff --git a/content/schemas/workflow.schema.json b/content/schemas/workflow.schema.json
index 80434a4..eb49be1 100644
--- a/content/schemas/workflow.schema.json
+++ b/content/schemas/workflow.schema.json
@@ -98,6 +98,18 @@
         "schema_url": {
           "type": "string"
         },
+        "constraint_pack_ids": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "guideline_profile_ids": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
         "example_ids": {
           "type": "array",
           "items": {
diff --git a/lib/ai-ui-e2e-evaluator.ts b/lib/ai-ui-e2e-evaluator.ts
new file mode 100644
index 0000000..834feec
--- /dev/null
+++ b/lib/ai-ui-e2e-evaluator.ts
@@ -0,0 +1,1022 @@
+import crypto from "node:crypto";
+import path from "node:path";
+
+import {
+  AI_UI_E2E_ACCEPTANCE_CRITERIA,
+  AI_UI_E2E_DESIGN_SYSTEM_OUTPUT_CONTRACT_SECTIONS,
+  AI_UI_E2E_FEATURE_INTENT,
+  AI_UI_E2E_PORTABLE_OUTPUT_CONTRACT_SECTIONS,
+  AI_UI_E2E_SHARED_PROMPT,
+  AI_UI_E2E_WORKFLOW_ID,
+  type AiUiE2eAcceptanceCriterion,
+  type AiUiE2ePath,
+  getAiUiE2ePaths,
+} from "@/lib/ai-ui-e2e";
+
+export const AI_UI_E2E_EVALUATOR_STATUSES = ["pass", "warn", "fail"] as const;
+export const AI_UI_E2E_EVALUATOR_ACTIONS = [
+  "allow",
+  "rewrite",
+  "review",
+  "block",
+  "escalate",
+] as const;
+export const AI_UI_E2E_EVALUATOR_SEVERITIES = [
+  "low",
+  "medium",
+  "high",
+] as const;
+export type AiUiE2eEvaluatorWinner = AiUiE2ePath["id"] | "tie";
+
+export const AI_UI_E2E_EVALUATOR_WINNERS: readonly AiUiE2eEvaluatorWinner[] = [
+  ...getAiUiE2ePaths().map((testPath) => testPath.id),
+  "tie",
+] as const;
+export const AI_UI_E2E_VISUAL_COLOR_SCHEMES = ["light", "dark"] as const;
+export const AI_UI_E2E_VISUAL_VIEWPORT = {
+  width: 1440,
+  height: 960,
+  deviceScaleFactor: 2,
+} as const;
+export const AI_UI_E2E_GENERATED_PREVIEW_MARKER_PREFIX =
+  "judgmentkit-ai-ui-e2e-generated-preview";
+
+export type AiUiE2eEvaluatorStatus =
+  (typeof AI_UI_E2E_EVALUATOR_STATUSES)[number];
+export type AiUiE2eEvaluatorAction =
+  (typeof AI_UI_E2E_EVALUATOR_ACTIONS)[number];
+export type AiUiE2eEvaluatorSeverity =
+  (typeof AI_UI_E2E_EVALUATOR_SEVERITIES)[number];
+export type AiUiE2eVisualColorScheme =
+  (typeof AI_UI_E2E_VISUAL_COLOR_SCHEMES)[number];
+
+export type AiUiE2eCriterionScore = {
+  criterion: AiUiE2eAcceptanceCriterion;
+  score: 1 | 2 | 3 | 4 | 5;
+  notes: string;
+  evidence: string[];
+};
+
+export type AiUiE2eImplementationContract = {
+  version: "1.0.0";
+  kind: "ai_ui_e2e_implementation_contract";
+  path_id: AiUiE2ePath["id"];
+  authority_model: "portable_no_design_system" | "shadcn_radix";
+  required_sections: string[];
+  response_alignment: {
+    component_recipe_ids: string[];
+    state_ids: string[];
+    theme_bindings: string[];
+  };
+  token_spec?: {
+    bindings: string[];
+  };
+  design_system_bindings?: string[];
+  component_recipes: Array<{
+    recipe_id: string;
+    title: string;
+    primitive_id: string;
+    source_of_truth: string;
+    slots: string[];
+    allowed_variants: string[];
+    interaction_rules: string[];
+    accessibility_contract: string[];
+    react_tailwind: string;
+  }>;
+  screen_composition: Array<{
+    screen_id: string;
+    title: string;
+    recipe_ids: string[];
+    primary_actions: string[];
+    notes: string[];
+  }>;
+  state_coverage: Array<{
+    state: string;
+    applies_to: string[];
+    behavior: string[];
+  }>;
+  theme_contract: {
+    bindings: string[];
+    parity_rules: string[];
+  };
+  accessibility_contract: {
+    global_rules: string[];
+    focus_rules: string[];
+    keyboard_rules: string[];
+    motion_rules: string[];
+  };
+  escalation_items: string[];
+};
+
+export type AiUiE2ePathJudgeInput = {
+  version: "1.0.0";
+  kind: "ai_ui_e2e_path_judge_input";
+  path: AiUiE2ePath;
+  workflow_id: string;
+  feature_intent: string;
+  shared_prompt: string;
+  rubric: {
+    scoring_scale: "1-5";
+    criteria: typeof AI_UI_E2E_ACCEPTANCE_CRITERIA;
+    pass_rule: string[];
+  };
+  mcp_verification: {
+    call_order_ref: string;
+    tools_list_ref: string;
+    prompts_list_ref: string;
+    workflow_bundle_ref: string;
+    start_design_workflow_ref: string;
+    start_no_design_system_workflow_ref: string;
+  };
+  evidence_refs: {
+    transcript_ref: string;
+    response_ref: string;
+    metadata_ref: string;
+    implementation_contract_ref: string;
+    preview_source_ref: string;
+    preview_ref: string;
+  };
+  judging_instructions: string[];
+};
+
+export type AiUiE2ePathScore = {
+  version: "1.0.0";
+  kind: "ai_ui_e2e_path_score";
+  path_id: AiUiE2ePath["id"];
+  completed: boolean;
+  verdict: {
+    verdict_id: string;
+    decision_id: string;
+    evaluated_at: string;
+    status: AiUiE2eEvaluatorStatus;
+    severity: AiUiE2eEvaluatorSeverity;
+    guardrails_triggered: string[];
+    reasons: string[];
+    recommended_action: AiUiE2eEvaluatorAction;
+    drift_score?: number;
+    rewrite_hint?: string;
+    ownership?: {
+      decision_owner?: string;
+      risk_owner?: string;
+      operational_owner?: string;
+    };
+    incident_required?: boolean;
+  };
+  criteria: AiUiE2eCriterionScore[];
+  strongest_evidence: string[];
+  cleanup_notes: {
+    reduced_cleanup: string;
+    remaining_cleanup: string;
+    judgmentkit_impact: string;
+  };
+  rationale: string;
+};
+
+export type AiUiE2eVisualManifest = {
+  version: "1.0.0";
+  kind: "ai_ui_e2e_visual_manifest";
+  path_id: AiUiE2ePath["id"];
+  completed: boolean;
+  preview_ref: string;
+  component_evidence: {
+    implementation_contract_ref: string;
+    preview_source_ref: string;
+  };
+  derivation: {
+    generated_from_contract: true;
+    marker_prefix: string;
+    source_renderer: "preview-source.tsx";
+  };
+  screenshots: {
+    desktop_light_ref: string;
+    desktop_dark_ref: string;
+  };
+  capture: {
+    browser: "chromium";
+    headless: true;
+    viewport: {
+      width: number;
+      height: number;
+      deviceScaleFactor: number;
+    };
+    color_schemes: AiUiE2eVisualColorScheme[];
+  };
+  captured_at: string;
+};
+
+export type AiUiE2eComparisonInput = {
+  version: "1.0.0";
+  kind: "ai_ui_e2e_comparison_judge_input";
+  workflow_id: string;
+  feature_intent: string;
+  shared_prompt: string;
+  controlled_variable: string;
+  path_inputs: {
+    path_id: AiUiE2ePath["id"];
+    judge_input_ref: string;
+    transcript_ref: string;
+    response_ref: string;
+    implementation_contract_ref: string;
+    preview_source_ref: string;
+  }[];
+  judging_instructions: string[];
+};
+
+export type AiUiE2eComparisonResult = {
+  version: "1.0.0";
+  kind: "ai_ui_e2e_comparison";
+  completed: boolean;
+  winner: AiUiE2eEvaluatorWinner;
+  confidence: number;
+  meaningful_difference: boolean;
+  recommended_next_action: AiUiE2eEvaluatorAction;
+  rationale: string;
+  criteria_deltas: Array<{
+    criterion: AiUiE2eAcceptanceCriterion;
+    winner: AiUiE2eEvaluatorWinner;
+    delta: number;
+    notes: string;
+  }>;
+  strongest_evidence: Record<AiUiE2ePath["id"], string[]>;
+  top_cleanup_risks: string[];
+  judgmentkit_impact_summary: string;
+};
+
+export type AiUiE2eMergedSummary = {
+  workflow_id: string;
+  path_results: AiUiE2ePathScore[];
+  path_visuals: AiUiE2eVisualManifest[];
+  comparison: AiUiE2eComparisonResult;
+  shared_mcp_verification: {
+    tools_list_ref: string;
+    prompts_list_ref: string;
+    workflow_bundle_ref: string;
+    call_order_ref: string;
+  };
+};
+
+export type AiUiE2eExternalJudgePacketInput = {
+  output_directory: string;
+  judge_prompt: string;
+  comparison_input: AiUiE2eComparisonInput;
+  comparison_template: AiUiE2eComparisonResult;
+  shared_artifacts: {
+    mcp_call_order: unknown;
+    tools_list: unknown;
+    prompts_list: unknown;
+    start_design_workflow: string;
+    start_no_design_system_workflow: string;
+    workflow_bundle: unknown;
+  };
+  path_packets: Array<{
+    path: AiUiE2ePath;
+    judge_input: AiUiE2ePathJudgeInput;
+    transcript: string;
+    response: string;
+    implementation_contract: AiUiE2eImplementationContract;
+    preview_source: string;
+    path_score_template: AiUiE2ePathScore;
+  }>;
+};
+
+export function createPathJudgeInput(
+  outputDirectory: string,
+  testPath: AiUiE2ePath,
+): AiUiE2ePathJudgeInput {
+  const baseRef = path.join(outputDirectory, testPath.id);
+
+  return {
+    version: "1.0.0",
+    kind: "ai_ui_e2e_path_judge_input",
+    path: testPath,
+    workflow_id: AI_UI_E2E_WORKFLOW_ID,
+    feature_intent: AI_UI_E2E_FEATURE_INTENT,
+    shared_prompt: AI_UI_E2E_SHARED_PROMPT,
+    rubric: {
+      scoring_scale: "1-5",
+      criteria: AI_UI_E2E_ACCEPTANCE_CRITERIA,
+      pass_rule: [
+        "The MCP workflow must be successfully invoked end to end.",
+        "The output must be usable as a first pass without major structural rewrite.",
+        "The output must prove reusable component composition through implementation-contract.json and preview-source.tsx, not only prose naming.",
+        "There must be no major guardrail drift in design-system integrity, spec completeness, theme parity, or ornamental zero-shot styling.",
+      ],
+    },
+    mcp_verification: {
+      call_order_ref: path.join(outputDirectory, "mcp-call-order.json"),
+      tools_list_ref: path.join(outputDirectory, "tools-list.json"),
+      prompts_list_ref: path.join(outputDirectory, "prompts-list.json"),
+      workflow_bundle_ref: path.join(outputDirectory, "workflow-bundle.json"),
+      start_design_workflow_ref: path.join(outputDirectory, "start-design-workflow.txt"),
+      start_no_design_system_workflow_ref: path.join(
+        outputDirectory,
+        "start-no-design-system-workflow.txt",
+      ),
+    },
+    evidence_refs: {
+      transcript_ref: path.join(baseRef, "transcript.md"),
+      response_ref: path.join(baseRef, "response.md"),
+      metadata_ref: path.join(baseRef, "metadata.json"),
+      implementation_contract_ref: path.join(baseRef, "implementation-contract.json"),
+      preview_source_ref: path.join(baseRef, "preview-source.tsx"),
+      preview_ref: path.join(baseRef, "preview.html"),
+    },
+    judging_instructions: [
+      "Judge this path independently before comparing it to the other path.",
+      "Cite concrete evidence from the transcript and final response.",
+      "Use implementation-contract.json and preview-source.tsx as the proof of real component composition evidence.",
+      "Do not reward ornamental novelty over first-pass usefulness or cleanup reduction.",
+      "Treat JudgmentKit workflow guidance, linked guardrails, and any linked constraint packs as authoritative.",
+      "Score every criterion on a 1-5 scale and explain meaningful deductions.",
+    ],
+  };
+}
+
+export function createComparisonJudgeInput(
+  outputDirectory: string,
+  paths: AiUiE2ePath[],
+): AiUiE2eComparisonInput {
+  return {
+    version: "1.0.0",
+    kind: "ai_ui_e2e_comparison_judge_input",
+    workflow_id: AI_UI_E2E_WORKFLOW_ID,
+    feature_intent: AI_UI_E2E_FEATURE_INTENT,
+    shared_prompt: AI_UI_E2E_SHARED_PROMPT,
+    controlled_variable:
+      "Both paths use the exact same prompt text. Only the path-level system context changes.",
+    path_inputs: paths.map((testPath) => ({
+      path_id: testPath.id,
+      judge_input_ref: path.join(outputDirectory, testPath.id, "judge-input.json"),
+      transcript_ref: path.join(outputDirectory, testPath.id, "transcript.md"),
+      response_ref: path.join(outputDirectory, testPath.id, "response.md"),
+      implementation_contract_ref: path.join(
+        outputDirectory,
+        testPath.id,
+        "implementation-contract.json",
+      ),
+      preview_source_ref: path.join(outputDirectory, testPath.id, "preview-source.tsx"),
+    })),
+    judging_instructions: [
+      "Score each path independently first, then compare them side by side.",
+      "Compare only on the controlled variable, not on unrelated stylistic preference.",
+      "Prefer outputs that reduce cleanup and preserve first-pass product-design usefulness.",
+      "Use implementation-contract.json and preview-source.tsx as component-evidence proofs, not just prose response labels.",
+      "Call out when the path-level authority context helps or hurts the result meaningfully.",
+      "Name a winner only when the difference is supported by concrete evidence.",
+    ],
+  };
+}
+
+export function createJudgePrompt(outputDirectory: string) {
+  const pathPacketLines = getAiUiE2ePaths().map(
+    (testPath, index) =>
+      `- Path ${index + 1} packet: \`${path.join(outputDirectory, testPath.id, "judge-input.json")}\``,
+  );
+
+  return [
+    "# JudgmentKit AI UI E2E Judge Prompt",
+    "",
+    "You are evaluating two AI UI generation runs for JudgmentKit.",
+    "",
+    "## Inputs",
+    `- Shared comparison packet: \`${path.join(outputDirectory, "judge-comparison-input.json")}\``,
+    ...pathPacketLines,
+    "",
+    "## Required workflow",
+    "1. Read both path judge packets and their referenced transcript and response files.",
+    "2. Read implementation-contract.json and preview-source.tsx for each path as the proof of real component composition evidence.",
+    "3. Produce `path-score.json` for each path using the local harness contract.",
+    "4. Produce `comparison.json` using the local harness contract.",
+    "5. Cite concrete evidence from the transcript, final response text, and component-evidence artifacts.",
+    "",
+    "## Judging guidance",
+    "- Score every acceptance criterion on a 1-5 scale.",
+    "- Use only `pass`, `warn`, or `fail` for verdict status.",
+    "- Use only `allow`, `rewrite`, `review`, `block`, or `escalate` for recommended action.",
+    "- Avoid rewarding ornamental novelty over first-pass usefulness and cleanup reduction.",
+    "- Treat the JudgmentKit workflow bundle, guardrails, and linked constraint packs as authoritative.",
+    "- Treat implementation-contract.json and preview-source.tsx as the primary proof that components were actually composed rather than merely named.",
+    "- When comparing the two paths, compare only on the controlled variable: path-level authority context.",
+  ].join("\n");
+}
+
+export function hasPlaceholderEvidence(content: string) {
+  return (
+    content.includes("Paste the exact Codex transcript for this run here.") ||
+    content.includes("Paste the final generated UI response here.")
+  );
+}
+
+export function hasPlaceholderPreview(content: string) {
+  return content.includes(
+    "Replace this placeholder with a self-contained HTML preview for this path.",
+  );
+}
+
+export function hasPlaceholderImplementationContract(content: string) {
+  return (
+    content.includes("replace-with-real-recipe-id") ||
+    content.includes("Replace with a real component recipe") ||
+    content.includes("Replace this placeholder with real")
+  );
+}
+
+export function hasPlaceholderPreviewSource(content: string) {
+  return content.includes(
+    "Replace this placeholder with a preview-source renderer for this path.",
+  );
+}
+
+export function createGeneratedPreviewMarker(
+  pathId: AiUiE2ePath["id"],
+  implementationContractContent: string,
+  previewSourceContent: string,
+) {
+  const contractHash = crypto
+    .createHash("sha256")
+    .update(implementationContractContent)
+    .digest("hex")
+    .slice(0, 16);
+  const sourceHash = crypto
+    .createHash("sha256")
+    .update(previewSourceContent)
+    .digest("hex")
+    .slice(0, 16);
+
+  return `${AI_UI_E2E_GENERATED_PREVIEW_MARKER_PREFIX}:${pathId}:${contractHash}:${sourceHash}`;
+}
+
+export function isGeneratedPreview(content: string) {
+  return content.includes(AI_UI_E2E_GENERATED_PREVIEW_MARKER_PREFIX);
+}
+
+export function collectImplementationContractAlignmentErrors(
+  contract: AiUiE2eImplementationContract,
+  response: string,
+) {
+  const errors: string[] = [];
+  const normalizedResponse = response.toLowerCase();
+
+  for (const section of contract.required_sections) {
+    if (!normalizedResponse.includes(section.toLowerCase())) {
+      errors.push(`response missing required section ${section}`);
+    }
+  }
+
+  for (const recipeId of contract.response_alignment.component_recipe_ids) {
+    if (recipeId && !normalizedResponse.includes(recipeId.toLowerCase())) {
+      errors.push(`response missing component recipe evidence for ${recipeId}`);
+    }
+  }
+
+  for (const stateId of contract.response_alignment.state_ids) {
+    if (stateId && !normalizedResponse.includes(stateId.toLowerCase())) {
+      errors.push(`response missing state coverage for ${stateId}`);
+    }
+  }
+
+  for (const binding of contract.response_alignment.theme_bindings) {
+    if (binding && !response.includes(binding)) {
+      errors.push(`response missing theme binding ${binding}`);
+    }
+  }
+
+  return errors;
+}
+
+export function createPathScoreTemplate(
+  testPath: AiUiE2ePath,
+): AiUiE2ePathScore {
+  return {
+    version: "1.0.0",
+    kind: "ai_ui_e2e_path_score",
+    path_id: testPath.id,
+    completed: false,
+    verdict: {
+      verdict_id: "",
+      decision_id: "",
+      evaluated_at: "",
+      status: "warn",
+      severity: "medium",
+      guardrails_triggered: [],
+      reasons: [],
+      recommended_action: "review",
+      ownership: {
+        decision_owner: "Design Systems",
+        risk_owner: "Accessibility",
+        operational_owner: "Frontend Platform",
+      },
+      incident_required: false,
+    },
+    criteria: AI_UI_E2E_ACCEPTANCE_CRITERIA.map((criterion) => ({
+      criterion,
+      score: 3,
+      notes: "",
+      evidence: [],
+    })),
+    strongest_evidence: [],
+    cleanup_notes: {
+      reduced_cleanup: "",
+      remaining_cleanup: "",
+      judgmentkit_impact: "",
+    },
+    rationale: "",
+  };
+}
+
+export function createComparisonTemplate(): AiUiE2eComparisonResult {
+  const strongestEvidence = {} as Record<AiUiE2ePath["id"], string[]>;
+  for (const testPath of getAiUiE2ePaths()) {
+    strongestEvidence[testPath.id] = [];
+  }
+
+  return {
+    version: "1.0.0",
+    kind: "ai_ui_e2e_comparison",
+    completed: false,
+    winner: "tie",
+    confidence: 0,
+    meaningful_difference: false,
+    recommended_next_action: "review",
+    rationale: "",
+    criteria_deltas: AI_UI_E2E_ACCEPTANCE_CRITERIA.map((criterion) => ({
+      criterion,
+      winner: "tie",
+      delta: 0,
+      notes: "",
+    })),
+    strongest_evidence: strongestEvidence,
+    top_cleanup_risks: [],
+    judgmentkit_impact_summary: "",
+  };
+}
+
+export function createImplementationContractTemplate(
+  testPath: AiUiE2ePath,
+): AiUiE2eImplementationContract {
+  const requiredSections =
+    testPath.id === "path-1-no-design-system"
+      ? [...AI_UI_E2E_PORTABLE_OUTPUT_CONTRACT_SECTIONS]
+      : [...AI_UI_E2E_DESIGN_SYSTEM_OUTPUT_CONTRACT_SECTIONS];
+
+  return {
+    version: "1.0.0",
+    kind: "ai_ui_e2e_implementation_contract",
+    path_id: testPath.id,
+    authority_model:
+      testPath.id === "path-1-no-design-system"
+        ? "portable_no_design_system"
+        : "shadcn_radix",
+    required_sections: requiredSections,
+    response_alignment: {
+      component_recipe_ids: ["replace-with-real-recipe-id"],
+      state_ids: ["loading", "empty", "ready", "error", "review-needed", "disabled"],
+      theme_bindings:
+        testPath.id === "path-1-no-design-system"
+          ? ["--jk-color-canvas", "--jk-color-surface", "--jk-color-accent"]
+          : ["--background", "--card", "--primary"],
+    },
+    token_spec:
+      testPath.id === "path-1-no-design-system"
+        ? {
+            bindings: ["--jk-color-canvas", "--jk-color-surface", "--jk-color-accent"],
+          }
+        : undefined,
+    design_system_bindings:
+      testPath.id === "path-2-shadcn-radix"
+        ? ["Sidebar", "Card", "Tabs", "Sheet", "Dialog", "Table"]
+        : undefined,
+    component_recipes: [
+      {
+        recipe_id: "replace-with-real-recipe-id",
+        title: "Replace with a real component recipe",
+        primitive_id: "card",
+        source_of_truth:
+          testPath.id === "path-1-no-design-system"
+            ? "constraint-pack.ai-ui-no-design-system"
+            : "shadcn-radix",
+        slots: ["header", "body"],
+        allowed_variants: ["default"],
+        interaction_rules: ["Replace this placeholder with real interaction rules."],
+        accessibility_contract: [
+          "Replace this placeholder with label, focus, keyboard, and semantics rules.",
+        ],
+        react_tailwind:
+          "// Replace this placeholder with a real React+Tailwind recipe snippet.",
+      },
+    ],
+    screen_composition: [
+      {
+        screen_id: "replace-with-real-screen-id",
+        title: "Replace with a real screen composition",
+        recipe_ids: ["replace-with-real-recipe-id"],
+        primary_actions: ["Replace with a real primary action"],
+        notes: ["Replace this placeholder with real composition notes."],
+      },
+    ],
+    state_coverage: [
+      {
+        state: "loading",
+        applies_to: ["replace-with-real-screen-id"],
+        behavior: ["Replace this placeholder with real loading behavior."],
+      },
+    ],
+    theme_contract: {
+      bindings:
+        testPath.id === "path-1-no-design-system"
+          ? ["--jk-color-canvas", "--jk-color-surface", "--jk-color-accent"]
+          : ["--background", "--card", "--primary"],
+      parity_rules: [
+        "Replace this placeholder with explicit light and dark parity rules.",
+      ],
+    },
+    accessibility_contract: {
+      global_rules: ["Replace this placeholder with global accessibility rules."],
+      focus_rules: ["Replace this placeholder with focus-visible rules."],
+      keyboard_rules: ["Replace this placeholder with keyboard behavior rules."],
+      motion_rules: ["Replace this placeholder with reduced-motion behavior rules."],
+    },
+    escalation_items: ["Replace this placeholder with real escalation items."],
+  };
+}
+
+export function createPreviewSourceTemplate(testPath: AiUiE2ePath) {
+  return [
+    "const PLACEHOLDER_NOTICE = \"Replace this placeholder with a preview-source renderer for this path.\";",
+    "",
+    "export default function renderPreview({ contract }) {",
+    "  const title = contract?.path_id ?? \"preview\";",
+    "  return [",
+    "    '<!doctype html>',",
+    "    '<html lang=\"en\">',",
+    "    '  <head>',",
+    "    '    <meta charset=\"utf-8\" />',",
+    "    '    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />',",
+    `    ${JSON.stringify(`    <title>${testPath.title} Preview</title>`)},`,
+    "    '    <style>body{font-family:ui-sans-serif,system-ui,sans-serif;margin:0;display:grid;place-items:center;min-height:100vh;padding:48px;background:#fff;color:#111}main{max-width:48rem;border:1px dashed currentColor;padding:32px;border-radius:16px}</style>',",
+    "    '  </head>',",
+    "    '  <body>',",
+    "    '    <main>',",
+    "    `      <h1>${title}</h1>`,",
+    "    '      <p>' + PLACEHOLDER_NOTICE + '</p>',",
+    "    '    </main>',",
+    "    '  </body>',",
+    "    '</html>',",
+    "  ].join('\\n');",
+    "}",
+    "",
+  ].join("\n");
+}
+
+export function createVisualManifestTemplate(
+  outputDirectory: string,
+  testPath: AiUiE2ePath,
+): AiUiE2eVisualManifest {
+  const baseRef = path.join(outputDirectory, testPath.id);
+
+  return {
+    version: "1.0.0",
+    kind: "ai_ui_e2e_visual_manifest",
+    path_id: testPath.id,
+    completed: false,
+    preview_ref: path.join(baseRef, "preview.html"),
+    component_evidence: {
+      implementation_contract_ref: path.join(baseRef, "implementation-contract.json"),
+      preview_source_ref: path.join(baseRef, "preview-source.tsx"),
+    },
+    derivation: {
+      generated_from_contract: true,
+      marker_prefix: AI_UI_E2E_GENERATED_PREVIEW_MARKER_PREFIX,
+      source_renderer: "preview-source.tsx",
+    },
+    screenshots: {
+      desktop_light_ref: path.join(baseRef, "screenshots", "desktop-light.png"),
+      desktop_dark_ref: path.join(baseRef, "screenshots", "desktop-dark.png"),
+    },
+    capture: {
+      browser: "chromium",
+      headless: true,
+      viewport: {
+        width: AI_UI_E2E_VISUAL_VIEWPORT.width,
+        height: AI_UI_E2E_VISUAL_VIEWPORT.height,
+        deviceScaleFactor: AI_UI_E2E_VISUAL_VIEWPORT.deviceScaleFactor,
+      },
+      color_schemes: [...AI_UI_E2E_VISUAL_COLOR_SCHEMES],
+    },
+    captured_at: "",
+  };
+}
+
+export function assertCompletedPathScore(score: AiUiE2ePathScore) {
+  if (!score.completed) {
+    throw new Error(`Path score for ${score.path_id} is not marked complete.`);
+  }
+
+  if (!AI_UI_E2E_EVALUATOR_STATUSES.includes(score.verdict.status)) {
+    throw new Error(`Invalid verdict status for ${score.path_id}.`);
+  }
+
+  if (score.criteria.length !== AI_UI_E2E_ACCEPTANCE_CRITERIA.length) {
+    throw new Error(`Path score for ${score.path_id} is missing criterion scores.`);
+  }
+}
+
+export function assertCompletedComparison(result: AiUiE2eComparisonResult) {
+  if (!result.completed) {
+    throw new Error("Comparison result is not marked complete.");
+  }
+
+  if (!AI_UI_E2E_EVALUATOR_WINNERS.includes(result.winner)) {
+    throw new Error("Comparison result has an invalid winner.");
+  }
+
+  if (result.criteria_deltas.length !== AI_UI_E2E_ACCEPTANCE_CRITERIA.length) {
+    throw new Error("Comparison result is missing criterion deltas.");
+  }
+}
+
+export function assertCompletedVisualManifest(manifest: AiUiE2eVisualManifest) {
+  if (!manifest.completed) {
+    throw new Error(`Visual manifest for ${manifest.path_id} is not marked complete.`);
+  }
+
+  if (manifest.kind !== "ai_ui_e2e_visual_manifest") {
+    throw new Error(`Visual manifest for ${manifest.path_id} has an invalid kind.`);
+  }
+
+  if (manifest.capture.browser !== "chromium") {
+    throw new Error(`Visual manifest for ${manifest.path_id} must use chromium.`);
+  }
+
+  if (!manifest.capture.headless) {
+    throw new Error(`Visual manifest for ${manifest.path_id} must be headless.`);
+  }
+
+  if (!manifest.derivation.generated_from_contract) {
+    throw new Error(
+      `Visual manifest for ${manifest.path_id} must be generated from contract evidence.`,
+    );
+  }
+
+  if (
+    manifest.derivation.marker_prefix !== AI_UI_E2E_GENERATED_PREVIEW_MARKER_PREFIX
+  ) {
+    throw new Error(
+      `Visual manifest for ${manifest.path_id} has an invalid preview marker prefix.`,
+    );
+  }
+
+  const colorSchemes = manifest.capture.color_schemes.join(",");
+  if (colorSchemes !== AI_UI_E2E_VISUAL_COLOR_SCHEMES.join(",")) {
+    throw new Error(
+      `Visual manifest for ${manifest.path_id} must include light and dark captures.`,
+    );
+  }
+}
+
+export function createMergedSummary(
+  pathResults: AiUiE2ePathScore[],
+  pathVisuals: AiUiE2eVisualManifest[],
+  comparison: AiUiE2eComparisonResult,
+  outputDirectory: string,
+): AiUiE2eMergedSummary {
+  return {
+    workflow_id: AI_UI_E2E_WORKFLOW_ID,
+    path_results: pathResults,
+    path_visuals: pathVisuals,
+    comparison,
+    shared_mcp_verification: {
+      tools_list_ref: path.join(outputDirectory, "tools-list.json"),
+      prompts_list_ref: path.join(outputDirectory, "prompts-list.json"),
+      workflow_bundle_ref: path.join(outputDirectory, "workflow-bundle.json"),
+      call_order_ref: path.join(outputDirectory, "mcp-call-order.json"),
+    },
+  };
+}
+
+export function createFinalComparisonSummaryMarkdown(
+  mergedSummary: AiUiE2eMergedSummary,
+) {
+  const standardPaths = getAiUiE2ePaths();
+  const [pathOne, pathTwo] = standardPaths;
+  const scoreTableRows = AI_UI_E2E_ACCEPTANCE_CRITERIA.map((criterion) => {
+    const pathOneResult = mergedSummary.path_results.find(
+      (result) => result.path_id === pathOne?.id,
+    );
+    const pathTwoResult = mergedSummary.path_results.find(
+      (result) => result.path_id === pathTwo?.id,
+    );
+    const pathOneScore = pathOneResult?.criteria.find(
+      (entry) => entry.criterion === criterion,
+    )?.score;
+    const pathTwoScore = pathTwoResult?.criteria.find(
+      (entry) => entry.criterion === criterion,
+    )?.score;
+    const delta = mergedSummary.comparison.criteria_deltas.find(
+      (entry) => entry.criterion === criterion,
+    );
+
+    return `| ${criterion} | ${pathOneScore ?? ""} | ${pathTwoScore ?? ""} | ${
+      delta?.winner ?? ""
+    } | ${delta?.notes ?? ""} |`;
+  }).join("\n");
+
+  const pathSections = mergedSummary.path_results
+    .map((result) => {
+      const testPath = standardPaths.find((entry) => entry.id === result.path_id);
+      const evidence = result.strongest_evidence
+        .map((item) => `- ${item}`)
+        .join("\n");
+      const visuals = mergedSummary.path_visuals.find(
+        (entry) => entry.path_id === result.path_id,
+      );
+      const visualSection = visuals
+        ? [
+            "### Visual snapshots",
+            `- Implementation contract: \`${visuals.component_evidence.implementation_contract_ref}\``,
+            `- Preview source: \`${visuals.component_evidence.preview_source_ref}\``,
+            `- Preview HTML: \`${visuals.preview_ref}\``,
+            `- Desktop light: \`${visuals.screenshots.desktop_light_ref}\``,
+            `- Desktop dark: \`${visuals.screenshots.desktop_dark_ref}\``,
+            "",
+            `![${result.path_id} desktop light](${visuals.screenshots.desktop_light_ref})`,
+            "",
+            `![${result.path_id} desktop dark](${visuals.screenshots.desktop_dark_ref})`,
+            "",
+          ].join("\n")
+        : [
+            "### Visual snapshots",
+            "- Missing visual artifacts",
+            "",
+          ].join("\n");
+
+      return [
+        `## ${testPath?.title ?? result.path_id}`,
+        "",
+        `- Path ID: ${result.path_id}`,
+        `- Verdict: ${result.verdict.status}`,
+        `- Recommended action: ${result.verdict.recommended_action}`,
+        `- Rationale: ${result.rationale}`,
+        "",
+        visualSection,
+        "### Strongest evidence",
+        evidence || "- None provided",
+        "",
+        "### Cleanup notes",
+        `- Reduced cleanup: ${result.cleanup_notes.reduced_cleanup}`,
+        `- Remaining cleanup: ${result.cleanup_notes.remaining_cleanup}`,
+        `- JudgmentKit impact: ${result.cleanup_notes.judgmentkit_impact}`,
+        "",
+      ].join("\n");
+    })
+    .join("\n");
+
+  const cleanupRisks = mergedSummary.comparison.top_cleanup_risks
+    .map((item) => `- ${item}`)
+    .join("\n");
+
+  return [
+    "# JudgmentKit AI UI E2E Final Comparison",
+    "",
+    `- Workflow: \`${mergedSummary.workflow_id}\``,
+    `- Winner: ${mergedSummary.comparison.winner}`,
+    `- Confidence: ${mergedSummary.comparison.confidence}`,
+    `- Meaningful difference: ${mergedSummary.comparison.meaningful_difference ? "yes" : "no"}`,
+    `- Recommended next action: ${mergedSummary.comparison.recommended_next_action}`,
+    "",
+    "## Shared MCP Verification",
+    `- tools/list ref: \`${mergedSummary.shared_mcp_verification.tools_list_ref}\``,
+    `- prompts/list ref: \`${mergedSummary.shared_mcp_verification.prompts_list_ref}\``,
+    `- workflow bundle ref: \`${mergedSummary.shared_mcp_verification.workflow_bundle_ref}\``,
+    `- call order ref: \`${mergedSummary.shared_mcp_verification.call_order_ref}\``,
+    "",
+    "## Visual Coverage",
+    "- Capture mode: headless Chromium",
+    "- Preview source: implementation-contract.json + preview-source.tsx -> preview.html",
+    `- Color schemes: ${AI_UI_E2E_VISUAL_COLOR_SCHEMES.join(", ")}`,
+    `- Viewport: ${AI_UI_E2E_VISUAL_VIEWPORT.width}x${AI_UI_E2E_VISUAL_VIEWPORT.height} @ ${AI_UI_E2E_VISUAL_VIEWPORT.deviceScaleFactor}x`,
+    "",
+    "## Side-by-Side Scores",
+    "| Criterion | Path 1 | Path 2 | Winner | Notes |",
+    "| --- | --- | --- | --- | --- |",
+    scoreTableRows,
+    "",
+    pathSections,
+    "## Comparison Result",
+    `- Why this winner: ${mergedSummary.comparison.rationale}`,
+    `- Did JudgmentKit materially change the outcome: ${mergedSummary.comparison.judgmentkit_impact_summary}`,
+    "",
+    "## Top Cleanup Risks",
+    cleanupRisks || "- None provided",
+  ].join("\n");
+}
+
+export function createExternalJudgePacketMarkdown(
+  input: AiUiE2eExternalJudgePacketInput,
+) {
+  const requiredOutputs = getAiUiE2ePaths().map(
+    (testPath) => `- \`${testPath.id}/path-score.json\``,
+  );
+  const sharedArtifacts = [
+    "## Shared Artifacts",
+    "### mcp-call-order.json",
+    "```json",
+    JSON.stringify(input.shared_artifacts.mcp_call_order, null, 2),
+    "```",
+    "",
+    "### tools-list.json",
+    "```json",
+    JSON.stringify(input.shared_artifacts.tools_list, null, 2),
+    "```",
+    "",
+    "### prompts-list.json",
+    "```json",
+    JSON.stringify(input.shared_artifacts.prompts_list, null, 2),
+    "```",
+    "",
+    "### start-design-workflow.txt",
+    "```text",
+    input.shared_artifacts.start_design_workflow,
+    "```",
+    "",
+    "### start-no-design-system-workflow.txt",
+    "```text",
+    input.shared_artifacts.start_no_design_system_workflow,
+    "```",
+    "",
+    "### workflow-bundle.json",
+    "```json",
+    JSON.stringify(input.shared_artifacts.workflow_bundle, null, 2),
+    "```",
+  ].join("\n");
+
+  const pathSections = input.path_packets
+    .map((packet) =>
+      [
+        `## ${packet.path.title}`,
+        "",
+        "### judge-input.json",
+        "```json",
+        JSON.stringify(packet.judge_input, null, 2),
+        "```",
+        "",
+        "### transcript.md",
+        "````markdown",
+        packet.transcript,
+        "````",
+        "",
+        "### response.md",
+        "````markdown",
+        packet.response,
+        "````",
+        "",
+        "### implementation-contract.json",
+        "```json",
+        JSON.stringify(packet.implementation_contract, null, 2),
+        "```",
+        "",
+        "### preview-source.tsx",
+        "```tsx",
+        packet.preview_source,
+        "```",
+        "",
+        `### Output target: ${packet.path.id}/path-score.json`,
+        "```json",
+        JSON.stringify(packet.path_score_template, null, 2),
+        "```",
+      ].join("\n"),
+    )
+    .join("\n\n");
+
+  return [
+    "# JudgmentKit AI UI E2E External Judge Packet",
+    "",
+    `Bundle directory: \`${input.output_directory}\``,
+    "",
+    "Copy this entire packet into the external judging model.",
+    "",
+    "## Required outputs",
+    "Return exactly three completed JSON objects matching the included templates:",
+    ...requiredOutputs,
+    "- `comparison.json`",
+    "",
+    "## Judge Prompt",
+    "````markdown",
+    input.judge_prompt,
+    "````",
+    "",
+    "## comparison.json output template",
+    "```json",
+    JSON.stringify(input.comparison_template, null, 2),
+    "```",
+    "",
+    "## judge-comparison-input.json",
+    "```json",
+    JSON.stringify(input.comparison_input, null, 2),
+    "```",
+    "",
+    sharedArtifacts,
+    "",
+    pathSections,
+  ].join("\n");
+}
diff --git a/lib/ai-ui-e2e.ts b/lib/ai-ui-e2e.ts
new file mode 100644
index 0000000..2056f62
--- /dev/null
+++ b/lib/ai-ui-e2e.ts
@@ -0,0 +1,238 @@
+import path from "node:path";
+
+export const AI_UI_E2E_WORKFLOW_ID = "workflow.ai-ui-generation";
+export const AI_UI_E2E_ARTIFACTS_DIR = path.join(
+  process.cwd(),
+  "artifacts",
+  "ai-ui-e2e-evaluator",
+);
+
+export const AI_UI_E2E_FEATURE_INTENT =
+  "Design an AI UI workspace for JudgmentKit that helps product designers get a strong first-pass interface with minimal cleanup. The UI should support prompting, workflow guidance, guardrail awareness, result review, and implementation handoff.";
+
+export const AI_UI_E2E_SHARED_PROMPT =
+  "Design the first-pass AI UI workspace for JudgmentKit. Prioritize fast onboarding, clear information hierarchy, explicit next steps, restrained visual decisions, accessible semantics, and complete light/dark theme behavior. Include the core screens, major regions, key components, primary actions, and concise UX rationale for why this should produce a great result in one shot and reduce cleanup work.";
+
+export const AI_UI_E2E_COMMON_OUTPUT_CONTRACT_SECTIONS = [
+  "core_screens",
+  "component_recipes",
+  "screen_composition",
+  "state_coverage",
+  "theme_contract",
+  "accessibility_contract",
+  "escalation_items",
+] as const;
+
+export const AI_UI_E2E_PORTABLE_OUTPUT_CONTRACT_SECTIONS = [
+  "core_screens",
+  "token_spec",
+  "component_recipes",
+  "screen_composition",
+  "state_coverage",
+  "theme_contract",
+  "accessibility_contract",
+  "escalation_items",
+] as const;
+
+export const AI_UI_E2E_DESIGN_SYSTEM_OUTPUT_CONTRACT_SECTIONS = [
+  "core_screens",
+  "design_system_bindings",
+  "component_recipes",
+  "screen_composition",
+  "state_coverage",
+  "theme_contract",
+  "accessibility_contract",
+  "escalation_items",
+] as const;
+
+export const AI_UI_E2E_PORTABLE_AUTHORITY_CONTEXT = [
+  "No external design system is present for this run.",
+  "JudgmentKit's portable no-design-system authority pack is the source of truth.",
+  "Use the published primitive inventory, token contract, reusable React+Tailwind recipes, layout archetypes, vendored guideline profiles, state matrix, and handoff contract instead of fallback adjectives or bespoke primitives.",
+  `For no-design-system output, include exactly these sections: ${AI_UI_E2E_PORTABLE_OUTPUT_CONTRACT_SECTIONS.join(", ")}.`,
+].join("\n");
+
+export const AI_UI_E2E_SHADCN_RADIX_CONTEXT = [
+  "Shadcn/ui plus Radix UI is the authoritative component system for this run.",
+  "The accessibility baseline is considered reviewed and approved for test purposes.",
+  "Use Shadcn/ui component patterns, Radix primitives, CSS-variable tokens, and composition discipline as the source of truth.",
+  "Do not invent a parallel primitive layer unless the workflow explicitly escalates it.",
+  `For design-system output, include exactly these sections: ${AI_UI_E2E_DESIGN_SYSTEM_OUTPUT_CONTRACT_SECTIONS.join(", ")}.`,
+].join("\n");
+
+export const AI_UI_E2E_ACCEPTANCE_CRITERIA = [
+  "First-shot usefulness",
+  "Cleanup load",
+  "Workflow adherence",
+  "Design-system integrity",
+  "Theme completeness",
+  "UX clarity",
+  "Output discipline",
+  "Handoff quality",
+] as const;
+
+export type AiUiE2eAcceptanceCriterion =
+  (typeof AI_UI_E2E_ACCEPTANCE_CRITERIA)[number];
+
+export type AiUiE2ePathId =
+  | "path-1-no-design-system"
+  | "path-2-shadcn-radix";
+
+export type AiUiE2ePath = {
+  id: AiUiE2ePathId;
+  title: string;
+  systemContext: string;
+  expectedBehavior: string[];
+};
+
+export const AI_UI_E2E_PATHS: readonly AiUiE2ePath[] = [
+  {
+    id: "path-1-no-design-system",
+    title: "Path 1: JudgmentKit portable authority without an external design system",
+    systemContext: AI_UI_E2E_PORTABLE_AUTHORITY_CONTEXT,
+    expectedBehavior: [
+      "Uses the JudgmentKit portable no-design-system authority pack as the source of truth",
+      "Maps the UI to published primitives, tokens, archetypes, recipes, and required states",
+      `Returns ${AI_UI_E2E_PORTABLE_OUTPUT_CONTRACT_SECTIONS.join(", ")}`,
+      "Keeps artifact, code, and inspector surfaces theme-consistent",
+      "Produces a compact, implementation-ready first pass rather than exploratory sprawl",
+      "Proves reusable component composition instead of only describing screens",
+    ],
+  },
+  {
+    id: "path-2-shadcn-radix",
+    title: "Path 2: One-shot with Shadcn+Radix",
+    systemContext: AI_UI_E2E_SHADCN_RADIX_CONTEXT,
+    expectedBehavior: [
+      "Honors Shadcn/ui plus Radix as authoritative",
+      "Maps the UI to existing Shadcn component patterns and Radix primitives with code-level composition evidence",
+      "Uses CSS-variable token discipline and theme parity instead of ad hoc styling",
+      "Stays restrained in the zero-shot pass",
+      "Surfaces escalation only if the requested UI truly falls outside the system",
+    ],
+  },
+];
+
+export function getAiUiE2ePaths(): AiUiE2ePath[] {
+  return AI_UI_E2E_PATHS.map((testPath) => ({
+    ...testPath,
+    expectedBehavior: [...testPath.expectedBehavior],
+  }));
+}
+
+export function getDefaultAiUiE2eArtifactsDir() {
+  return AI_UI_E2E_ARTIFACTS_DIR;
+}
+
+export function createCodexSeedPrompt(path: AiUiE2ePath) {
+  const starterPromptName =
+    path.id === "path-1-no-design-system"
+      ? "start_no_design_system_workflow"
+      : "start_design_workflow";
+  const sections = [
+    `Feature intent: ${AI_UI_E2E_FEATURE_INTENT}`,
+    "Required MCP call order:",
+    "1. Verify the local judgmentkit MCP server with tools/list.",
+    `2. Call ${starterPromptName} with the feature intent above.`,
+    `3. Call get_workflow_bundle({ workflow_id: "${AI_UI_E2E_WORKFLOW_ID}", feature_intent: ${JSON.stringify(
+      AI_UI_E2E_FEATURE_INTENT,
+    )} }).`,
+  ];
+
+  if (path.systemContext) {
+    sections.push("Design-system context:", path.systemContext);
+  }
+
+  sections.push(
+    "User prompt:",
+    AI_UI_E2E_SHARED_PROMPT,
+    "Output requirements:",
+    "- Provide the core screens, major regions, key components, primary actions, and concise UX rationale.",
+    "- Prove reusable component composition with concrete React+Tailwind recipe snippets, slot structure, allowed variants, interaction rules, and accessibility contract details.",
+    "- Keep the first pass bounded and implementation-ready.",
+    "- Treat JudgmentKit workflow guidance and linked guardrails as authoritative.",
+    path.id === "path-1-no-design-system"
+      ? `- For this path, treat the portable JudgmentKit no-design-system authority pack as the source of truth and include ${AI_UI_E2E_PORTABLE_OUTPUT_CONTRACT_SECTIONS.join(", ")}.`
+      : `- For this path, treat the external design-system context as the source of truth and include ${AI_UI_E2E_DESIGN_SYSTEM_OUTPUT_CONTRACT_SECTIONS.join(", ")}.`,
+    "Artifact requirements:",
+    "- Save the full conversation transcript separately as `transcript.md`.",
+    "- Save only the final textual answer separately as `response.md`.",
+    "- Save a machine-readable `implementation-contract.json` that matches the response sections, component recipes, states, and theme bindings.",
+    "- Save a `preview-source.tsx` renderer that derives preview HTML from the implementation contract.",
+    "- Let the evaluator generate `preview.html` from `preview-source.tsx` during visual capture instead of hand-authoring preview HTML.",
+  );
+
+  return sections.join("\n\n");
+}
+
+export function createEvidenceTemplate(outputDir: string) {
+  const pathSections = getAiUiE2ePaths()
+    .map((path) => {
+      const criteriaRows = AI_UI_E2E_ACCEPTANCE_CRITERIA.map(
+        (criterion) => `| ${criterion} |  |  |`,
+      ).join("\n");
+
+      const expectedBehavior = path.expectedBehavior
+        .map((item) => `- ${item}`)
+        .join("\n");
+
+      const systemContext = path.systemContext
+        ? path.systemContext
+            .split("\n")
+            .map((line) => `- ${line}`)
+            .join("\n")
+        : "- None";
+
+      return [
+        `## ${path.title}`,
+        "",
+        `Artifacts: \`${outputDir}/${path.id}\``,
+        "",
+        "### Controlled inputs",
+        `- Feature intent: ${AI_UI_E2E_FEATURE_INTENT}`,
+        `- Shared prompt: ${AI_UI_E2E_SHARED_PROMPT}`,
+        "- System context:",
+        systemContext,
+        "",
+        "### Expected behavior",
+        expectedBehavior,
+        "",
+        "### Run evidence",
+        "- Codex transcript: ",
+        "- MCP calls made and their order: ",
+        "- Final generated UI response: ",
+        "- implementation-contract.json saved: ",
+        "- preview-source.tsx saved: ",
+        "- Generated preview.html saved: ",
+        "- Desktop light screenshot saved: ",
+        "- Desktop dark screenshot saved: ",
+        "- Pass / warn / fail verdict: ",
+        "",
+        "### Scorecard",
+        "| Criterion | Score (1-5) | Notes |",
+        "| --- | --- | --- |",
+        criteriaRows,
+        "",
+        "### Cleanup notes",
+        "- What reduced cleanup:",
+        "- What still created cleanup:",
+        "- Did JudgmentKit materially improve the result vs an unguided prompt:",
+        "",
+      ].join("\n");
+    })
+    .join("\n");
+
+  return [
+    "# JudgmentKit AI UI Workflow E2E Report",
+    "",
+    `Generated evidence bundle: \`${outputDir}\``,
+    "",
+    "## Shared MCP verification",
+    "- tools/list reachable: ",
+    "- start_design_workflow reachable: ",
+    `- get_workflow_bundle reachable: `,
+    `- Workflow bundle used: \`${AI_UI_E2E_WORKFLOW_ID}\``,
+    "",
+    pathSections,
+  ].join("\n");
+}
diff --git a/lib/constants.ts b/lib/constants.ts
index 8dbf445..c58f43c 100644
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -9,7 +9,14 @@ export const JUDGMENTKIT_REPOSITORY_CLONE_URL =
 export const DEFAULT_LOCAL_JUDGMENTKIT_CHECKOUT_PATH = "$HOME/judgmentkit";
 export const LOCAL_JUDGMENTKIT_CHECKOUT_PLACEHOLDER =
   "<ABSOLUTE_PATH_TO_LOCAL_JUDGMENTKIT_CHECKOUT>";
+export const LOCAL_MCP_DEFAULT_HOST = "127.0.0.1";
+export const LOCAL_MCP_DEFAULT_PORT = 8765;
+export const LOCAL_MCP_ENDPOINT_PATH = "/mcp";
+export const LOCAL_MCP_HOST_ENV = "JUDGMENTKIT_MCP_HOST";
+export const LOCAL_MCP_PORT_ENV = "JUDGMENTKIT_MCP_PORT";
+export const LOCAL_MCP_DEFAULT_URL = `http://${LOCAL_MCP_DEFAULT_HOST}:${LOCAL_MCP_DEFAULT_PORT}${LOCAL_MCP_ENDPOINT_PATH}`;
 export const LOCAL_JUDGMENTKIT_INSTALL_COMMAND = `npm --prefix ${LOCAL_JUDGMENTKIT_CHECKOUT_PLACEHOLDER} install`;
+export const LOCAL_JUDGMENTKIT_MCP_LOCAL_COMMAND = `npm --prefix ${LOCAL_JUDGMENTKIT_CHECKOUT_PLACEHOLDER} run mcp:local`;
 export const LOCAL_JUDGMENTKIT_STDIO_ARGS = [
   "--prefix",
   LOCAL_JUDGMENTKIT_CHECKOUT_PLACEHOLDER,
@@ -21,6 +28,13 @@ export const LOCAL_JUDGMENTKIT_INSTALLER_COMMAND =
   "node --import tsx ./scripts/install-mcp.ts";
 export const HOSTED_JUDGMENTKIT_BOOTSTRAP_COMMAND = `curl -fsSL ${CANONICAL_INSTALL_URL} | bash -s -- --client <codex|claude|cursor>`;
 
+export function createLocalMcpUrl(
+  host = LOCAL_MCP_DEFAULT_HOST,
+  port: number | string = LOCAL_MCP_DEFAULT_PORT,
+) {
+  return `http://${host}:${port}${LOCAL_MCP_ENDPOINT_PATH}`;
+}
+
 function normalizeSiteUrl(value: string) {
   const trimmed = value.trim();
   const withProtocol = /^https?:\/\//i.test(trimmed)
diff --git a/lib/install-contract.ts b/lib/install-contract.ts
index a5b1d7a..f020a47 100644
--- a/lib/install-contract.ts
+++ b/lib/install-contract.ts
@@ -4,6 +4,7 @@ import rawProductSurface from "@/content/product-surface.json";
 import {
   CANONICAL_INSTALL_URL,
   CANONICAL_SITE_URL,
+  createLocalMcpUrl,
   DEFAULT_LOCAL_JUDGMENTKIT_CHECKOUT_PATH,
   HOSTED_MCP_REFERENCE_URL,
   HOSTED_JUDGMENTKIT_BOOTSTRAP_COMMAND,
@@ -11,7 +12,12 @@ import {
   LOCAL_JUDGMENTKIT_CHECKOUT_PLACEHOLDER,
   LOCAL_JUDGMENTKIT_INSTALL_COMMAND,
   LOCAL_JUDGMENTKIT_INSTALLER_COMMAND,
-  LOCAL_JUDGMENTKIT_STDIO_ARGS,
+  LOCAL_JUDGMENTKIT_MCP_LOCAL_COMMAND,
+  LOCAL_MCP_DEFAULT_HOST,
+  LOCAL_MCP_DEFAULT_PORT,
+  LOCAL_MCP_ENDPOINT_PATH,
+  LOCAL_MCP_HOST_ENV,
+  LOCAL_MCP_PORT_ENV,
 } from "@/lib/constants";
 import {
   createCommandReferenceUrl,
@@ -55,7 +61,7 @@ export function loadInstallContract(): InstallContract {
     version: "3.0.0",
     product_name: content.product_name,
     command_reference_url: createCommandReferenceUrl(CANONICAL_SITE_URL),
-    warning: `Install JudgmentKit from a local checkout over stdio via the hosted bootstrap script at ${CANONICAL_INSTALL_URL}. ${HOSTED_MCP_REFERENCE_URL} is a hosted reference/debug endpoint, not the install target.`,
+    warning: `Install JudgmentKit from a local checkout over loopback HTTP via the hosted bootstrap script at ${CANONICAL_INSTALL_URL}. ${HOSTED_MCP_REFERENCE_URL} is a hosted reference/debug endpoint, not the install target.`,
     installer: {
       mode: "hosted-bootstrap",
       bootstrap_url: CANONICAL_INSTALL_URL,
@@ -72,10 +78,20 @@ export function loadInstallContract(): InstallContract {
       install_command: LOCAL_JUDGMENTKIT_INSTALL_COMMAND,
     },
     server_name: "judgmentkit",
-    install_transport: "stdio",
+    install_transport: "http",
     connection: {
-      command: "npm",
-      args: LOCAL_JUDGMENTKIT_STDIO_ARGS,
+      transport: "http",
+      url: createLocalMcpUrl(),
+      loopback_runtime: {
+        start_command: LOCAL_JUDGMENTKIT_MCP_LOCAL_COMMAND,
+        host: LOCAL_MCP_DEFAULT_HOST,
+        port: LOCAL_MCP_DEFAULT_PORT,
+        endpoint: LOCAL_MCP_ENDPOINT_PATH,
+        env_overrides: {
+          host: LOCAL_MCP_HOST_ENV,
+          port: LOCAL_MCP_PORT_ENV,
+        },
+      },
     },
     supported_clients: getSupportedClientIds(content.install_targets),
     clients: content.install_targets.map((target) => ({
@@ -87,8 +103,10 @@ export function loadInstallContract(): InstallContract {
     verification: {
       method: "tools/list",
       server_name: "judgmentkit",
+      endpoint: createLocalMcpUrl(),
+      start_command: LOCAL_JUDGMENTKIT_MCP_LOCAL_COMMAND,
       instructions:
-        `After configuring the local "judgmentkit" MCP server, call MCP tools/list against that local server to confirm the install is reachable. Then use ${createCommandReferenceUrl(
+        `Start the local loopback server with ${LOCAL_JUDGMENTKIT_MCP_LOCAL_COMMAND}, then call MCP tools/list against ${createLocalMcpUrl()} to confirm the install is reachable. Then use ${createCommandReferenceUrl(
           CANONICAL_SITE_URL,
         )} to attach docs URLs to the returned command names.`,
       expected_tools: listTools().map((tool) => tool.name),
diff --git a/lib/install-mcp.ts b/lib/install-mcp.ts
index 457f000..973554a 100644
--- a/lib/install-mcp.ts
+++ b/lib/install-mcp.ts
@@ -4,10 +4,13 @@ import os from "node:os";
 import path from "node:path";
 
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
-import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
+import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
 
 import {
+  createLocalMcpUrl,
   JUDGMENTKIT_REPOSITORY_CLONE_URL,
+  LOCAL_MCP_DEFAULT_HOST,
+  LOCAL_MCP_DEFAULT_PORT,
 } from "@/lib/constants";
 import { loadInstallContract } from "@/lib/install-contract";
 import type { InstallContract, InstallContractClient, InstallerClientId } from "@/lib/types";
@@ -30,6 +33,8 @@ export type InstallerCliOptions = {
   dryRun?: boolean;
   manual?: boolean;
   noVerify?: boolean;
+  host?: string;
+  port?: number;
   cwd?: string;
 };
 
@@ -40,11 +45,10 @@ export type InstallResult = {
   backupPath?: string;
   wroteConfig: boolean;
   verified: boolean;
-  manualSnippet: string;
-  command: {
-    command: string;
-    args: string[];
-  };
+  endpoint: string;
+  startCommand: string;
+  configSnippet: string;
+  bridgeFallbackSnippet: string;
 };
 
 export class InstallerError extends Error {
@@ -109,6 +113,18 @@ function normalizeClient(value: string | undefined): InstallerClientId {
   );
 }
 
+function normalizePort(value: string | undefined) {
+  const parsed = Number(value);
+  if (Number.isInteger(parsed) && parsed > 0 && parsed <= 65_535) {
+    return parsed;
+  }
+
+  throw new InstallerError(
+    "args",
+    "Missing or invalid --port. Provide a TCP port between 1 and 65535.",
+  );
+}
+
 function expandHomePath(value: string, homeDir: string) {
   return value.startsWith("~/") ? path.join(homeDir, value.slice(2)) : value;
 }
@@ -120,6 +136,8 @@ export function parseInstallerArgs(argv: string[]): InstallerCliOptions {
   let dryRun = false;
   let manual = false;
   let noVerify = false;
+  let host: string | undefined;
+  let port: number | undefined;
 
   for (let index = 0; index < argv.length; index += 1) {
     const argument = argv[index];
@@ -145,10 +163,18 @@ export function parseInstallerArgs(argv: string[]): InstallerCliOptions {
       case "--no-verify":
         noVerify = true;
         break;
+      case "--host":
+        host = argv[index + 1];
+        index += 1;
+        break;
+      case "--port":
+        port = normalizePort(argv[index + 1]);
+        index += 1;
+        break;
       case "--help":
         throw new InstallerError(
           "args",
-          "Usage: node --import tsx ./scripts/install-mcp.ts --client <codex|claude|cursor> [--path <checkout-path>] [--config-path <path>] [--dry-run] [--manual] [--no-verify]",
+          "Usage: node --import tsx ./scripts/install-mcp.ts --client <codex|claude|cursor> [--path <checkout-path>] [--config-path <path>] [--host <host>] [--port <port>] [--dry-run] [--manual] [--no-verify]",
         );
       default:
         if (argument.startsWith("--")) {
@@ -165,6 +191,8 @@ export function parseInstallerArgs(argv: string[]): InstallerCliOptions {
     dryRun,
     manual,
     noVerify,
+    host,
+    port,
   };
 }
 
@@ -198,15 +226,6 @@ function materializeLocalPath(value: string, contract: InstallContract, checkout
   return value.replaceAll(contract.repository.local_path_placeholder, checkoutPath);
 }
 
-function materializeConnection(contract: InstallContract, checkoutPath: string) {
-  return {
-    command: contract.connection.command,
-    args: contract.connection.args.map((argument) =>
-      materializeLocalPath(argument, contract, checkoutPath),
-    ),
-  };
-}
-
 function getClientContract(
   contract: InstallContract,
   client: InstallerClientId,
@@ -219,19 +238,90 @@ function getClientContract(
   return target;
 }
 
-export function renderManualConfigSnippet(client: InstallContractClient, checkoutPath: string) {
-  const connection = materializeConnection(loadInstallContract(), checkoutPath);
+function getHttpConnection(contract: InstallContract) {
+  if (contract.connection.transport !== "http") {
+    throw new InstallerError(
+      "config",
+      "JudgmentKit install contract does not expose an HTTP connection.",
+    );
+  }
+
+  return contract.connection;
+}
+
+function resolveHost(host: string | undefined) {
+  const trimmed = host?.trim();
+  return trimmed || LOCAL_MCP_DEFAULT_HOST;
+}
+
+function resolvePort(port: number | undefined) {
+  return port ?? LOCAL_MCP_DEFAULT_PORT;
+}
+
+function materializeLoopbackRuntime(
+  contract: InstallContract,
+  checkoutPath: string,
+  host: string,
+  port: number,
+) {
+  const connection = getHttpConnection(contract);
+
+  return {
+    endpoint: createLocalMcpUrl(host, port),
+    startCommand: materializeLocalPath(
+      connection.loopback_runtime.start_command,
+      contract,
+      checkoutPath,
+    ),
+  };
+}
+
+function createBridgeConfig(endpoint: string) {
+  return {
+    command: "npx",
+    args: ["-y", "mcp-remote", endpoint],
+  };
+}
+
+export function renderManualConfigSnippet(
+  client: InstallContractClient,
+  _checkoutPath: string,
+  endpoint = createLocalMcpUrl(),
+) {
+  if (client.config_format === "toml") {
+    return `[mcp_servers.judgmentkit]
+url = "${endpoint}"`;
+  }
+
+  return `${JSON.stringify(
+    {
+      mcpServers: {
+        judgmentkit: {
+          url: endpoint,
+        },
+      },
+    },
+    null,
+    2,
+  )}\n`;
+}
+
+export function renderBridgeFallbackSnippet(
+  client: InstallContractClient,
+  endpoint = createLocalMcpUrl(),
+) {
+  const bridgeConfig = createBridgeConfig(endpoint);
 
   if (client.config_format === "toml") {
     return `[mcp_servers.judgmentkit]
-command = "${connection.command}"
-args = ${JSON.stringify(connection.args)}`;
+command = "${bridgeConfig.command}"
+args = ${JSON.stringify(bridgeConfig.args)}`;
   }
 
   return `${JSON.stringify(
     {
       mcpServers: {
-        judgmentkit: connection,
+        judgmentkit: bridgeConfig,
       },
     },
     null,
@@ -276,7 +366,7 @@ export function upsertCodexTomlConfig(existingText: string, judgmentKitBlock: st
   return `${prefix}${prefix ? "\n\n" : ""}${judgmentKitBlock.trim()}\n`;
 }
 
-export function upsertJsonMcpConfig(existingText: string, serverConfig: { command: string; args: string[] }) {
+export function upsertJsonMcpConfig(existingText: string, serverConfig: { url: string }) {
   const trimmed = existingText.trim();
   const parsed = trimmed.length > 0 ? JSON.parse(trimmed) : {};
 
@@ -285,7 +375,7 @@ export function upsertJsonMcpConfig(existingText: string, serverConfig: { comman
   }
 
   const root = parsed as {
-    mcpServers?: Record<string, { command: string; args: string[] }>;
+    mcpServers?: Record<string, { url: string }>;
   };
 
   if (
@@ -353,10 +443,10 @@ async function writeClientConfig(
   client: InstallContractClient,
   configPath: string,
   checkoutPath: string,
+  endpoint: string,
   deps: InstallDependencies,
 ) {
-  const manualSnippet = renderManualConfigSnippet(client, checkoutPath);
-  const connection = materializeConnection(loadInstallContract(), checkoutPath);
+  const configSnippet = renderManualConfigSnippet(client, checkoutPath, endpoint);
   const existingText = (await pathExists(deps.fs, configPath))
     ? await deps.fs.readFile(configPath, "utf8")
     : "";
@@ -364,19 +454,19 @@ async function writeClientConfig(
   let nextText: string;
   try {
     if (client.config_format === "toml") {
-      nextText = upsertCodexTomlConfig(existingText, manualSnippet);
+      nextText = upsertCodexTomlConfig(existingText, configSnippet);
     } else {
-      nextText = upsertJsonMcpConfig(existingText, connection);
+      nextText = upsertJsonMcpConfig(existingText, { url: endpoint });
     }
   } catch (error) {
     if (error instanceof InstallerError) {
-      throw new InstallerError("config", error.message, manualSnippet);
+      throw new InstallerError("config", error.message, configSnippet);
     }
 
     throw new InstallerError(
       "config",
       `Failed to update ${configPath}: ${String(error)}`,
-      manualSnippet,
+      configSnippet,
     );
   }
 
@@ -395,30 +485,19 @@ async function writeClientConfig(
     throw new InstallerError(
       "config",
       `Failed to write client config at ${configPath}: ${String(error)}`,
-      manualSnippet,
+      configSnippet,
     );
   }
 
   return {
     backupPath,
-    manualSnippet,
+    configSnippet,
   };
 }
 
-export async function verifyInstalledMcp(checkoutPath: string) {
+async function verifyHttpToolsList(endpoint: string) {
   const contract = loadInstallContract();
-  const connection = materializeConnection(contract, checkoutPath);
-  const stderrOutput: string[] = [];
-  const transport = new StdioClientTransport({
-    command: connection.command,
-    args: connection.args,
-    cwd: checkoutPath,
-    stderr: "pipe",
-  });
-
-  transport.stderr?.on("data", (chunk: Buffer | string) => {
-    stderrOutput.push(chunk.toString());
-  });
+  const transport = new StreamableHTTPClientTransport(new URL(endpoint));
 
   const client = new Client({
     name: "judgmentkit-install-verifier",
@@ -435,13 +514,71 @@ export async function verifyInstalledMcp(checkoutPath: string) {
         `Unexpected tools/list response. Expected ${expected.join(", ")} but received ${toolNames.join(", ")}.`,
       );
     }
+  } finally {
+    await transport.close();
+  }
+}
+
+async function waitForHttpToolsList(endpoint: string, timeoutMs: number) {
+  const startedAt = Date.now();
+  let lastError: unknown;
+
+  while (Date.now() - startedAt < timeoutMs) {
+    try {
+      await verifyHttpToolsList(endpoint);
+      return;
+    } catch (error) {
+      lastError = error;
+      await new Promise((resolve) => setTimeout(resolve, 250));
+    }
+  }
+
+  throw lastError instanceof Error ? lastError : new Error(String(lastError));
+}
+
+export async function verifyInstalledMcp(
+  checkoutPath: string,
+  options: {
+    endpoint?: string;
+    host?: string;
+    port?: number;
+  } = {},
+) {
+  const host = resolveHost(options.host);
+  const port = resolvePort(options.port);
+  const endpoint = options.endpoint ?? createLocalMcpUrl(host, port);
+  const stderrOutput: string[] = [];
+
+  try {
+    await verifyHttpToolsList(endpoint);
+    return;
+  } catch {
+    // If no loopback server is already running, start one just for verification.
+  }
+
+  const child = spawn("npm", ["--prefix", checkoutPath, "run", "mcp:local"], {
+    cwd: checkoutPath,
+    env: {
+      ...process.env,
+      JUDGMENTKIT_MCP_HOST: host,
+      JUDGMENTKIT_MCP_PORT: String(port),
+    },
+    stdio: ["ignore", "ignore", "pipe"],
+  });
+
+  child.stderr.on("data", (chunk: Buffer | string) => {
+    stderrOutput.push(chunk.toString());
+  });
+
+  try {
+    await waitForHttpToolsList(endpoint, 10_000);
   } catch (error) {
     throw new InstallerError(
       "verify",
-      `Failed to verify the local JudgmentKit MCP install: ${String(error)} ${stderrOutput.join("").trim()}`.trim(),
+      `Failed to verify the local JudgmentKit MCP install at ${endpoint}: ${String(error)} ${stderrOutput.join("").trim()}`.trim(),
     );
   } finally {
-    await transport.close();
+    child.kill();
   }
 }
 
@@ -455,14 +592,22 @@ export async function installJudgmentKitMcp(
   };
   const contract = loadInstallContract();
   const checkoutPath = resolveCheckoutPath(options.checkoutPath, deps.homeDir());
+  const host = resolveHost(options.host);
+  const port = resolvePort(options.port);
+  const { endpoint, startCommand } = materializeLoopbackRuntime(
+    contract,
+    checkoutPath,
+    host,
+    port,
+  );
   const client = getClientContract(contract, options.client);
   const configPath = resolveClientConfigPath(client.id, {
     configPath: options.configPath,
     cwd: options.cwd,
     homeDir: deps.homeDir(),
   });
-  const manualSnippet = renderManualConfigSnippet(client, checkoutPath);
-  const connection = materializeConnection(contract, checkoutPath);
+  const configSnippet = renderManualConfigSnippet(client, checkoutPath, endpoint);
+  const bridgeFallbackSnippet = renderBridgeFallbackSnippet(client, endpoint);
 
   if (options.dryRun || options.manual) {
     return {
@@ -471,17 +616,25 @@ export async function installJudgmentKitMcp(
       configPath,
       wroteConfig: false,
       verified: false,
-      manualSnippet,
-      command: connection,
+      endpoint,
+      startCommand,
+      configSnippet,
+      bridgeFallbackSnippet,
     };
   }
 
   await ensureCheckout(checkoutPath, deps);
   await ensureDependencies(checkoutPath, deps);
-  const configResult = await writeClientConfig(client, configPath, checkoutPath, deps);
+  const configResult = await writeClientConfig(
+    client,
+    configPath,
+    checkoutPath,
+    endpoint,
+    deps,
+  );
 
   if (!options.noVerify) {
-    await verifyInstalledMcp(checkoutPath);
+    await verifyInstalledMcp(checkoutPath, { endpoint, host, port });
   }
 
   return {
@@ -491,8 +644,10 @@ export async function installJudgmentKitMcp(
     backupPath: configResult.backupPath,
     wroteConfig: true,
     verified: !options.noVerify,
-    manualSnippet,
-    command: connection,
+    endpoint,
+    startCommand,
+    configSnippet,
+    bridgeFallbackSnippet,
   };
 }
 
@@ -501,7 +656,8 @@ export function formatInstallerResult(result: InstallResult) {
     `JudgmentKit installer prepared client: ${result.client}`,
     `Checkout path: ${result.checkoutPath}`,
     `Config path: ${result.configPath}`,
-    `Command: ${result.command.command} ${result.command.args.join(" ")}`,
+    `Endpoint: ${result.endpoint}`,
+    `Start local MCP: ${result.startCommand}`,
   ];
 
   if (result.backupPath) {
@@ -516,6 +672,16 @@ export function formatInstallerResult(result: InstallResult) {
     lines.push("Verification: tools/list succeeded");
   }
 
-  lines.push("", "Manual fallback snippet:", result.manualSnippet);
+  lines.push(
+    "",
+    "Before using the configured client, run:",
+    result.startCommand,
+    "",
+    "Config snippet:",
+    result.configSnippet,
+    "",
+    "Bridge fallback snippet for URL-incompatible clients:",
+    result.bridgeFallbackSnippet,
+  );
   return `${lines.join("\n")}\n`;
 }
diff --git a/lib/mcp-http.ts b/lib/mcp-http.ts
new file mode 100644
index 0000000..a0d839d
--- /dev/null
+++ b/lib/mcp-http.ts
@@ -0,0 +1,103 @@
+import { WebStandardStreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/webStandardStreamableHttp.js";
+
+import { createJudgmentKitMcpServer, getMcpMetadata } from "@/lib/mcp-server";
+
+type McpHttpMetadataTransport = "streamable-http" | "local-loopback-http";
+
+const LOCAL_CORS_HEADERS = {
+  "access-control-allow-origin": "*",
+  "access-control-allow-methods": "GET, POST, OPTIONS",
+  "access-control-allow-headers":
+    "content-type, accept, mcp-protocol-version, mcp-session-id",
+} as const;
+
+function wantsSse(request: Request) {
+  return request.headers.get("accept")?.includes("text/event-stream") ?? false;
+}
+
+function withCors(response: Response) {
+  const headers = new Headers(response.headers);
+  for (const [key, value] of Object.entries(LOCAL_CORS_HEADERS)) {
+    headers.set(key, value);
+  }
+
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers,
+  });
+}
+
+function jsonResponse(payload: unknown, init?: ResponseInit) {
+  return new Response(JSON.stringify(payload, null, 2), {
+    ...init,
+    headers: {
+      "content-type": "application/json; charset=utf-8",
+      ...(init?.headers ?? {}),
+    },
+  });
+}
+
+export function createMcpMetadataResponse(
+  transport: McpHttpMetadataTransport,
+  options: { cors?: boolean } = {},
+) {
+  const response = jsonResponse(getMcpMetadata(transport));
+  return options.cors ? withCors(response) : response;
+}
+
+export function createMcpOptionsResponse() {
+  return new Response(null, {
+    status: 204,
+    headers: LOCAL_CORS_HEADERS,
+  });
+}
+
+export function createMcpNotFoundResponse(message = "Use /mcp.") {
+  return withCors(
+    jsonResponse(
+      {
+        error: "not_found",
+        message,
+      },
+      { status: 404 },
+    ),
+  );
+}
+
+export async function handleStreamableMcpRequest(
+  request: Request,
+  options: { cors?: boolean } = {},
+) {
+  const server = createJudgmentKitMcpServer();
+  const transport = new WebStandardStreamableHTTPServerTransport({
+    sessionIdGenerator: undefined,
+    enableJsonResponse: true,
+  });
+
+  await server.connect(transport);
+  const response = await transport.handleRequest(request);
+  return options.cors ? withCors(response) : response;
+}
+
+export async function handleMcpHttpRequest(
+  request: Request,
+  options: {
+    metadataTransport?: McpHttpMetadataTransport;
+    cors?: boolean;
+    allowOptions?: boolean;
+  } = {},
+) {
+  if (request.method === "OPTIONS" && options.allowOptions) {
+    return createMcpOptionsResponse();
+  }
+
+  if (request.method === "GET" && !wantsSse(request)) {
+    return createMcpMetadataResponse(
+      options.metadataTransport ?? "streamable-http",
+      { cors: options.cors },
+    );
+  }
+
+  return handleStreamableMcpRequest(request, { cors: options.cors });
+}
diff --git a/lib/mcp-reference.ts b/lib/mcp-reference.ts
index 8fb7069..13817e8 100644
--- a/lib/mcp-reference.ts
+++ b/lib/mcp-reference.ts
@@ -37,6 +37,8 @@ function getPromptExampleCall(name: string) {
       return 'summarize_example_incident({ resource_id: "example.ui-generation.onboarding-clarity-drift" })';
     case "start_design_workflow":
       return 'start_design_workflow({ feature_intent: "Generate the JudgmentKit homepage" })';
+    case "start_no_design_system_workflow":
+      return 'start_no_design_system_workflow({ feature_intent: "Generate a JudgmentKit-native review workspace without an external design system" })';
     case "refine_design_first_pass":
       return 'refine_design_first_pass({ feature_intent: "Refine the JudgmentKit homepage", draft: "...", refinement_goal: "first-time usability" })';
     default:
diff --git a/lib/mcp-server.ts b/lib/mcp-server.ts
index 059dac2..ebc3ce7 100644
--- a/lib/mcp-server.ts
+++ b/lib/mcp-server.ts
@@ -171,6 +171,17 @@ export function createJudgmentKitMcpServer() {
     async (args) => createPromptResult("start_design_workflow", args),
   );
 
+  server.registerPrompt(
+    "start_no_design_system_workflow",
+    {
+      description: PROMPT_DEFINITIONS.start_no_design_system_workflow.description,
+      argsSchema: {
+        feature_intent: z.string().optional(),
+      },
+    },
+    async (args) => createPromptResult("start_no_design_system_workflow", args),
+  );
+
   server.registerPrompt(
     "refine_design_first_pass",
     {
@@ -189,7 +200,9 @@ export function createJudgmentKitMcpServer() {
   return server;
 }
 
-export function getMcpMetadata(transport: "stdio" | "streamable-http") {
+export function getMcpMetadata(
+  transport: "stdio" | "streamable-http" | "local-loopback-http",
+) {
   return {
     name: MCP_SERVER_NAME,
     version: MCP_SERVER_VERSION,
diff --git a/lib/mcp.ts b/lib/mcp.ts
index 3cc3b57..92eee3a 100644
--- a/lib/mcp.ts
+++ b/lib/mcp.ts
@@ -13,14 +13,51 @@ type PromptDefinition = {
   template: string;
 };
 
-const GENERIC_START_DESIGN_WORKFLOW_PROMPT =
-  'Use JudgmentKit for this design task. Call get_workflow_bundle({ workflow_id: "workflow.ai-ui-generation" }) first. Treat any referenced design system as the source of truth for components, tokens, radius, elevation, surfaces, and theme behavior. If a design system is present, ask whether it has an accessibility baseline or owner-approved review status before generating UI; if that status is unknown, pause and ask first. If the brief conflicts with the design system, surface review questions and escalation items instead of silently overriding it. Only when the design system and the brief are both silent, use restrained fallback defaults: approved primitives, a tight 6px radius scale, no decorative gradients, no gratuitous shadows, and both light and dark mode by default. If the interface includes code blocks, inline viewers, inspectors, or artifact panels, also call get_resource({ id: "guardrail.surface-theme-parity" }) and use get_example({ id: "example.ui-generation.surface-theme-parity-drift" }) as calibration so those surfaces stay inside the active light/dark theme model instead of defaulting to a dark terminal treatment. Keep local controls inside or directly adjacent to the surface they govern so ownership stays obvious. Keep runtime bounded and surface review questions before inventing new patterns.';
-
 const REFINE_DESIGN_FIRST_PASS_PROMPT_NAME = "refine_design_first_pass";
+const START_NO_DESIGN_SYSTEM_WORKFLOW_PROMPT_NAME =
+  "start_no_design_system_workflow";
+const AI_UI_GENERATION_CONSTRAINT_PACK_ID =
+  "constraint-pack.ai-ui-no-design-system";
+const AI_UI_GENERATION_GUIDELINE_PROFILE_IDS = [
+  "guideline-profile.ai-ui-generation-authority",
+  "guideline-profile.ai-ui-review-checks",
+] as const;
+const AI_UI_FRONTEND_VISUAL_GUARDRAIL_IDS = [
+  "guardrail.surface-mode-structure",
+  "guardrail.visual-planning-contract",
+  "guardrail.motion-media-purpose",
+  "guardrail.frontend-output-contract",
+] as const;
+const AI_UI_FRONTEND_VISUAL_EXAMPLE_IDS = [
+  "example.ui-generation.mode-structure-drift",
+  "example.ui-generation.visual-planning-gap",
+  "example.ui-generation.motion-media-drift",
+  "example.ui-generation.output-contract-gap",
+] as const;
+const AI_UI_PORTABLE_OUTPUT_CONTRACT_SECTIONS = [
+  "core_screens",
+  "token_spec",
+  "component_recipes",
+  "screen_composition",
+  "state_coverage",
+  "theme_contract",
+  "accessibility_contract",
+  "escalation_items",
+] as const;
+const AI_UI_DESIGN_SYSTEM_OUTPUT_CONTRACT_SECTIONS = [
+  "core_screens",
+  "design_system_bindings",
+  "component_recipes",
+  "screen_composition",
+  "state_coverage",
+  "theme_contract",
+  "accessibility_contract",
+  "escalation_items",
+] as const;
 const GENERATED_ARTIFACTS_MISSING_MESSAGE =
   "Generated public artifacts missing; run `npm run generate`.";
 const GENERATED_ARTIFACTS_MISSING_ACTION =
-  "Run `npm run generate`, then restart the stdio server and retry the tool call.";
+  "Run `npm run generate`, then restart the local MCP server and retry the tool call.";
 const REQUIRED_PUBLIC_ARTIFACTS = [
   { parts: ["resources", "index.json"], label: "public/resources/index.json" },
   { parts: ["graph.json"], label: "public/graph.json" },
@@ -155,6 +192,143 @@ function getResourceRelativePath(url: string) {
   return url.replace(`${ROOT_URL}/resources/`, "");
 }
 
+function formatListForPrompt(values: readonly string[]) {
+  return values.filter(Boolean).join(", ");
+}
+
+function renderToolCalls(toolName: string, ids: readonly string[]) {
+  return ids
+    .map((id) => `${toolName}({ id: "${id}" })`)
+    .join(", ");
+}
+
+function getConstraintPackIds(resourceOrLinks: JsonRecord) {
+  const links = isRecord(resourceOrLinks.links)
+    ? resourceOrLinks.links
+    : resourceOrLinks;
+  const constraintPackIds = stringArray(
+    isRecord(links) ? links.constraint_pack_ids : undefined,
+  );
+
+  return constraintPackIds.length > 0
+    ? constraintPackIds
+    : [AI_UI_GENERATION_CONSTRAINT_PACK_ID];
+}
+
+function renderConstraintPackAuthorityLine(constraintPackIds: string[]) {
+  return `If no external design system is present, pull ${formatListForPrompt(
+    constraintPackIds,
+  )} from the workflow bundle and treat it as the authority for primitives, tokens, reusable recipes, layout archetypes, required states, theme parity, accessibility API, and handoff depth.`;
+}
+
+function renderPortableOutputContractLine() {
+  return `For no-design-system output, return exactly these sections: ${AI_UI_PORTABLE_OUTPUT_CONTRACT_SECTIONS.join(
+    ", ",
+  )}.`;
+}
+
+function renderDesignSystemOutputContractLine() {
+  return `For design-system output, return exactly these sections: ${AI_UI_DESIGN_SYSTEM_OUTPUT_CONTRACT_SECTIONS.join(
+    ", ",
+  )}.`;
+}
+
+function renderSelfNormalizationLine() {
+  return "Before finalizing, self-normalize the draft against the active design system or JudgmentKit constraint pack and rewrite any wrong surface mode, missing visual planning, ornamental motion or media, missing output contract evidence, name-only component mapping, vague tokens, invented primitives, missing light-dark pairs, missing accessibility API, shallow handoff, or incomplete state coverage.";
+}
+
+function renderConstraintPackGapEscalationLine() {
+  return "If the active design system or the JudgmentKit constraint pack does not cover a required primitive, recipe, token, accessibility rule, or state, surface it under escalation instead of improvising it.";
+}
+
+function renderGuidelineProfileLine(guidelineProfileIds: string[]) {
+  return `Use ${formatListForPrompt(
+    guidelineProfileIds,
+  )} as JudgmentKit-owned derivative rules for semantics, focus, labels, motion, theming, touch, layout, output shape, hydration, performance, locale, and state validation before finalizing.`;
+}
+
+function renderFrontendVisualDirectionLine() {
+  return `When the task is visually led, such as a landing page, product surface redesign, premium/modern/polish request, game or immersive UI, visual art direction request, imagery request, motion request, rich media task, or first-pass UI generation where look and interaction quality are central, also pull ${renderToolCalls(
+    "get_resource",
+    AI_UI_FRONTEND_VISUAL_GUARDRAIL_IDS,
+  )}, and use ${renderToolCalls(
+    "get_example",
+    AI_UI_FRONTEND_VISUAL_EXAMPLE_IDS,
+  )} as calibration; require one selected mode, Visual Thesis, Content Plan, Interaction Thesis, motion/media purpose, downgrade rules, and the final output shape before first-pass UI generation or refinement.`;
+}
+
+function renderFrontendVisualBundleLine() {
+  return `When the task is visually led, activate ${formatListForPrompt(
+    AI_UI_FRONTEND_VISUAL_GUARDRAIL_IDS,
+  )}; use ${formatListForPrompt(
+    AI_UI_FRONTEND_VISUAL_EXAMPLE_IDS,
+  )} as calibration for mode structure, visual planning, motion/media purpose, and final output shape; require one selected mode, Visual Thesis, Content Plan, Interaction Thesis, motion/media purpose, downgrade rules, and the final output shape before first-pass UI generation or refinement.`;
+}
+
+function renderStartDesignWorkflowPromptText(
+  workflowBundleCall: string,
+  constraintPackIds: string[],
+  guidelineProfileIds: string[],
+  featureIntent?: string,
+) {
+  const taskPrefix = featureIntent
+    ? `Use JudgmentKit for this design task: ${featureIntent}.`
+    : "Use JudgmentKit for this design task.";
+
+  return [
+    taskPrefix,
+    `Call ${workflowBundleCall} first.`,
+    "Treat any referenced design system as the source of truth for components, tokens, radius, elevation, surfaces, and theme behavior.",
+    "If a design system is present, ask whether it has an accessibility baseline or owner-approved review status before generating UI; if that status is unknown, pause and ask first.",
+    "If the brief conflicts with the design system, surface review questions and escalation items instead of silently overriding it.",
+    renderGuidelineProfileLine(guidelineProfileIds),
+    renderFrontendVisualDirectionLine(),
+    renderConstraintPackAuthorityLine(constraintPackIds),
+    renderDesignSystemOutputContractLine(),
+    renderPortableOutputContractLine(),
+    renderSelfNormalizationLine(),
+    renderConstraintPackGapEscalationLine(),
+    'If the interface includes code blocks, inline viewers, inspectors, or artifact panels, also call get_resource({ id: "guardrail.surface-theme-parity" }) and use get_example({ id: "example.ui-generation.surface-theme-parity-drift" }) as calibration so those surfaces stay inside the active light-dark theme model instead of defaulting to a dark terminal treatment.',
+    'If the output leaves recipes, tokens, state coverage, accessibility API, or handoff depth implicit, also call get_resource({ id: "guardrail.spec-completeness" }) and use get_example({ id: "example.ui-generation.token-vagueness-drift" }), get_example({ id: "example.ui-generation.primitive-sprawl-drift" }), get_example({ id: "example.ui-generation.shallow-handoff-drift" }), get_example({ id: "example.ui-generation.state-coverage-drift" }), get_example({ id: "example.ui-generation.component-mapping-name-only-drift" }), get_example({ id: "example.ui-generation.non-reusable-recipe-drift" }), get_example({ id: "example.ui-generation.missing-accessibility-api-drift" }), and get_example({ id: "example.ui-generation.theme-binding-recipe-drift" }) as calibration.',
+    "Keep local controls inside or directly adjacent to the surface they govern so ownership stays obvious.",
+    "Keep runtime bounded and surface review questions before inventing new patterns.",
+  ].join(" ");
+}
+
+function renderStartNoDesignSystemWorkflowPrompt(featureIntent?: string) {
+  const workflowBundleCall = renderWorkflowBundleCall(
+    "workflow.ai-ui-generation",
+    featureIntent,
+  );
+  const taskPrefix = featureIntent
+    ? `Use JudgmentKit for this no-design-system design task: ${featureIntent}.`
+    : "Use JudgmentKit for this no-design-system design task.";
+
+  return [
+    taskPrefix,
+    `Call ${workflowBundleCall} first.`,
+    renderGuidelineProfileLine([
+      ...AI_UI_GENERATION_GUIDELINE_PROFILE_IDS,
+    ]),
+    renderFrontendVisualDirectionLine(),
+    renderConstraintPackAuthorityLine([AI_UI_GENERATION_CONSTRAINT_PACK_ID]),
+    "Assume the portable JudgmentKit constraint pack is the only approved authority unless the repo or brief clearly names an accessibility-reviewed external design system.",
+    "Map the surface only to the published primitive inventory, token contract, reusable recipes, layout archetypes, required state matrix, and handoff contract.",
+    renderPortableOutputContractLine(),
+    renderSelfNormalizationLine(),
+    renderConstraintPackGapEscalationLine(),
+    'Also pull get_resource({ id: "guardrail.spec-completeness" }) plus get_example({ id: "example.ui-generation.token-vagueness-drift" }), get_example({ id: "example.ui-generation.primitive-sprawl-drift" }), get_example({ id: "example.ui-generation.shallow-handoff-drift" }), get_example({ id: "example.ui-generation.state-coverage-drift" }), get_example({ id: "example.ui-generation.component-mapping-name-only-drift" }), get_example({ id: "example.ui-generation.non-reusable-recipe-drift" }), get_example({ id: "example.ui-generation.missing-accessibility-api-drift" }), get_example({ id: "example.ui-generation.hand-authored-preview-drift" }), and get_example({ id: "example.ui-generation.theme-binding-recipe-drift" }) before finalizing the draft.',
+    'If the interface includes code blocks, inline viewers, inspectors, or artifact panels, also call get_resource({ id: "guardrail.surface-theme-parity" }) and get_example({ id: "example.ui-generation.surface-theme-parity-drift" }).',
+    "Escalate any requirement that cannot be expressed with the published pack instead of inventing a new primitive or vague visual language.",
+  ].join(" ");
+}
+
+const GENERIC_START_DESIGN_WORKFLOW_PROMPT = renderStartDesignWorkflowPromptText(
+  renderWorkflowBundleCall("workflow.ai-ui-generation"),
+  [AI_UI_GENERATION_CONSTRAINT_PACK_ID],
+  [...AI_UI_GENERATION_GUIDELINE_PROFILE_IDS],
+);
+
 async function readResourceFromEntry(entry: ResourceIndexEntry) {
   return readJson<JsonRecord>("resources", getResourceRelativePath(entry.url));
 }
@@ -170,6 +344,8 @@ function extractSemanticRelations(resource: JsonRecord) {
     ...stringArray(appliesTo.workflows),
     ...stringArray(resource.example_ids),
     ...stringArray(links.example_ids),
+    ...stringArray(links.constraint_pack_ids),
+    ...stringArray(links.guideline_profile_ids),
     ...stringArray(
       typeof resource.workflow_id === "string" ? [resource.workflow_id] : [],
     ),
@@ -188,14 +364,12 @@ function renderWorkflowBundleCall(workflowId: string, featureIntent?: string) {
 }
 
 function renderStartDesignWorkflowPrompt(featureIntent?: string) {
-  if (!featureIntent) {
-    return GENERIC_START_DESIGN_WORKFLOW_PROMPT;
-  }
-
-  return `Use JudgmentKit for this design task: ${featureIntent}. Call ${renderWorkflowBundleCall(
-    "workflow.ai-ui-generation",
+  return renderStartDesignWorkflowPromptText(
+    renderWorkflowBundleCall("workflow.ai-ui-generation", featureIntent),
+    [AI_UI_GENERATION_CONSTRAINT_PACK_ID],
+    [...AI_UI_GENERATION_GUIDELINE_PROFILE_IDS],
     featureIntent,
-  )} first. Treat any referenced design system as the source of truth for components, tokens, radius, elevation, surfaces, and theme behavior. If a design system is present, ask whether it has an accessibility baseline or owner-approved review status before generating UI; if that status is unknown, pause and ask first. If the brief conflicts with the design system, surface review questions and escalation items instead of silently overriding it. Only when the design system and the brief are both silent, use restrained fallback defaults: approved primitives, a tight 6px radius scale, no decorative gradients, no gratuitous shadows, and both light and dark mode by default. If the interface includes code blocks, inline viewers, inspectors, or artifact panels, also call get_resource({ id: "guardrail.surface-theme-parity" }) and use get_example({ id: "example.ui-generation.surface-theme-parity-drift" }) as calibration so those surfaces stay inside the active light/dark theme model instead of defaulting to a dark terminal treatment. Keep local controls inside or directly adjacent to the surface they govern so ownership stays obvious. Keep runtime bounded and surface review questions before inventing new patterns.`;
+  );
 }
 
 function renderPromptTemplate(prompt: PromptDefinition, args: ToolArgs = {}) {
@@ -226,6 +400,10 @@ function renderPromptTemplate(prompt: PromptDefinition, args: ToolArgs = {}) {
     }
     case "start_design_workflow":
       return renderStartDesignWorkflowPrompt(optionalStringValue(args.feature_intent));
+    case START_NO_DESIGN_SYSTEM_WORKFLOW_PROMPT_NAME:
+      return renderStartNoDesignSystemWorkflowPrompt(
+        optionalStringValue(args.feature_intent),
+      );
     default:
       return prompt.template;
   }
@@ -272,20 +450,27 @@ function renderRefineDesignFirstPassPrompt(args: ToolArgs) {
   return [
     `Use JudgmentKit to refine a first design pass for this task: ${featureIntent}.`,
     `Call ${renderWorkflowBundleCall("workflow.ai-ui-generation", featureIntent)} first.`,
-    "Review the draft against the workflow starter instructions and linked guardrails.",
+    "Review the draft against the workflow starter instructions, linked guardrails, linked constraint packs, linked guideline profiles, and linked examples.",
     "Check whether the current repo, prompt, or brief references a design system. If it does, treat that system as the source of truth for components, tokens, radius, elevation, surfaces, and theme behavior.",
     "Before proposing UI changes against a referenced design system, ask whether it has an accessibility baseline or owner-approved review status. If that status is unknown, pause and ask first.",
     "If the brief conflicts with the design system, place the conflict under escalate instead of silently overriding it.",
-    "Only when the design system and the brief are both silent, use restrained fallback defaults: approved primitives, a tight 6px radius scale, no decorative gradients, no gratuitous shadows, and both light and dark mode by default.",
+    renderGuidelineProfileLine([...AI_UI_GENERATION_GUIDELINE_PROFILE_IDS]),
+    renderFrontendVisualDirectionLine(),
+    renderConstraintPackAuthorityLine([AI_UI_GENERATION_CONSTRAINT_PACK_ID]),
+    renderConstraintPackGapEscalationLine(),
     'If the draft contains interface copy or product messaging, also call get_resource({ id: "guardrail.brand-tone" }).',
+    'If the draft leaves recipes, tokens, state coverage, accessibility API, or handoff depth implicit, also call get_resource({ id: "guardrail.spec-completeness" }) and use get_example({ id: "example.ui-generation.token-vagueness-drift" }), get_example({ id: "example.ui-generation.primitive-sprawl-drift" }), get_example({ id: "example.ui-generation.shallow-handoff-drift" }), get_example({ id: "example.ui-generation.state-coverage-drift" }), get_example({ id: "example.ui-generation.component-mapping-name-only-drift" }), get_example({ id: "example.ui-generation.non-reusable-recipe-drift" }), get_example({ id: "example.ui-generation.missing-accessibility-api-drift" }), get_example({ id: "example.ui-generation.hand-authored-preview-drift" }), and get_example({ id: "example.ui-generation.theme-binding-recipe-drift" }).',
     'If the draft repeats or semantically overlaps headings, CTA labels, helper text, or nearby control copy, also call get_resource({ id: "guardrail.ui-copy-clarity" }) and get_example({ id: "example.ui-generation.repetitive-copy-drift" }).',
     'If local controls are spatially detached from the viewer, panel, or artifact they affect, also call get_resource({ id: "guardrail.control-proximity" }) and get_example({ id: "example.ui-generation.control-proximity-drift" }).',
     'If the draft includes code blocks, inline viewers, inspectors, or artifact panels, also call get_resource({ id: "guardrail.surface-theme-parity" }) and get_example({ id: "example.ui-generation.surface-theme-parity-drift" }).',
-    'Use one or more calibration examples from the workflow bundle. If the draft resembles onboarding or artifact-exposure drift, pull get_example({ id: "example.ui-generation.onboarding-clarity-drift" }). If the draft shows decorative zero-shot chrome or misses dark/light mode readiness, pull get_example({ id: "example.ui-generation.embellishment-drift" }). If the draft keeps code or artifact surfaces on a mismatched theme, pull get_example({ id: "example.ui-generation.surface-theme-parity-drift" }).',
+    'Use one or more calibration examples from the workflow bundle. If the draft resembles onboarding or artifact-exposure drift, pull get_example({ id: "example.ui-generation.onboarding-clarity-drift" }). If the draft shows decorative zero-shot chrome or misses dark-light mode readiness, pull get_example({ id: "example.ui-generation.embellishment-drift" }). If the draft keeps code or artifact surfaces on a mismatched theme, pull get_example({ id: "example.ui-generation.surface-theme-parity-drift" }). If the draft is visually led and has mode, planning, motion/media, or output-shape gaps, pull the frontend visual examples before rewriting. If the draft sounds restrained but leaves concrete implementation gaps, pull the no-design-system examples before rewriting.',
     `Draft: ${JSON.stringify(draft)}.`,
     `Refinement goal: ${JSON.stringify(refinementGoal)}.`,
     additions,
     "Return a structured refinement packet with exactly these sections: keep, fix_now, escalate, v2_brief, v2_generation_prompt, review_checklist.",
+    `The v2_generation_prompt must require exactly these no-design-system output sections when applicable: ${AI_UI_PORTABLE_OUTPUT_CONTRACT_SECTIONS.join(", ")}.`,
+    `The v2_generation_prompt must require exactly these design-system output sections when a system is active: ${AI_UI_DESIGN_SYSTEM_OUTPUT_CONTRACT_SECTIONS.join(", ")}.`,
+    "The review_checklist must confirm that the final draft was self-normalized against the active design system or the JudgmentKit constraint pack.",
     "Favor first-time usability and clarity over novelty. If the request needs new primitives, unresolved accessibility gaps, or unclear tradeoffs, place them under escalate instead of improvising them.",
   ]
     .filter(Boolean)
@@ -295,12 +480,23 @@ function renderRefineDesignFirstPassPrompt(args: ToolArgs) {
 function createStarterInstructions(
   workflow: JsonRecord,
   guardrails: JsonRecord[],
+  constraintPacks: JsonRecord[],
+  guidelineProfiles: JsonRecord[],
   examples: JsonRecord[],
   featureIntent?: string,
 ) {
   const workflowId = stringValue(workflow.id);
   const workflowTitle = stringValue(workflow.title);
   const guardrailIds = guardrails.map((guardrail) => stringValue(guardrail.id)).filter(Boolean);
+  const constraintPackIds = constraintPacks
+    .map((constraintPack) => stringValue(constraintPack.id))
+    .filter(Boolean);
+  const guidelineProfileIds = guidelineProfiles
+    .map((guidelineProfile) => stringValue(guidelineProfile.id))
+    .filter(Boolean);
+  const resolvedGuidelineProfileIds = guidelineProfileIds.length
+    ? guidelineProfileIds
+    : [...AI_UI_GENERATION_GUIDELINE_PROFILE_IDS];
   const exampleIds = examples.map((example) => stringValue(example.id)).filter(Boolean);
   const workflowBundleCall = renderWorkflowBundleCall(workflowId, featureIntent);
 
@@ -312,11 +508,24 @@ function createStarterInstructions(
         "Treat any referenced design system as the source of truth for components, tokens, radius, elevation, surfaces, and theme behavior.",
         "If a design system is present, ask whether it has an accessibility baseline or owner-approved review status before generating UI. If that status is unknown, pause and ask first.",
         "If the brief conflicts with the design system, surface review questions instead of silently overriding the system.",
-        "Only when the design system and the brief are both silent, use restrained fallback defaults: approved primitives, a tight 6px radius scale, no decorative gradients, no gratuitous shadows, and both light and dark mode by default.",
+        renderGuidelineProfileLine(
+          resolvedGuidelineProfileIds,
+        ),
+        renderFrontendVisualBundleLine(),
+        renderConstraintPackAuthorityLine(
+          constraintPackIds.length ? constraintPackIds : [AI_UI_GENERATION_CONSTRAINT_PACK_ID],
+        ),
+        renderDesignSystemOutputContractLine(),
+        renderPortableOutputContractLine(),
+        renderSelfNormalizationLine(),
+        renderConstraintPackGapEscalationLine(),
         'If the interface includes code blocks, inline viewers, inspectors, or artifact panels, pull guardrail.surface-theme-parity and example.ui-generation.surface-theme-parity-drift so those surfaces stay inside the active theme model instead of defaulting to a dark terminal treatment.',
+        "Use guardrail.spec-completeness whenever a draft claims discipline without naming the actual recipe, token, accessibility contract, state, or handoff contract.",
         "Keep headings, labels, helper text, and CTA copy distinct in role. Collapse near-duplicate UI copy before adding more language.",
         "Keep local controls inside or directly adjacent to the surface they govern. Do not park them in a separate header or metadata zone.",
         `Stay inside ${guardrailIds.join(", ")}.`,
+        `Treat ${constraintPackIds.join(", ")} as published authority when no external design system exists.`,
+        `Use ${resolvedGuidelineProfileIds.join(", ")} as vendored derivative rules for generation and self-review.`,
         `Use ${exampleIds.join(", ")} as calibration for what should be rewritten or escalated.`,
         "If the request needs new primitives, unclear accessibility tradeoffs, or unlimited exploration, stop and surface review questions instead of improvising.",
       ].join(" ");
@@ -327,11 +536,24 @@ function createStarterInstructions(
       "Treat any referenced design system as the source of truth for components, tokens, radius, elevation, surfaces, and theme behavior.",
       "If a design system is present, ask whether it has an accessibility baseline or owner-approved review status before generating UI. If that status is unknown, pause and ask first.",
       "If the brief conflicts with the design system, surface review questions instead of silently overriding the system.",
-      "Only when the design system and the brief are both silent, use restrained fallback defaults: approved primitives, a tight 6px radius scale, no decorative gradients, no gratuitous shadows, and both light and dark mode by default.",
+      renderGuidelineProfileLine(
+        resolvedGuidelineProfileIds,
+      ),
+      renderFrontendVisualBundleLine(),
+      renderConstraintPackAuthorityLine(
+        constraintPackIds.length ? constraintPackIds : [AI_UI_GENERATION_CONSTRAINT_PACK_ID],
+      ),
+      renderDesignSystemOutputContractLine(),
+      renderPortableOutputContractLine(),
+      renderSelfNormalizationLine(),
+      renderConstraintPackGapEscalationLine(),
       'If the interface includes code blocks, inline viewers, inspectors, or artifact panels, pull guardrail.surface-theme-parity and example.ui-generation.surface-theme-parity-drift so those surfaces stay inside the active theme model instead of defaulting to a dark terminal treatment.',
+      "Use guardrail.spec-completeness whenever a draft claims discipline without naming the actual recipe, token, accessibility contract, state, or handoff contract.",
       "Keep headings, labels, helper text, and CTA copy distinct in role. Collapse near-duplicate UI copy before adding more language.",
       "Keep local controls inside or directly adjacent to the surface they govern. Do not park them in a separate header or metadata zone.",
       `Stay inside ${guardrailIds.join(", ")}.`,
+      `Treat ${constraintPackIds.join(", ")} as published authority when no external design system exists.`,
+      `Use ${resolvedGuidelineProfileIds.join(", ")} as vendored derivative rules for generation and self-review.`,
       `Use ${exampleIds.join(", ")} as calibration for what should be rewritten or escalated.`,
       "If the request needs new primitives, unclear accessibility tradeoffs, or unlimited exploration, stop and surface review questions instead of improvising.",
     ].join(" ");
@@ -435,19 +657,37 @@ async function getWorkflowBundle(args: ToolArgs) {
   const workflow = await readResourceFromEntry(workflowEntry);
   const links = isRecord(workflow.links) ? workflow.links : {};
   const guardrailIds = stringArray(workflow.common_guardrails);
+  const constraintPackIds = getConstraintPackIds(workflow);
+  const guidelineProfileIds = stringArray(links.guideline_profile_ids);
   const exampleIds = stringArray(links.example_ids);
 
   const guardrailEntries = index.resources.filter(
     (resource) =>
       resource.type === "guardrail" && guardrailIds.includes(resource.id),
   );
+  const constraintPackEntries = index.resources.filter(
+    (resource) =>
+      resource.type === "constraint_pack" &&
+      constraintPackIds.includes(resource.id),
+  );
+  const guidelineProfileEntries = index.resources.filter(
+    (resource) =>
+      resource.type === "guideline_profile" &&
+      guidelineProfileIds.includes(resource.id),
+  );
   const exampleEntries = index.resources.filter(
     (resource) =>
       resource.type === "example" && exampleIds.includes(resource.id),
   );
 
-  const [guardrails, examples] = await Promise.all([
+  const [guardrails, constraintPacks, guidelineProfiles, examples] = await Promise.all([
     Promise.all(guardrailEntries.map((entry) => readResourceFromEntry(entry))),
+    Promise.all(
+      constraintPackEntries.map((entry) => readResourceFromEntry(entry)),
+    ),
+    Promise.all(
+      guidelineProfileEntries.map((entry) => readResourceFromEntry(entry)),
+    ),
     Promise.all(exampleEntries.map((entry) => readResourceFromEntry(entry))),
   ]);
 
@@ -458,10 +698,14 @@ async function getWorkflowBundle(args: ToolArgs) {
     bundle: {
       workflow,
       guardrails,
+      constraint_packs: constraintPacks,
+      guideline_profiles: guidelineProfiles,
       examples,
       starter_instructions: createStarterInstructions(
         workflow,
         guardrails,
+        constraintPacks,
+        guidelineProfiles,
         examples,
         featureIntent,
       ),
@@ -587,6 +831,13 @@ const PROMPTS: Record<string, PromptDefinition> = {
     arguments: ["feature_intent"],
     template: GENERIC_START_DESIGN_WORKFLOW_PROMPT,
   },
+  start_no_design_system_workflow: {
+    name: START_NO_DESIGN_SYSTEM_WORKFLOW_PROMPT_NAME,
+    description:
+      "Start the portable JudgmentKit AI UI generation workflow for surfaces that do not have an external design system.",
+    arguments: ["feature_intent"],
+    template: renderStartNoDesignSystemWorkflowPrompt(),
+  },
   refine_design_first_pass: {
     name: REFINE_DESIGN_FIRST_PASS_PROMPT_NAME,
     description:
@@ -701,7 +952,7 @@ export function listTools() {
     {
       name: "get_workflow_bundle",
       description:
-        "Fetch a workflow with its linked guardrails, examples, and starter instructions.",
+        "Fetch a workflow with its linked guardrails, constraint packs, guideline profiles, examples, and starter instructions.",
       inputSchema: {
         type: "object",
         required: ["workflow_id"],
@@ -735,7 +986,8 @@ export function listTools() {
     },
     {
       name: "resolve_related",
-      description: "Return related workflows, guardrails, examples, and schemas.",
+      description:
+        "Return related workflows, guardrails, constraint packs, guideline profiles, examples, and schemas.",
       inputSchema: {
         type: "object",
         required: ["id"],
diff --git a/lib/product-surface.ts b/lib/product-surface.ts
index ac2382a..ad6ea3f 100644
--- a/lib/product-surface.ts
+++ b/lib/product-surface.ts
@@ -64,6 +64,8 @@ const workflowArtifactSchema = z.object({
   common_guardrails: z.array(z.string()),
   links: z.object({
     example_ids: z.array(z.string()),
+    constraint_pack_ids: z.array(z.string()).default([]),
+    guideline_profile_ids: z.array(z.string()).default([]),
   }),
 });
 
@@ -86,6 +88,8 @@ const resourceIndexSchema = z.object({
 const INSPECT_CATEGORY_LABELS = {
   workflow: "Workflows",
   example: "Examples",
+  constraint_pack: "Constraint packs",
+  guideline_profile: "Guideline profiles",
   guardrail: "Guardrails",
 } as const;
 
@@ -105,7 +109,7 @@ function createHomepageInstallCommand() {
 }
 
 function createHomepageVerifyPrompt() {
-  return "Call MCP tools/list against the local judgmentkit server";
+  return "Start the local JudgmentKit loopback server, then call MCP tools/list against http://127.0.0.1:8765/mcp";
 }
 
 function createPublishedInspectId(url: string) {
@@ -135,7 +139,7 @@ function createResourcePromptText(resource: {
   switch (resource.type) {
     case "workflow":
       return `Use JudgmentKit workflow "${resource.title}" for this task.
-Retrieve the linked guardrails and examples, then guide the first pass.
+Retrieve the linked guardrails, constraint packs, guideline profiles, and examples, then guide the first pass.
 
 Task:
 [paste your request here]`;
@@ -145,6 +149,18 @@ Point out where it drifts, explain why, then rewrite it inside the guardrail.
 
 Draft:
 [paste your draft here]`;
+    case "constraint_pack":
+      return `Use JudgmentKit constraint pack "${resource.title}" as the authority for this task.
+Map the surface to the published primitives, tokens, states, and handoff contract before drafting output.
+
+Task:
+[paste your request here]`;
+    case "guideline_profile":
+      return `Use JudgmentKit guideline profile "${resource.title}" as normative rules for this task.
+Apply the published rules directly and do not exceed the profile's intended scope.
+
+Task:
+[paste your request here]`;
     case "example":
       return `Use JudgmentKit example "${resource.title}" as calibration for this task.
 Compare the raw output to the corrected output, then help me prompt the next pass.
@@ -162,15 +178,15 @@ Task:
 function createPublishedPromptText(link: ProductSurfaceReferenceLink) {
   switch (link.url) {
     case "/install":
-      return "Use this when you want the hosted bootstrap script that clones JudgmentKit, installs dependencies, and delegates to the repo-local installer.";
+      return "Use this when you want the hosted bootstrap script that clones JudgmentKit, installs dependencies, and configures the client for the local loopback MCP endpoint.";
     case "/mcp-inventory.json":
       return "Use this when you want the published command inventory and inspect anchors. It is the fastest way to verify which tools and prompts the deployed JudgmentKit surface exposes.";
     case "/llms.txt":
       return "Use this when you want the machine-readable discovery listing for the public site and its published artifacts.";
     case "/resources/index.json":
-      return "Use this when you want the canonical published index of workflows, guardrails, examples, and schemas before drilling into a specific artifact.";
+      return "Use this when you want the canonical published index of workflows, guardrails, constraint packs, guideline profiles, examples, and schemas before drilling into a specific artifact.";
     case "/mcp":
-      return "Use this when you need the hosted MCP metadata/debug surface, not the local install target. It is for inspecting the published route contract and parity with the inventory.";
+      return "Use this when you need the hosted MCP metadata/debug surface, not the local loopback install target. It is for inspecting the published route contract and parity with the inventory.";
     default:
       break;
   }
@@ -245,6 +261,48 @@ function createInspectPrimaryItems(
       raw_format: "json",
     }));
 
+  const constraintPacks = resources
+    .filter((resource) => resource.type === "constraint_pack")
+    .sort((left, right) => left.title.localeCompare(right.title))
+    .map<ProductSurfaceInspectItem>((resource) => ({
+      id: resource.id,
+      category: INSPECT_CATEGORY_LABELS.constraint_pack,
+      type: resource.type,
+      version: resource.version,
+      title: resource.title,
+      summary: resource.summary,
+      subtitle: resource.id,
+      url: toRelativeUrl(resource.url),
+      schema_url: toRelativeUrl(resource.schema_url),
+      last_reviewed: resource.last_reviewed,
+      tags: resource.tags,
+      available_view_modes: ["prompt", "json", "schema"],
+      default_view_mode: "prompt",
+      prompt_text: createResourcePromptText(resource),
+      raw_format: "json",
+    }));
+
+  const guidelineProfiles = resources
+    .filter((resource) => resource.type === "guideline_profile")
+    .sort((left, right) => left.title.localeCompare(right.title))
+    .map<ProductSurfaceInspectItem>((resource) => ({
+      id: resource.id,
+      category: INSPECT_CATEGORY_LABELS.guideline_profile,
+      type: resource.type,
+      version: resource.version,
+      title: resource.title,
+      summary: resource.summary,
+      subtitle: resource.id,
+      url: toRelativeUrl(resource.url),
+      schema_url: toRelativeUrl(resource.schema_url),
+      last_reviewed: resource.last_reviewed,
+      tags: resource.tags,
+      available_view_modes: ["prompt", "json", "schema"],
+      default_view_mode: "prompt",
+      prompt_text: createResourcePromptText(resource),
+      raw_format: "json",
+    }));
+
   const guardrails = resources
     .filter((resource) => resource.type === "guardrail")
     .sort((left, right) => left.title.localeCompare(right.title))
@@ -266,7 +324,13 @@ function createInspectPrimaryItems(
       raw_format: "json",
     }));
 
-  return [...examples, ...workflows, ...guardrails];
+  return [
+    ...examples,
+    ...workflows,
+    ...constraintPacks,
+    ...guidelineProfiles,
+    ...guardrails,
+  ];
 }
 
 function createInspectReferenceItems(referenceLinks: ProductSurfaceReferenceLink[]) {
@@ -295,6 +359,8 @@ export function loadProductSurface(): ProductSurfaceContent {
 
   const loadedContextIds = [
     workflowArtifact.id,
+    ...workflowArtifact.links.constraint_pack_ids,
+    ...workflowArtifact.links.guideline_profile_ids,
     ...workflowArtifact.common_guardrails,
     ...workflowArtifact.links.example_ids,
   ];
diff --git a/lib/site.ts b/lib/site.ts
index beecc06..4de91ca 100644
--- a/lib/site.ts
+++ b/lib/site.ts
@@ -15,6 +15,14 @@ import {
   RESOURCES_DIR,
   ROOT_URL,
   SCHEMAS_DIR,
+  HOSTED_MCP_REFERENCE_URL,
+  LOCAL_JUDGMENTKIT_MCP_LOCAL_COMMAND,
+  LOCAL_MCP_DEFAULT_HOST,
+  LOCAL_MCP_DEFAULT_PORT,
+  LOCAL_MCP_DEFAULT_URL,
+  LOCAL_MCP_ENDPOINT_PATH,
+  LOCAL_MCP_HOST_ENV,
+  LOCAL_MCP_PORT_ENV,
 } from "@/lib/constants";
 import { loadChangelogEntries, loadDocPages, loadResources, loadSchemas } from "@/lib/content";
 import { createMirrorContent } from "@/lib/markdown";
@@ -65,6 +73,7 @@ function collectResourceTags(resource: Record<string, unknown>) {
     ...(Array.isArray(resource.guardrail_ids) ? resource.guardrail_ids : []),
     ...(Array.isArray(resource.common_guardrails) ? resource.common_guardrails : []),
     ...(Array.isArray(resource.workflows) ? resource.workflows : []),
+    ...(typeof resource.workflow_id === "string" ? [resource.workflow_id] : []),
   ]
     .map((value) => String(value))
     .filter(Boolean);
@@ -180,7 +189,7 @@ function createLlmsText(pages: DocPage[], resourceIndex: ResourceIndex) {
 
 JudgmentKit makes AI decisions visible, measurable, and usable at runtime.
 
-JudgmentKit is an MCP-first product. Humans use the run surface and inspect surface to connect and verify the system. Agents install the local JudgmentKit server over stdio, then use the published Markdown mirrors, JSON resources, schemas, examples, and hosted reference surfaces.
+JudgmentKit is an MCP-first product. Humans use the run surface and inspect surface to connect and verify the system. Agents install the local JudgmentKit server over loopback HTTP, then use the published Markdown mirrors, JSON resources, schemas, examples, and hosted reference surfaces.
 
 ## Overview
 - ${ROOT_URL}/
@@ -205,7 +214,7 @@ ${schemaUrls.map((url) => `- ${url}`).join("\n")}
 ${examplePages.map((url) => `- ${url}`).join("\n")}
 
 ## MCP
-Install uses a local stdio checkout. The hosted endpoint below is for reference, debug, and parity with the published inventory.
+Install uses a local loopback HTTP checkout at ${LOCAL_MCP_DEFAULT_URL}. The hosted endpoint below is for reference, debug, and parity with the published inventory.
 
 - ${ROOT_URL}/mcp
 - ${ROOT_URL}/mcp-inventory.json
@@ -221,10 +230,21 @@ function createMcpInventory(resourceIndex: ResourceIndex) {
 
   return {
     version: "1.0.0",
-    endpoint: `${ROOT_URL}/mcp`,
-    install_transport: "stdio",
+    endpoint: LOCAL_MCP_DEFAULT_URL,
+    hosted_reference_endpoint: HOSTED_MCP_REFERENCE_URL,
+    install_transport: "http",
+    local_loopback_runtime: {
+      start_command: LOCAL_JUDGMENTKIT_MCP_LOCAL_COMMAND,
+      host: LOCAL_MCP_DEFAULT_HOST,
+      port: LOCAL_MCP_DEFAULT_PORT,
+      endpoint: LOCAL_MCP_ENDPOINT_PATH,
+      env_overrides: {
+        host: LOCAL_MCP_HOST_ENV,
+        port: LOCAL_MCP_PORT_ENV,
+      },
+    },
     warning:
-      "Install JudgmentKit from a local checkout over stdio. The hosted /mcp endpoint is for reference/debug only.",
+      "Install JudgmentKit from a local checkout over loopback HTTP. The hosted /mcp endpoint is for reference/debug only.",
     command_reference_url: createCommandReferenceUrl(ROOT_URL),
     tools: toolReference.map((entry) => entry.name),
     prompts: promptReference.map((entry) => entry.name),
diff --git a/lib/types.ts b/lib/types.ts
index 1c4a258..d162e8a 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -139,11 +139,33 @@ export type InstallContractRepository = {
   install_command: string;
 };
 
-export type InstallContractConnection = {
+export type InstallContractLoopbackRuntime = {
+  start_command: string;
+  host: string;
+  port: number;
+  endpoint: string;
+  env_overrides: {
+    host: string;
+    port: string;
+  };
+};
+
+export type InstallContractHttpConnection = {
+  transport: "http";
+  url: string;
+  loopback_runtime: InstallContractLoopbackRuntime;
+};
+
+export type InstallContractStdioConnection = {
+  transport: "stdio";
   command: string;
   args: string[];
 };
 
+export type InstallContractConnection =
+  | InstallContractHttpConnection
+  | InstallContractStdioConnection;
+
 export type InstallContractCommandReference = {
   name: string;
   description: string;
@@ -155,6 +177,8 @@ export type InstallContractCommandReference = {
 export type InstallContractVerification = {
   method: "tools/list";
   server_name: string;
+  endpoint: string;
+  start_command: string;
   instructions: string;
   expected_tools: string[];
   expected_prompts: string[];
diff --git a/package-lock.json b/package-lock.json
index 4162cb4..615fef9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "autoprefixer": "^10.4.20",
         "eslint": "^9.18.0",
         "eslint-config-next": "15.5.15",
+        "playwright-chromium": "^1.59.1",
         "postcss": "^8.4.49",
         "tailwindcss": "^3.4.17",
         "tsx": "^4.19.2",
@@ -6845,6 +6846,36 @@
         "node": ">=16.20.0"
       }
     },
+    "node_modules/playwright-chromium": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright-chromium/-/playwright-chromium-1.59.1.tgz",
+      "integrity": "sha512-aTsPenkxsr9np4vIHuMEND6comqepVvzbL0MwkozFNliwGZjTqrBUQ7TF6Ay1ZIU/e7rcUpGsCTUG+nqwxG2Xw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
+      "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
diff --git a/package.json b/package.json
index 64bc198..a3c22d1 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,12 @@
     "start": "next start",
     "lint": "eslint .",
     "generate": "tsx scripts/generate-site.ts",
+    "ai-ui:e2e": "node --import tsx ./scripts/run-ai-ui-e2e.ts",
+    "ai-ui:e2e:visuals": "node --import tsx ./scripts/capture-ai-ui-e2e-visuals.ts",
+    "ai-ui:e2e:judge-packet": "node --import tsx ./scripts/build-ai-ui-e2e-judge-packet.ts",
+    "ai-ui:e2e:summary": "node --import tsx ./scripts/summarize-ai-ui-e2e.ts",
     "mcp:install": "node --import tsx ./scripts/install-mcp.ts",
+    "mcp:local": "node --import tsx ./scripts/judgmentkit-mcp-local.ts",
     "mcp:stdio": "node --import tsx ./scripts/judgmentkit-mcp-stdio.ts",
     "test": "vitest run",
     "check": "npm run generate && npm run test && npm run lint"
@@ -32,6 +37,7 @@
     "autoprefixer": "^10.4.20",
     "eslint": "^9.18.0",
     "eslint-config-next": "15.5.15",
+    "playwright-chromium": "^1.59.1",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.17",
     "tsx": "^4.19.2",
diff --git a/scripts/build-ai-ui-e2e-judge-packet.ts b/scripts/build-ai-ui-e2e-judge-packet.ts
new file mode 100644
index 0000000..e791710
--- /dev/null
+++ b/scripts/build-ai-ui-e2e-judge-packet.ts
@@ -0,0 +1,171 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+
+import {
+  createExternalJudgePacketMarkdown,
+  hasPlaceholderEvidence,
+  hasPlaceholderImplementationContract,
+  hasPlaceholderPreviewSource,
+  type AiUiE2eImplementationContract,
+  type AiUiE2eComparisonInput,
+  type AiUiE2eComparisonResult,
+  type AiUiE2ePathJudgeInput,
+  type AiUiE2ePathScore,
+} from "@/lib/ai-ui-e2e-evaluator";
+import { getAiUiE2ePaths, getDefaultAiUiE2eArtifactsDir } from "@/lib/ai-ui-e2e";
+
+async function readJson<T>(filePath: string) {
+  const raw = await fs.readFile(filePath, "utf8");
+  return JSON.parse(raw) as T;
+}
+
+async function readText(filePath: string) {
+  return fs.readFile(filePath, "utf8");
+}
+
+async function writeText(filePath: string, value: string) {
+  await fs.writeFile(filePath, `${value.endsWith("\n") ? value : `${value}\n`}`);
+}
+
+function getOutputDirectory() {
+  const argPath = process.argv[2];
+  if (argPath) {
+    return path.resolve(process.cwd(), argPath);
+  }
+
+  return getDefaultAiUiE2eArtifactsDir();
+}
+
+async function ensureExists(filePath: string) {
+  try {
+    await fs.access(filePath);
+  } catch {
+    throw new Error(`Missing required judge packet artifact: ${filePath}`);
+  }
+}
+
+function assertFilledEvidence(filePath: string, content: string) {
+  if (hasPlaceholderEvidence(content)) {
+    throw new Error(
+      `Evidence file still contains placeholder text: ${filePath}. Save the real transcript/response before building the external judge packet.`,
+    );
+  }
+}
+
+function assertFilledImplementationContract(filePath: string, content: string) {
+  if (hasPlaceholderImplementationContract(content)) {
+    throw new Error(
+      `Implementation contract still contains placeholder text: ${filePath}. Save real component evidence before building the external judge packet.`,
+    );
+  }
+}
+
+function assertFilledPreviewSource(filePath: string, content: string) {
+  if (hasPlaceholderPreviewSource(content)) {
+    throw new Error(
+      `Preview source still contains placeholder text: ${filePath}. Save a real preview-source.tsx before building the external judge packet.`,
+    );
+  }
+}
+
+async function main() {
+  const outputDirectory = getOutputDirectory();
+  const judgePromptPath = path.join(outputDirectory, "judge-prompt.md");
+  const comparisonInputPath = path.join(outputDirectory, "judge-comparison-input.json");
+  const comparisonTemplatePath = path.join(outputDirectory, "comparison.json");
+  const mcpCallOrderPath = path.join(outputDirectory, "mcp-call-order.json");
+  const toolsListPath = path.join(outputDirectory, "tools-list.json");
+  const promptsListPath = path.join(outputDirectory, "prompts-list.json");
+  const startDesignWorkflowPath = path.join(outputDirectory, "start-design-workflow.txt");
+  const startNoDesignWorkflowPath = path.join(
+    outputDirectory,
+    "start-no-design-system-workflow.txt",
+  );
+  const workflowBundlePath = path.join(outputDirectory, "workflow-bundle.json");
+
+  await ensureExists(judgePromptPath);
+  await ensureExists(comparisonInputPath);
+  await ensureExists(comparisonTemplatePath);
+  await ensureExists(mcpCallOrderPath);
+  await ensureExists(toolsListPath);
+  await ensureExists(promptsListPath);
+  await ensureExists(startDesignWorkflowPath);
+  await ensureExists(startNoDesignWorkflowPath);
+  await ensureExists(workflowBundlePath);
+
+  const judgePrompt = await readText(judgePromptPath);
+  const comparisonInput =
+    await readJson<AiUiE2eComparisonInput>(comparisonInputPath);
+  const comparisonTemplate =
+    await readJson<AiUiE2eComparisonResult>(comparisonTemplatePath);
+
+  const pathPackets = [];
+  for (const testPath of getAiUiE2ePaths()) {
+    const basePath = path.join(outputDirectory, testPath.id);
+    const judgeInputPath = path.join(basePath, "judge-input.json");
+    const transcriptPath = path.join(basePath, "transcript.md");
+    const responsePath = path.join(basePath, "response.md");
+    const implementationContractPath = path.join(
+      basePath,
+      "implementation-contract.json",
+    );
+    const previewSourcePath = path.join(basePath, "preview-source.tsx");
+    const pathScoreTemplatePath = path.join(basePath, "path-score.json");
+
+    await ensureExists(judgeInputPath);
+    await ensureExists(transcriptPath);
+    await ensureExists(responsePath);
+    await ensureExists(implementationContractPath);
+    await ensureExists(previewSourcePath);
+    await ensureExists(pathScoreTemplatePath);
+
+    const transcript = await readText(transcriptPath);
+    const response = await readText(responsePath);
+    const implementationContractText = await readText(implementationContractPath);
+    const previewSource = await readText(previewSourcePath);
+    assertFilledEvidence(transcriptPath, transcript);
+    assertFilledEvidence(responsePath, response);
+    assertFilledImplementationContract(
+      implementationContractPath,
+      implementationContractText,
+    );
+    assertFilledPreviewSource(previewSourcePath, previewSource);
+
+    pathPackets.push({
+      path: testPath,
+      judge_input: await readJson<AiUiE2ePathJudgeInput>(judgeInputPath),
+      transcript,
+      response,
+      implementation_contract:
+        JSON.parse(implementationContractText) as AiUiE2eImplementationContract,
+      preview_source: previewSource,
+      path_score_template: await readJson<AiUiE2ePathScore>(pathScoreTemplatePath),
+    });
+  }
+
+  const packet = createExternalJudgePacketMarkdown({
+    output_directory: outputDirectory,
+    judge_prompt: judgePrompt,
+    comparison_input: comparisonInput,
+    comparison_template: comparisonTemplate,
+    shared_artifacts: {
+      mcp_call_order: await readJson(mcpCallOrderPath),
+      tools_list: await readJson(toolsListPath),
+      prompts_list: await readJson(promptsListPath),
+      start_design_workflow: await readText(startDesignWorkflowPath),
+      start_no_design_system_workflow: await readText(startNoDesignWorkflowPath),
+      workflow_bundle: await readJson(workflowBundlePath),
+    },
+    path_packets: pathPackets,
+  });
+
+  const outputPath = path.join(outputDirectory, "external-judge-packet.md");
+  await writeText(outputPath, packet);
+  process.stdout.write(`JudgmentKit AI UI external judge packet written to ${outputPath}\n`);
+}
+
+main().catch((error) => {
+  const message = error instanceof Error ? error.stack ?? error.message : String(error);
+  process.stderr.write(`JudgmentKit AI UI judge packet failed: ${message}\n`);
+  process.exitCode = 1;
+});
diff --git a/scripts/capture-ai-ui-e2e-visuals.ts b/scripts/capture-ai-ui-e2e-visuals.ts
new file mode 100644
index 0000000..8990489
--- /dev/null
+++ b/scripts/capture-ai-ui-e2e-visuals.ts
@@ -0,0 +1,366 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+
+import { chromium, type Browser } from "playwright-chromium";
+
+import { getAiUiE2ePaths, getDefaultAiUiE2eArtifactsDir } from "@/lib/ai-ui-e2e";
+import {
+  AI_UI_E2E_VISUAL_COLOR_SCHEMES,
+  AI_UI_E2E_VISUAL_VIEWPORT,
+  collectImplementationContractAlignmentErrors,
+  createGeneratedPreviewMarker,
+  createVisualManifestTemplate,
+  hasPlaceholderEvidence,
+  hasPlaceholderImplementationContract,
+  hasPlaceholderPreview,
+  hasPlaceholderPreviewSource,
+  isGeneratedPreview,
+  type AiUiE2eImplementationContract,
+} from "@/lib/ai-ui-e2e-evaluator";
+
+async function ensureDirectory(directory: string) {
+  await fs.mkdir(directory, { recursive: true });
+}
+
+async function ensureExists(filePath: string) {
+  try {
+    await fs.access(filePath);
+  } catch {
+    throw new Error(`Missing required visual artifact: ${filePath}`);
+  }
+}
+
+async function readText(filePath: string) {
+  return fs.readFile(filePath, "utf8");
+}
+
+async function readJson<T>(filePath: string) {
+  return JSON.parse(await readText(filePath)) as T;
+}
+
+async function writeJson(filePath: string, value: unknown) {
+  await ensureDirectory(path.dirname(filePath));
+  await fs.writeFile(filePath, `${JSON.stringify(value, null, 2)}\n`);
+}
+
+async function writeText(filePath: string, value: string) {
+  await ensureDirectory(path.dirname(filePath));
+  await fs.writeFile(filePath, `${value.endsWith("\n") ? value : `${value}\n`}`);
+}
+
+function getOutputDirectory() {
+  const argPath = process.argv[2];
+  if (argPath) {
+    return path.resolve(process.cwd(), argPath);
+  }
+
+  return getDefaultAiUiE2eArtifactsDir();
+}
+
+function assertRenderablePreview(filePath: string, content: string) {
+  if (hasPlaceholderPreview(content)) {
+    throw new Error(
+      `Preview file still contains placeholder text: ${filePath}. Save a real implementation-contract.json and preview-source.tsx before capturing screenshots.`,
+    );
+  }
+
+  if (!/<html[\s>]/i.test(content)) {
+    throw new Error(`Preview file is not a complete HTML document: ${filePath}`);
+  }
+}
+
+function assertImplementationContract(
+  filePath: string,
+  content: string,
+  contract: AiUiE2eImplementationContract,
+  pathId: string,
+) {
+  if (hasPlaceholderImplementationContract(content)) {
+    throw new Error(
+      `Implementation contract still contains placeholder text: ${filePath}. Save real component evidence before capturing screenshots.`,
+    );
+  }
+
+  if (contract.kind !== "ai_ui_e2e_implementation_contract") {
+    throw new Error(`Implementation contract has invalid kind: ${filePath}`);
+  }
+
+  if (contract.path_id !== pathId) {
+    throw new Error(
+      `Implementation contract path_id ${contract.path_id} does not match ${pathId}.`,
+    );
+  }
+
+  if (contract.component_recipes.length === 0) {
+    throw new Error(`Implementation contract must include component_recipes: ${filePath}`);
+  }
+}
+
+function assertPreviewSource(filePath: string, content: string) {
+  if (hasPlaceholderPreviewSource(content)) {
+    throw new Error(
+      `Preview source still contains placeholder text: ${filePath}. Save a real preview-source.tsx before capturing screenshots.`,
+    );
+  }
+}
+
+async function renderPreviewHtml(
+  previewSourcePath: string,
+  contract: AiUiE2eImplementationContract,
+) {
+  const moduleUrl = `${pathToFileURL(previewSourcePath).toString()}?t=${Date.now()}`;
+  const previewModule = (await import(moduleUrl)) as {
+    default?: (args: { contract: AiUiE2eImplementationContract }) => string | Promise<string>;
+    renderPreview?: (args: {
+      contract: AiUiE2eImplementationContract;
+    }) => string | Promise<string>;
+  };
+  const renderPreview = previewModule.default ?? previewModule.renderPreview;
+
+  if (typeof renderPreview !== "function") {
+    throw new Error(
+      `preview-source.tsx must export a default function or renderPreview(): ${previewSourcePath}`,
+    );
+  }
+
+  const html = await Promise.resolve(renderPreview({ contract }));
+  if (typeof html !== "string") {
+    throw new Error(`preview-source.tsx must return an HTML string: ${previewSourcePath}`);
+  }
+
+  return html.startsWith("<!doctype html>") ? html : `<!doctype html>\n${html}`;
+}
+
+async function capturePathVisuals(
+  browser: Browser,
+  outputDirectory: string,
+  pathId: string,
+) {
+  const testPath = getAiUiE2ePaths().find((entry) => entry.id === pathId);
+  if (!testPath) {
+    throw new Error(`Unknown AI UI E2E path: ${pathId}`);
+  }
+
+  const manifest = createVisualManifestTemplate(outputDirectory, testPath);
+  const screenshotDirectory = path.dirname(manifest.screenshots.desktop_light_ref);
+  await ensureDirectory(screenshotDirectory);
+
+  const implementationContractPath =
+    manifest.component_evidence.implementation_contract_ref;
+  const previewSourcePath = manifest.component_evidence.preview_source_ref;
+  const responsePath = path.join(outputDirectory, pathId, "response.md");
+  await ensureExists(implementationContractPath);
+  await ensureExists(previewSourcePath);
+  await ensureExists(responsePath);
+
+  const implementationContractText = await readText(implementationContractPath);
+  const implementationContract = JSON.parse(
+    implementationContractText,
+  ) as AiUiE2eImplementationContract;
+  assertImplementationContract(
+    implementationContractPath,
+    implementationContractText,
+    implementationContract,
+    pathId,
+  );
+
+  const previewSourceContent = await readText(previewSourcePath);
+  assertPreviewSource(previewSourcePath, previewSourceContent);
+
+  const responseContent = await readText(responsePath);
+  if (hasPlaceholderEvidence(responseContent)) {
+    throw new Error(
+      `Response file still contains placeholder text: ${responsePath}. Save the real response before capturing screenshots.`,
+    );
+  }
+
+  const alignmentErrors = collectImplementationContractAlignmentErrors(
+    implementationContract,
+    responseContent,
+  );
+  if (alignmentErrors.length > 0) {
+    throw new Error(
+      `implementation-contract.json and response.md disagree for ${pathId}: ${alignmentErrors.join(
+        " | ",
+      )}`,
+    );
+  }
+
+  let existingPreview = "";
+  try {
+    existingPreview = await readText(manifest.preview_ref);
+  } catch {
+    existingPreview = "";
+  }
+
+  if (
+    existingPreview &&
+    !hasPlaceholderPreview(existingPreview) &&
+    !isGeneratedPreview(existingPreview)
+  ) {
+    throw new Error(
+      `preview.html must be generated from preview-source.tsx for ${pathId}; hand-authored preview.html is not allowed.`,
+    );
+  }
+
+  const generatedPreview = await renderPreviewHtml(
+    previewSourcePath,
+    implementationContract,
+  );
+  const generatedMarker = createGeneratedPreviewMarker(
+    testPath.id,
+    implementationContractText,
+    previewSourceContent,
+  );
+  await writeText(
+    manifest.preview_ref,
+    `${generatedPreview}\n<!-- ${generatedMarker} -->\n`,
+  );
+
+  const previewContent = await readText(manifest.preview_ref);
+  assertRenderablePreview(manifest.preview_ref, previewContent);
+
+  const remoteRequests = new Set<string>();
+  const pageErrors: string[] = [];
+  const consoleErrors: string[] = [];
+  for (const colorScheme of AI_UI_E2E_VISUAL_COLOR_SCHEMES) {
+    const context = await browser.newContext({
+      colorScheme,
+      viewport: {
+        width: AI_UI_E2E_VISUAL_VIEWPORT.width,
+        height: AI_UI_E2E_VISUAL_VIEWPORT.height,
+      },
+      deviceScaleFactor: AI_UI_E2E_VISUAL_VIEWPORT.deviceScaleFactor,
+    });
+
+    try {
+      await context.route("http://**/*", async (route) => {
+        remoteRequests.add(route.request().url());
+        await route.abort("blockedbyclient");
+      });
+      await context.route("https://**/*", async (route) => {
+        remoteRequests.add(route.request().url());
+        await route.abort("blockedbyclient");
+      });
+
+      const page = await context.newPage();
+      page.on("pageerror", (error) => {
+        pageErrors.push(error.message);
+      });
+      page.on("console", (message) => {
+        if (message.type() === "error") {
+          consoleErrors.push(message.text());
+        }
+      });
+
+      await page.goto(pathToFileURL(manifest.preview_ref).toString(), {
+        waitUntil: "load",
+      });
+      await page.emulateMedia({
+        colorScheme,
+        reducedMotion: "reduce",
+      });
+      await page.addStyleTag({
+        content: [
+          "*, *::before, *::after {",
+          "  animation: none !important;",
+          "  transition: none !important;",
+          "  scroll-behavior: auto !important;",
+          "  caret-color: transparent !important;",
+          "}",
+        ].join("\n"),
+      });
+      await page.evaluate(async () => {
+        await document.fonts?.ready;
+        await new Promise((resolve) =>
+          requestAnimationFrame(() => requestAnimationFrame(resolve)),
+        );
+      });
+
+      const isRenderable = await page.evaluate(() => {
+        const body = document.body;
+        if (!body) {
+          return false;
+        }
+
+        const hasVisibleStructure =
+          body.children.length > 0 || (body.textContent?.trim().length ?? 0) > 0;
+        const bounds = body.getBoundingClientRect();
+        return hasVisibleStructure && bounds.width > 0 && bounds.height > 0;
+      });
+
+      if (!isRenderable) {
+        throw new Error(
+          `Preview did not render usable content for ${pathId} in ${colorScheme} mode.`,
+        );
+      }
+
+      const targetPath =
+        colorScheme === "light"
+          ? manifest.screenshots.desktop_light_ref
+          : manifest.screenshots.desktop_dark_ref;
+      await page.screenshot({
+        path: targetPath,
+        type: "png",
+        animations: "disabled",
+      });
+    } finally {
+      await context.close();
+    }
+  }
+
+  if (remoteRequests.size > 0) {
+    throw new Error(
+      `preview.html attempted remote network requests for ${pathId}: ${[
+        ...remoteRequests,
+      ].join(", ")}`,
+    );
+  }
+
+  if (pageErrors.length > 0) {
+    throw new Error(
+      `preview.html raised page errors for ${pathId}: ${pageErrors.join(" | ")}`,
+    );
+  }
+
+  if (consoleErrors.length > 0) {
+    throw new Error(
+      `preview.html logged console errors for ${pathId}: ${consoleErrors.join(" | ")}`,
+    );
+  }
+
+  await ensureExists(manifest.preview_ref);
+  await ensureExists(manifest.screenshots.desktop_light_ref);
+  await ensureExists(manifest.screenshots.desktop_dark_ref);
+
+  manifest.completed = true;
+  manifest.captured_at = new Date().toISOString();
+
+  await writeJson(path.join(outputDirectory, pathId, "visual-manifest.json"), manifest);
+}
+
+async function main() {
+  const outputDirectory = getOutputDirectory();
+  const browser = await chromium.launch({
+    headless: true,
+  });
+
+  try {
+    for (const testPath of getAiUiE2ePaths()) {
+      await capturePathVisuals(browser, outputDirectory, testPath.id);
+    }
+  } finally {
+    await browser.close();
+  }
+
+  process.stdout.write(
+    `JudgmentKit AI UI E2E visuals written to ${outputDirectory}\n`,
+  );
+}
+
+main().catch((error) => {
+  const message = error instanceof Error ? error.stack ?? error.message : String(error);
+  process.stderr.write(`JudgmentKit AI UI visual capture failed: ${message}\n`);
+  process.exitCode = 1;
+});
diff --git a/scripts/install-mcp.ts b/scripts/install-mcp.ts
index c45c451..2ef0fb7 100644
--- a/scripts/install-mcp.ts
+++ b/scripts/install-mcp.ts
@@ -15,7 +15,7 @@ main().catch((error) => {
   if (error instanceof InstallerError) {
     process.stderr.write(`JudgmentKit installer failed during ${error.phase}: ${error.message}\n`);
     if (error.manualSnippet) {
-      process.stderr.write(`Manual fallback snippet:\n${error.manualSnippet}\n`);
+      process.stderr.write(`Manual config snippet:\n${error.manualSnippet}\n`);
     }
     process.exit(1);
   }
diff --git a/scripts/judgmentkit-mcp-local.ts b/scripts/judgmentkit-mcp-local.ts
new file mode 100644
index 0000000..94e0beb
--- /dev/null
+++ b/scripts/judgmentkit-mcp-local.ts
@@ -0,0 +1,132 @@
+import { createServer } from "node:http";
+import type { IncomingMessage, ServerResponse } from "node:http";
+
+import {
+  createMcpMetadataResponse,
+  createMcpNotFoundResponse,
+  handleMcpHttpRequest,
+} from "@/lib/mcp-http";
+
+const DEFAULT_HOST = "127.0.0.1";
+const DEFAULT_PORT = 8765;
+const MCP_ENDPOINT = "/mcp";
+
+function resolveHost() {
+  return process.env.JUDGMENTKIT_MCP_HOST?.trim() || DEFAULT_HOST;
+}
+
+function resolvePort() {
+  const value = process.env.JUDGMENTKIT_MCP_PORT ?? process.env.PORT;
+  const parsed = Number(value);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : DEFAULT_PORT;
+}
+
+function createRequest(req: IncomingMessage, origin: string) {
+  const url = new URL(req.url || MCP_ENDPOINT, origin);
+  const headers = new Headers();
+
+  for (const [key, value] of Object.entries(req.headers)) {
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        headers.append(key, item);
+      }
+      continue;
+    }
+
+    if (typeof value === "string") {
+      headers.set(key, value);
+    }
+  }
+
+  const init: RequestInit & { duplex?: "half" } = {
+    method: req.method,
+    headers,
+  };
+
+  if (!["GET", "HEAD"].includes(req.method ?? "GET")) {
+    init.body = req as unknown as BodyInit;
+    init.duplex = "half";
+  }
+
+  return new Request(url, init);
+}
+
+async function sendResponse(res: ServerResponse, response: Response) {
+  res.statusCode = response.status;
+  res.statusMessage = response.statusText;
+  response.headers.forEach((value, key) => {
+    res.setHeader(key, value);
+  });
+
+  const body = Buffer.from(await response.arrayBuffer());
+  res.end(body);
+}
+
+async function handleNodeRequest(
+  req: IncomingMessage,
+  res: ServerResponse,
+  origin: string,
+) {
+  const request = createRequest(req, origin);
+  const pathname = new URL(request.url).pathname;
+
+  if (pathname === "/" && request.method === "GET") {
+    await sendResponse(
+      res,
+      createMcpMetadataResponse("local-loopback-http", { cors: true }),
+    );
+    return;
+  }
+
+  if (pathname !== MCP_ENDPOINT) {
+    await sendResponse(res, createMcpNotFoundResponse());
+    return;
+  }
+
+  if (!["GET", "POST", "OPTIONS"].includes(request.method)) {
+    await sendResponse(res, createMcpNotFoundResponse("Use GET or POST /mcp."));
+    return;
+  }
+
+  const response = await handleMcpHttpRequest(request, {
+    metadataTransport: "local-loopback-http",
+    cors: true,
+    allowOptions: true,
+  });
+  await sendResponse(res, response);
+}
+
+const host = resolveHost();
+const port = resolvePort();
+const origin = `http://${host}:${port}`;
+
+const server = createServer((req, res) => {
+  handleNodeRequest(req, res, origin).catch((error) => {
+    const message =
+      error instanceof Error ? error.message : "Unknown local MCP error.";
+    sendResponse(
+      res,
+      new Response(
+        JSON.stringify({
+          error: "internal_error",
+          message,
+        }),
+        {
+          status: 500,
+          headers: {
+            "content-type": "application/json; charset=utf-8",
+          },
+        },
+      ),
+    ).catch(() => {
+      res.statusCode = 500;
+      res.end();
+    });
+  });
+});
+
+server.listen(port, host, () => {
+  process.stdout.write(
+    `JudgmentKit local MCP listening at ${origin}${MCP_ENDPOINT}\n`,
+  );
+});
diff --git a/scripts/run-ai-ui-e2e.ts b/scripts/run-ai-ui-e2e.ts
new file mode 100644
index 0000000..96be420
--- /dev/null
+++ b/scripts/run-ai-ui-e2e.ts
@@ -0,0 +1,365 @@
+import fs from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
+
+import {
+  AI_UI_E2E_FEATURE_INTENT,
+  AI_UI_E2E_WORKFLOW_ID,
+  createCodexSeedPrompt,
+  createEvidenceTemplate,
+  getDefaultAiUiE2eArtifactsDir,
+  getAiUiE2ePaths,
+} from "@/lib/ai-ui-e2e";
+import {
+  createComparisonJudgeInput,
+  createComparisonTemplate,
+  createImplementationContractTemplate,
+  createJudgePrompt,
+  createPathJudgeInput,
+  createPathScoreTemplate,
+  createPreviewSourceTemplate,
+  createVisualManifestTemplate,
+} from "@/lib/ai-ui-e2e-evaluator";
+import { writeGeneratedArtifacts } from "@/lib/site";
+
+function withTimeout<T>(promise: Promise<T>, timeoutMs: number) {
+  return Promise.race([
+    promise,
+    new Promise<T>((_, reject) => {
+      setTimeout(() => reject(new Error(`Timed out after ${timeoutMs}ms.`)), timeoutMs);
+    }),
+  ]);
+}
+
+async function ensureDirectory(directory: string) {
+  await fs.mkdir(directory, { recursive: true });
+}
+
+async function writeJson(filePath: string, value: unknown) {
+  await ensureDirectory(path.dirname(filePath));
+  await fs.writeFile(filePath, `${JSON.stringify(value, null, 2)}\n`);
+}
+
+async function writeText(filePath: string, value: string) {
+  await ensureDirectory(path.dirname(filePath));
+  await fs.writeFile(filePath, `${value.endsWith("\n") ? value : `${value}\n`}`);
+}
+
+function getOutputDirectory() {
+  const argPath = process.argv[2];
+  if (argPath) {
+    return path.resolve(process.cwd(), argPath);
+  }
+
+  return getDefaultAiUiE2eArtifactsDir();
+}
+
+async function main() {
+  const outputDirectory = getOutputDirectory();
+  await ensureDirectory(outputDirectory);
+
+  const site = await writeGeneratedArtifacts();
+  await writeJson(path.join(outputDirectory, "generated-site-summary.json"), {
+    generated_at: new Date().toISOString(),
+    page_count: site.pages.length,
+    resource_count: site.resourceIndex.resources.length,
+    schema_count: site.resourceIndex.schemas.length,
+  });
+
+  const transport = new StdioClientTransport({
+    command: "npm",
+    args: ["--prefix", process.cwd(), "run", "mcp:stdio"],
+    cwd: process.cwd(),
+    stderr: "pipe",
+  });
+  const stderrChunks: string[] = [];
+  transport.stderr?.on("data", (chunk: Buffer | string) => {
+    stderrChunks.push(chunk.toString());
+  });
+
+  const client = new Client({
+    name: "judgmentkit-ai-ui-e2e",
+    version: "1.0.0",
+  });
+
+  try {
+    await withTimeout(client.connect(transport), 5_000);
+
+    const toolsResponse = await withTimeout(client.listTools(), 5_000);
+    const promptsResponse = await withTimeout(client.listPrompts(), 5_000);
+    const startPromptResponse = await withTimeout(
+      client.getPrompt({
+        name: "start_design_workflow",
+        arguments: {
+          feature_intent: AI_UI_E2E_FEATURE_INTENT,
+        },
+      }),
+      5_000,
+    );
+    const startNoDesignPromptResponse = await withTimeout(
+      client.getPrompt({
+        name: "start_no_design_system_workflow",
+        arguments: {
+          feature_intent: AI_UI_E2E_FEATURE_INTENT,
+        },
+      }),
+      5_000,
+    );
+    const workflowBundleResponse = await withTimeout(
+      client.callTool({
+        name: "get_workflow_bundle",
+        arguments: {
+          workflow_id: "workflow.ai-ui-generation",
+          feature_intent: AI_UI_E2E_FEATURE_INTENT,
+        },
+      }),
+      5_000,
+    );
+
+    await writeJson(path.join(outputDirectory, "tools-list.json"), toolsResponse);
+    await writeJson(path.join(outputDirectory, "prompts-list.json"), promptsResponse);
+    await writeJson(
+      path.join(outputDirectory, "mcp-call-order.json"),
+      [
+        { step: 1, method: "tools/list" },
+        {
+          step: 2,
+          method: "prompts/get",
+          name_by_path: {
+            "path-1-no-design-system": "start_no_design_system_workflow",
+            "path-2-shadcn-radix": "start_design_workflow",
+          },
+          feature_intent: AI_UI_E2E_FEATURE_INTENT,
+        },
+        {
+          step: 3,
+          method: "tools/call",
+          name: "get_workflow_bundle",
+          arguments: {
+            workflow_id: AI_UI_E2E_WORKFLOW_ID,
+            feature_intent: AI_UI_E2E_FEATURE_INTENT,
+          },
+        },
+      ],
+    );
+
+    if (startPromptResponse.messages[0]?.content.type !== "text") {
+      throw new Error("start_design_workflow returned non-text prompt content.");
+    }
+    if (startNoDesignPromptResponse.messages[0]?.content.type !== "text") {
+      throw new Error(
+        "start_no_design_system_workflow returned non-text prompt content.",
+      );
+    }
+
+    await writeText(
+      path.join(outputDirectory, "start-design-workflow.txt"),
+      startPromptResponse.messages[0].content.text,
+    );
+    await writeText(
+      path.join(outputDirectory, "start-no-design-system-workflow.txt"),
+      startNoDesignPromptResponse.messages[0].content.text,
+    );
+    await writeJson(
+      path.join(outputDirectory, "workflow-bundle.json"),
+      workflowBundleResponse.structuredContent ?? workflowBundleResponse,
+    );
+    await writeText(
+      path.join(outputDirectory, "stdio-stderr.log"),
+      stderrChunks.join(""),
+    );
+
+    const testPaths = getAiUiE2ePaths();
+
+    for (const testPath of testPaths) {
+      const pathDirectory = path.join(outputDirectory, testPath.id);
+      await ensureDirectory(pathDirectory);
+      await ensureDirectory(path.join(pathDirectory, "screenshots"));
+      await writeJson(path.join(pathDirectory, "metadata.json"), testPath);
+      await writeText(
+        path.join(pathDirectory, "codex-seed-prompt.md"),
+        createCodexSeedPrompt(testPath),
+      );
+      await writeText(
+        path.join(pathDirectory, "transcript.md"),
+        [
+          `# ${testPath.title} Transcript`,
+          "",
+          "Paste the exact Codex transcript for this run here.",
+          "",
+          "## MCP calls made",
+          "- ",
+          "",
+          "## Final generated UI response",
+          "",
+        ].join("\n"),
+      );
+      await writeText(
+        path.join(pathDirectory, "response.md"),
+        `# ${testPath.title} Final Response\n\nPaste the final generated UI response here.\n`,
+      );
+      await writeJson(
+        path.join(pathDirectory, "implementation-contract.json"),
+        createImplementationContractTemplate(testPath),
+      );
+      await writeText(
+        path.join(pathDirectory, "preview-source.tsx"),
+        createPreviewSourceTemplate(testPath),
+      );
+      await writeText(
+        path.join(pathDirectory, "preview.html"),
+        [
+          "<!doctype html>",
+          '<html lang="en">',
+          "  <head>",
+          '    <meta charset="utf-8" />',
+          '    <meta name="viewport" content="width=device-width, initial-scale=1" />',
+          `    <title>${testPath.title} Preview</title>`,
+          "    <style>",
+          "      :root { color-scheme: light dark; }",
+          "      body {",
+          "        margin: 0;",
+          "        min-height: 100vh;",
+          "        display: grid;",
+          "        place-items: center;",
+          "        font-family: ui-sans-serif, system-ui, sans-serif;",
+          "        background: Canvas;",
+          "        color: CanvasText;",
+          "      }",
+          "      main {",
+          "        max-width: 54rem;",
+          "        padding: 3rem;",
+          "        border: 1px dashed currentColor;",
+          "        border-radius: 1rem;",
+          "      }",
+          "    </style>",
+          "  </head>",
+          "  <body>",
+          "    <main>",
+          "      <h1>Replace this placeholder with a self-contained HTML preview for this path.</h1>",
+          "      <p>",
+          "        This file is generated by ai-ui:e2e:visuals from implementation-contract.json",
+          "        and preview-source.tsx. Do not hand-author this preview.",
+          "      </p>",
+          "      <p>",
+          "        Save real component evidence in implementation-contract.json and preview-source.tsx,",
+          "        then let the evaluator derive preview.html before capturing screenshots.",
+          "      </p>",
+          "    </main>",
+          "  </body>",
+          "</html>",
+        ].join("\n"),
+      );
+      await writeJson(
+        path.join(pathDirectory, "judge-input.json"),
+        createPathJudgeInput(outputDirectory, testPath),
+      );
+      await writeJson(
+        path.join(pathDirectory, "path-score.json"),
+        createPathScoreTemplate(testPath),
+      );
+      await writeJson(
+        path.join(pathDirectory, "visual-manifest.json"),
+        createVisualManifestTemplate(outputDirectory, testPath),
+      );
+    }
+
+    await writeText(
+      path.join(outputDirectory, "report-template.md"),
+      createEvidenceTemplate(outputDirectory),
+    );
+    await writeJson(
+      path.join(outputDirectory, "judge-comparison-input.json"),
+      createComparisonJudgeInput(outputDirectory, testPaths),
+    );
+    await writeJson(
+      path.join(outputDirectory, "comparison.json"),
+      createComparisonTemplate(),
+    );
+    await writeText(
+      path.join(outputDirectory, "judge-prompt.md"),
+      createJudgePrompt(outputDirectory),
+    );
+    await writeText(
+      path.join(outputDirectory, "NEXT-STEPS.md"),
+      [
+        "# JudgmentKit AI UI E2E Next Steps",
+        "",
+        `Canonical bundle path: \`${outputDirectory}\``,
+        "",
+        "## 1. Save the real run evidence",
+        "",
+        "Replace the placeholder contents in both path directories:",
+        "",
+        "- `transcript.md` must contain the full Codex conversation for that path.",
+        "- `response.md` must contain only the final generated UI output for that path.",
+        "- `implementation-contract.json` must be the machine-readable source of truth for component recipes, composition, states, accessibility, and theme bindings.",
+        "- `preview-source.tsx` must derive a complete preview HTML document from implementation-contract.json.",
+        "- Do not hand-author `preview.html`; the evaluator will generate it.",
+        "- Leave `judge-input.json`, `path-score.json`, and `comparison.json` in place.",
+        "",
+        "## 2. Capture the visuals",
+        "",
+        "Run:",
+        "",
+        "```bash",
+        "npm run ai-ui:e2e:visuals",
+        "```",
+        "",
+        "This command fails intentionally if any implementation contract or preview source is still a placeholder, if preview.html is hand-authored, or if the generated preview depends on remote network assets.",
+        "",
+        "## 3. Build the external judge packet",
+        "",
+        "Run:",
+        "",
+        "```bash",
+        "npm run ai-ui:e2e:judge-packet",
+        "```",
+        "",
+        "This command fails intentionally if any transcript or response file still contains placeholder text.",
+        "",
+        "## 4. Run the external judge",
+        "",
+        "Use these files:",
+        "",
+        "- `external-judge-packet.md`",
+        "- `judge-prompt.md`",
+        "",
+        "The external judge must complete:",
+        "",
+        ...testPaths.map((testPath) => `- \`${testPath.id}/path-score.json\``),
+        "- `comparison.json`",
+        "",
+        "Judge requirements:",
+        "",
+        "- Use only `pass`, `warn`, or `fail` for verdict status.",
+        "- Use only `allow`, `rewrite`, `review`, `block`, or `escalate` for recommended action.",
+        "- Mark all three JSON outputs as `completed: true`.",
+        "- Score all eight acceptance criteria and cite transcript/response evidence.",
+        "",
+        "## 5. Generate the final comparison summary",
+        "",
+        "Run:",
+        "",
+        "```bash",
+        "npm run ai-ui:e2e:summary",
+        "```",
+        "",
+        "This command fails intentionally until both path scores, the comparison, and the visual manifests are complete.",
+      ].join("\n"),
+    );
+
+    process.stdout.write(`JudgmentKit AI UI E2E bundle written to ${outputDirectory}\n`);
+  } finally {
+    await transport.close();
+  }
+}
+
+main().catch((error) => {
+  const message = error instanceof Error ? error.stack ?? error.message : String(error);
+  process.stderr.write(`JudgmentKit AI UI E2E failed: ${message}\n`);
+  process.exitCode = 1;
+});
diff --git a/scripts/summarize-ai-ui-e2e.ts b/scripts/summarize-ai-ui-e2e.ts
new file mode 100644
index 0000000..b9d1cd3
--- /dev/null
+++ b/scripts/summarize-ai-ui-e2e.ts
@@ -0,0 +1,113 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+
+import {
+  assertCompletedComparison,
+  assertCompletedPathScore,
+  assertCompletedVisualManifest,
+  createFinalComparisonSummaryMarkdown,
+  createMergedSummary,
+  type AiUiE2eComparisonResult,
+  type AiUiE2ePathScore,
+  type AiUiE2eVisualManifest,
+} from "@/lib/ai-ui-e2e-evaluator";
+import { getAiUiE2ePaths, getDefaultAiUiE2eArtifactsDir } from "@/lib/ai-ui-e2e";
+
+async function readJson<T>(filePath: string) {
+  const raw = await fs.readFile(filePath, "utf8");
+  return JSON.parse(raw) as T;
+}
+
+async function writeJson(filePath: string, value: unknown) {
+  await fs.writeFile(filePath, `${JSON.stringify(value, null, 2)}\n`);
+}
+
+async function writeText(filePath: string, value: string) {
+  await fs.writeFile(filePath, `${value.endsWith("\n") ? value : `${value}\n`}`);
+}
+
+function getOutputDirectory() {
+  const argPath = process.argv[2];
+  if (argPath) {
+    return path.resolve(process.cwd(), argPath);
+  }
+
+  return getDefaultAiUiE2eArtifactsDir();
+}
+
+async function ensureExists(filePath: string) {
+  try {
+    await fs.access(filePath);
+  } catch {
+    throw new Error(`Missing required judge artifact: ${filePath}`);
+  }
+}
+
+async function main() {
+  const outputDirectory = getOutputDirectory();
+  const [pathOneConfig, pathTwoConfig] = getAiUiE2ePaths();
+  if (!pathOneConfig || !pathTwoConfig) {
+    throw new Error("AI UI E2E summary requires exactly two configured paths.");
+  }
+
+  const pathOneScorePath = path.join(outputDirectory, pathOneConfig.id, "path-score.json");
+  const pathTwoScorePath = path.join(outputDirectory, pathTwoConfig.id, "path-score.json");
+  const comparisonPath = path.join(outputDirectory, "comparison.json");
+  const pathOneVisualPath = path.join(outputDirectory, pathOneConfig.id, "visual-manifest.json");
+  const pathTwoVisualPath = path.join(outputDirectory, pathTwoConfig.id, "visual-manifest.json");
+
+  await ensureExists(pathOneScorePath);
+  await ensureExists(pathTwoScorePath);
+  await ensureExists(comparisonPath);
+  await ensureExists(pathOneVisualPath);
+  await ensureExists(pathTwoVisualPath);
+
+  const pathOne = await readJson<AiUiE2ePathScore>(pathOneScorePath);
+  const pathTwo = await readJson<AiUiE2ePathScore>(pathTwoScorePath);
+  const comparison = await readJson<AiUiE2eComparisonResult>(comparisonPath);
+  const pathOneVisual = await readJson<AiUiE2eVisualManifest>(pathOneVisualPath);
+  const pathTwoVisual = await readJson<AiUiE2eVisualManifest>(pathTwoVisualPath);
+
+  assertCompletedPathScore(pathOne);
+  assertCompletedPathScore(pathTwo);
+  assertCompletedComparison(comparison);
+  assertCompletedVisualManifest(pathOneVisual);
+  assertCompletedVisualManifest(pathTwoVisual);
+
+  await ensureExists(pathOneVisual.preview_ref);
+  await ensureExists(pathOneVisual.component_evidence.implementation_contract_ref);
+  await ensureExists(pathOneVisual.component_evidence.preview_source_ref);
+  await ensureExists(pathOneVisual.screenshots.desktop_light_ref);
+  await ensureExists(pathOneVisual.screenshots.desktop_dark_ref);
+  await ensureExists(pathTwoVisual.preview_ref);
+  await ensureExists(pathTwoVisual.component_evidence.implementation_contract_ref);
+  await ensureExists(pathTwoVisual.component_evidence.preview_source_ref);
+  await ensureExists(pathTwoVisual.screenshots.desktop_light_ref);
+  await ensureExists(pathTwoVisual.screenshots.desktop_dark_ref);
+
+  const mergedSummary = createMergedSummary(
+    [pathOne, pathTwo],
+    [pathOneVisual, pathTwoVisual],
+    comparison,
+    outputDirectory,
+  );
+
+  await writeJson(
+    path.join(outputDirectory, "final-comparison-summary.json"),
+    mergedSummary,
+  );
+  await writeText(
+    path.join(outputDirectory, "final-comparison-summary.md"),
+    createFinalComparisonSummaryMarkdown(mergedSummary),
+  );
+
+  process.stdout.write(
+    `JudgmentKit AI UI E2E final summary written to ${outputDirectory}\n`,
+  );
+}
+
+main().catch((error) => {
+  const message = error instanceof Error ? error.stack ?? error.message : String(error);
+  process.stderr.write(`JudgmentKit AI UI E2E summary failed: ${message}\n`);
+  process.exitCode = 1;
+});
diff --git a/tests/ai-ui-e2e.test.ts b/tests/ai-ui-e2e.test.ts
new file mode 100644
index 0000000..1563670
--- /dev/null
+++ b/tests/ai-ui-e2e.test.ts
@@ -0,0 +1,583 @@
+import { execFileSync } from "node:child_process";
+import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import os from "node:os";
+import path from "node:path";
+
+import { describe, expect, it } from "vitest";
+
+import {
+  AI_UI_E2E_ARTIFACTS_DIR,
+  AI_UI_E2E_FEATURE_INTENT,
+  AI_UI_E2E_PORTABLE_AUTHORITY_CONTEXT,
+  AI_UI_E2E_SHADCN_RADIX_CONTEXT,
+  AI_UI_E2E_SHARED_PROMPT,
+  createCodexSeedPrompt,
+  createEvidenceTemplate,
+  getDefaultAiUiE2eArtifactsDir,
+  getAiUiE2ePaths,
+} from "@/lib/ai-ui-e2e";
+import {
+  AI_UI_E2E_EVALUATOR_STATUSES,
+  createImplementationContractTemplate,
+  createComparisonJudgeInput,
+  createComparisonTemplate,
+  createExternalJudgePacketMarkdown,
+  createFinalComparisonSummaryMarkdown,
+  createPreviewSourceTemplate,
+  createJudgePrompt,
+  createMergedSummary,
+  createPathJudgeInput,
+  createPathScoreTemplate,
+  createVisualManifestTemplate,
+  hasPlaceholderEvidence,
+  hasPlaceholderPreview,
+} from "@/lib/ai-ui-e2e-evaluator";
+
+function runTsxScript(scriptPath: string, args: string[]) {
+  return execFileSync(process.execPath, ["--import", "tsx", scriptPath, ...args], {
+    cwd: process.cwd(),
+    encoding: "utf8",
+  });
+}
+
+function writeVisualEvidenceFixture(baseDir: string, testPath: ReturnType<typeof getAiUiE2ePaths>[number]) {
+  const contract = createImplementationContractTemplate(testPath);
+  const recipeId = "workspace-shell";
+  const screenId = "workspace-home";
+  const themeBindings =
+    testPath.id === "path-1-no-design-system"
+      ? ["--jk-color-canvas", "--jk-color-surface", "--jk-color-accent"]
+      : ["--background", "--card", "--primary"];
+
+  contract.response_alignment = {
+    component_recipe_ids: [recipeId],
+    state_ids: ["loading", "empty", "ready", "error", "review-needed", "disabled"],
+    theme_bindings: themeBindings,
+  };
+  if (contract.token_spec) {
+    contract.token_spec.bindings = themeBindings;
+  }
+  if (contract.design_system_bindings) {
+    contract.design_system_bindings = ["Sidebar", "Card", "Tabs", "Dialog"];
+  }
+  contract.component_recipes = [
+    {
+      recipe_id: recipeId,
+      title: "Workspace shell",
+      primitive_id: "layout-shell",
+      source_of_truth:
+        testPath.id === "path-1-no-design-system"
+          ? "constraint-pack.ai-ui-no-design-system"
+          : "shadcn-radix",
+      slots: ["rail", "header", "main", "inspector"],
+      allowed_variants: ["with-rail", "with-inspector"],
+      interaction_rules: ["Keep local actions inside the governed surface."],
+      accessibility_contract: ["Preserve landmarks and heading order."],
+      react_tailwind:
+        "export function WorkspaceShell(){return <div className=\"grid min-h-screen\">...</div>}",
+    },
+  ];
+  contract.screen_composition = [
+    {
+      screen_id: screenId,
+      title: "Workspace home",
+      recipe_ids: [recipeId],
+      primary_actions: ["Generate first pass"],
+      notes: ["Keep inspector evidence secondary to the main workflow."],
+    },
+  ];
+  contract.state_coverage = [
+    "loading",
+    "empty",
+    "ready",
+    "error",
+    "review-needed",
+    "disabled",
+  ].map((state) => ({
+    state,
+    applies_to: [screenId],
+    behavior: [`${state} state remains inside the same workspace shell.`],
+  }));
+  contract.theme_contract = {
+    bindings: themeBindings,
+    parity_rules: ["Light and dark tokens stay bound to the same surfaces."],
+  };
+  contract.accessibility_contract = {
+    global_rules: ["Use semantic landmarks and explicit labels."],
+    focus_rules: ["Keep focus-visible rings on interactive elements."],
+    keyboard_rules: ["Support keyboard navigation for tabs and dialogs."],
+    motion_rules: ["Reduce motion when the user requests it."],
+  };
+  contract.escalation_items = ["Escalate unsupported enterprise auth states."];
+
+  const response = [
+    "# Final UI output",
+    "",
+    ...contract.required_sections,
+    "",
+    `Recipe ids: ${contract.response_alignment.component_recipe_ids.join(", ")}`,
+    `States: ${contract.response_alignment.state_ids.join(", ")}`,
+    `Theme bindings: ${contract.response_alignment.theme_bindings.join(", ")}`,
+  ].join("\n");
+
+  const previewSource = [
+    "export default function renderPreview({ contract }) {",
+    "  const recipes = contract.component_recipes",
+    "    .map((recipe) => `<li>${recipe.recipe_id}: ${recipe.title}</li>`)",
+    "    .join('');",
+    "  return `<!doctype html>",
+    "<html lang=\"en\">",
+    "  <head>",
+    "    <meta charset=\"utf-8\" />",
+    "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />",
+    "    <style>:root{color-scheme:light dark}body{margin:0;font-family:ui-sans-serif,system-ui,sans-serif;background:Canvas;color:CanvasText}main{padding:48px;display:grid;gap:16px}.panel{border:1px solid currentColor;border-radius:24px;padding:24px}</style>",
+    `    <title>${testPath.title}</title>`,
+    "  </head>",
+    "  <body>",
+    "    <main>",
+    "      <h1>${contract.path_id}</h1>",
+    "      <section class=\"panel\">",
+    "        <h2>${contract.screen_composition[0]?.title ?? 'Preview'}</h2>",
+    "        <ul>${recipes}</ul>",
+    "      </section>",
+    "    </main>",
+    "  </body>",
+    "</html>`;",
+    "}",
+    "",
+  ].join("\n");
+
+  writeFileSync(
+    path.join(baseDir, "implementation-contract.json"),
+    `${JSON.stringify(contract, null, 2)}\n`,
+  );
+  writeFileSync(path.join(baseDir, "response.md"), `${response}\n`);
+  writeFileSync(path.join(baseDir, "preview-source.tsx"), previewSource);
+}
+
+describe("AI UI E2E harness", () => {
+  it("keeps the shared prompt identical across both paths", () => {
+    const [pathOne, pathTwo] = getAiUiE2ePaths();
+
+    expect(pathOne?.systemContext).toBe(AI_UI_E2E_PORTABLE_AUTHORITY_CONTEXT);
+    expect(pathTwo?.systemContext).toBe(AI_UI_E2E_SHADCN_RADIX_CONTEXT);
+
+    expect(createCodexSeedPrompt(pathOne!)).toContain(AI_UI_E2E_SHARED_PROMPT);
+    expect(createCodexSeedPrompt(pathTwo!)).toContain(AI_UI_E2E_SHARED_PROMPT);
+    expect(createCodexSeedPrompt(pathOne!)).toContain(
+      AI_UI_E2E_PORTABLE_AUTHORITY_CONTEXT,
+    );
+    expect(createCodexSeedPrompt(pathOne!)).toContain(
+      "start_no_design_system_workflow",
+    );
+    expect(createCodexSeedPrompt(pathOne!)).toContain(
+      "token_spec, component_recipes, screen_composition, state_coverage, theme_contract, accessibility_contract, escalation_items",
+    );
+    expect(createCodexSeedPrompt(pathTwo!)).toContain(AI_UI_E2E_SHADCN_RADIX_CONTEXT);
+    expect(createCodexSeedPrompt(pathTwo!)).toContain("start_design_workflow");
+    expect(createCodexSeedPrompt(pathTwo!)).toContain(
+      "design_system_bindings, component_recipes, screen_composition, state_coverage, theme_contract, accessibility_contract, escalation_items",
+    );
+  });
+
+  it("renders an evidence template with both paths and the shared feature intent", () => {
+    const template = createEvidenceTemplate("/tmp/judgmentkit-ai-ui-e2e");
+
+    expect(template).toContain(AI_UI_E2E_FEATURE_INTENT);
+    expect(template).toContain(
+      "Path 1: JudgmentKit portable authority without an external design system",
+    );
+    expect(template).toContain("Path 2: One-shot with Shadcn+Radix");
+    expect(template).toContain("First-shot usefulness");
+    expect(template).toContain("Cleanup load");
+    expect(template).toContain("Workflow adherence");
+    expect(template).toContain("Handoff quality");
+  });
+
+  it("creates judge input packets that preserve the shared prompt and criterion list", () => {
+    const [pathOne, pathTwo] = getAiUiE2ePaths();
+    const pathOneInput = createPathJudgeInput("/tmp/judgmentkit-ai-ui-e2e", pathOne!);
+    const pathTwoInput = createPathJudgeInput("/tmp/judgmentkit-ai-ui-e2e", pathTwo!);
+
+    expect(pathOneInput.shared_prompt).toBe(AI_UI_E2E_SHARED_PROMPT);
+    expect(pathTwoInput.shared_prompt).toBe(AI_UI_E2E_SHARED_PROMPT);
+    expect(pathOneInput.path.systemContext).toBe(
+      AI_UI_E2E_PORTABLE_AUTHORITY_CONTEXT,
+    );
+    expect(pathTwoInput.path.systemContext).toBe(AI_UI_E2E_SHADCN_RADIX_CONTEXT);
+    expect(pathOneInput.rubric.criteria).toHaveLength(8);
+    expect(pathTwoInput.rubric.criteria).toHaveLength(8);
+  });
+
+  it("creates comparison packets and templates with the local evaluator vocabulary", () => {
+    const comparisonInput = createComparisonJudgeInput(
+      "/tmp/judgmentkit-ai-ui-e2e",
+      getAiUiE2ePaths(),
+    );
+    const comparisonTemplate = createComparisonTemplate();
+    const pathTemplate = createPathScoreTemplate(getAiUiE2ePaths()[0]!);
+    const visualTemplate = createVisualManifestTemplate(
+      "/tmp/judgmentkit-ai-ui-e2e",
+      getAiUiE2ePaths()[0]!,
+    );
+
+    expect(comparisonInput.controlled_variable).toContain("exact same prompt text");
+    expect(comparisonTemplate.completed).toBe(false);
+    expect(pathTemplate.completed).toBe(false);
+    expect(visualTemplate.completed).toBe(false);
+    expect(visualTemplate.capture.browser).toBe("chromium");
+    expect(visualTemplate.capture.color_schemes).toEqual(["light", "dark"]);
+    expect(AI_UI_E2E_EVALUATOR_STATUSES).toEqual(["pass", "warn", "fail"]);
+    expect(pathTemplate.criteria).toHaveLength(8);
+  });
+
+  it("defaults the local bundle path to the tracked repo artifacts directory", () => {
+    expect(getDefaultAiUiE2eArtifactsDir()).toBe(AI_UI_E2E_ARTIFACTS_DIR);
+    expect(getDefaultAiUiE2eArtifactsDir()).toMatch(/artifacts\/ai-ui-e2e-evaluator$/);
+  });
+
+  it("renders a deterministic final summary from completed judge outputs", () => {
+    const [pathOne, pathTwo] = getAiUiE2ePaths();
+    const pathOneScore = createPathScoreTemplate(pathOne!);
+    const pathTwoScore = createPathScoreTemplate(pathTwo!);
+    const pathOneVisual = createVisualManifestTemplate(
+      "/tmp/judgmentkit-ai-ui-e2e",
+      pathOne!,
+    );
+    const pathTwoVisual = createVisualManifestTemplate(
+      "/tmp/judgmentkit-ai-ui-e2e",
+      pathTwo!,
+    );
+    const comparison = createComparisonTemplate();
+
+    pathOneScore.completed = true;
+    pathOneScore.verdict = {
+      ...pathOneScore.verdict,
+      verdict_id: "ver_path_1",
+      decision_id: "dec_path_1",
+      evaluated_at: "2026-04-12T00:00:00.000Z",
+      status: "pass",
+      recommended_action: "allow",
+    };
+    pathOneScore.criteria[0] = {
+      criterion: "First-shot usefulness",
+      score: 4,
+      notes: "Strong starting structure.",
+      evidence: ["transcript evidence"],
+    };
+    pathOneScore.strongest_evidence = ["Clear onboarding in the first screen."];
+    pathOneScore.cleanup_notes = {
+      reduced_cleanup: "Structure was already usable.",
+      remaining_cleanup: "Minor copy tightening remained.",
+      judgmentkit_impact: "Kept the first pass restrained.",
+    };
+    pathOneScore.rationale = "Path 1 balanced clarity and restraint well.";
+
+    pathTwoScore.completed = true;
+    pathTwoScore.verdict = {
+      ...pathTwoScore.verdict,
+      verdict_id: "ver_path_2",
+      decision_id: "dec_path_2",
+      evaluated_at: "2026-04-12T00:00:00.000Z",
+      status: "warn",
+      recommended_action: "review",
+    };
+    pathTwoScore.criteria[0] = {
+      criterion: "First-shot usefulness",
+      score: 5,
+      notes: "Shadcn+Radix guidance gave stronger component discipline.",
+      evidence: ["response evidence"],
+    };
+    pathTwoScore.strongest_evidence = ["System fidelity stayed explicit."];
+    pathTwoScore.cleanup_notes = {
+      reduced_cleanup: "Design-system fidelity reduced token cleanup.",
+      remaining_cleanup: "A few flows still needed simplification.",
+      judgmentkit_impact: "Shadcn+Radix guidance changed the result meaningfully.",
+    };
+    pathTwoScore.rationale = "Path 2 was stronger because the system context improved fit.";
+
+    pathOneVisual.completed = true;
+    pathOneVisual.captured_at = "2026-04-12T00:00:00.000Z";
+    pathTwoVisual.completed = true;
+    pathTwoVisual.captured_at = "2026-04-12T00:00:00.000Z";
+
+    comparison.completed = true;
+    comparison.winner = pathTwo!.id;
+    comparison.confidence = 0.82;
+    comparison.meaningful_difference = true;
+    comparison.recommended_next_action = "allow";
+    comparison.rationale = "Path 2 had stronger system fidelity without harming clarity.";
+    comparison.criteria_deltas[0] = {
+      criterion: "First-shot usefulness",
+      winner: pathTwo!.id,
+      delta: 1,
+      notes: "Better component fit.",
+    };
+    comparison.strongest_evidence = {
+      "path-1-no-design-system": ["Good fallback restraint."],
+      [pathTwo!.id]: ["Better use of Shadcn+Radix primitives."],
+    };
+    comparison.top_cleanup_risks = ["Final copy still needs product review."];
+    comparison.judgmentkit_impact_summary =
+      "JudgmentKit meaningfully improved both runs, and Shadcn+Radix improved the winning path.";
+
+    const markdown = createFinalComparisonSummaryMarkdown(
+      createMergedSummary(
+        [pathOneScore, pathTwoScore],
+        [pathOneVisual, pathTwoVisual],
+        comparison,
+        "/tmp/judgmentkit-ai-ui-e2e",
+      ),
+    );
+
+    expect(markdown).toContain(`Winner: ${pathTwo!.id}`);
+    expect(markdown).toContain("Capture mode: headless Chromium");
+    expect(markdown).toContain("Side-by-Side Scores");
+    expect(markdown).toContain("Implementation contract:");
+    expect(markdown).toContain("Preview source:");
+    expect(markdown).toContain("![path-1-no-design-system desktop light]");
+    expect(markdown).toContain(`![${pathTwo!.id} desktop dark]`);
+    expect(markdown).toContain("Did JudgmentKit materially change the outcome");
+    expect(markdown).toContain("Top Cleanup Risks");
+  });
+
+  it("renders a judge prompt that points to both path packets and the comparison packet", () => {
+    const prompt = createJudgePrompt("/tmp/judgmentkit-ai-ui-e2e");
+
+    expect(prompt).toContain("judge-comparison-input.json");
+    expect(prompt).toContain("path-1-no-design-system");
+    expect(prompt).toContain("path-2-shadcn-radix");
+    expect(prompt).toContain("path-level authority context");
+    expect(prompt).toContain("Avoid rewarding ornamental novelty");
+  });
+
+  it("detects placeholder transcript and response content", () => {
+    expect(
+      hasPlaceholderEvidence("Paste the exact Codex transcript for this run here."),
+    ).toBe(true);
+    expect(
+      hasPlaceholderEvidence("Paste the final generated UI response here."),
+    ).toBe(true);
+    expect(hasPlaceholderEvidence("Real transcript content.")).toBe(false);
+  });
+
+  it("detects placeholder preview content", () => {
+    expect(
+      hasPlaceholderPreview(
+        "Replace this placeholder with a self-contained HTML preview for this path.",
+      ),
+    ).toBe(true);
+    expect(hasPlaceholderPreview("<!doctype html><html><body>Real preview</body></html>")).toBe(
+      false,
+    );
+  });
+
+  it("renders a single external judge packet with inline evidence and output templates", () => {
+    const [pathOne, pathTwo] = getAiUiE2ePaths();
+    const packet = createExternalJudgePacketMarkdown({
+      output_directory: "/tmp/judgmentkit-ai-ui-e2e",
+      judge_prompt: createJudgePrompt("/tmp/judgmentkit-ai-ui-e2e"),
+      comparison_input: createComparisonJudgeInput(
+        "/tmp/judgmentkit-ai-ui-e2e",
+        getAiUiE2ePaths(),
+      ),
+      comparison_template: createComparisonTemplate(),
+      shared_artifacts: {
+        mcp_call_order: [{ step: 1, method: "tools/list" }],
+        tools_list: { tools: ["get_workflow_bundle"] },
+        prompts_list: {
+          prompts: ["start_design_workflow", "start_no_design_system_workflow"],
+        },
+        start_design_workflow: "Use JudgmentKit for this design task.",
+        start_no_design_system_workflow:
+          "Use JudgmentKit for this no-design-system design task.",
+        workflow_bundle: { id: "workflow.ai-ui-generation" },
+      },
+      path_packets: [
+        {
+          path: pathOne!,
+          judge_input: createPathJudgeInput("/tmp/judgmentkit-ai-ui-e2e", pathOne!),
+          transcript: "Real transcript path 1",
+          response: "Real response path 1",
+          implementation_contract: createImplementationContractTemplate(pathOne!),
+          preview_source: createPreviewSourceTemplate(pathOne!),
+          path_score_template: createPathScoreTemplate(pathOne!),
+        },
+        {
+          path: pathTwo!,
+          judge_input: createPathJudgeInput("/tmp/judgmentkit-ai-ui-e2e", pathTwo!),
+          transcript: "Real transcript path 2",
+          response: "Real response path 2",
+          implementation_contract: createImplementationContractTemplate(pathTwo!),
+          preview_source: createPreviewSourceTemplate(pathTwo!),
+          path_score_template: createPathScoreTemplate(pathTwo!),
+        },
+      ],
+    });
+
+    expect(packet).toContain("External Judge Packet");
+    expect(packet).toContain("judge-comparison-input.json");
+    expect(packet).toContain("path-1-no-design-system/path-score.json");
+    expect(packet).toContain("path-2-shadcn-radix/path-score.json");
+    expect(packet).toContain("Real transcript path 1");
+    expect(packet).toContain("Real response path 2");
+    expect(packet).toContain("### implementation-contract.json");
+    expect(packet).toContain("### preview-source.tsx");
+    expect(packet).toContain("start-no-design-system-workflow.txt");
+  });
+
+  it("captures desktop light and dark screenshots headlessly from derived preview fixtures", () => {
+    const tempDir = mkdtempSync(path.join(os.tmpdir(), "judgmentkit-ai-ui-e2e-"));
+    const captureScript = path.join(
+      process.cwd(),
+      "scripts",
+      "capture-ai-ui-e2e-visuals.ts",
+    );
+
+    try {
+      for (const testPath of getAiUiE2ePaths()) {
+        const baseDir = path.join(tempDir, testPath.id);
+        mkdirSync(baseDir, { recursive: true });
+        writeVisualEvidenceFixture(baseDir, testPath);
+      }
+
+      const output = runTsxScript(captureScript, [tempDir]);
+      expect(output).toContain("JudgmentKit AI UI E2E visuals written");
+
+      for (const testPath of getAiUiE2ePaths()) {
+        const baseDir = path.join(tempDir, testPath.id);
+        const manifest = JSON.parse(
+          readFileSync(path.join(baseDir, "visual-manifest.json"), "utf8"),
+        );
+
+        expect(manifest.completed).toBe(true);
+        expect(manifest.capture.headless).toBe(true);
+        expect(manifest.capture.browser).toBe("chromium");
+        expect(manifest.capture.color_schemes).toEqual(["light", "dark"]);
+        expect(manifest.derivation.generated_from_contract).toBe(true);
+        expect(manifest.component_evidence.implementation_contract_ref).toContain(
+          "implementation-contract.json",
+        );
+        expect(
+          readFileSync(path.join(baseDir, "preview.html"), "utf8"),
+        ).toContain("judgmentkit-ai-ui-e2e-generated-preview");
+        expect(
+          readFileSync(path.join(baseDir, "screenshots", "desktop-light.png")).length,
+        ).toBeGreaterThan(0);
+        expect(
+          readFileSync(path.join(baseDir, "screenshots", "desktop-dark.png")).length,
+        ).toBeGreaterThan(0);
+      }
+    } finally {
+      rmSync(tempDir, { recursive: true, force: true });
+    }
+  });
+
+  it("fails visual capture when preview.html is hand-authored instead of derived", () => {
+    const tempDir = mkdtempSync(path.join(os.tmpdir(), "judgmentkit-ai-ui-e2e-"));
+    const captureScript = path.join(
+      process.cwd(),
+      "scripts",
+      "capture-ai-ui-e2e-visuals.ts",
+    );
+
+    try {
+      for (const testPath of getAiUiE2ePaths()) {
+        const baseDir = path.join(tempDir, testPath.id);
+        mkdirSync(baseDir, { recursive: true });
+        writeVisualEvidenceFixture(baseDir, testPath);
+        writeFileSync(
+          path.join(baseDir, "preview.html"),
+          "<!doctype html><html><body>Hand-authored preview.</body></html>",
+        );
+      }
+
+      expect(() => runTsxScript(captureScript, [tempDir])).toThrowError(
+        /hand-authored preview\.html is not allowed/,
+      );
+    } finally {
+      rmSync(tempDir, { recursive: true, force: true });
+    }
+  });
+
+  it("fails visual capture when implementation contract and response disagree", () => {
+    const tempDir = mkdtempSync(path.join(os.tmpdir(), "judgmentkit-ai-ui-e2e-"));
+    const captureScript = path.join(
+      process.cwd(),
+      "scripts",
+      "capture-ai-ui-e2e-visuals.ts",
+    );
+
+    try {
+      for (const testPath of getAiUiE2ePaths()) {
+        const baseDir = path.join(tempDir, testPath.id);
+        mkdirSync(baseDir, { recursive: true });
+        writeVisualEvidenceFixture(baseDir, testPath);
+        writeFileSync(path.join(baseDir, "response.md"), "# Final UI output\n\ncore_screens\n");
+      }
+
+      expect(() => runTsxScript(captureScript, [tempDir])).toThrowError(
+        /implementation-contract\.json and response\.md disagree/,
+      );
+    } finally {
+      rmSync(tempDir, { recursive: true, force: true });
+    }
+  });
+
+  it("fails summary generation when visual manifests are missing", () => {
+    const tempDir = mkdtempSync(path.join(os.tmpdir(), "judgmentkit-ai-ui-e2e-"));
+    const summaryScript = path.join(
+      process.cwd(),
+      "scripts",
+      "summarize-ai-ui-e2e.ts",
+    );
+    const [pathOne, pathTwo] = getAiUiE2ePaths();
+    const pathOneScore = createPathScoreTemplate(pathOne!);
+    const pathTwoScore = createPathScoreTemplate(pathTwo!);
+    const comparison = createComparisonTemplate();
+
+    pathOneScore.completed = true;
+    pathOneScore.verdict = {
+      ...pathOneScore.verdict,
+      verdict_id: "p1",
+      decision_id: "p1",
+      evaluated_at: "2026-04-14T00:00:00.000Z",
+      status: "pass",
+      recommended_action: "allow",
+    };
+    pathTwoScore.completed = true;
+    pathTwoScore.verdict = {
+      ...pathTwoScore.verdict,
+      verdict_id: "p2",
+      decision_id: "p2",
+      evaluated_at: "2026-04-14T00:00:00.000Z",
+      status: "pass",
+      recommended_action: "allow",
+    };
+    comparison.completed = true;
+    comparison.winner = "tie";
+
+    try {
+      mkdirSync(path.join(tempDir, pathOne!.id), { recursive: true });
+      mkdirSync(path.join(tempDir, pathTwo!.id), { recursive: true });
+      writeFileSync(
+        path.join(tempDir, pathOne!.id, "path-score.json"),
+        `${JSON.stringify(pathOneScore, null, 2)}\n`,
+      );
+      writeFileSync(
+        path.join(tempDir, pathTwo!.id, "path-score.json"),
+        `${JSON.stringify(pathTwoScore, null, 2)}\n`,
+      );
+      writeFileSync(
+        path.join(tempDir, "comparison.json"),
+        `${JSON.stringify(comparison, null, 2)}\n`,
+      );
+
+      expect(() => runTsxScript(summaryScript, [tempDir])).toThrowError(
+        /Missing required judge artifact: .*visual-manifest\.json/,
+      );
+    } finally {
+      rmSync(tempDir, { recursive: true, force: true });
+    }
+  });
+});
diff --git a/tests/homepage-install-smoke.test.ts b/tests/homepage-install-smoke.test.ts
index 6a8c552..c89c5a3 100644
--- a/tests/homepage-install-smoke.test.ts
+++ b/tests/homepage-install-smoke.test.ts
@@ -1,76 +1,39 @@
-import { Client } from "@modelcontextprotocol/sdk/client/index.js";
-import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
 import { describe, expect, it } from "vitest";
 
-import { renderManualConfigSnippet } from "@/lib/install-mcp";
+import { renderManualConfigSnippet, verifyInstalledMcp } from "@/lib/install-mcp";
 import { loadInstallContract } from "@/lib/install-contract";
 import { loadLandingPage } from "@/lib/landing-page";
 import type { InstallContract, InstallContractClient } from "@/lib/types";
 
-function withTimeout<T>(promise: Promise<T>, timeoutMs: number) {
-  return Promise.race([
-    promise,
-    new Promise<T>((_, reject) => {
-      setTimeout(() => reject(new Error(`Timed out after ${timeoutMs}ms.`)), timeoutMs);
-    }),
-  ]);
-}
-
-function materializeLocalPath(value: string, contract: InstallContract) {
-  return value.replaceAll(
-    contract.repository.local_path_placeholder,
-    process.cwd(),
-  );
-}
-
-function materializeConnection(contract: InstallContract) {
-  return {
-    command: contract.connection.command,
-    args: contract.connection.args.map((argument) =>
-      materializeLocalPath(argument, contract),
-    ),
-  };
-}
-
 function parseCodexConfigSnippet(snippet: string) {
   if (!snippet.includes("[mcp_servers.judgmentkit]")) {
     throw new Error("Codex install snippet is missing the judgmentkit server block.");
   }
 
-  const commandMatch = snippet.match(/^\s*command\s*=\s*"([^"]+)"\s*$/m);
-  const argsMatch = snippet.match(/^\s*args\s*=\s*(\[[^\n]+\])\s*$/m);
+  const urlMatch = snippet.match(/^\s*url\s*=\s*"([^"]+)"\s*$/m);
 
-  if (!commandMatch || !argsMatch) {
-    throw new Error("Codex install snippet is missing a command or args assignment.");
+  if (!urlMatch) {
+    throw new Error("Codex install snippet is missing a URL assignment.");
   }
 
-  const args = JSON.parse(argsMatch[1]) as string[];
-
-  return {
-    command: commandMatch[1],
-    args,
-  };
+  return { url: urlMatch[1] };
 }
 
 function parseJsonConfigSnippet(snippet: string) {
   const parsed = JSON.parse(snippet) as {
     mcpServers?: {
       judgmentkit?: {
-        command?: string;
-        args?: string[];
+        url?: string;
       };
     };
   };
   const serverConfig = parsed.mcpServers?.judgmentkit;
 
-  if (!serverConfig?.command || !Array.isArray(serverConfig.args)) {
-    throw new Error("JSON install snippet is missing mcpServers.judgmentkit command/args.");
+  if (!serverConfig?.url) {
+    throw new Error("JSON install snippet is missing mcpServers.judgmentkit url.");
   }
 
-  return {
-    command: serverConfig.command,
-    args: serverConfig.args,
-  };
+  return { url: serverConfig.url };
 }
 
 function parseClientConnection(clientConfig: InstallContractClient) {
@@ -83,21 +46,6 @@ function parseClientConnection(clientConfig: InstallContractClient) {
   return parseJsonConfigSnippet(materializedSnippet);
 }
 
-function createFailure(
-  clientId: string,
-  command: string,
-  args: string[],
-  stderrOutput: string,
-  error: unknown,
-) {
-  const reason = error instanceof Error ? error.message : String(error);
-  const stderr = stderrOutput.trim() || "<empty>";
-
-  return new Error(
-    `Homepage install smoke failed for ${clientId}.\nCommand: ${command} ${args.join(" ")}\nReason: ${reason}\nStderr:\n${stderr}`,
-  );
-}
-
 function loadInternalInstallContract(): InstallContract {
   return loadInstallContract();
 }
@@ -106,58 +54,13 @@ async function verifyClientInstall(
   contract: InstallContract,
   clientConfig: InstallContractClient,
 ) {
-  const configuredConnection = parseClientConnection(clientConfig);
-  const expectedConnection = materializeConnection(contract);
-
-  expect(configuredConnection).toEqual(expectedConnection);
-
-  const stderrOutput: string[] = [];
-  const transport = new StdioClientTransport({
-    command: configuredConnection.command,
-    args: configuredConnection.args,
-    cwd: process.cwd(),
-    stderr: "pipe",
-  });
-  const client = new Client({
-    name: `homepage-install-smoke-${clientConfig.id}`,
-    version: "1.0.0",
-  });
-
-  transport.stderr?.on("data", (chunk: Buffer | string) => {
-    stderrOutput.push(chunk.toString());
-  });
-
-  try {
-    await withTimeout(client.connect(transport), 5_000);
-
-    const toolsResponse = await withTimeout(client.listTools(), 5_000);
-    expect(toolsResponse.tools.map((tool) => tool.name)).toEqual(
-      contract.verification.expected_tools,
-    );
-
-    const promptsResponse = await withTimeout(client.listPrompts(), 5_000);
-    expect(promptsResponse.prompts.map((prompt) => prompt.name)).toEqual(
-      contract.verification.expected_prompts,
-    );
+  if (contract.connection.transport !== "http") {
+    throw new Error("Expected HTTP install contract.");
+  }
 
-    const promptResponse = await withTimeout(
-      client.getPrompt({ name: "start_design_workflow", arguments: {} }),
-      5_000,
-    );
+  const configuredConnection = parseClientConnection(clientConfig);
 
-    expect(promptResponse.messages.length).toBeGreaterThan(0);
-    expect(promptResponse.messages[0]?.content.type).toBe("text");
-  } catch (error) {
-    throw createFailure(
-      clientConfig.id,
-      configuredConnection.command,
-      configuredConnection.args,
-      stderrOutput.join(""),
-      error,
-    );
-  } finally {
-    await transport.close();
-  }
+  expect(configuredConnection).toEqual({ url: contract.connection.url });
 }
 
 describe("homepage install smoke", () => {
@@ -182,7 +85,7 @@ describe("homepage install smoke", () => {
       "curl -fsSL https://judgmentkit.ai/install | bash -s -- --client <codex|claude|cursor>",
     );
     expect(content.verify_prompt).toBe(
-      "Call MCP tools/list against the local judgmentkit server",
+      "Start the local JudgmentKit loopback server, then call MCP tools/list against http://127.0.0.1:8765/mcp",
     );
   });
 
@@ -196,5 +99,15 @@ describe("homepage install smoke", () => {
     for (const clientConfig of contract.clients) {
       await verifyClientInstall(contract, clientConfig);
     }
+
+    if (contract.connection.transport !== "http") {
+      throw new Error("Expected HTTP install contract.");
+    }
+
+    await verifyInstalledMcp(process.cwd(), {
+      endpoint: contract.connection.url,
+      host: contract.connection.loopback_runtime.host,
+      port: contract.connection.loopback_runtime.port,
+    });
   });
 });
diff --git a/tests/install-script.test.ts b/tests/install-script.test.ts
index 03db43e..019bd1e 100644
--- a/tests/install-script.test.ts
+++ b/tests/install-script.test.ts
@@ -98,12 +98,11 @@ describe("install script", () => {
     const next = upsertCodexTomlConfig(
       existing,
       `[mcp_servers.judgmentkit]
-command = "npm"
-args = ["--prefix", "/tmp/new-judgmentkit", "run", "mcp:stdio"]`,
+url = "http://127.0.0.1:18765/mcp"`,
     );
 
     expect(next).toContain('[mcp_servers.other]');
-    expect(next).toContain('/tmp/new-judgmentkit');
+    expect(next).toContain('url = "http://127.0.0.1:18765/mcp"');
     expect(next).not.toContain('/tmp/old-judgmentkit');
     expect(next).toContain('[projects.demo]');
   });
@@ -113,17 +112,16 @@ args = ["--prefix", "/tmp/new-judgmentkit", "run", "mcp:stdio"]`,
     const cursorExisting = await loadFixture("cursor-existing.json");
 
     const claudeNext = upsertJsonMcpConfig(claudeExisting, {
-      command: "npm",
-      args: ["--prefix", "/tmp/judgmentkit", "run", "mcp:stdio"],
+      url: "http://127.0.0.1:18766/mcp",
     });
     const cursorNext = upsertJsonMcpConfig(cursorExisting, {
-      command: "npm",
-      args: ["--prefix", "/tmp/judgmentkit", "run", "mcp:stdio"],
+      url: "http://127.0.0.1:18767/mcp",
     });
 
     expect(JSON.parse(claudeNext).mcpServers.other.command).toBe("node");
-    expect(JSON.parse(claudeNext).mcpServers.judgmentkit.args[1]).toBe("/tmp/judgmentkit");
+    expect(JSON.parse(claudeNext).mcpServers.judgmentkit.url).toBe("http://127.0.0.1:18766/mcp");
     expect(JSON.parse(cursorNext).mcpServers.other.command).toBe("node");
+    expect(JSON.parse(cursorNext).mcpServers.judgmentkit.url).toBe("http://127.0.0.1:18767/mcp");
     expect(JSON.parse(cursorNext).theme).toBe("dark");
   });
 
@@ -157,12 +155,14 @@ args = ["--prefix", "/tmp/new-judgmentkit", "run", "mcp:stdio"]`,
     const workspaceDir = await fs.mkdtemp(path.join(os.tmpdir(), "judgmentkit-workspace-"));
     const clients = ["codex", "claude", "cursor"] as const;
 
-    for (const client of clients) {
+    for (const [index, client] of clients.entries()) {
+      const port = 18_765 + index;
       const result = await installJudgmentKitMcp(
         {
           client,
           checkoutPath: process.cwd(),
           cwd: workspaceDir,
+          port,
         },
         {
           homeDir: () => homeDir,
@@ -172,10 +172,13 @@ args = ["--prefix", "/tmp/new-judgmentkit", "run", "mcp:stdio"]`,
 
       expect(result.wroteConfig).toBe(true);
       expect(result.verified).toBe(true);
-      expect(formatInstallerResult(result)).toContain("Manual fallback snippet:");
+      expect(result.endpoint).toBe(`http://127.0.0.1:${port}/mcp`);
+      expect(result.startCommand).toBe(`npm --prefix ${process.cwd()} run mcp:local`);
+      expect(result.bridgeFallbackSnippet).toContain("mcp-remote");
+      expect(formatInstallerResult(result)).toContain("Bridge fallback snippet");
       const writtenConfig = await fs.readFile(result.configPath, "utf8");
       expect(writtenConfig).toContain("judgmentkit");
-      expect(writtenConfig).toContain(process.cwd());
+      expect(writtenConfig).toContain(`http://127.0.0.1:${port}/mcp`);
     }
   });
 
@@ -199,8 +202,11 @@ args = ["--prefix", "/tmp/new-judgmentkit", "run", "mcp:stdio"]`,
     expect(stderr).toBe("");
     expect(stdout).toContain("JudgmentKit installer prepared client: codex");
     expect(stdout).toContain(`Checkout path: ${path.join(homeDir, "judgmentkit")}`);
+    expect(stdout).toContain("Endpoint: http://127.0.0.1:8765/mcp");
+    expect(stdout).toContain(`Start local MCP: npm --prefix ${path.join(homeDir, "judgmentkit")} run mcp:local`);
     expect(stdout).toContain("Mode: dry-run/manual");
-    expect(stdout).toContain("Manual fallback snippet:");
+    expect(stdout).toContain("Config snippet:");
+    expect(stdout).toContain("Bridge fallback snippet");
     expect(stdout).not.toContain("MODULE_NOT_FOUND");
   });
 });
diff --git a/tests/landing-page.test.ts b/tests/landing-page.test.ts
index 2b21668..165c0da 100644
--- a/tests/landing-page.test.ts
+++ b/tests/landing-page.test.ts
@@ -34,7 +34,7 @@ describe("landing page", () => {
       "curl -fsSL https://judgmentkit.ai/install | bash -s -- --client <codex|claude|cursor>",
     );
     expect(content.verify_prompt).toBe(
-      "Call MCP tools/list against the local judgmentkit server",
+      "Start the local JudgmentKit loopback server, then call MCP tools/list against http://127.0.0.1:8765/mcp",
     );
   });
 
@@ -60,7 +60,8 @@ describe("landing page", () => {
     expect(markup).toContain(
       "curl -fsSL https://judgmentkit.ai/install | bash -s -- --client codex",
     );
-    expect(markup).toContain("Call MCP tools/list against the local judgmentkit server");
+    expect(markup).toContain("Start the local JudgmentKit loopback server");
+    expect(markup).toContain("http://127.0.0.1:8765/mcp");
     expect(markup).not.toContain("Manual fallback");
     expect(markup).not.toContain("through MCP");
     expect(markup).not.toContain("~/.codex/config.toml");
diff --git a/tests/mcp-local.test.ts b/tests/mcp-local.test.ts
new file mode 100644
index 0000000..7ed8b6b
--- /dev/null
+++ b/tests/mcp-local.test.ts
@@ -0,0 +1,99 @@
+import { spawn } from "node:child_process";
+
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
+import { describe, expect, it } from "vitest";
+
+import { listTools } from "@/lib/mcp";
+
+function withTimeout<T>(promise: Promise<T>, timeoutMs: number) {
+  return Promise.race([
+    promise,
+    new Promise<T>((_, reject) => {
+      setTimeout(() => reject(new Error(`Timed out after ${timeoutMs}ms.`)), timeoutMs);
+    }),
+  ]);
+}
+
+async function waitForMetadata(url: string) {
+  const startedAt = Date.now();
+  let lastError: unknown;
+
+  while (Date.now() - startedAt < 10_000) {
+    try {
+      const response = await fetch(url);
+      if (response.ok) {
+        return;
+      }
+      lastError = new Error(`Metadata returned ${response.status}.`);
+    } catch (error) {
+      lastError = error;
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  }
+
+  throw lastError instanceof Error ? lastError : new Error(String(lastError));
+}
+
+describe("local loopback MCP server", () => {
+  it("serves metadata, Streamable HTTP tools/list, and local 404s", async () => {
+    const port = 19_765 + Math.floor(Math.random() * 1_000);
+    const endpoint = `http://127.0.0.1:${port}/mcp`;
+    const root = `http://127.0.0.1:${port}/`;
+    const stderrOutput: string[] = [];
+
+    const child = spawn("npm", ["--prefix", process.cwd(), "run", "mcp:local"], {
+      cwd: process.cwd(),
+      env: {
+        ...process.env,
+        JUDGMENTKIT_MCP_HOST: "127.0.0.1",
+        JUDGMENTKIT_MCP_PORT: String(port),
+      },
+      stdio: ["ignore", "ignore", "pipe"],
+    });
+
+    child.stderr.on("data", (chunk: Buffer | string) => {
+      stderrOutput.push(chunk.toString());
+    });
+
+    try {
+      await waitForMetadata(root);
+
+      const rootMetadata = await fetch(root).then((response) => response.json());
+      expect(rootMetadata.transport).toBe("local-loopback-http");
+
+      const mcpMetadata = await fetch(endpoint, {
+        headers: {
+          accept: "application/json",
+        },
+      }).then((response) => response.json());
+      expect(mcpMetadata.transport).toBe("local-loopback-http");
+
+      const missing = await fetch(`http://127.0.0.1:${port}/wrong`);
+      expect(missing.status).toBe(404);
+
+      const transport = new StreamableHTTPClientTransport(new URL(endpoint));
+      const client = new Client({
+        name: "judgmentkit-local-loopback-test",
+        version: "1.0.0",
+      });
+
+      try {
+        await withTimeout(client.connect(transport), 5_000);
+        const tools = await withTimeout(client.listTools(), 5_000);
+        expect(tools.tools.map((tool) => tool.name)).toEqual(
+          listTools().map((tool) => tool.name),
+        );
+      } finally {
+        await transport.close();
+      }
+    } catch (error) {
+      throw new Error(
+        `Local loopback MCP test failed: ${String(error)}\n${stderrOutput.join("")}`,
+      );
+    } finally {
+      child.kill();
+    }
+  });
+});
diff --git a/tests/mcp-route.test.ts b/tests/mcp-route.test.ts
index 73efaec..11c00d4 100644
--- a/tests/mcp-route.test.ts
+++ b/tests/mcp-route.test.ts
@@ -1,9 +1,7 @@
 import { describe, expect, it } from "vitest";
 
 import { GET, POST } from "@/app/mcp/route";
-
-const GENERIC_START_DESIGN_WORKFLOW_PROMPT =
-  'Use JudgmentKit for this design task. Call get_workflow_bundle({ workflow_id: "workflow.ai-ui-generation" }) first. Treat any referenced design system as the source of truth for components, tokens, radius, elevation, surfaces, and theme behavior. If a design system is present, ask whether it has an accessibility baseline or owner-approved review status before generating UI; if that status is unknown, pause and ask first. If the brief conflicts with the design system, surface review questions and escalation items instead of silently overriding it. Only when the design system and the brief are both silent, use restrained fallback defaults: approved primitives, a tight 6px radius scale, no decorative gradients, no gratuitous shadows, and both light and dark mode by default. If the interface includes code blocks, inline viewers, inspectors, or artifact panels, also call get_resource({ id: "guardrail.surface-theme-parity" }) and use get_example({ id: "example.ui-generation.surface-theme-parity-drift" }) as calibration so those surfaces stay inside the active light/dark theme model instead of defaulting to a dark terminal treatment. Keep local controls inside or directly adjacent to the surface they govern so ownership stays obvious. Keep runtime bounded and surface review questions before inventing new patterns.';
+import { getPrompt } from "@/lib/mcp";
 
 async function postJsonRpc(payload: Record<string, unknown>) {
   const request = new Request("http://localhost:3002/mcp", {
@@ -55,6 +53,22 @@ describe("mcp route prompts", () => {
     ).toBe(true);
   });
 
+  it("lists the no-design-system starter prompt", async () => {
+    const result = await postJsonRpc({
+      jsonrpc: "2.0",
+      id: 10,
+      method: "prompts/list",
+    });
+
+    expect(result.error).toBeUndefined();
+    expect(
+      result.result.prompts.some(
+        (prompt: { name: string }) =>
+          prompt.name === "start_no_design_system_workflow",
+      ),
+    ).toBe(true);
+  });
+
   it("returns the generic start_design_workflow prompt when no arguments are provided", async () => {
     const result = await postJsonRpc({
       jsonrpc: "2.0",
@@ -67,9 +81,12 @@ describe("mcp route prompts", () => {
     });
 
     expect(result.error).toBeUndefined();
-    expect(result.result.messages[0].content.text).toBe(
-      GENERIC_START_DESIGN_WORKFLOW_PROMPT,
-    );
+    const directPrompt = getPrompt("start_design_workflow");
+    expect("error" in directPrompt).toBe(false);
+    if ("error" in directPrompt) {
+      return;
+    }
+    expect(result.result.messages[0].content.text).toBe(directPrompt.template);
   });
 
   it("returns a task-specific start_design_workflow prompt when feature_intent is provided", async () => {
@@ -92,6 +109,18 @@ describe("mcp route prompts", () => {
     expect(result.result.messages[0].content.text).toContain(
       'get_workflow_bundle({ workflow_id: "workflow.ai-ui-generation", feature_intent: "Generate the JudgmentKit.com landing page" })',
     );
+    expect(result.result.messages[0].content.text).toContain(
+      "constraint-pack.ai-ui-no-design-system",
+    );
+    expect(result.result.messages[0].content.text).toContain(
+      "guideline-profile.ai-ui-generation-authority",
+    );
+    expect(result.result.messages[0].content.text).toContain(
+      "guardrail.surface-mode-structure",
+    );
+    expect(result.result.messages[0].content.text).toContain(
+      "example.ui-generation.mode-structure-drift",
+    );
   });
 
   it("returns the refinement prompt when the required arguments are provided", async () => {
@@ -122,6 +151,21 @@ describe("mcp route prompts", () => {
     expect(result.result.messages[0].content.text).toContain(
       'get_resource({ id: "guardrail.ui-copy-clarity" })',
     );
+    expect(result.result.messages[0].content.text).toContain(
+      'get_resource({ id: "guardrail.spec-completeness" })',
+    );
+    expect(result.result.messages[0].content.text).toContain(
+      'get_resource({ id: "guardrail.surface-mode-structure" })',
+    );
+    expect(result.result.messages[0].content.text).toContain(
+      'get_resource({ id: "guardrail.visual-planning-contract" })',
+    );
+    expect(result.result.messages[0].content.text).toContain(
+      'get_resource({ id: "guardrail.frontend-output-contract" })',
+    );
+    expect(result.result.messages[0].content.text).toContain(
+      'get_example({ id: "example.ui-generation.visual-planning-gap" })',
+    );
     expect(result.result.messages[0].content.text).toContain(
       'get_example({ id: "example.ui-generation.repetitive-copy-drift" })',
     );
@@ -137,6 +181,24 @@ describe("mcp route prompts", () => {
     expect(result.result.messages[0].content.text).toContain(
       'get_example({ id: "example.ui-generation.surface-theme-parity-drift" })',
     );
+    expect(result.result.messages[0].content.text).toContain(
+      'get_example({ id: "example.ui-generation.token-vagueness-drift" })',
+    );
+    expect(result.result.messages[0].content.text).toContain(
+      'get_example({ id: "example.ui-generation.component-mapping-name-only-drift" })',
+    );
+    expect(result.result.messages[0].content.text).toContain(
+      'get_example({ id: "example.ui-generation.non-reusable-recipe-drift" })',
+    );
+    expect(result.result.messages[0].content.text).toContain(
+      'get_example({ id: "example.ui-generation.missing-accessibility-api-drift" })',
+    );
+    expect(result.result.messages[0].content.text).toContain(
+      'get_example({ id: "example.ui-generation.hand-authored-preview-drift" })',
+    );
+    expect(result.result.messages[0].content.text).toContain(
+      'get_example({ id: "example.ui-generation.theme-binding-recipe-drift" })',
+    );
     expect(result.result.messages[0].content.text).toContain(
       "accessibility baseline or owner-approved review status",
     );
diff --git a/tests/mcp.test.ts b/tests/mcp.test.ts
index 2bcb559..7960123 100644
--- a/tests/mcp.test.ts
+++ b/tests/mcp.test.ts
@@ -11,9 +11,6 @@ import {
   setPublicDirOverrideForTests,
 } from "@/lib/mcp";
 
-const GENERIC_START_DESIGN_WORKFLOW_PROMPT =
-  'Use JudgmentKit for this design task. Call get_workflow_bundle({ workflow_id: "workflow.ai-ui-generation" }) first. Treat any referenced design system as the source of truth for components, tokens, radius, elevation, surfaces, and theme behavior. If a design system is present, ask whether it has an accessibility baseline or owner-approved review status before generating UI; if that status is unknown, pause and ask first. If the brief conflicts with the design system, surface review questions and escalation items instead of silently overriding it. Only when the design system and the brief are both silent, use restrained fallback defaults: approved primitives, a tight 6px radius scale, no decorative gradients, no gratuitous shadows, and both light and dark mode by default. If the interface includes code blocks, inline viewers, inspectors, or artifact panels, also call get_resource({ id: "guardrail.surface-theme-parity" }) and use get_example({ id: "example.ui-generation.surface-theme-parity-drift" }) as calibration so those surfaces stay inside the active light/dark theme model instead of defaulting to a dark terminal treatment. Keep local controls inside or directly adjacent to the surface they govern so ownership stays obvious. Keep runtime bounded and surface review questions before inventing new patterns.';
-
 describe("mcp tools", () => {
   afterEach(() => {
     setPublicDirOverrideForTests();
@@ -27,7 +24,38 @@ describe("mcp tools", () => {
       return;
     }
 
-    expect(result.resources).toHaveLength(8);
+    expect(result.resources).toHaveLength(13);
+  });
+
+  it("lists constraint pack resources", async () => {
+    const result = await handleToolCall("list_resources", {
+      type: "constraint_pack",
+    });
+
+    expect("error" in result).toBe(false);
+    if ("error" in result) {
+      return;
+    }
+
+    expect(result.resources).toHaveLength(1);
+    expect(result.resources[0]?.id).toBe("constraint-pack.ai-ui-no-design-system");
+  });
+
+  it("lists guideline profile resources", async () => {
+    const result = await handleToolCall("list_resources", {
+      type: "guideline_profile",
+    });
+
+    expect("error" in result).toBe(false);
+    if ("error" in result) {
+      return;
+    }
+
+    expect(result.resources).toHaveLength(2);
+    expect(result.resources.map((resource) => resource.id)).toEqual([
+      "guideline-profile.ai-ui-generation-authority",
+      "guideline-profile.ai-ui-review-checks",
+    ]);
   });
 
   it("returns markdown mirrors for docs pages", async () => {
@@ -55,7 +83,47 @@ describe("mcp tools", () => {
 
     expect(result.bundle.workflow.id).toBe("workflow.ai-ui-generation");
     expect(result.bundle.guardrails.length).toBeGreaterThan(0);
+    expect(result.bundle.constraint_packs).toHaveLength(1);
+    expect(result.bundle.guideline_profiles).toHaveLength(2);
     expect(result.bundle.examples.length).toBeGreaterThan(0);
+    expect(result.bundle.constraint_packs[0].id).toBe(
+      "constraint-pack.ai-ui-no-design-system",
+    );
+    expect(result.bundle.guideline_profiles[0].id).toBe(
+      "guideline-profile.ai-ui-generation-authority",
+    );
+    expect(result.bundle.guideline_profiles[1].id).toBe(
+      "guideline-profile.ai-ui-review-checks",
+    );
+    expect(
+      result.bundle.guardrails.some(
+        (guardrail: { id: string }) => guardrail.id === "guardrail.spec-completeness",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.guardrails.some(
+        (guardrail: { id: string }) =>
+          guardrail.id === "guardrail.surface-mode-structure",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.guardrails.some(
+        (guardrail: { id: string }) =>
+          guardrail.id === "guardrail.visual-planning-contract",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.guardrails.some(
+        (guardrail: { id: string }) =>
+          guardrail.id === "guardrail.motion-media-purpose",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.guardrails.some(
+        (guardrail: { id: string }) =>
+          guardrail.id === "guardrail.frontend-output-contract",
+      ),
+    ).toBe(true);
     expect(
       result.bundle.examples.some(
         (example: { id: string }) =>
@@ -68,6 +136,30 @@ describe("mcp tools", () => {
           example.id === "example.ui-generation.embellishment-drift",
       ),
     ).toBe(true);
+    expect(
+      result.bundle.examples.some(
+        (example: { id: string }) =>
+          example.id === "example.ui-generation.mode-structure-drift",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.examples.some(
+        (example: { id: string }) =>
+          example.id === "example.ui-generation.visual-planning-gap",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.examples.some(
+        (example: { id: string }) =>
+          example.id === "example.ui-generation.motion-media-drift",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.examples.some(
+        (example: { id: string }) =>
+          example.id === "example.ui-generation.output-contract-gap",
+      ),
+    ).toBe(true);
     expect(
       result.bundle.examples.some(
         (example: { id: string }) =>
@@ -86,6 +178,60 @@ describe("mcp tools", () => {
           example.id === "example.ui-generation.surface-theme-parity-drift",
       ),
     ).toBe(true);
+    expect(
+      result.bundle.examples.some(
+        (example: { id: string }) =>
+          example.id === "example.ui-generation.token-vagueness-drift",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.examples.some(
+        (example: { id: string }) =>
+          example.id === "example.ui-generation.primitive-sprawl-drift",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.examples.some(
+        (example: { id: string }) =>
+          example.id === "example.ui-generation.shallow-handoff-drift",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.examples.some(
+        (example: { id: string }) =>
+          example.id === "example.ui-generation.state-coverage-drift",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.examples.some(
+        (example: { id: string }) =>
+          example.id === "example.ui-generation.component-mapping-name-only-drift",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.examples.some(
+        (example: { id: string }) =>
+          example.id === "example.ui-generation.non-reusable-recipe-drift",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.examples.some(
+        (example: { id: string }) =>
+          example.id === "example.ui-generation.missing-accessibility-api-drift",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.examples.some(
+        (example: { id: string }) =>
+          example.id === "example.ui-generation.hand-authored-preview-drift",
+      ),
+    ).toBe(true);
+    expect(
+      result.bundle.examples.some(
+        (example: { id: string }) =>
+          example.id === "example.ui-generation.theme-binding-recipe-drift",
+      ),
+    ).toBe(true);
     expect(result.bundle.starter_instructions).toContain(
       "design system as the source of truth",
     );
@@ -93,8 +239,18 @@ describe("mcp tools", () => {
       "accessibility baseline or owner-approved review status",
     );
     expect(result.bundle.starter_instructions).toContain(
-      "tight 6px radius scale",
+      "constraint-pack.ai-ui-no-design-system",
     );
+    expect(result.bundle.starter_instructions).toContain(
+      "guideline-profile.ai-ui-generation-authority",
+    );
+    expect(result.bundle.starter_instructions).toContain(
+      "guardrail.surface-mode-structure",
+    );
+    expect(result.bundle.starter_instructions).toContain(
+      "example.ui-generation.mode-structure-drift",
+    );
+    expect(result.bundle.starter_instructions).toContain("Visual Thesis");
     expect(result.bundle.starter_instructions).toContain(
       "Keep headings, labels, helper text, and CTA copy distinct in role.",
     );
@@ -107,6 +263,15 @@ describe("mcp tools", () => {
     expect(result.bundle.starter_instructions).toContain(
       "example.ui-generation.surface-theme-parity-drift",
     );
+    expect(result.bundle.starter_instructions).toContain(
+      "design_system_bindings, component_recipes, screen_composition, state_coverage, theme_contract, accessibility_contract, escalation_items",
+    );
+    expect(result.bundle.starter_instructions).toContain(
+      "token_spec, component_recipes, screen_composition, state_coverage, theme_contract, accessibility_contract, escalation_items",
+    );
+    expect(result.bundle.starter_instructions).toContain(
+      "guardrail.spec-completeness",
+    );
   });
 
   it("returns the designer starter prompt", () => {
@@ -117,7 +282,47 @@ describe("mcp tools", () => {
       return;
     }
 
-    expect(prompt.template).toBe(GENERIC_START_DESIGN_WORKFLOW_PROMPT);
+    expect(prompt.template).toContain(
+      'Call get_workflow_bundle({ workflow_id: "workflow.ai-ui-generation" }) first.',
+    );
+    expect(prompt.template).toContain(
+      "constraint-pack.ai-ui-no-design-system",
+    );
+    expect(prompt.template).toContain(
+      "guideline-profile.ai-ui-generation-authority",
+    );
+    expect(prompt.template).toContain(
+      "guardrail.surface-mode-structure",
+    );
+    expect(prompt.template).toContain(
+      "example.ui-generation.visual-planning-gap",
+    );
+    expect(prompt.template).toContain(
+      "design_system_bindings, component_recipes, screen_composition, state_coverage, theme_contract, accessibility_contract, escalation_items",
+    );
+  });
+
+  it("returns the no-design-system starter prompt", () => {
+    const prompt = getPrompt("start_no_design_system_workflow");
+
+    expect("error" in prompt).toBe(false);
+    if ("error" in prompt) {
+      return;
+    }
+
+    expect(prompt.template).toContain(
+      "Use JudgmentKit for this no-design-system design task.",
+    );
+    expect(prompt.template).toContain(
+      "Assume the portable JudgmentKit constraint pack is the only approved authority",
+    );
+    expect(prompt.template).toContain(
+      "guideline-profile.ai-ui-generation-authority",
+    );
+    expect(prompt.template).toContain(
+      "guardrail.frontend-output-contract",
+    );
+    expect(prompt.template).toContain("guardrail.spec-completeness");
   });
 
   it("renders a task-specific design workflow prompt when feature_intent is provided", () => {
@@ -140,6 +345,11 @@ describe("mcp tools", () => {
     expect(prompt.template).toContain(
       "example.ui-generation.surface-theme-parity-drift",
     );
+    expect(prompt.template).toContain("guardrail.spec-completeness");
+    expect(prompt.template).toContain("guardrail.surface-mode-structure");
+    expect(prompt.template).toContain(
+      "example.ui-generation.output-contract-gap",
+    );
     expect(prompt.template).not.toContain("ignored_arg");
   });
 
@@ -167,7 +377,13 @@ describe("mcp tools", () => {
       "design system",
     );
     expect(result.bundle.starter_instructions).toContain(
-      "tight 6px radius scale",
+      "constraint-pack.ai-ui-no-design-system",
+    );
+    expect(result.bundle.starter_instructions).toContain(
+      "guideline-profile.ai-ui-review-checks",
+    );
+    expect(result.bundle.starter_instructions).toContain(
+      "guardrail.motion-media-purpose",
     );
     expect(result.bundle.starter_instructions).toContain(
       "Collapse near-duplicate UI copy before adding more language.",
@@ -178,6 +394,9 @@ describe("mcp tools", () => {
     expect(result.bundle.starter_instructions).toContain(
       "guardrail.surface-theme-parity",
     );
+    expect(result.bundle.starter_instructions).toContain(
+      "token_spec, component_recipes, screen_composition, state_coverage, theme_contract, accessibility_contract, escalation_items",
+    );
     expect(prompt.template).toContain(featureIntent);
   });
 
@@ -230,6 +449,33 @@ describe("mcp tools", () => {
     expect(prompt.template).toContain(
       'get_resource({ id: "guardrail.brand-tone" })',
     );
+    expect(prompt.template).toContain(
+      'get_resource({ id: "guardrail.spec-completeness" })',
+    );
+    expect(prompt.template).toContain(
+      'get_resource({ id: "guardrail.surface-mode-structure" })',
+    );
+    expect(prompt.template).toContain(
+      'get_resource({ id: "guardrail.visual-planning-contract" })',
+    );
+    expect(prompt.template).toContain(
+      'get_resource({ id: "guardrail.motion-media-purpose" })',
+    );
+    expect(prompt.template).toContain(
+      'get_resource({ id: "guardrail.frontend-output-contract" })',
+    );
+    expect(prompt.template).toContain(
+      'get_example({ id: "example.ui-generation.mode-structure-drift" })',
+    );
+    expect(prompt.template).toContain(
+      'get_example({ id: "example.ui-generation.visual-planning-gap" })',
+    );
+    expect(prompt.template).toContain(
+      'get_example({ id: "example.ui-generation.motion-media-drift" })',
+    );
+    expect(prompt.template).toContain(
+      'get_example({ id: "example.ui-generation.output-contract-gap" })',
+    );
     expect(prompt.template).toContain(
       'get_example({ id: "example.ui-generation.onboarding-clarity-drift" })',
     );
@@ -254,12 +500,42 @@ describe("mcp tools", () => {
     expect(prompt.template).toContain(
       'get_example({ id: "example.ui-generation.surface-theme-parity-drift" })',
     );
+    expect(prompt.template).toContain(
+      'get_example({ id: "example.ui-generation.token-vagueness-drift" })',
+    );
+    expect(prompt.template).toContain(
+      'get_example({ id: "example.ui-generation.primitive-sprawl-drift" })',
+    );
+    expect(prompt.template).toContain(
+      'get_example({ id: "example.ui-generation.shallow-handoff-drift" })',
+    );
+    expect(prompt.template).toContain(
+      'get_example({ id: "example.ui-generation.state-coverage-drift" })',
+    );
+    expect(prompt.template).toContain(
+      'get_example({ id: "example.ui-generation.component-mapping-name-only-drift" })',
+    );
+    expect(prompt.template).toContain(
+      'get_example({ id: "example.ui-generation.non-reusable-recipe-drift" })',
+    );
+    expect(prompt.template).toContain(
+      'get_example({ id: "example.ui-generation.missing-accessibility-api-drift" })',
+    );
+    expect(prompt.template).toContain(
+      'get_example({ id: "example.ui-generation.hand-authored-preview-drift" })',
+    );
+    expect(prompt.template).toContain(
+      'get_example({ id: "example.ui-generation.theme-binding-recipe-drift" })',
+    );
     expect(prompt.template).toContain(
       "accessibility baseline or owner-approved review status",
     );
     expect(prompt.template).toContain("pause and ask first");
     expect(prompt.template).toContain("place the conflict under escalate");
     expect(prompt.template).toContain("keep, fix_now, escalate, v2_brief, v2_generation_prompt, review_checklist");
+    expect(prompt.template).toContain(
+      "The v2_generation_prompt must require exactly these no-design-system output sections",
+    );
     expect(prompt.template).not.toContain("Must keep:");
     expect(prompt.template).not.toContain("Known issues:");
   });
@@ -292,12 +568,36 @@ describe("mcp tools", () => {
       return;
     }
 
+    expect(
+      result.related.resources.some(
+        (resource: { id: string }) =>
+          resource.id === "constraint-pack.ai-ui-no-design-system",
+      ),
+    ).toBe(true);
+    expect(
+      result.related.resources.some(
+        (resource: { id: string }) =>
+          resource.id === "guideline-profile.ai-ui-generation-authority",
+      ),
+    ).toBe(true);
     expect(
       result.related.resources.some(
         (resource: { id: string }) =>
           resource.id === "guardrail.design-system-integrity",
       ),
     ).toBe(true);
+    expect(
+      result.related.resources.some(
+        (resource: { id: string }) =>
+          resource.id === "guardrail.spec-completeness",
+      ),
+    ).toBe(true);
+    expect(
+      result.related.resources.some(
+        (resource: { id: string }) =>
+          resource.id === "guardrail.surface-mode-structure",
+      ),
+    ).toBe(true);
     expect(
       result.related.resources.some(
         (resource: { id: string }) =>
@@ -340,6 +640,18 @@ describe("mcp tools", () => {
           resource.id === "example.ui-generation.surface-theme-parity-drift",
       ),
     ).toBe(true);
+    expect(
+      result.related.resources.some(
+        (resource: { id: string }) =>
+          resource.id === "example.ui-generation.token-vagueness-drift",
+      ),
+    ).toBe(true);
+    expect(
+      result.related.resources.some(
+        (resource: { id: string }) =>
+          resource.id === "example.ui-generation.mode-structure-drift",
+      ),
+    ).toBe(true);
     expect(result.related.resources.length).toBeGreaterThan(0);
   });
 
@@ -390,6 +702,6 @@ describe("mcp tools", () => {
     expect(workflowResult.error.code).toBe("generated_artifacts_missing");
     expect(relatedResult.error.code).toBe("generated_artifacts_missing");
     expect(workflowResult.error.message).toContain("public/graph.json");
-    expect(relatedResult.error.suggested_action).toContain("restart the stdio server");
+    expect(relatedResult.error.suggested_action).toContain("restart the local MCP server");
   });
 });
diff --git a/tests/product-surface.test.ts b/tests/product-surface.test.ts
index e260485..6bfeccd 100644
--- a/tests/product-surface.test.ts
+++ b/tests/product-surface.test.ts
@@ -17,7 +17,8 @@ import {
   LOCAL_JUDGMENTKIT_CHECKOUT_PLACEHOLDER,
   LOCAL_JUDGMENTKIT_INSTALL_COMMAND,
   LOCAL_JUDGMENTKIT_INSTALLER_COMMAND,
-  LOCAL_JUDGMENTKIT_STDIO_ARGS,
+  LOCAL_JUDGMENTKIT_MCP_LOCAL_COMMAND,
+  LOCAL_MCP_DEFAULT_URL,
 } from "@/lib/constants";
 import { loadInstallContract } from "@/lib/install-contract";
 import { listPrompts, listTools } from "@/lib/mcp";
@@ -25,7 +26,7 @@ import { loadProductSurface } from "@/lib/product-surface";
 import rawExampleArtifact from "@/public/resources/examples/ui-generation-drift.v1.json";
 
 describe("product surface content", () => {
-  it("defines stdio install targets and the derived loaded context", () => {
+  it("defines HTTP install targets and the derived loaded context", () => {
     const content = loadProductSurface();
 
     expect(content.install_targets.map((target) => target.id)).toEqual([
@@ -52,7 +53,15 @@ describe("product surface content", () => {
     ]);
     expect(content.loaded_context.map((item) => item.id)).toEqual([
       "workflow.ai-ui-generation",
+      "constraint-pack.ai-ui-no-design-system",
+      "guideline-profile.ai-ui-generation-authority",
+      "guideline-profile.ai-ui-review-checks",
       "guardrail.design-system-integrity",
+      "guardrail.spec-completeness",
+      "guardrail.surface-mode-structure",
+      "guardrail.visual-planning-contract",
+      "guardrail.motion-media-purpose",
+      "guardrail.frontend-output-contract",
       "guardrail.ui-copy-clarity",
       "guardrail.control-proximity",
       "guardrail.surface-theme-parity",
@@ -60,10 +69,23 @@ describe("product surface content", () => {
       "guardrail.provenance-escalation",
       "example.ui-generation.component-drift",
       "example.ui-generation.embellishment-drift",
+      "example.ui-generation.mode-structure-drift",
+      "example.ui-generation.visual-planning-gap",
+      "example.ui-generation.motion-media-drift",
+      "example.ui-generation.output-contract-gap",
       "example.ui-generation.onboarding-clarity-drift",
       "example.ui-generation.repetitive-copy-drift",
       "example.ui-generation.control-proximity-drift",
       "example.ui-generation.surface-theme-parity-drift",
+      "example.ui-generation.token-vagueness-drift",
+      "example.ui-generation.primitive-sprawl-drift",
+      "example.ui-generation.shallow-handoff-drift",
+      "example.ui-generation.state-coverage-drift",
+      "example.ui-generation.component-mapping-name-only-drift",
+      "example.ui-generation.non-reusable-recipe-drift",
+      "example.ui-generation.missing-accessibility-api-drift",
+      "example.ui-generation.hand-authored-preview-drift",
+      "example.ui-generation.theme-binding-recipe-drift",
     ]);
   });
 
@@ -72,7 +94,7 @@ describe("product surface content", () => {
 
     expect(content.install_command).toBe(HOSTED_JUDGMENTKIT_BOOTSTRAP_COMMAND);
     expect(content.verify_prompt).toBe(
-      "Call MCP tools/list against the local judgmentkit server",
+      "Start the local JudgmentKit loopback server, then call MCP tools/list against http://127.0.0.1:8765/mcp",
     );
   });
 
@@ -91,8 +113,18 @@ describe("product surface content", () => {
       install_command: LOCAL_JUDGMENTKIT_INSTALL_COMMAND,
     });
     expect(contract.connection).toEqual({
-      command: "npm",
-      args: LOCAL_JUDGMENTKIT_STDIO_ARGS,
+      transport: "http",
+      url: LOCAL_MCP_DEFAULT_URL,
+      loopback_runtime: {
+        start_command: LOCAL_JUDGMENTKIT_MCP_LOCAL_COMMAND,
+        host: "127.0.0.1",
+        port: 8765,
+        endpoint: "/mcp",
+        env_overrides: {
+          host: "JUDGMENTKIT_MCP_HOST",
+          port: "JUDGMENTKIT_MCP_PORT",
+        },
+      },
     });
     expect(contract.supported_clients).toEqual(["codex", "claude", "cursor"]);
     expect(contract.clients).toEqual([
@@ -117,9 +149,12 @@ describe("product surface content", () => {
     ]);
     expect(contract.clients[0]).not.toHaveProperty("config_snippet");
     expect(contract.clients[0]).not.toHaveProperty("install_note");
-    expect(contract.clients[0]).not.toHaveProperty("transport");
     expect(contract.verification.method).toBe("tools/list");
     expect(contract.verification.server_name).toBe("judgmentkit");
+    expect(contract.verification.endpoint).toBe(LOCAL_MCP_DEFAULT_URL);
+    expect(contract.verification.start_command).toBe(
+      LOCAL_JUDGMENTKIT_MCP_LOCAL_COMMAND,
+    );
     expect(contract.verification.instructions).toContain("tools/list");
     expect(contract.verification.expected_tools).toEqual(
       listTools().map((tool) => tool.name),
@@ -176,6 +211,12 @@ describe("product surface content", () => {
     const exampleItem = content.inspect_primary_items.find(
       (item) => item.id === "example.ui-generation.embellishment-drift",
     );
+    const constraintPackItem = content.inspect_primary_items.find(
+      (item) => item.id === "constraint-pack.ai-ui-no-design-system",
+    );
+    const guidelineProfileItem = content.inspect_primary_items.find(
+      (item) => item.id === "guideline-profile.ai-ui-generation-authority",
+    );
     const installScriptItem = content.inspect_reference_items.find((item) => item.url === "/install");
 
     expect(content.inspect_primary_items[0]?.id).toBe(
@@ -188,6 +229,22 @@ describe("product surface content", () => {
     });
     expect(workflowItem?.prompt_text).toContain('Use JudgmentKit workflow "AI UI generation"');
     expect(workflowItem?.prompt_text).toContain("Task:");
+    expect(constraintPackItem).toMatchObject({
+      category: "Constraint packs",
+      available_view_modes: ["prompt", "json", "schema"],
+      default_view_mode: "prompt",
+    });
+    expect(constraintPackItem?.prompt_text).toContain(
+      'Use JudgmentKit constraint pack "Portable no-design-system implementation authority"',
+    );
+    expect(guidelineProfileItem).toMatchObject({
+      category: "Guideline profiles",
+      available_view_modes: ["prompt", "json", "schema"],
+      default_view_mode: "prompt",
+    });
+    expect(guidelineProfileItem?.prompt_text).toContain(
+      'Use JudgmentKit guideline profile "AI UI generation authority rules"',
+    );
     expect(guardrailItem?.prompt_text).toContain("Apply JudgmentKit guardrail");
     expect(guardrailItem?.prompt_text).toContain("Draft:");
     expect(exampleItem?.prompt_text).toContain("Use JudgmentKit example");
@@ -219,6 +276,8 @@ describe("product surface content", () => {
     expect(markup).toContain("inspect-browser-shell");
     expect(markup).toContain(">Examples<");
     expect(markup).toContain(">Workflows<");
+    expect(markup).toContain(">Constraint packs<");
+    expect(markup).toContain(">Guideline profiles<");
     expect(markup).toContain(">Guardrails<");
     expect(markup).toContain("Use JudgmentKit example");
     expect(markup).toContain("inspect-viewer-toolbar");
@@ -251,6 +310,9 @@ describe("product surface content", () => {
     expect(markup).not.toContain("Command inventory");
     expect(markup.indexOf(">Examples<")).toBeLessThan(markup.indexOf(">Workflows<"));
     expect(markup.indexOf(">Examples<")).toBeLessThan(markup.indexOf(">Guardrails<"));
+    expect(markup.indexOf(">Workflows<")).toBeLessThan(markup.indexOf(">Constraint packs<"));
+    expect(markup.indexOf(">Constraint packs<")).toBeLessThan(markup.indexOf(">Guideline profiles<"));
+    expect(markup.indexOf(">Guideline profiles<")).toBeLessThan(markup.indexOf(">Guardrails<"));
     expect(markup.indexOf("Zero-shot UI generation rewritten to design-system-first restrained output")).toBeLessThan(
       markup.indexOf("Landing page first pass rewritten for clearer onboarding"),
     );
diff --git a/tests/site-build.test.ts b/tests/site-build.test.ts
index e3a0c96..397effb 100644
--- a/tests/site-build.test.ts
+++ b/tests/site-build.test.ts
@@ -6,14 +6,28 @@ describe("site build data", () => {
   it("builds the expected MVP corpus", async () => {
     const site = await buildSiteData();
 
-    expect(site.pages).toHaveLength(23);
-    expect(site.resourceIndex.resources).toHaveLength(18);
-    expect(site.resourceIndex.schemas).toHaveLength(5);
+    expect(site.pages.length).toBeGreaterThanOrEqual(29);
+    expect(site.resourceIndex.resources.length).toBeGreaterThanOrEqual(24);
+    expect(site.resourceIndex.schemas.length).toBeGreaterThanOrEqual(6);
     expect(site.resourceIndex.resources[0]?.url).toMatch(/^https:\/\/judgmentkit\.ai\//);
     expect(site.resourceIndex.schemas[0]?.url).toMatch(/^https:\/\/judgmentkit\.ai\//);
+    expect(
+      site.resourceIndex.resources.some(
+        (resource) => resource.id === "guideline-profile.ai-ui-generation-authority",
+      ),
+    ).toBe(true);
+    expect(
+      site.resourceIndex.schemas.some((schema) =>
+        schema.url.endsWith("/schemas/guideline_profile.schema.json"),
+      ),
+    ).toBe(true);
     expect(site.llms).toContain("https://judgmentkit.ai/");
-    expect(site.mcpInventory.endpoint).toBe("https://judgmentkit.ai/mcp");
-    expect(site.mcpInventory.install_transport).toBe("stdio");
+    expect(site.mcpInventory.endpoint).toBe("http://127.0.0.1:8765/mcp");
+    expect(site.mcpInventory.hosted_reference_endpoint).toBe("https://judgmentkit.ai/mcp");
+    expect(site.mcpInventory.install_transport).toBe("http");
+    expect(site.mcpInventory.local_loopback_runtime.start_command).toBe(
+      "npm --prefix <ABSOLUTE_PATH_TO_LOCAL_JUDGMENTKIT_CHECKOUT> run mcp:local",
+    );
     expect(site.mcpInventory.command_reference_url).toBe(
       "https://judgmentkit.ai/inspect#commands",
     );
@@ -33,7 +47,7 @@ describe("site build data", () => {
       (page) => page.frontmatter.page_type === "guardrail",
     );
 
-    expect(guardrails).toHaveLength(8);
+    expect(guardrails).toHaveLength(13);
     for (const page of guardrails) {
       expect(page.frontmatter.workflows?.length).toBeGreaterThan(0);
       expect(page.frontmatter.related_resources.length).toBeGreaterThan(0);
diff --git a/tsconfig.json b/tsconfig.json
index afb3fe7..9e06f7a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,5 +19,5 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "artifacts"]
 }