VibeCoding Pro

The AI coding upgrade that actually ships working software.

VibeCoding is fun. VibeCoding Pro is reliable.

---

What VibeCoding Gets Wrong

Most AI coding workflows look like this:

CODEBLOCK0

Why it's broken: The same AI that generated the code judges whether it works. It suffers from cognitive commitment bias — it can't objectively evaluate what it just built because it already committed to the approach. Bugs survive. Edge cases break. UX issues ship.

The evidence: Anthropic's 2026 engineering research ran an experiment. Solo Claude agents produced 2D game makers where the core game loop was fundamentally broken — entities rendered but ignored all player input. The agent called its own output "working." Only when a separate Evaluator agent physically clicked through the game did it discover the wiring between entity definitions and game runtime was severed.

---

What VibeCoding Pro Gets Right

CODEBLOCK1

The structural fix: Evaluator never reads the generator's code, reasoning, or commit messages. It only reads the SPEC and operates the deployed artifact. This eliminates anchoring bias architecturally — not through clever prompting.

---

When to Use VibeCoding Pro

Scenario	Apply?	Why
React / H5 / Web UI with real interactions	✅ Yes	Playwright can actually click through it
Multi-step form flows (wizard, checkout, onboarding)

✅ Yes | Evaluator can exercise each step |
| API + frontend integration | ✅ Yes | Evaluator calls endpoints and checks DB state |
| Single utility function | ⚠️ Optional | Might be overkill |
| Pure backend logic (no UI) | ⚠️ Use API Evaluator template | Evaluator calls endpoints directly |
| Design-sensitive work (brand identity, layout) | ✅ Yes | Human-in-the-loop variant works best |

---

Quick Start

Step 1: Write a Spec Contract

The SPEC is the most important artifact. It's the Evaluator's only reference.

CODEBLOCK2

Step 2: Run the Loop

1. 1. Generator Agent receives: SPEC + iteration history + previous Evaluator feedback
2. Generator builds artifact and deploys
3. Evaluator Agent receives: SPEC + deployed URL (NOT generator code)
4. Evaluator opens browser, clicks through test scenarios, screenshots, scores
5. Evaluator returns structured JSON with score breakdown
6. If score ≥ threshold → done. If not → loop back to Generator.

---

Architecture Reference

See references/architecture.md for:

• - Four architecture variants (Sequential / Parallel / Staged / Human-in-loop)
• GAN theory deep-dive and why it works
• Spec Contract template (copy-paste ready)
• History format and loop control logic
• Anti-patterns and how to fix them

---

Evaluator Templates

See references/evaluator-prompts.md for:

Template	When to Use	Evaluator Mode
Web/H5 UI	React/Vue/H5/Web components	Playwright browser automation
API/Backend

REST endpoints, microservices | Direct HTTP calls |
| Content/Docs | Reports, copy, documentation | Structured text scoring |

Each template includes:

• - System prompt (calibrated for evaluator independence)
• User prompt with rubric
• Required JSON output schema
• 4 calibration examples (30/60/85/95 score ranges)

---

Iteration Loop Scripts

See scripts/iteration_loop.py for a complete Python implementation:

• - run_generator() — adapt to your agent (Claude API, OpenAI, subagent, etc.)
• INLINECODE4 — adapt to your QA stack (Playwright, HTTP client, etc.)
• Full loop control: plateau detection, approach switching, escalation
• CLI: INLINECODE5

See scripts/calibrate_evaluator.py for evaluator calibration utility:

• - Run on 4 known examples before production
• Auto-detects score drift and suggests rubric adjustments

---

Scoring Rubric

Default rubric (adjust weights by domain):

Dimension	Weight	Measures
Functional completeness	30%	Every spec requirement works end-to-end
Interaction quality

25% | Click/form/nav behavior as a real user |
| Edge case handling | 20% | Error states, empty data, boundary inputs |
| Code/design quality | 15% | Consistency, readability, no anti-patterns |
| Originality/craft | 10% | Avoids template defaults and AI slop patterns |

Threshold guidelines:

Use Case	PASSTHRESHOLD	MAXROUNDS
Internal prototype	70	10
User-facing feature

85 | 15 |
| Production critical | 95 | 20 + human review |

---

Why This Works (Research Background)

Source: Anthropic Engineering, "Harness Design for Long-Running Application Development" (March 2026)

Key findings:

• - Solo Claude agents on 16-feature game maker: core game loop broken, entity runtime wiring severed
• Full harness (Generator + Evaluator): fully working, sprite animation, sound, AI-assisted level design
• Opus 4.6 vs 4.5: improved planning reduced harness complexity needed
• Evaluator value is situational: worth the cost when task exceeds what the model reliably does solo

GAN theory parallel: The Generator tries to fool the Evaluator. The Evaluator tries to catch failures the Generator misses. The adversarial tension drives quality upward. Unlike ML GANs, this uses natural language feedback — it's fully inspectable and steerable.

---

Common Mistakes

Mistake	Why It Fails	Fix
Same agent generates and evaluates	Cognitive anchoring bias	Separate agents with separate prompts
Evaluator reads generator's code

Judges intent, not reality | Show only deployed URL |
| Skipping calibration | Score inflation/drift | Run 3-5 known examples first |
| Vague scoring ("7/10 looks fine") | Unactionable feedback | Require structured JSON per rubric |
| Too few rounds | Generator never converges | Minimum 10 rounds for complex UI |
| Never switching approach | Gets stuck in local minimum | Switch strategy after 3 plateauing rounds |
| Using for trivial tasks | Overhead > value | Reserve for multi-feature/full-page work |

---

OpenClaw Integration

In OpenClaw, use the coder + tester subagents:

CODEBLOCK3

The tester subagent should use the Playwright MCP tool:

• - browser_navigate → open URL
• INLINECODE11 → interact
• INLINECODE12 → form input
• INLINECODE13 → capture evidence

---

Built on Anthropic's 2026 engineering research. Inspired by GAN theory and adversarial validation patterns.