# stylize

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

```sh
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.