The First Build · Session 01 · Dates TBD
Vibe coding, prompting, Git, and a build you can recover
Ship AIPhoenix, ArizonaPress → to begin
AI can build faster than you can recover. Tonight we fix the second half.
Speed becomes useful when the outcome is clear, the change is small, and there is always a clean way back.
Four sessions, one product. Every session leaves a clean checkpoint the next one can trust, and catching up late is explicitly allowed.
Act one
The tools changed in waves. The responsibility did not: you still own the outcome, the boundaries, and the decision to ship.
Each wave still has a job. The mistake is using the fastest mode for work whose risk you cannot explain.
Vibe coding
Engineer it
The line is not beginner versus expert. It is reversible versus consequential.
Intent over implementation does not mean judgement overboard.
Ask the agent to choose the code. Keep the product decision, the constraints, and the evidence of done.
Act two
A useful brief is small enough to finish and precise enough that two builders would recognize the same result.
Example: add an empty-state CTA at /ideas. It opens the create form by mouse or keyboard, preserves existing routes, and shows success and failure. Those are checks the agent can finish.
| What it answers | Look here | |
|---|---|---|
| Routes | Which URLs and screens exist? | app/ or pages/ |
| Components | Which pieces are reused? | components/ |
| Packages | What does the project depend on? | package.json |
| Commands | How does it run and check itself? | scripts in package.json |
| History | What changed, and what can I recover? | git log + git diff |
You do not need to memorize the tree. You need to know which question each part can answer.
Live build: orient before editing
Ask the agent: map this project before you edit it
entry route: app/page.jsxshared UI: components/checks: npm run buildproposed first slice: empty-state CTA
Have the agent name the entry point, reusable pieces, commands, and the smallest file set it expects to touch. If the plan names half the repository, the slice is not small enough yet.
Do this against the actual starter project. A generic tour teaches vocabulary; a project map teaches where to look tomorrow.
Try the reusable skill
Use the prepared task and inspect the draft against the source facts.
Choose a task, then run the example.
Act three
Git is not ceremony. It is the save system that lets you move quickly, inspect what the agent did, and discard the turn that went wrong.
Small commits are not about a tidy graph. They make the blast radius of a bad instruction small enough to understand.
Safe for the browser
Server only
Environment variables do not make a browser value secret. If frontend code can read it, a visitor can read it too.
Exercise: generate, reject, recover, save
git status → git diff → npm run build → git commit
1 visible slice, 3 files changed.env.local ignored — no secrets stagedbuild passedcheckpoint: first useful interface
Build one visible slice from the brief. Inspect it in the browser and in the diff. Undo one intentionally bad change, rerun the check, then save only the clean version.
The exercise is complete only after the repository is pushed and another person can describe what the commit changed.
| Artifact | Evidence | |
|---|---|---|
| Product brief | One user, one job, one core path | A stranger can restate it |
| Project map | Routes, components, commands | You can find the first file |
| Prompt recipe | What · where · behavior · constraints · done | The change stayed narrow |
| Repository | One clean, pushed checkpoint | A bad turn was recovered |
Write all four into 01-foundations/. The next session assumes the repository starts here.
Fast is only useful when back is cheap.
Next
Next session follows one real record from a form, through an API, into a database, and back onto the screen — then secures and deploys the whole path.
shipai.club · Free program sessions