Vibe Coding for Claude Subscribers: Claude Code Lives Inside VS Code

Start Cooking is a three-part series for people who already pay for an AI chat subscription and want to taste vibe coding before reading any theory. This is the Claude edition — if you subscribe to ChatGPT or Gemini instead, jump to your edition.

Claude Code has a reputation as the professionals' pick — the agent that serious engineers run in terminals all day. What beginners rarely hear: it's included in the regular Claude Pro plan you may already pay for, and you don't need a terminal to try it. There's a VS Code extension, it bundles everything it needs, and it treats you like an adult: it shows you every change before making it.

One honest note up front: Claude Code needs a paid plan (Pro or Max). The free Claude account won't unlock it.

What you'll have in 15 minutes

A folder on your computer containing a real web app — files an AI wrote while you watched — running in your browser. Taste first, theory later.

The setup

1. Install VS Code. From code.visualstudio.com, install with defaults. Free, and it's the kitchen everything plugs into.

2. Install the Claude Code extension. Press Ctrl+Shift+X (Mac: Cmd+Shift+X), search Claude Code, install "Claude Code for VS Code" by publisher Anthropic. That's the whole install — the extension carries its own engine, so there's no separate download, no Node, no terminal setup. (Windows folks: no WSL either. It just works.)

3. Sign in with your Claude account. Open the panel — look for the ✱ spark icon in the top-right of the editor toolbar, or the "✱ Claude Code" button in the bottom status bar. Click Sign in: your browser opens, you approve with the same account you use at claude.ai, and you're back in VS Code, logged in.

4. Open an empty folder. File → Open Folder → create something like Documents/first-dish. This is your countertop; Claude Code cooks here.

Before you type anything

Claude Code's personality is consent-first. In its default mode, before it edits any file it shows you a side-by-side diff — current version, proposed version — and waits. Before it runs any command, it asks. Early on, just read what it proposes and click approve; you're not expected to understand the code, only to stay in the loop. (Later, when trust builds, the mode switch at the bottom of the prompt box lets it edit automatically.)

Now cook

Paste this into the Claude Code panel and press Enter:

Create a single file called index.html containing a complete little web app: a digital fortune cookie.

- Show a cookie in the middle of the page that cracks open with a fun animation when clicked, revealing a random fortune.
- Write 20 original fortunes about technology, building things, and beginner's luck.
- After showing a fortune, offer a "one more cookie" button.
- Warm, cozy design. Everything — HTML, CSS, JavaScript — must live in this one file, no external libraries.
- When you're done, tell me exactly how to open it and what to try.

Claude will think for a moment, then propose creating index.html — you'll see the whole file it wants to write. Approve it. The file lands in your folder (watch the explorer on the left). When it's done, find index.html and double-click it. Your browser opens. Click the cookie.

You just shipped software by having a conversation.

What just happened

You described an outcome; the agent wrote the structure, the styling, the logic, and 20 fortunes into one real file on your disk — after showing you its work and asking permission. That permission flow feels slow for about ten minutes, and then you realize it's the reason you always know what's happening in your own kitchen. One more habit worth stealing on day one: type /usage in the panel any time to see how much of your plan's 5-hour window you've used (your claude.ai chats share the same pool).

Second helpings

Ask for changes in plain words, one at a time:

• "Make the cookie look more realistic and add a crumb explosion when it cracks."
• "Add a button to copy the fortune to my clipboard."
• "Keep a counter of how many cookies I've opened, saved between visits."

Describe, taste, adjust — approving as you go. When something looks wrong, describe exactly what you see; precise complaints beat technical vocabulary every time.

Cooking with a different subscription? The same recipe exists for ChatGPT subscribers (Codex) and Gemini subscribers (Antigravity) — same fortune cookie, different kitchen.