How it works
From a sentence to a project you own
Seven steps. Each one leaves something you can look at before the next one starts, and nothing becomes public until you publish it yourself.
Drawn to show the flow. The pottery studio is an invented example.
Step 1: Say what you want
Plain words, with specifics: what it is, who uses it, what it has to do. Knowledge holds standing instructions, Style DNA holds the visual direction, and a reference URL points at a page to start from.
Checked against Getting started
A site for my Saturday wheel-throwing classes. People pick a two-hour slot and see a confirmation.
Reference URL (optional)Style DNA: calm, let the pots speak Step 2: Pick a direction
Ask for three sketches that differ in look, not just colour, and choose one. Or skip the sketches and name one of the style presets.
Checked against The style catalogue
3 mockupsdirection A chosen - A Calm studio
- B Serif
- C Blocks
Step 3: It writes the spec down
The direction becomes DESIGN.md: the colours, type, breakpoints and motion the build has to honour, written into the project where you can read it.
Checked against Design checks
- palette
- #E8EEEB#16292A#1F6F6B
- type
- display grotesk / readable sans body
- breakpoints
- phone, tablet, desktop
- motion
- short ease-out; honours reduced motion
Step 4: It stages a checkpoint
A run produces a staged checkpoint: a plan and a set of files in React and TypeScript on Vite. Nothing downstream acts on staged files. Read them in the Code pane and accept them when they are right.
Checked against Getting started
- React 19
- TypeScript
- Vite
- Tailwind v4
- shadcn/ui
- Lucide
- Motion
clay-saturdays/ package.json index.html DESIGN.md src/ main.tsx App.tsx index.css components/ SlotPicker.tsx Confirmation.tsx
Step 5: It checks its own design
The files are read against the spec: the named colours, the display face, the breakpoints, alt text, a reduced-motion rule. Only an error the checker is sure of buys a repair, because a repair rewrites the project.
Checked against Design checks
design checks against DESIGN.md pass color #1F6F6B found in src/index.css pass font display face is loaded pass alt every image has alt text error reduced-motion no prefers-reduced-motion rule repair one pass, whole project pass reduced-motion rule added in src/index.css clean 0 errors
Step 6: Look at it privately
The first preview is a picture of the plan that runs nothing. Run in sandbox installs the project and starts a real dev server, and a share link lets someone else see it until you revoke it. None of this makes anything public.
Checked against Running and sharing
Step 7: Publish it, or take the code
Export downloads the accepted checkpoint as an archive. Push to GitHub opens a pull request in a repository you connect. Publish puts it on the web at a name you choose, in two presses, and takes it down the same way.
Checked against Taking your code with you
Publish
Two presses: the first names the site and the checkpoint, the second is the act.
clay-saturdays.vibld-preview.devPush to GitHub
A pull request in the one repository you approved.
vibld/<revision>: pull request openedExport
The accepted checkpoint as an archive, nothing rewritten.
clay-saturdays.zip
And after the first build
Iterate in the same conversation
A follow-up sees the project it is editing, so “make the header sticky” means the header it already wrote. Every change is another staged checkpoint to read and accept.
Restart the sandbox to see it
A running sandbox keeps serving the checkpoint it started from, and says so when a newer one is accepted, rather than quietly becoming something else.
Take it with you whenever
Export and push act on the last accepted checkpoint. The project owes nothing to your account once it is out.