feat: mockup diffing + design intent verification

New commands:
- $D diff --before old.png --after new.png: visual diff using GPT-4o
  vision. Returns differences by area with severity (high/medium/low)
  and a matchScore (0-100).
- $D verify --mockup approved.png --screenshot live.png: compares live
  site screenshot against approved design mockup. Pass if matchScore
  >= 70 and no high-severity differences.

Used by /design-review to close the design loop: design -> implement ->
verify visually.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Garry Tan
2026-03-26 22:17:12 -06:00
parent 9c1b7096a8
commit 10b843e3a2
2 changed files with 133 additions and 3 deletions

View File

@@ -20,6 +20,7 @@ import { variants } from "./variants";
import { iterate } from "./iterate";
import { resolveApiKey, saveApiKey } from "./auth";
import { extractDesignLanguage, updateDesignMd } from "./memory";
import { diffMockups, verifyAgainstMockup } from "./diff";
function parseArgs(argv: string[]): { command: string; flags: Record<string, string | boolean> } {
const args = argv.slice(2); // skip bun/node and script path
@@ -178,10 +179,35 @@ async function main(): Promise<void> {
break;
}
case "diff":
case "diff": {
const before = flags.before as string;
const after = flags.after as string;
if (!before || !after) {
console.error("--before and --after are required");
process.exit(1);
}
console.error(`Comparing ${before} vs ${after}...`);
const diffResult = await diffMockups(before, after);
console.log(JSON.stringify(diffResult, null, 2));
break;
}
case "verify": {
const mockup = flags.mockup as string;
const screenshot = flags.screenshot as string;
if (!mockup || !screenshot) {
console.error("--mockup and --screenshot are required");
process.exit(1);
}
console.error(`Verifying implementation against approved mockup...`);
const verifyResult = await verifyAgainstMockup(mockup, screenshot);
console.error(`Match: ${verifyResult.matchScore}/100 — ${verifyResult.pass ? "PASS" : "FAIL"}`);
console.log(JSON.stringify(verifyResult, null, 2));
break;
}
case "evolve":
case "verify":
console.error(`Command '${command}' will be implemented in Commit 7+.`);
console.error(`Command 'evolve' will be implemented in Commit 8.`);
process.exit(1);
break;
}