@urbicon-ui/mcp-server 6.1.4

package/src/design-rubric/rubric.ts

@@ -0,0 +1,140 @@
+/**
+ * The design-quality scoring rubric — the qualitative half of the design loop
+ * (docs/DESIGN-MCP.md, step 3). Where `validate_design` answers "is it correct?"
+ * deterministically, the rubric answers "is it good?" through a judge.
+ *
+ * The eight criteria have been validated empirically against design-quality
+ * comparisons, scoring each 1–5 and summing to /40. Keeping the same instrument
+ * means new evaluations are directly comparable to that baseline. This is the
+ * SINGLE SOURCE for the criteria: the
+ * `get_design_principles(as="rubric")` tool renders it to Markdown, and the
+ * eval-suite (WP5) imports the same constants to score programmatically.
+ */
+
+export interface RubricCriterion {
+  id: string;
+  /** Display name for the criterion. */
+  name: string;
+  /** One line on what the criterion measures. */
+  measures: string;
+  /** Anchored descriptions for scores 1, 3 and 5 (the judge interpolates 2 and 4). */
+  anchors: { 1: string; 3: string; 5: string };
+}
+
+export const RUBRIC_CRITERIA: readonly RubricCriterion[] = [
+  {
+    id: 'distinctiveness',
+    name: 'Design Language Distinctiveness',
+    measures: 'Whether the page has its own visual identity or reads as a generic template.',
+    anchors: {
+      1: 'The most common layout imaginable — a Tailwind-UI starter with no personality.',
+      3: 'A few custom touches (one heading style, one composition) over conventional bones.',
+      5: 'A coherent, deliberate identity: custom compositions over default components, a consistent typographic voice, signature moments.'
+    }
+  },
+  {
+    id: 'color',
+    name: 'Color Scheme Coherence',
+    measures: 'Whether colour carries meaning or merely decorates.',
+    anchors: {
+      1: 'Decorative colour — a rainbow of intents; intent colours where neutral belongs.',
+      3: 'Intent mapping mostly correct, but some decorative or noisy colour remains.',
+      5: 'Neutral surfaces dominate (80–90%); intent colour appears only for genuine status, severity, or action.'
+    }
+  },
+  {
+    id: 'spacing',
+    name: 'Spacing Consistency',
+    measures: 'Whether spacing expresses hierarchy.',
+    anchors: {
+      1: 'One uniform rhythm everywhere (e.g. all `space-y-6`).',
+      3: 'Some variation, but no clear within-vs-between system.',
+      5: 'A clear two-tier rhythm (tight within items, generous between sections), with data-driven variation where it helps.'
+    }
+  },
+  {
+    id: 'radius',
+    name: 'Radius & Shape Language',
+    measures: 'Whether shape is a deliberate choice.',
+    anchors: {
+      1: 'Zero radius intent — component defaults only, no shape strategy.',
+      3: 'Some radius use, but inconsistent (mixed methods, no hierarchy).',
+      5: 'A deliberate radius hierarchy (e.g. hero > standard > compact) applied consistently via `class`/`slotClasses`.'
+    }
+  },
+  {
+    id: 'ux',
+    name: 'UX Pattern Originality',
+    measures: 'Whether interaction patterns go beyond the textbook.',
+    anchors: {
+      1: 'Textbook only — divider lists, stacked buttons, defaults throughout.',
+      3: 'A few genuine UX touches (a thoughtful empty state, a useful affordance).',
+      5: 'Creative, effective patterns that serve the content — original compositions, state-driven layout.'
+    }
+  },
+  {
+    id: 'hierarchy',
+    name: 'Visual Hierarchy',
+    measures: 'Whether the eye is guided to what matters.',
+    anchors: {
+      1: 'Everything equally weighted — nothing dominates; labels compete with data.',
+      3: 'Some dominance, but flat regions remain.',
+      5: 'Each section has one clearly dominant element; metadata is recessed; visual weight tracks importance.'
+    }
+  },
+  {
+    id: 'cohesion',
+    name: 'Overall Design Cohesion',
+    measures: 'Whether the page reads as one designed artifact.',
+    anchors: {
+      1: 'Cohesive only through sameness, or parts feel grafted on / disconnected.',
+      3: 'Mostly unified, with a section or two that drift.',
+      5: 'A single design DNA — consistent radius, typographic voice, and component logic tie the whole page together.'
+    }
+  },
+  {
+    id: 'correctness',
+    name: 'Technical Correctness',
+    measures: 'Whether the code is valid and uses real component APIs and design tokens.',
+    anchors: {
+      1: 'Hallucinated tokens, broken dynamic classes, or wrong component APIs — would not render as intended.',
+      3: 'Largely correct with a few token or API slips.',
+      5: 'Valid semantic tokens, correct Svelte 5 and component APIs, no broken classes. Anchor this with `validate_design` — a passing linter (0 errors/warnings) puts this at 4–5.'
+    }
+  }
+];
+
+export const MAX_RUBRIC_SCORE = RUBRIC_CRITERIA.length * 5;
+
+/** Render the rubric as Markdown for a judge (served by `get_design_principles(as="rubric")`). */
+export function renderRubric(): string {
+  let md = '# Design-Quality Rubric\n\n';
+  md += `Score a generated UI on each of the ${RUBRIC_CRITERIA.length} criteria from **1 to 5**, then sum to **/${MAX_RUBRIC_SCORE}**. `;
+  md +=
+    'For every score, cite specific evidence from the code (a class, a component, a layout choice) — a number without a reason is not a judgement.\n\n';
+  md += '**Before scoring, run `validate_design` on the code.** It deterministically catches the ';
+  md +=
+    'correctness failures (hallucinated tokens, broken dynamic classes) that a judge tends to miss, and it anchors the *Technical Correctness* criterion.\n\n';
+
+  for (const [i, c] of RUBRIC_CRITERIA.entries()) {
+    md += `## ${i + 1}. ${c.name}\n\n`;
+    md += `*${c.measures}*\n\n`;
+    md += `- **1** — ${c.anchors[1]}\n`;
+    md += `- **3** — ${c.anchors[3]}\n`;
+    md += `- **5** — ${c.anchors[5]}\n\n`;
+  }
+
+  md += '---\n\n';
+  md += '## Using the rubric\n\n';
+  md +=
+    '- **As a single judge:** score all criteria, sum to /' +
+    MAX_RUBRIC_SCORE +
+    ', and list the two lowest as the concrete revision targets.\n';
+  md +=
+    '- **As a panel (recommended for variant selection):** run one judge per *lens* — correctness, hierarchy, paradigm-fidelity, distinctiveness — rather than N identical judges. Diversity of lens catches failures redundancy cannot.\n';
+  md +=
+    '- **For N variants:** score each, pick the winner, then graft the best ideas from the runners-up before a final `validate_design` pass.\n';
+  md +=
+    '- **Reward deviation within the rules.** A safe, generic page should not outscore a distinctive one that stays inside the paradigm. Penalise AI-slop sameness on *Distinctiveness* and *UX Pattern Originality*.\n';
+  return md;
+}

