The complete vibecoding setup
A systematic approach to AI-assisted development that produces production-grade code. The 6-step workflow, prompts, and tools.
This is the workflow I used to build every tool on Building Open. It's not "vibe coding" in the sense of winging it. It's a systematic process that uses AI as a force multiplier while maintaining the code quality you'd expect from a senior engineer.
Core idea: Plan thoroughly, execute with guardrails, verify obsessively. The AI writes code; you architect, review, and decide.
The 6-step workflow
Step 0: Familiarize
Before making any changes, the AI needs to understand the entire codebase. Don't skip this. The quality of everything downstream depends on it.
Please familiarize yourself with the repository.
Continue your research. Fully done? Sure?Step 1: Describe
Describe the bug or feature clearly. Include expected vs actual behavior, acceptance criteria, and relevant context. The better your description, the better the plan.
# Example:
Bug: User auth fails when email contains + character
Expected: Any valid RFC 5322 email should work
Actual: 500 error on emails like user+tag@gmail.comStep 2: Plan
Ask the AI to produce a step-by-step plan with files to modify, tests to write, and risks identified. Constrain the plan with quality standards:
Make a plan. Ensure it is:
- Iterative (small, incremental changes)
- Test-driven
- DRY, SOLID, KISS
- Modular
- Minimal lines of code changed
Continue planning. Fully done? Sure?Step 3: Verify 5x
This is the step most people skip, and it's the most important. Ask the AI to verify its own plan five times. Each round of self-review catches edge cases, over-engineering, and incorrect assumptions.
Are you 100% confident with this plan?
Verify it follows: iterative, test-driven,
DRY, SOLID, KISS, modular, minimal changes.
Repeat 5 times.Red flags: "I think this should work" (not confident enough), large file rewrites (should be targeted), skipping tests, complex solutions where simple ones exist.
Step 4: Execute
Now switch to agent mode. Let the AI implement the verified plan with full access to your codebase:
Execute the plan. Never deviate from track.
If something changes, stop and escalate.
REQUIREMENTS:
- SOLID, DRY, modular, production-grade
- Long-term solutions, not bandaid fixes
- Find and fix ROOT CAUSES
- Safe types (no 'any' in TypeScript)
PROCESS:
1. Analyze → 2. Plan → 3. Self-debate
4. Verify files → 5. Iterate until optimal
6. Apply fix → 7. Verify correctness
8. npm run type-check
9. npm run lint
10. npm run build
11. Fix all errors iterativelyStep 5: Review 5x
After execution, switch back to ask mode and have the AI review its own work five times:
Are you 100% happy with your work?
Verify: Done, Ready, Clean,
SOLID/DRY/Modular, Tested,
Minimal LOC, Safe (no deleted work).
Repeat 5 times.Step 6: Close
Final gate. Nothing pending, everything cleaned up, production-ready.
All done? Can we close this session?
Nothing pending. All cleaned up.
100% confident. Production-ready.System prompt
Use this as your AI assistant's system prompt. It sets the quality floor for every session:
# CORE PRINCIPLES
We STRONGLY prefer simple, clean, maintainable
solutions over clever or complex ones.
# STRICT RULES
MUST match style and formatting of surrounding code
MUST NEVER make changes unrelated to current task
MUST NEVER remove comments unless provably false
MUST NEVER rewrite without EXPLICIT permission
MUST NEVER use temporal naming ('improved', 'v2')
# CONVENTIONS
Core files start with 2-line ABOUTME comment:
// ABOUTME: This file handles user authentication
// ABOUTME: Includes login, logout, session mgmt
NEVER refer to temporal context in comments
DO NOT generate documentation unless askedClaude.md template
Save as CLAUDE.md in your project root. It configures the AI as an intelligent agent dispatcher that uses the right tools for each task:
UX/UI Review
Playwright MCP for navigation, screenshots, accessibility, responsive checks
Security Audit
Semgrep for static analysis, manual review for business logic and auth patterns
API Design Review
Endpoint analysis, REST compliance, error handling, CORS
Testing Strategy
Test suites, coverage review, untested paths, improvement suggestions
Database Optimization
Schema review, query patterns, indexing, RLS policies
Supporting tools
MCP Servers
- Playwright — browser testing
- Semgrep — security scanning
- Snyk — dependency vulns
Tip: use --scope user to make MCP global.
Verification
npm run type-check
npm run lint
npm run build
npm test
npm run test:coverage
semgrep --config=auto
Claude Code tips
/initAuto-create a CLAUDE.md from your codebase/rewindUndo changes when something goes wrongthink3 levels: think, think hard, ultrathink — use for complex decisionsstyleguide.mdAdd a styleguide file for consistent UI across AI sessionsRelated