Home: pick a nickname, describe the website you want to make together, and open a room.
Fixture replay results (synthetic demo data, not AI output): final site, attribution, React ZIP download.
Lobby with the replay picker. Replay mode plays synthetic demo fixtures, not AI output.
Fixture replay (synthetic demo data, not AI output): sketch on the left, live site preview on the right.

Status at submission: the multiplayer game, live ink, preview, ZIP export and the AI pipeline are implemented and tested end to end with deterministic test output. Live generation through TokenRouter was being verified on deadline day. Anything in our video or screenshots that shows the "Recorded fixture replay" banner is replay mode playing synthetic demo fixtures (hand-authored layouts and traced ink), not AI output.

Inspiration

Drawing games like skribbl are the most fun you can have with friends in a browser tab. Website builders are solo tools, and AI site generators take a prompt and invent the design for you. We wanted the opposite: the group's messy drawings decide the UI (columns or rows, what's big, what's grouped) and the AI only does the typing. "Multiplayer everything" gave us the excuse.

What it does

Lobby. A host creates a room with a one-line brief ("a cozy neighborhood yoga studio"). Two to six players join with a room code and a name, no accounts; up to eight more can watch.
Seven turns. An AI Planner splits the brief into a hero step plus six small scopes (navigation, pricing, FAQ, signup…), each with a short prompt and supplied content.
Live ink. One drawer gets 40 seconds on a pen canvas while everyone watches the strokes arrive. Spectators chat and play mischief cards: Inverted Controls, Palette Flip, Rush Hour, and Helping Hand (a spectator draws alongside for five seconds). Then a three-second handoff. There's no voting.
Ink becomes a site. Draft passes run at 8 s and 24 s (if the ink changed), then a final pass. A Sketch Reader turns the server-rendered drawing into a layout spec, and a Builder writes that section's React TSX and scoped CSS. Validators and a browser canary gate every candidate before it reaches the live Sandpack preview beside the canvas.
Preview and ZIP. Every viewer explores the finished site on their own (tabs, accordions, modals, filters, form validation), then downloads the exact published Vite + React project.

How we built it

Stack: TypeScript in a pnpm monorepo. Client: React 19, Vite, Zustand, Radix, Tailwind. Server: Fastify, Socket.IO, PostgreSQL 18. Ink: perfect-freehand, rasterized on the server with resvg. Generated projects: checked with Babel, PostCSS, esbuild and the TypeScript 7 checker, previewed in Sandpack. AI: the Vercel AI SDK behind a provider-neutral service with a TokenRouter adapter.

Four parallel lanes with exclusive file ownership, joined by one frozen integration contract:

Bowen (timothyzhbw-jpg): shared contracts, game rules, the authoritative room server, PostgreSQL, jobs and leases, integration.
Calvin (calvin-white1): lobby, game and result screens, pen canvas, room client, chat and cards, browser tests.
Tushar (tushartechs): protected project template, validation, Sandpack preview and canary, ZIP export, Docker image and release gate.
Pratham (prathamsnehi): AI service, TokenRouter adapter, generation pipeline, Azure templates and scripts.

trmi as the shared room. We planned in trmi's shared workspace: the idea, an architecture with 33 numbered decisions, the integration contract and four personal handoffs, each opening with a copyable @trmi kickoff prompt for an agent. 180 of the 261 commits on main came through trmi, including the frontend and the AI/Azure lane. The backend and preview lanes used parallel AI coding agents and merged through one integration lane.

Architecture highlights

Authoritative room actor: every command is validated and committed on the server before it is acknowledged; each author's strokes stay separate, and gaps trigger retransmission, never interpolation.
Durable outbox: events leave PostgreSQL in sequence order. A crash can repeat an event but never lose one.
Snapshot reconnect: clients buffer events, fetch a snapshot at sequence S and apply only what comes after it.
Browser canary: generated code never runs on our server. A hidden cross-origin Sandpack in a player's browser mounts each candidate and runs allowlisted probes before anything is published.
Fenced publication: jobs carry lease tokens and generation epochs; stale drafts are rejected, and the last good preview stays up when generation fails.
Replay mode: a host-only, watch-only fixture game with a permanent banner. It is never a silent fallback.

Measured results

All numbers are from one laptop (Apple M4 Pro).

Tests on main: 571 unit and web tests, 178 integration tests against real PostgreSQL 18, and 2 Playwright browser games (multiplayer through seven turns; replay to ZIP download), all passing.
Ink latency: 4 rooms × 6 players drawing at once, p95 accepted-ink display 9.1 ms against a 250 ms target, zero lost acknowledged strokes. All clients ran on localhost, so this is not real-network latency.
Release gate: the production Docker image passes every runtime gate (arm64 native; amd64 under emulation).
Review: an adversarial review of the backend found 33 defects, all fixed with regression tests.

Challenges

Making four parallel lanes fit together: one shared contract and exclusive file ownership beat refactoring each other's code.
Two people drawing at the same time without their lines merging.
Keeping the live preview honest: a raw model answer never reaches the screen, and blank turns stay blank.

What we learned

Agents move fastest with a frozen contract, typed fixtures and clear file ownership.
Honest failure states ("AI not configured", partial sections, a labeled replay) are features.