Peoplebase demo, starter pack
Everything needed to vibecode the Innovation Week demo app. No application code yet,
on purpose: the spec, the copy, the data and the Appmixer contract exist before the
first line, so nothing gets invented twice and then rewritten.
How to start
- Put this folder somewhere sensible and
git init it.
cp .env.example .env.local and fill in what you have. Leave the Appmixer
variables blank for now, the app falls back to scripted mode.- Open Claude Code in this folder.
- Open
PROMPTS.md and paste Step 0. Nothing else.
- Work through the steps in order, checking the "done when" line each time.
Claude Code reads CLAUDE.md on its own. That file points at everything else.
The three decisions baked in
The app is Czech. Every visible string, with diacritics. Code stays English. All
Czech text lives in lib/copy.ts and comes from docs/06-copy.md, so it can be
proofread in one place rather than hunted through components.
The form is the only Appmixer surface. No embedded designer, no template gallery,
no chat, no automations settings page. The manager fills in a form and the automation
happens out of sight. That is the point of this example.
One approver. Petra decides, two buttons, no second approver and no "request
changes" path. The demo has to show that a human decides, not how an approval matrix
works.
What is here
CLAUDE.md the rules Claude Code follows, read first
PROMPTS.md eight prompts, in order, paste one at a time
.env.example every variable, with the tunnel note
docs/00-brief.md the story on stage and what is in scope
docs/01-screens.md four routes, spelled out screen by screen
docs/02-data-model.md types, status machine, the store interface
docs/03-design-system.md tokens, type scale, components, lifted from the mockups
docs/04-appmixer-integration.md the contract, both directions. The important one.
docs/05-demo-script.md three minute stage script, Czech, written to be read aloud
docs/06-copy.md every Czech string in the app
docs/07-appmixer-flow.md what to build on the Appmixer side
docs/mockups/*.html four reference renders, open them in a browser
data/seed.json two people, three teams, nine bands, five past requests
data/scripted-draft.md the canned Czech agent output for when the network is off
data/build_seed.py regenerates seed.json if it drifts
docs/mockups/designer.html is the workflow as built in Appmixer. It is not built
in this app. It is there so whoever writes the code understands what the backend is
doing, and so the flow on the slide and the flow in the contract cannot drift apart.
The two things that will bite you
The tunnel. Appmixer runs in the cloud and the app runs on your laptop, so the
callbacks need a public hostname. cloudflared tunnel --url http://localhost:3000,
paste the hostname into APP_PUBLIC_URL, restart. It changes every time the tunnel
restarts. When the timeline stalls on stage, this is why.
Diacritics. The agent writes Czech. Check the whole chain end to end early:
form, trigger payload, agent output, callback, store, screen. One latin1 in the
middle and the job ad reads like a fax from 1998.
Technical decisions already made
Next.js 15 App Router, TypeScript strict, Tailwind v4, shadcn primitives. No
database, no auth, one tenant, a two person switcher instead of login. State behind a
two driver store: a JSON file locally, Upstash Redis when deployed. The detail page
polls every 1500ms rather than using websockets, because polling cannot half fail in
front of an audience.
To change any of these, change them now, before step 0, and update CLAUDE.md in the
same commit.
