stylize

Run the same design prompt through different models and compare what comes back.

npm start   # reads ANTHROPIC_API_KEY from .env; http://localhost:4321

Each run starts headless Claude Code (claude -p --dangerously-skip-permissions) in a fresh workspace, runs/<timestamp>-<model>/:

• brief.md: the prompt as sent, chips included.
• content/: the 8 posts (posts.json plus markdown). Images load from R2.
• inspo/: the selected inspo images.
• <direction>/index.html: one folder per direction, written by the agent. A tab appears as soon as the file exists and reloads when it changes.
• meta.json (cost, turns, duration, final notes) and events.jsonl (the agent's full event stream).

Other pieces:

• ref/<n>/: a prompt, its inspo images, and their public URLs (inspo.json).
• app/system.md: harness instructions appended to Claude Code's system prompt (workspace layout, deliverable format, how to screenshot).
• app/screenshot.mjs: the Playwright screenshot script agents use to look at their own pages.
• .agent-config/: an empty Claude Code config dir, so personal settings, memory, plugins and MCP servers stay out of runs.

The agent can run any command. It's told to stay inside its workspace, but nothing enforces that.

R2 bucket stylize (public) holds the post images and inspo. After changing base/ or adding inspo, run npm run upload (or npm run upload inspo).

Demos

Every direction is hosted privately at https://demos.githubnext.com/iamnbutler/stylize/ (GitHub Next sign-in), one per path, for example /iamnbutler/stylize/field-lines/.

• scripts/build-site.mjs: collects every direction in runs/ into site/, with one shared content/ and an index page.
• deploy/server.mjs: a static server for site/. The gateway strips the /iamnbutler/stylize prefix and sends it as X-Forwarded-Prefix.
• Dockerfile: builds the site from the committed runs. It runs as the private Coolify app iamnbutler / stylize (next-demos project, internal name next-demos-stylize, port 3214, no public domain). The gateway reaches it through STYLIZE_UPSTREAM, and githubnext/next-demos registers it in demos.json.

To publish new runs, commit them and redeploy the Coolify app.

Videos

node scripts/record.mjs [run-id-prefix...] [--only=<direction>] records a Playwright tour of each direction into videos/<run>/<direction>.mp4: the index, then an image post, a code post and a tiny note. It needs npm start running. Recording uses the full Chromium build on the GPU, because the default headless shell renders WebGL in software at under 1 fps. Recordings run one at a time unless you set CONCURRENCY, since parallel recordings make WebGL pages stutter.

ref/1/inspo-contact-sheet.jpg is a contact sheet of the inspo images.