package/src/eval/briefs.ts

@@ -0,0 +1,104 @@
+/**
+ * The eval-suite design briefs — the standing benchmark for "does a change to the
+ * design layers actually improve generation, or just lengthen the context?"
+ * (docs/DESIGN-MCP.md, cross-cutting eval). Systematises earlier one-off
+ * design-quality comparisons into a repeatable set.
+ *
+ * Each brief is generated under two conditions (baseline vs. design-MCP loop),
+ * then scored by `scoreImplementation` (deterministic linter) and the judge
+ * rubric (get_design_principles(as="rubric")). The brief spread covers the page
+ * archetypes the composition patterns target, plus a couple of component-dense
+ * surfaces where token hallucination tends to spike.
+ */
+
+export interface EvalBrief {
+  id: string;
+  title: string;
+  /** The prompt handed to the generating instance. */
+  prompt: string;
+  /** Suggested composition pattern, when one fits (for the design-MCP condition). */
+  pattern?: string;
+  tags: string[];
+}
+
+export const EVAL_BRIEFS: readonly EvalBrief[] = [
+  {
+    id: 'ops-dashboard',
+    title: 'Ops Dashboard',
+    prompt:
+      'Build an operations dashboard for a SaaS product: a row of KPI tiles (users, revenue, error rate, latency), a primary chart area, a recent-activity feed, and a quick-actions panel. Some metrics are healthy, some are degraded.',
+    pattern: 'dashboard',
+    tags: ['dashboard', 'data-dense', 'status']
+  },
+  {
+    id: 'account-settings',
+    title: 'Account Settings',
+    prompt:
+      'Build an account settings page with sections for Profile, Notifications, and Security. Booleans use toggles, enums use selects, and there is a destructive "Delete account" action separated at the bottom.',
+    pattern: 'settings-page',
+    tags: ['settings', 'form', 'destructive']
+  },
+  {
+    id: 'signup-wizard',
+    title: 'Multi-Step Signup',
+    prompt:
+      'Build a three-step signup wizard (account → organisation → review) with inline field validation, a progress indicator, and a sticky continue/back action bar.',
+    pattern: 'form-page',
+    tags: ['form', 'wizard', 'validation']
+  },
+  {
+    id: 'pricing',
+    title: 'Pricing Page',
+    prompt:
+      'Build a pricing page with three tiers (Starter, Pro, Enterprise), one highlighted as recommended, each with a feature list and a call-to-action. Include a monthly/yearly toggle.',
+    tags: ['marketing', 'cards', 'cta']
+  },
+  {
+    id: 'users-table',
+    title: 'Users Admin Table',
+    prompt:
+      'Build a users administration screen: a searchable, filterable table of users with avatar, name, role badge, status, and per-row actions (edit, suspend). Include a header with a search field and a "Add user" button.',
+    tags: ['data-table', 'admin', 'data-dense']
+  },
+  {
+    id: 'empty-inbox',
+    title: 'Empty Inbox State',
+    prompt:
+      'Build an empty state for an inbox that has no messages yet: an illustration or icon, a friendly headline, a one-line explanation, and a primary action to compose the first message.',
+    tags: ['empty-state', 'feedback']
+  },
+  {
+    id: 'login',
+    title: 'Login Page',
+    prompt:
+      'Build a login page with email and password fields, a "forgot password" link, a primary sign-in button, and a secondary "Sign in with a passkey" option. Show inline validation on the fields.',
+    pattern: 'form-page',
+    tags: ['auth', 'form']
+  },
+  {
+    id: 'profile-card',
+    title: 'Profile Card',
+    prompt:
+      'Build a user profile card: avatar, name, role, a short bio, three stat figures (followers, following, posts), and follow / message actions.',
+    tags: ['identity', 'card']
+  },
+  {
+    id: 'checkout-summary',
+    title: 'Checkout Summary',
+    prompt:
+      'Build a checkout order summary: a list of line items with quantity and price, a promo-code field, a subtotal/tax/total breakdown, and a sticky "Pay now" button. One item is on sale.',
+    tags: ['commerce', 'data-dense', 'sticky']
+  },
+  {
+    id: 'notification-center',
+    title: 'Notification Center',
+    prompt:
+      'Build a notification center panel: notifications grouped by Today / Earlier, each with an icon by type (mention, system, billing), a timestamp, read/unread state, and a dismiss control. Include a "Mark all as read" action.',
+    pattern: 'tab-navigation',
+    tags: ['feedback', 'list', 'state-driven']
+  }
+];
+
+export function getBriefById(id: string): EvalBrief | undefined {
+  return EVAL_BRIEFS.find((b) => b.id === id);
+}

