Builder — lay out a website, then say what it is

A Next.js 16 template with two halves that fit together:

The Builder (/builder) is a visual builder in one workspace. A library of 218 common web parts with plain names — Search box, Rotating headline, Text block — sits beside a board with a page frame on it (desktop, tablet or phone width). Parts land inside the frame at real size and draw what they'll be: a search box is a search box, tabs are tabs with the labels you typed. Snap them to the edges, resize them, draw regions around them, connect them with arrows, group what belongs together, say what each container holds, and give every single part its own prompt. Where you put something is part of the specification: vertical position is reading order, a shared band is a row, width in the frame is width on the site, a drawn region is a region, an arrow is a relationship. Say what each part shows or does in its data box — or draw a wire from one part to another and it fills itself in — and the blueprint gains a list of everything a backend would have to provide. Nothing is reflowed to fit. All 218 parts are real components — every one of them: on the board they hold still, in the live preview tabs switch, the cart adds up, the checkout rejects a card that fails its checksum, a table of five thousand rows sorts and filters, the console answers help. The ones that are behaviours rather than boxes — snapping, parallax, a custom cursor, an opening sequence — draw a small moving picture of what they do on the board, then take no room at all in the live site, where they run for real. Press p for the live site full size. Set the format (pages, scroll behaviour, typography and text-box treatment, ~70 options), write the one prompt that says what the site is, and compile it into a blueprint any agent can act on — or hand it to Claude from the page.

The foundation underneath is a shell that already behaves well: right-click menus everywhere, a ⌘K palette, chord shortcuts, synthesised audio cues, tactile buttons with optimistic feedback, a news feed that folds repeats into one line, ~60 persisted settings behind an Advanced switch, live theming, and virtualised lists.

It is not a terminal template — dense keyboard-first UI is one category in the library, not the house style. The look is neutral charcoal with one accent. Read AGENTS.md for the contract and docs/PROMPTS.md for copy-paste recipes.

npm install
npm run dev              # http://localhost:3000 — the Builder is at /builder
npm run new:feature blog # scaffold + register a module
npm run check            # typecheck + build

# optional keys, each with a fallback that works without it — see .env.example:
#   ANTHROPIC_API_KEY   the Builder asks Claude in-page (with screenshots of the pages);
#                       the only key the browser can hold instead (key button, ⌘⇧K)
#   X_*                 the tweet console posts to X (docs/X-KEYS.md)
#   GITHUB_TOKEN/REPO   Publish pushes the site to a repository; VERCEL_DEPLOY_HOOK deploys it
cp .env.example .env.local

What's inside

Area	Highlights
Builder	One workspace: library of 218 plain-named parts — every one a working component — a page frame at desktop/tablet/phone width, typed contents, shape options and links, snapping and resizing, freehand drawing, regions, arrows and groups, a prompt per part, a shelf that lays the parts out where they would live on a page and lights each one, a texture engine that turns a photograph into a pattern in your own colours, a clickable live preview (pinned, and full size at /builder/preview) that runs the page's behaviours, six colour roles any element can override for itself, a texture stack that compiles to CSS and layers honestly — turn one down and the layer below shows through it, one light source the whole page casts shadows from, a four-quadrant menu on every part that you can turn to any orientation and that does everything the side panel does, a drawing board in that menu that reshapes a part to the shape you draw (and draws new ones), frame interpolation (five keyframes in, every frame between them out, with the brief that goes with them), ~70 format options, page manager, compiled markdown/JSON blueprint, optional Claude call
Claude on the site	Seven asks from the blueprint dialog (plan, critique, fill prompts, finish, ideas, ask anything, build the code), each with screenshots of the pages taken on the server from the live preview; Publish pushes site/document.json, the blueprint and generated code to GitHub in one commit and calls a Vercel deploy hook; the deployed app renders the published site at /site
Tweet console	Press T: a dashboard over the screen that drafts posts to X (threads, media with alt text, polls, reply limits, quotes), previews them as X shows them, records a tour of the live site scrolling and working itself and attaches it as a GIF the app writes itself, queues posts with honest retries, and sends through the X API when keys are set — or opens X with the words when they are not
Shell	Top bar with route tabs, collapsible sidebar rail, status bar (latency, clock, density, sound), slide-over panels
Interaction	Global right-click with stacked scopes, ⌘K palette (commands + pages + toggles), chords like g p, cheat sheet on ?
Feedback	Sound on pointer-down, haptics, press scale, flash-on-change, number tweening, optimistic done states
News	Key-based coalescing, diff lines (1% → 3%), revert collapsing, rate limiting, toasts that update instead of stacking
Settings	~60 options across appearance, effects, audio, feedback, feed, behaviour, keyboard, privacy, developer; search, groups, advanced, import/export

Stack

Next.js 16 (App Router, Turbopack) · React 19 · TypeScript · Tailwind CSS v4 · radix-ui · zustand · cmdk · @tanstack/react-virtual · lucide-react.

Layout

See docs/ARCHITECTURE.md. Short version: src/core is the shell, src/features/<id> is where you build, site.config.ts is the one file that re-centres the whole site.