Vibe Coding in Practice

Vibe Coding can shorten the path from idea to first version, but “the page opens” is not completion. Production practice uses natural language to state the goal, repository rules to constrain the solution, and tests plus the real user flow to decide whether it can ship.

---

Match autonomy to blast radius

The question is not whether AI can write the code. Ask about blast radius, automated verifiability, rollback, and external side effects.

---

One iteration

outcome
  → give goal, context, constraints, and acceptance
  → let the agent read rules and nearby implementation
  → generate the smallest patch
  → run the narrow test
  → human reviews diff and risk boundaries
  → run the actual user flow
  → save evidence or continue

One loop should solve one verifiable behaviour. Do not let “also refactor, upgrade dependencies, and redesign the UI” enter the same iteration.

---

A reusable prompt contract

Outcome:
[What can the user do?]

Current behaviour:
[Reproduction with URL, input, and error]

Relevant scope:
[Directories that may be read or changed, existing pattern]

Do not change:
[URLs, API contracts, database fields, other people's edits]

Technical constraints:
[Framework, design system, test commands, security rules]

Acceptance:

-   [Observable result 1]
-   [Boundary condition 2]
-   [Test and real flow 3]

Start with read-only analysis and evidence. Edit only after proposing the smallest approach.

This is more useful than “make it prettier” because it turns a subjective request into observable layout hierarchy, mobile behaviour, feedback states, and visual constraints.

---

Four gates from prototype to production

Behaviour gate

• Happy path completes.
• Empty data, invalid input, timeout, and repeated click have defined results.
• Refresh, back, and re-entry preserve required state.

Code gate

• Typecheck, lint, and relevant tests pass.
• No invented imports, duplicate utilities, or unnecessary abstractions.
• The diff stays inside task scope.

Risk gate

• Server-side code enforces access.
• Mutations are idempotent and risky actions require approval.
• Secrets, PII, and internal paths do not appear in logs or UI.

User gate

• The flow completes in a real viewport, browser, or client.
• Copy is natural for the persona and hides internal jargon.
• The user knows the next action, success state, and recovery path.

---

Quality gates should not copy arbitrary numbers

“Coverage must be 80%” and “a PR must stay below 400 lines” may suit one team but are not universal. Set thresholds from repository risk and historical evidence.

# Example: use the project's real commands and thresholds
steps:
    - name: Format and lint
      run: bun run lint
    - name: Narrow tests
      run: bun test src/path/to/changed-feature.test.ts
    - name: Build
      run: bun run build
    - name: Contract check
      run: bun run test:contracts

CI proves its assertions. Payment, publication, and installation may still require provider read-back or real-device verification.

---

Seven review questions for AI code

1. Does it reference a function, option, or package that does not exist?
2. Did it bypass an existing helper, component, or error pattern?
3. Did it change a URL, API contract, or data relationship?
4. Did it add a hidden network request, mutation, or logged field?
5. Did a client-side check replace server-side authorisation?
6. Did it create a complex abstraction for a small problem?
7. Do tests cover user behaviour and failure modes?

A second model can suggest review questions. It does not replace the accountable engineer reading the diff and running the code.

---

Give the agent diagnostic input

Poor input:

It errors. Please fix it.

Diagnostic input:

Command: bun test src/auth/login.test.ts
Expected: invalid password maps to INVALID_CREDENTIALS
Actual: response becomes UNKNOWN_ERROR
First failing assertion: login.test.ts:84
Relevant call path: LoginForm → request.ts → mapApiError
Last known good commit: 1a2b3c4
Constraint: do not change the API response shape

Include the first meaningful failure and relevant call path, not the entire terminal history, .env, or tokens.

---

Three reproducible failure drills

These are exercises, not fabricated “real incidents.”

Drill A: invented API

Ask the agent to introduce a hook that does not exist. Use rg, typecheck, and package docs to prove it is absent, then reuse the repository pattern.

Drill B: wrong concurrency primitive

Add a process-local mutex to a multi-instance order service. Unit tests pass, but two processes still create duplicates. Fix with a database invariant, distributed coordination, or provider idempotency.

Drill C: dangerous migration

Generate a migration that removes a legacy field, but allow only a fixture dry run. Require proof that no read path remains, plus backup and rollback. Stop without production authority.

---

UI work requires viewport QA

Component rendering is not proof that a page is usable. Real viewport QA catches wrapping, overlap, invisible cards, and wrong interaction order.

---

A safe Git rhythm

git status --short
git diff -- path/to/files
git diff --check
git add -- path/to/exact-files
git diff --cached --name-only
git commit -m "fix(scope): describe user outcome"

Other changes in a dirty worktree belong to the user or teammates. Do not stash, reset, restore, or broad-stage them to make your task look clean.

Practice: a list page with all states

1. Define the persona, outcome, frozen URL, and API contract.
2. Find the closest list-page pattern in the repository.
3. Implement only default and loading states, then test.
4. Add empty and error states with recovery.
5. Complete the flow at desktop and mobile viewports.
6. Review the scoped diff and commit only the task files and evidence.

Definition of done

• The prompt includes outcome, context, constraints, and acceptance.
• Each loop handles one verifiable behaviour.
• Automated checks and the real user flow were both executed.
• A prompt did not replace approval for risky side effects.
• Exercises are labelled; no internal incidents or metrics are fabricated.

Related reading

• AI Coding Workflow
• AI Rules Configuration
• Claude Code Examples
• Vibe Coding Hub

Official references

• https://code.claude.com/docs/en/quickstart
• https://kiro.dev/docs/specs/
• https://kiro.dev/docs/steering/