package/src/eval/eval.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+import { RUBRIC_CRITERIA } from '../design-rubric/rubric.js';
+import { EVAL_BRIEFS, getBriefById } from './briefs.js';
+import type { EvalEntry } from './score.js';
+import { aggregateRubric, formatAbReport, scoreImplementation } from './score.js';
+
+describe('eval briefs', () => {
+  it('provides ~10 briefs with unique ids', () => {
+    expect(EVAL_BRIEFS.length).toBeGreaterThanOrEqual(10);
+    expect(new Set(EVAL_BRIEFS.map((b) => b.id)).size).toBe(EVAL_BRIEFS.length);
+  });
+  it('only references real composition patterns', () => {
+    const known = new Set([
+      'dashboard',
+      'form-page',
+      'settings-page',
+      'tab-navigation',
+      'onboarding-guide'
+    ]);
+    for (const b of EVAL_BRIEFS) {
+      if (b.pattern) expect(known, `${b.id} → ${b.pattern}`).toContain(b.pattern);
+    }
+  });
+  it('looks up by id', () => {
+    expect(getBriefById('ops-dashboard')?.title).toBe('Ops Dashboard');
+    expect(getBriefById('nope')).toBeUndefined();
+  });
+});
+
+describe('scoreImplementation', () => {
+  it('scores clean code 100 with no findings', () => {
+    const s = scoreImplementation('<div class="bg-surface-base text-text-primary">ok</div>');
+    expect(s.score).toBe(100);
+    expect(s.errors).toBe(0);
+  });
+  it('penalises hallucinated tokens and raw colours', () => {
+    const s = scoreImplementation('<div class="bg-blue-500 text-status-bad">x</div>');
+    expect(s.score).toBeLessThan(100);
+    expect(s.errors + s.warnings).toBeGreaterThan(0);
+  });
+});
+
+describe('aggregateRubric', () => {
+  const full = Object.fromEntries(RUBRIC_CRITERIA.map((c) => [c.id, 4]));
+
+  it('sums a complete 1–5 score set', () => {
+    expect(aggregateRubric(full)).toBe(RUBRIC_CRITERIA.length * 4);
+  });
+  it('throws on a missing, out-of-range, or non-finite criterion', () => {
+    expect(() => aggregateRubric({ ...full, correctness: 7 })).toThrow();
+    expect(() => aggregateRubric({ ...full, correctness: NaN })).toThrow();
+    const { correctness, ...missing } = full;
+    void correctness;
+    expect(() => aggregateRubric(missing)).toThrow();
+  });
+});
+
+describe('formatAbReport edge cases', () => {
+  it('reports a clean-baseline error delta as "—", not a false percentage', () => {
+    const entries: EvalEntry[] = [
+      {
+        briefId: 'x',
+        condition: 'baseline',
+        score: { linter: { score: 100, errors: 0, warnings: 0, infos: 0 } }
+      },
+      {
+        briefId: 'x',
+        condition: 'design-mcp',
+        score: { linter: { score: 100, errors: 0, warnings: 0, infos: 0 } }
+      }
+    ];
+    const report = formatAbReport(entries, 'baseline', 'design-mcp');
+    expect(report).not.toContain('-100.0%');
+  });
+});
+
+describe('formatAbReport', () => {
+  const entries: EvalEntry[] = [
+    {
+      briefId: 'a',
+      condition: 'baseline',
+      score: { linter: { score: 70, errors: 1, warnings: 2, infos: 0 }, rubricTotal: 22 }
+    },
+    {
+      briefId: 'a',
+      condition: 'design-mcp',
+      score: { linter: { score: 95, errors: 0, warnings: 0, infos: 1 }, rubricTotal: 31 }
+    }
+  ];
+  const report = formatAbReport(entries, 'baseline', 'design-mcp');
+
+  it('renders per-brief and aggregate sections with a delta', () => {
+    expect(report).toContain('## Per-brief');
+    expect(report).toContain('## Aggregate');
+    expect(report).toContain('baseline');
+    expect(report).toContain('design-mcp');
+    expect(report).toContain('%'); // a percentage delta is present
+  });
+});

