Beginner boot sequence

What is vibe coding?

You describe the result. AI writes and revises the code. You steer by testing, reacting and asking for changes. You do not need to know every model. You only need the right starting tool for your mission.

SKIP TO MODEL COMPARISONS ↓
Choose one mission. Get three tailored routes immediately.
Simulation deck

Watch a build run, hands off

One plain-English prompt, an agent doing the typing, and a live preview on a local server. It cycles website → game → app on loop. Nobody is touching the keyboard. This is a mock, but it is exactly what your screen looks like.

SCENARIO 01 // WEBSITE
agent / website.run
● LIVE
awaiting prompt…
next-command.sh

> that loop is the whole jobPrompt, watch, react. Next: learn the six words that describe every tool doing this for real.

KNOW THE STACK ->
System map

Know the stack in 60 seconds

The point is not to memorize the internet. It is to know which layer you are touching.

01 // BRAIN

Model

The intelligence generating the output. GPT, Claude, Grok, Gemini.

02 // INTERFACE

AI assistant

The product where you talk to a model. ChatGPT, Claude, Grok, Gemini.

03 // WORKBENCH

IDE

A code editor with files and a terminal. Cursor, VS Code.

04 // GENERATOR

Builder

Creates and publishes from plain English. Lovable, Replit.

05 // OPERATOR

Agent

Plans, edits, tests and continues across multiple steps.

06 // CONNECTION

API

The metered pipe an app uses when it calls a model behind the scenes.

Decision room

Compare American AI

The model guide focuses on OpenAI, Anthropic, xAI and Google. Coding environments are labelled separately by origin.

PROVIDERS ONLY · CHECKED 22 JUL 2026
PICK FOR ME

What matters most?

Choose a goal and budget. The strongest matches light up below.

✓ VERIFIED 22 JUL 2026
GOAL
MONTHLY BUDGET
> TOP MATCHES

PRICE CHECK: A monthly assistant subscription does not include API credits. API pricing is metered separately by tokens.

CHOOSE THE PRICE TYPE
01 // US AI ASSISTANTS & MODELS

Which American AI should you use?

OPINION // MY #1: CHATGPT
Focused on OpenAI, Anthropic, xAI and Google. Select PRODUCT or CONSUMER PRICE to sort.
Product / current model Consumer price Best for Keep in mind Official
ChatGPTGPT-5.6 Go $8 · Plus $20
Pro $200 · Business
Best all-round starting point: research, files, images, writing and Codex coding workflows. Free resets from Saint Tibo ↗ Plus and Claude Pro are both $20 USD monthly. Go is cheaper, but it is a lighter plan without full GPT-5.6 Sol access. API billing is separate. PRICING ↗
ClaudeFABLE 5 / SONNET 5 Pro $20 · Max from $100
Team $25/seat monthly
Careful long-form writing, patient explanations and agentic coding with Claude Code. Fable 5 is generally available but may require usage credits. Mythos 5 is limited to approved Project Glasswing customers. MODEL DOCS ↗
GrokGROK 4.5 SuperGrok $30/mo
Lite and Heavy tiers
Live web/X context, fast-moving news, coding and strong multimodal creation. Outstanding PR and distribution. Grok Build access and limits vary by plan. PRICING ↗
GeminiGEMINI 3.5 FLASH AI Plus · AI Pro
AI Ultra
Google ecosystem work, large files/context and fast agentic workflows. Paid-plan prices, limits and availability vary by country; Antigravity is the coding layer. PRICING ↗
Consumer plans are not API credits. Converted amounts are estimates based on the latest available reference rate; providers set final regional prices and taxes.Prices shown in USD.
02 // CODING ENVIRONMENTS

Where should the AI build?

