The Vibe Father
Playbook
"What's the best AI for web development?" is the wrong question, and it's costing people money and quality. There is no single best model, because web development isn't one job — it's a frontend that rewards speed, a backend that rewards reasoning, and a hard 10% that rewards raw capability. The best setup runs a different model for each, matched to the work. This is the setup we actually use to build for the web, layer by layer, plus the verify loop that keeps it honest.
The core idea: models per layer, not one model for everything
Web work splits cleanly into three kinds of task, and each has a different sweet spot. Frontend and JavaScript is high-volume, fast-iteration work where you want quick feedback loops. Backend and application logic is where correctness matters and reasoning pays off. And the hard stuff — the concurrency bug, the security-sensitive auth flow, the migration nobody understands — is where you pay for the best model on the board and don't blink.
| Layer | Model | Speed / SWE |
|---|---|---|
| Frontend / JS | Gemini 3.5 Flash or Sonnet 5 | 167 tok/s |
| Backend / logic | Opus 4.8 or GPT-5.3 Codex | 88.6 |
| The hard 10% | Claude Fable 5 | 95.0 |
Full live numbers for every model here are at /benchmarks. The rest of this post is how to use each layer.
Frontend and JavaScript: pick the fast model
Frontend work is a loop: build a component, look at it, adjust, look again. The bottleneck isn't the model's intelligence — it's how fast the loop turns. So you want the fastest model that's good enough, and for frontend, "good enough" is a low bar because you're immediately looking at the result and correcting it.
Gemini 3.5 Flash is our default here at 167 tokens per second — the fastest feedback on the board, which matters enormously when you're iterating on a layout twenty times in an hour. Sonnet 5 is the step up when the frontend has real logic in it — complex state, a tricky form, an intricate interaction — and its 85.2 SWE-bench earns its slightly slower pace. The rule: the more the frontend is looks, the more Flash; the more it's logic, the more Sonnet. We go deeper on the JS-specific tradeoffs in the best AI model for JavaScript.
Backend and application logic: pick the reasoner
The backend is where correctness lives. A frontend bug is visible — the button's the wrong color, you fix it. A backend bug is invisible until it corrupts data or leaks something. So on the backend you shift from speed to reasoning, and you accept a slower, more expensive model because being right is worth more than being fast.
Opus 4.8 at 88.6 SWE-bench is our backbone for backend logic — deep enough to get data models, business rules, and API design right, and priced sanely at $5/$25. GPT-5.3 Codex is the value pick at $1.75/$14: its 74.8 SWE is a step down from Opus, but it drives a shell hard and it's a genuine bargain for the volume backend work — the endpoints, the services, the plumbing. Use Opus where the logic is subtle and Codex where it's clear. Our Python-side breakdown, which most backends touch, is in the best AI model for Python.
The hard 10%: pay for Fable
Every web app has a handful of problems that are genuinely hard: the auth flow you can't afford to get wrong, the race condition that only shows under load, the performance bug with no obvious cause, the legacy integration nobody understands. This is not the place to save money. Claude Fable 5's 95.0 SWE-bench — the top score anywhere — is exactly what you want on the 10% of the codebase where a mistake is expensive to find and worse to ship.
The discipline is to escalate, not start here. Let a cheaper model try first; most of the time it succeeds and you never paid the premium. When a task beats a builder twice, that failure is the signal that it belongs in the hard 10%, and Fable becomes the cheapest way out rather than the most expensive tool in the drawer.
Framework choices agents handle well
Model choice only matters if the framework is one the models know cold. Agents are dramatically more reliable on well-trodden stacks, so pick for training coverage, not novelty. For the web that means Next.js or Laravel for the app, Postgres or SQLite for data, and Tailwind for styling — the combinations the models have seen a million times and never guess wrong. The clever framework you read about last week will have the agent hallucinating APIs that changed in its last release. Boring is a performance feature. We lay out the full web stack in building a SaaS with AI agents.
The verify loop: run the dev server, click the thing
None of the above matters without this, and it's the step people skip. The web is uniquely verifiable — you can see the result — so use that. After every change, run the dev server and click the thing. Not "the model says it works." You, in the browser, doing the action.
- Keep the dev server running. Hot reload means every change is instantly visible. Leave it up in a window you can glance at.
- After each slice, do the action in the browser. Submit the form. Click the button. Load the page as a logged-out user. Watch what actually happens.
- Watch the console and the network tab. A silent frontend error or a 500 on an API call is invisible in the UI but obvious in the devtools. Keep them open.
- Test the unhappy path. Empty input, wrong password, a slow network. The happy path always demos; the unhappy path is where the bugs are.
This loop is why web development is such a good fit for AI: the feedback is immediate and visual, so a bad change gets caught in seconds instead of surviving to production. The tighter the loop, the more you can trust the agent to move fast.
Putting it together
A real web build looks like this: Flash iterating the frontend while you watch the dev server, Opus or Codex building the backend behind it, Fable brought in for the auth flow and the one nasty bug, and you clicking through every slice as it lands. The result costs a fraction of running the flagship on everything and ships better than running the cheap model on everything, because each layer got the model its work actually needed. Running those models side by side with a gate that executes your dev build and tests after each change is what The Vibe Father is built for, but the layered approach works with any tools — the win is in the routing, not the wrapper.
