Public beta
Describe a site or an app. vibld can sketch three directions, writes a spec for the one you pick, builds a real React project, checks its own work, and hands you code you can read line by line.
A demonstration of the flow, drawn in this page. It does not call a model. Sign up to use the real thing.
Conversation 1 prompt
Preview style: Spec A
Preview of Clay Saturdays, an invented site, in the Spec A style.
src/App.tsxaccepted
import { motion } from 'motion/react';import { ArrowRight } from 'lucide-react';import { Button } from '@/components/ui/button';import { SlotPicker } from './components/SlotPicker';export default function App() { return ( <main className="min-h-svh bg-background text-foreground"> <Nav brand="Clay Saturdays" /> <section className="grid gap-10 px-6 py-20 lg:grid-cols-2"> <div className="flex flex-col gap-5"> <p className="font-mono text-xs uppercase">Saturday wheel classes</p> <motion.h1 initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} className="font-display text-5xl tracking-tight"> Throw your first pot this weekend. </motion.h1> <Button size="lg">Pick a slot <ArrowRight /></Button> </div> <HeroArt /> </section> <SlotPicker items={['09:00', '11:30', '14:00']} /> </main> );}01How it works
Each step leaves something behind you can look at: a spec, files, a check report, a preview. Nothing becomes public until you publish it yourself.
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.
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.
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.
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.
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.
Run live preview installs the project in a private sandbox 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.
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.
02Styles
Ask for one by name, or ask for three sketches and pick. Each preset carries direction concrete enough to act on, including how it moves. Press a tile to re-skin the site in the builder above.
Directions that are a surface treatment rather than a colour scheme are drawn in one neutral demonstration palette, because the builder leaves their colours to the project.
and 16 more:
03What you get
No proprietary format that only runs inside vibld, and no required runtime. The core is open source under Apache-2.0.
It installs and builds with the package manager it declares. There is no vibld package in its dependencies and nothing that checks an account when it runs.
Static checks read the files. Only an error the checker is sure of buys a repair, because a repair rewrites the whole project.
In the one repository you approved, on a vibld/ branch, against your default branch. Review it like any other change.
vibld: <revision>
your-org/clay-saturdays, from vibld/<revision>
Nothing automated can publish: no scheduled run, no webhook, no text in a commit. Take it down and the address stops working immediately, and the name stays yours.
clay-saturdays.vibld-preview.dev
Name itPublish
The source is public. Self-hosted, vibld is three Cloudflare Workers with deliberately different blast radii, so the code a model wrote never runs next to your provider keys.
04Use cases
Some starting points. The examples page shows real builds exactly as vibld generated them, with the prompt and no hand edits.
A site for a dental practice with opening hours, services and directions.
A portfolio for a freelance illustrator with a gallery and a short bio.
A landing page for a cybersecurity SaaS with pricing, FAQ and a contact form.
A one-page site for a two-day developer conference with a schedule and speakers.
A personal budget tracker: add income and expenses with a category and a date, see the month’s balance, and export the month as CSV.
05Pricing
Model spend is what actually costs money to run, so each plan comes with an amount of it every month. Free comes with some too.
$0no subscription
plus $1.00 once, when a new account adds a card
$1.00 of model spend included each month
An account with no active subscription is Free.
$29a month
or $290 a year, two months free
$10.00 of model spend included each month
Upgrading starts a Stripe Checkout session. Cards, invoices and cancellation live in Stripe’s billing portal.
$99a month
or $990 a year, two months free
$40.00 of model spend included each month
Upgrading starts a Stripe Checkout session. Cards, invoices and cancellation live in Stripe’s billing portal.
Public beta
Anyone can sign up. Add a card and get $1.00 of build credit. The card is saved, not charged.
Already have an account? Sign inRead the source on GitHub
This page has no customer logos, reviews or user counts. The source is public, so you can read how vibld works before you trust it with anything. Open-source notices