BEGINNER → PRO
Tool / type Starting price Best for Trade-off Official
LovableVISUAL WEB BUILDER Free start
Paid credits
Fast, polished websites and web-app prototypes without managing a local code editor. Easiest visual route; credit use and complex backend work need watching. PRICING ↗
ReplitBUILDER + HOSTING Starter free
Core $25/mo
Generate, run, host and share an app from one browser workspace. Core is $20 USD/mo when annual; agents, hosting and integrations draw from credits. PRICING ↗
CursorAI CODE EDITOR / IDE Hobby free
Pro $20/mo
Real codebases, multi-file changes, cloud agents and maximum project control. Best once you are comfortable with files, terminals and Git. Model usage is metered against the plan allowance. PRICING ↗
Devin + WindsurfCLOUD AGENT + IDE Free · Pro $20
Max $200/mo
Editor assistance plus autonomous cloud tasks and multi-model access. Paid Devin allowances cover Devin sessions, Devin for Terminal and Windsurf IDE usage. PRICING ↗
Grok BuildTERMINAL CODING AGENT API $1 input
$2 output / 1M
Professional repo work, plans, diffs, subagents, skills and local-first terminal workflows. Grok Build 0.1 has a 256k context window. Consumer access and limits depend on the Grok plan. DETAILS ↗
AntigravityGOOGLE AGENT PLATFORM Included quotas
vary by Google plan
Prompt-to-production work tied to Gemini, AI Studio and Google's developer stack. Antigravity includes IDE, CLI, SDK and agent-platform surfaces. Check its pricing page for current quotas. PRICING ↗
IDE = the workbench. Model = the brain. Builder = the faster, more guided route to a published app.
GRAPH VIEW
API PRICE // OUTPUT

US model output cost

Provider list price per million output tokens. Lower is cheaper; actual task cost also depends on total token use.

Claude Fable 5$50
GPT-5.6 Sol$30
Gemini 3.5$9
Grok 4.5$6
USD · output / 1M tokensSOURCES ↗

Subscriptions are separate. Provider discounts, caching and long-context rules can change effective cost.

CODING // SWE-BENCH PRO

Generally available models

One coding benchmark under the harness and settings reported in OpenAI's GPT-5.6 comparison. Higher is better; limited-access Mythos 5 is intentionally excluded.

Claude Fable 580.0
Claude Opus 4.869.2
GPT-5.6 Sol64.6
Gemini 3.1 Pro54.2
Resolve rate · %METHODOLOGY ↗

Different effort settings, agents and harnesses can materially change scores. Grok 4.5 reports 64.7% separately on SWE-Bench Pro.

HOW WE COMPARE MODELS

No single benchmark tells you which model will feel best. Scores shown here come from provider-published material and are kept in their stated harness and effort settings. Onyx is linked as an independent secondary comparison; official provider documentation remains the source of truth for model availability and pricing.

  • Subscription and API prices are never combined.
  • Performance charts identify the benchmark and source.
  • Personal rankings are labelled as opinion.
  • Prices and launches were last checked 22 July 2026.
  • Currency is detected once by country and can always be changed manually.
WHAT CHANGED THIS WEEK
Added budget filters, side-by-side model comparison and mobile cards.
Grok 4.5 launched and became the default in Grok Build.
Grok Build's agent harness became open source.
GPT-5.6 launched across ChatGPT, Codex and API.
01
#1 // DEFAULT

ChatGPT

My best overall pick: broad, approachable and the easiest single place to start.

02
#2 // SPECIALIST

Claude

Excellent for careful writing and code, but second overall for me.

03
#3 // LIVE CONTEXT

Grok

Strong for fast-moving information, X context and xAI's growing coding stack.

> hype radarChatGPT and Grok have the strongest PR and marketing gravity. That does not automatically make them the best for every job, but it does explain why beginners hear those names first.

CHECK TERMS ->

ChatGPT

AI

Best general starting point for questions, files, research and ideas.

PLUS $20/MOAPI SEPARATE
FREEGO $8PLUS $20PRO $200BUSINESSENTERPRISE
WHY / WATCH OUT

Broadest all-round experience and the biggest mindshare. Business and Enterprise are team plans; API billing is separate. Find Out More ↗

Claude

AI

Strong for patient explanations, writing and agentic coding.

PRO $20/MOCODE INCLUDED
FREEPRO $20MAXTEAMENTERPRISE
WHY / WATCH OUT

Claude Code is included in paid plans and shares the same usage pool. Max and Team tiers are for heavier use. Find Out More ↗

Grok

AI

Real-time X-native AI with huge public hype and loud model launches.