package/src/eval/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Public API of the eval-suite (docs/DESIGN-MCP.md, cross-cutting eval). The
+ * briefs and the deterministic scorer are reusable across runs; the LLM
+ * generation and rubric judging are injected by whoever drives a run (an agent
+ * harness this round, an API loop later) so the suite stays automation-friendly.
+ */
+
+export type { EvalBrief } from './briefs.js';
+export { EVAL_BRIEFS, getBriefById } from './briefs.js';
+export type { EvalEntry, ImplementationScore, LinterScore } from './score.js';
+export { aggregateRubric, formatAbReport, scoreImplementation } from './score.js';

package/src/eval/score.ts

@@ -0,0 +1,112 @@
+/**
+ * Scoring + A/B reporting for the eval-suite. The linter half is deterministic
+ * (no LLM): `scoreImplementation` runs the design-linter and returns the score
+ * and finding counts. The rubric half is judge-supplied (1–5 per criterion);
+ * `aggregateRubric` validates and sums it. `formatAbReport` renders the
+ * baseline-vs-treatment comparison in the shape of experiment/round-2's summary
+ * tables, so a new run is directly comparable to that +33.8% baseline.
+ */
+
+import { lintDesign } from '../design-linter/index.js';
+import { MAX_RUBRIC_SCORE, RUBRIC_CRITERIA } from '../design-rubric/rubric.js';
+
+export interface LinterScore {
+  /** 0–100 deterministic design-linter score. */
+  score: number;
+  errors: number;
+  warnings: number;
+  infos: number;
+}
+
+export interface ImplementationScore {
+  linter: LinterScore;
+  /** Judge rubric total /MAX_RUBRIC_SCORE, when a rubric pass was run. */
+  rubricTotal?: number;
+}
+
+export interface EvalEntry {
+  briefId: string;
+  /** e.g. "baseline" or "design-mcp". */
+  condition: string;
+  score: ImplementationScore;
+}
+
+/** Deterministic linter score for one generated implementation. */
+export function scoreImplementation(code: string): LinterScore {
+  const r = lintDesign(code);
+  return {
+    score: r.score,
+    errors: r.counts.error,
+    warnings: r.counts.warning,
+    infos: r.counts.info
+  };
+}
+
+/** Validate + sum a judge's per-criterion 1–5 scores into a /40 total. Missing/out-of-range entries throw. */
+export function aggregateRubric(perCriterion: Record<string, number>): number {
+  let total = 0;
+  for (const c of RUBRIC_CRITERIA) {
+    const v = perCriterion[c.id];
+    if (typeof v !== 'number' || !Number.isFinite(v) || v < 1 || v > 5) {
+      throw new Error(`Rubric score for "${c.id}" must be a finite 1–5, got ${v}`);
+    }
+    total += v;
+  }
+  return total;
+}
+
+function mean(xs: number[]): number {
+  return xs.length === 0 ? 0 : xs.reduce((a, b) => a + b, 0) / xs.length;
+}
+
+function pct(from: number, to: number): string {
+  if (from === 0) return '—';
+  const change = ((to - from) / from) * 100;
+  return `${change >= 0 ? '+' : ''}${change.toFixed(1)}%`;
+}
+
+/**
+ * Render a baseline-vs-treatment A/B report. `baseline` and `treatment` are the
+ * condition labels present in `entries`. Per-brief rows + an aggregate summary.
+ */
+export function formatAbReport(entries: EvalEntry[], baseline: string, treatment: string): string {
+  const briefIds = [...new Set(entries.map((e) => e.briefId))];
+  const pick = (briefId: string, condition: string) =>
+    entries.find((e) => e.briefId === briefId && e.condition === condition)?.score;
+
+  let md = `# Eval A/B — ${baseline} vs ${treatment}\n\n`;
+  md += '## Per-brief\n\n';
+  md += `| Brief | ${baseline} linter | ${treatment} linter | ${baseline} rubric | ${treatment} rubric |\n`;
+  md += '|---|---|---|---|---|\n';
+
+  const baseLint: number[] = [];
+  const treatLint: number[] = [];
+  const baseRub: number[] = [];
+  const treatRub: number[] = [];
+
+  for (const id of briefIds) {
+    const b = pick(id, baseline);
+    const t = pick(id, treatment);
+    if (b) baseLint.push(b.linter.score);
+    if (t) treatLint.push(t.linter.score);
+    if (b?.rubricTotal !== undefined) baseRub.push(b.rubricTotal);
+    if (t?.rubricTotal !== undefined) treatRub.push(t.rubricTotal);
+    const rub = (s?: ImplementationScore) =>
+      s?.rubricTotal !== undefined ? `${s.rubricTotal}/${MAX_RUBRIC_SCORE}` : '—';
+    md += `| ${id} | ${b?.linter.score ?? '—'} | ${t?.linter.score ?? '—'} | ${rub(b)} | ${rub(t)} |\n`;
+  }
+
+  md += '\n## Aggregate\n\n';
+  md += `| Metric | ${baseline} | ${treatment} | Δ |\n|---|---|---|---|\n`;
+  md += `| Mean linter score | ${mean(baseLint).toFixed(1)} | ${mean(treatLint).toFixed(1)} | ${pct(mean(baseLint), mean(treatLint))} |\n`;
+  if (baseRub.length && treatRub.length) {
+    md += `| Mean rubric /${MAX_RUBRIC_SCORE} | ${mean(baseRub).toFixed(1)} | ${mean(treatRub).toFixed(1)} | ${pct(mean(baseRub), mean(treatRub))} |\n`;
+  }
+  const totalErr = (cond: string) =>
+    entries
+      .filter((e) => e.condition === cond)
+      .reduce((a, e) => a + e.score.linter.errors + e.score.linter.warnings, 0);
+  md += `| Total linter errors+warnings | ${totalErr(baseline)} | ${totalErr(treatment)} | ${pct(totalErr(baseline), totalErr(treatment))} |\n`;
+
+  return md;
+}

