Start here · Vibe Coding
What vibe coding is, and how to take the first step
In one line: you describe what you want and judge what comes back, the AI does the typing. It does not mean there is nothing to understand. It moves what you have to understand from syntax to judgement.
What it is good at
Making one well-described thing from nothing: a landing page, an interaction, a small tool that turns a table into a chart. The edges are clear and you can see at a glance whether the result is right, which is exactly where these models are strong.
Reworking is the other strength: restyle an existing piece, add an animation, make it behave on a phone. Given the context, a model edits more reliably than it invents.
What it is bad at
Large systems that have to be maintained. The model only ever sees the part you hand it, and as a project grows its changes start fighting each other.
The other trap is work that looks right: an animation that runs but stutters on a cheap phone, code that compiles but quietly breaks something unrelated. That is why every file here ships with its constraints, saying in writing what must not be touched.
How to take the first step
Do not open with "build me a website". That sentence is too big, and what comes back is a pile you cannot use. Start with one concrete effect: how a button answers a press, how a line of text arrives.
Pick one from the coding room. Each is a file that runs, plus a full instruction for the agent that says what to keep and what to leave alone. Paste it in, look at the result, then ask for your changes.
How to judge what comes back
Three questions. Is it still smooth on a phone? With motion preferences off, is the information still all there? Did it change something you never asked it to change? The first two are quality; the third is safety.
All three are written into every instruction here, so you do not have to say them yourself each time.
Questions
- Can I do this without knowing how to program?
- You can make things, with one caveat: a model producing code is not the same as the code being right. You need to be able to tell whether the result is what you wanted, and to paste an error back verbatim and ask for a fix. You can get a long way without touching the code yourself; when something breaks, describing the symptom is all you have.
- Which tool should I use?
- Nothing here is tied to one. The usual shapes are a chat window, or a coding assistant that can read and write the files in your project. Every file and instruction here works pasted into either.
- Why hand the model a finished file instead of asking it to write one?
- Ask it cold and you get its average. Give it an implementation that already runs and say what to change, and you get that implementation plus your requirement. The difference shows most in motion and interaction, where the details are the work.
- Can I use the generated code in commercial projects?
- Yes, client work included. Every implementation here was written from scratch for this library and carries nobody else's licence terms.
Browsing and previews are free; the full file and its instruction are Pro.