FREE TIERSUPERGROK
FREESUPERGROK LITESUPERGROKHEAVYBUSINESSENTERPRISE
WHY / WATCH OUT

Very strong PR and social distribution through X. xAI lists plans separately from some X Premium access paths, so verify the exact subscription before buying. Find Out More ↗

Gemini

AI

Useful for Google-based work and very large context inputs.

PRO $19.99/MO1M CONTEXT
FREEAI PLUSAI PROAI ULTRAAPI
WHY / WATCH OUT

Gemini Pro highlights a one million token context window; app limits and AI credits vary by plan and region. Find Out More ↗

Lovable

BUILDER

Fastest visual route from description to a polished web app.

5 FREE/DAYPRO $25/MO
FREEPRO $25BUSINESSENTERPRISE
WHY / WATCH OUT

Free workspaces receive five daily build credits, capped at thirty per month. Paid tiers add more credits and team features. Find Out More ↗

Replit

BUILDER

Agent, code, hosting and app infrastructure in one workspace.

FREE STARTERCORE $25/MO
STARTERCOREPROENTERPRISE
WHY / WATCH OUT

Core is listed at $25 monthly, or lower when billed annually. Pro is for heavier collaboration; Agent and hosting work use credits. Find Out More ↗

Cursor

IDE

A real code editor with AI working beside your project files.

FREE HOBBYPRO $20/MO
HOBBYPROPRO+ULTRATEAMSENTERPRISE
WHY / WATCH OUT

Best when you want a real codebase. Pro extends agent/model access; Pro+ and Ultra increase usage headroom. Find Out More ↗

learn-more.sh

> tools acquiredNow load ammunition: proven prompts to start from, and the shield checklist to run before anything real ships.

OPEN PROMPT ARSENAL ->
Prompt arsenal

Don't start from a blank box

The fastest route to good output is a prompt that already works. Raid these libraries, swap in your details, fire.

MotionSites

PROMPTS

Premium hero-section and landing-page prompts tuned for React, Tailwind and Framer Motion.

COPY-PASTELOVABLE / CURSOR / V0
HOW TO USE

Pick a template (SaaS, agency, portfolio…), copy its prompt, paste it into your builder. Out comes an animated page. Open MotionSites ↗

Cursor Directory

RULES

Community rule files intended to give coding agents stack-specific guidance.

PER-FRAMEWORKCOMMUNITY
HOW TO USE

Find your framework, review the rule file, then adapt it to your project. Community rules can help, but they are not official Cursor guidance and may become outdated. Open Directory ↗

Zeus: Higgsfield Website Creation

ADVANCED

A Claude Code and Higgsfield MCP workflow for generating motion assets, assembling scroll effects and turning the result into a client-ready website.

MOTION ASSETSAGENTIC WORKFLOWCLIENT SITES
PLAYBOOK + STARTER PROMPT

The useful idea is the production sequence: start with a brand kit, generate purposeful motion, build the page around it, then test pacing, performance and mobile behavior. The revenue and agency-price figures in the post are the creator's estimates, not guaranteed outcomes. Read Zeus's original playbook on X ↗

> advanced example: motion website brief Build a cinematic, scroll-driven one-page website for [BUSINESS]. First define the audience, offer and conversion goal. Use [BRAND COLORS], [TYPE STYLE] and the supplied brand assets. Create only motion that supports the story: an opening hero sequence, two scroll-triggered transitions and one product or service reveal. Keep text readable when motion is paused. Respect prefers-reduced-motion, compress every asset, lazy-load noncritical media and provide static fallbacks. Sections: navigation, hero, proof, offer, process, testimonial and final call to action. Test keyboard access, mobile layout, loading performance and reduced-motion mode. Run it locally, show me the result, then list what you tested and any remaining risks.

Vybe Templates

PROMPTS

A collection of full-app prompt examples organized around common product types.

EXAMPLESPATTERNS INCLUDED
HOW TO USE

Grab the closest example, review it, then swap in your own requirements. Treat community prompts as starting points rather than guaranteed recipes. Open Templates ↗