package/src/index.ts

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+
+import { loadCatalog } from './data/catalog-loader.js';
+import { loadPatterns, loadPrinciples } from './data/design-system-loader.js';
+import { loadRecipes } from './data/recipe-loader.js';
+import { loadTemplateSections } from './data/template-loader.js';
+import { createServer } from './server.js';
+import { startHttpTransport } from './transports/http.js';
+import { startStdioTransport } from './transports/stdio.js';
+
+interface CliArgs {
+  transport: 'stdio' | 'http';
+  port: number;
+  dataDir?: string;
+}
+
+function parseArgs(args: string[]): CliArgs {
+  const result: CliArgs = {
+    transport: 'stdio',
+    port: 3001
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    const next = args[i + 1];
+
+    if (arg === '--transport' && next) {
+      if (next === 'stdio' || next === 'http') {
+        result.transport = next;
+      }
+      i++;
+    } else if (arg === '--port' && next) {
+      result.port = parseInt(next, 10);
+      i++;
+    } else if (arg === '--data-dir' && next) {
+      result.dataDir = next;
+      i++;
+    }
+  }
+
+  return result;
+}
+
+async function main(): Promise<void> {
+  const args = parseArgs(process.argv.slice(2));
+
+  if (args.dataDir) {
+    process.env.DATA_DIR = args.dataDir;
+  }
+
+  // Pre-load cached data
+  try {
+    await Promise.all([
+      loadCatalog(),
+      loadTemplateSections(),
+      loadRecipes(),
+      loadPrinciples(),
+      loadPatterns()
+    ]);
+  } catch (err) {
+    console.error('Warning: Failed to pre-load some data:', err);
+  }
+
+  if (args.transport === 'http') {
+    await startHttpTransport(args.port);
+  } else {
+    const server = createServer();
+    await startStdioTransport(server);
+  }
+}
+
+main().catch((err) => {
+  console.error('Fatal error:', err);
+  process.exit(1);
+});

