How it works
From a sentence to a project you own
Seven steps, each leaving something you can look at before the next starts. Nothing is public until you publish it.
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. Style, Reference, Media and Preferences sit in a row under the message. The agent may ask a question or two, then builds.
Checked against Getting started
A site for my Saturday wheel-throwing classes. People pick a two-hour slot and see a confirmation.
Reference (optional)Style: Organic Step 2: Pick a direction
Before the first build, ask for three sketches that differ in look, not just color, for about a tenth of a build, and choose one. Or skip the sketches and name one of the style presets.
Checked against The style catalog
3 mockupsdirection A chosen - A Calm studio
- B Serif
- C Blocks
Step 3: It writes the spec down
The direction becomes DESIGN.md: the colors, type, breakpoints and motion the build has to honor, 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; honors reduced motion
Step 4: It builds the project
A run writes a project in React and TypeScript on Vite, and there is no accept step: it becomes the project. A draft of the page shows while the first build runs, and the code is shown as soon as it exists, badged while it is checked.
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 styles.css components/ SlotPicker.tsx Confirmation.tsx
Step 5: It checks its own design
The files are read against the spec: the named colors, the display face, the breakpoints, alt text, a reduced-motion rule. Only an error the checker is sure of buys a repair, which is another paid call, and a repair patches only the files at fault.
Checked against Design checks
design checks against DESIGN.md pass color #1F6F6B found in src/styles.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, a patch pass reduced-motion rule added in src/styles.css clean 0 errors
Step 6: Look at it privately
Run live preview installs the project in a private sandbox and starts a real dev server, which takes each new version in place. 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
Under Ship: Export downloads the checkpoint as an archive. Push to GitHub opens a pull request in the project’s own repository. 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 project’s own repository.
vibld/<revision>: pull request openedExport
The 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. It changes only the files it needs, and is checked the way the first build was.
The preview keeps up
A running preview takes each new version in place, and restarts only when it has to, saying why.
Take it with you whenever
Export, push and publish are under Ship, and act on the last finished checkpoint. The project owes nothing to your account once it is out.