GIVE CONTEXTname the business, colors, sections
SMALL STEPSone feature per prompt
SAY WHYstate the goal, not just the task
> example: steal this one Build me a one-page site for my dog-walking business called Happy Paws. Style: dark background, one lime accent, bold headline. Sections: hero, 3 pricing cards ($15 / $25 / $40 per walk), a photo grid placeholder, and a contact form. Make it mobile-friendly. When you're done, run it locally so I can see it.
Shield protocol

Don't get hacked

AI-generated code still needs ordinary security review. Check secrets, database policies, authentication and server-side validation before anything real touches the internet. Progress saves in your browser.

0/10 CLEAR
PUBLICFrontend JavaScript and browser network requests can be inspected by visitors
SERVERAuthorization and input validation must also run on trusted server-side code
RLSSupabase recommends enabling Row Level Security on exposed tables and writing policies

No API keys in frontend code

Anything in the page's JavaScript is public. Anyone can open dev tools and read it. Keys live on the server or in your builder's secrets panel, never in the page.

.env is in .gitignore

Pushing secrets to GitHub, even a private repo, is the #1 way keys leak. Ask your AI: is my .env ignored by git?

Row Level Security ON for every table

Without RLS, anyone with your public URL can read every row of every table. Supabase shows a red warning per table. Clear every single one.

Every private page & API route checks login

Hiding a button isn't security. The server must reject signed-out requests on every route, not just the obvious ones.

Users can't see each other's data by changing an ID

If /orders/123 is yours, try /orders/124 as someone else. If it loads, that's the exact bug that has leaked millions of records.

Input validated on the server, not just the browser

Browser-side checks are suggestions; attackers skip your form entirely. The server re-checks everything it's sent.

Rate limiting on anything expensive or sensitive

Login attempts, AI-calling endpoints, email senders. One person in a loop can drain your API budget overnight.

No passwords or personal data in logs

Logging the whole request object feels harmless until your logging service holds everyone's passwords in plain text.

Committed to git before every big change

Your undo button for when the AI confidently deletes something important. Commit early, commit often.

Run a security review before launch

Start with: Review my app for exposed secrets, missing auth checks, and missing RLS policies. List concrete fixes, worst first. Treat the AI review as a first pass, not a substitute for testing or expert review.

SUPABASE CHECKLISTSUPABASE RLS DOCSOWASP TOP 10Security guidance, not a penetration test.
Optional docs

Open only what you need

WHAT IS A TOKEN?

A small chunk of text. Models count tokens to measure context and API use.

WHAT IS CONTEXT?

The model's working desk: everything it can consider during one request.

SUBSCRIPTION VS API?

A subscription pays for an app. An API is usually separate, metered usage.

WHEN SHOULD I PAY?

Only when a free limit blocks a real project you already want to continue.

HOW DO I CHECK OUTPUT?

Ask for sources, test code, review actions and never paste secrets casually.

BEST FIRST PROMPT?

“Make the smallest working version first. Explain the plan and show me how to test it.”

Guide operations

Trust, updates and corrections

A compact record of how this guide stays useful without pretending fast-moving product information is permanent.

QUICK CONCLUSIONS

What should I buy?

  • Beginner: ChatGPT Plus or Go
  • Careful writing: Claude Pro
  • Visual website: Lovable
  • All-in-one build: Replit
  • Real codebase: Cursor
Open the decision room →
UPDATE POLICY

Freshness and privacy

Verified labels record the last manual check. Announced items are not treated as generally available. Link checks run automatically, while price and model changes still require human review.

Currency detection contacts an IP-region service and the Frankfurter exchange-rate service. No account, name or precise location is requested or stored by this page.

CORRECTIONS

Found something outdated?

Model face-off

Afterlight Personal Picks

Personal opinion, not a benchmark. These are the combinations I would recommend after weighing capability, workflow, value and momentum.

BEST ALL-ROUNDER

Codex + ChatGPT 5.6

My strongest overall combination. ChatGPT is the broad everyday assistant, while Codex is the coding agent that plans, edits, runs and reviews work across real projects. OpenAI also has the strongest PR and marketing operation in the category.

BEST PERFORMANCE VALUE

Grok 4.5 + Cursor

An exceptional high-performance combination at a surprisingly low cost. Grok supplies fast, capable model intelligence and Cursor turns it into a practical coding workflow. In my view, it is a true testament to Elon Musk and the xAI team's pace.