package/src/prompts/design-prompts.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import { designPagePrompt, redesignPrompt, variantCount } from './design-prompts.js';
+
+describe('variantCount', () => {
+  it('defaults to 3 for missing or non-numeric input', () => {
+    expect(variantCount(undefined)).toBe(3);
+    expect(variantCount('abc')).toBe(3);
+  });
+  it('clamps to the 2–5 range', () => {
+    expect(variantCount('1')).toBe(2);
+    expect(variantCount('9')).toBe(5);
+    expect(variantCount('4')).toBe(4);
+  });
+});
+
+describe('designPagePrompt', () => {
+  it('embeds the brief and drives the full loop in order', () => {
+    const p = designPagePrompt('a billing settings page', undefined, '4');
+    expect(p).toContain('a billing settings page');
+    for (const tool of [
+      'get_design_context',
+      'get_design_principles',
+      'validate_design',
+      'get_design_principles(as="rubric")',
+      'sync_design_manifest'
+    ]) {
+      expect(p, tool).toContain(tool);
+    }
+    expect(p).toContain('Generate 4 variants');
+  });
+
+  it('pins a specific pattern when given one', () => {
+    expect(designPagePrompt('x', 'dashboard', undefined)).toContain('get_pattern("dashboard")');
+  });
+  it('offers pattern discovery when none is given', () => {
+    expect(designPagePrompt('x', undefined, undefined)).toContain('if a composition pattern fits');
+  });
+});
+
+describe('redesignPrompt', () => {
+  it('is diagnosis-first and preserves behaviour', () => {
+    const p = redesignPrompt('the dashboard feels flat', undefined, undefined);
+    expect(p).toContain('Diagnose');
+    expect(p).toContain('validate_design');
+    expect(p).toContain('two lowest-scoring criteria');
+    expect(p).toContain('read the current implementation');
+  });
+  it('inlines provided code', () => {
+    expect(redesignPrompt('x', '<div>old</div>', undefined)).toContain('<div>old</div>');
+  });
+});