feat: screenshot-to-mockup evolution ($D evolve)

New command: $D evolve --screenshot current.png --brief "make it calmer"

Two-step process: first analyzes the screenshot via GPT-4o vision to
produce a detailed description, then generates a new mockup that keeps
the existing layout structure but applies the requested changes. Starts
from reality, not blank canvas.

Bridges the gap between /design-review critique ("the spacing is off")
and a visual proposal of the fix.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Garry Tan
2026-03-26 22:18:14 -06:00
parent 10b843e3a2
commit 1d9b2dac80
2 changed files with 150 additions and 2 deletions
+6 -2
View File
@@ -21,6 +21,7 @@ import { iterate } from "./iterate";
import { resolveApiKey, saveApiKey } from "./auth";
import { extractDesignLanguage, updateDesignMd } from "./memory";
import { diffMockups, verifyAgainstMockup } from "./diff";
import { evolve } from "./evolve";
function parseArgs(argv: string[]): { command: string; flags: Record<string, string | boolean> } {
const args = argv.slice(2); // skip bun/node and script path
@@ -207,8 +208,11 @@ async function main(): Promise<void> {
}
case "evolve":
console.error(`Command 'evolve' will be implemented in Commit 8.`);
process.exit(1);
await evolve({
screenshot: flags.screenshot as string,
brief: flags.brief as string,
output: (flags.output as string) || "/tmp/gstack-evolved.png",
});
break;
}
}