Suggest edit — Vibe Coding Tutorial

Title

Name

Note

---
title: Vibe Coding Tutorial
visibility: public
---

# The Absolute Basics — Getting Started with Vibe Coding

Everything you need to install to start building software with AI. **No programming experience required.**

> **💡 What is vibe coding?**
> Vibe coding means describing what you want in plain English and letting AI write the code. You don't need programming experience — just the tools below and a clear idea of what you want to build.

> Create a remote vibe coding computer for yourself at [Cortex.ideaflow.app](https://cortex.ideaflow.app)! Works on mobile too. Recommended: SSH in to use it (see the command shown after you create the machine), or try the web UI. Choose any machine size you want — cost is on us. Ask for help if needed.
>
> **Windows users:** run `wsl --install` first.

## 01 — Create a GitHub Account
*Where your code lives — like Google Drive, but for code.*

GitHub keeps track of every change to your project and lets you share your work. Every tool in this guide connects to it, so start here.

➤ Sign up at [github.com/join](https://github.com/join)

## 02 — Install Claude Code
*The AI that writes your code.*

Claude Code is an AI assistant that runs in your terminal. You describe what you want to build in plain English, and it writes the code, edits files, and runs your project for you. This is the heart of the whole workflow.

**Prerequisite:** install Node.js first — [nodejs.org](https://nodejs.org)

Install command (from the Claude Code docs): download and run the installer script from `claude.ai/install.sh`.

➤ Full docs at [docs.anthropic.com](https://docs.anthropic.com/en/docs/claude-code/overview)

## 03 — Get iTerm2 (Mac)
*A better terminal for split-screen workflows.*

Your terminal is where you'll talk to Claude Code. Run your app on one side and Claude on the other — much easier to see what's happening.

➤ Download from [iterm2.com](https://iterm2.com)

> **⌨️ Useful shortcut:** `Cmd+D` splits the window vertically, `Cmd+Shift+D` horizontally. This way you can watch your app and Claude Code at the same time.

## 04 — Install the GitHub CLI
*Manage your code repos without leaving the terminal.*

The GitHub CLI (`gh`) lets Claude Code create repositories, push your code, and manage your projects — all without opening a browser. Install Homebrew first ([brew.sh](https://brew.sh)), then install `gh` and run `gh auth login`.

➤ More info at [cli.github.com](https://cli.github.com)

## 05 — Install Chrome DevTools MCP
*Let Claude see what's happening in the browser.*

This connects Claude Code directly to Chrome's developer tools. When something isn't working in your web app, Claude can inspect network requests, read console errors, and see the page state in real time — just like a human developer would. Install the `chrome-devtools-mcp` package globally with npm.

➤ [GitHub repo](https://github.com/anthropics/chrome-devtools-mcp)

## 06 — Install Beads
*Keep track of tasks across AI sessions.*

Beads is a lightweight issue tracker that lives inside your project. It helps you and Claude keep track of what's done, what's left, and what depends on what — especially useful when you come back to a project the next day and Claude needs to pick up where it left off. Install the `@beads/bd` package globally, then run `bd init` in your project and `bd setup claude`.

> **⚠️ Don't skip `bd setup claude`** — it installs hooks that teach Claude Code how to use Beads properly. Without it, Claude won't know the workflow.

➤ [GitHub repo](https://github.com/steveyegge/beads)

## Your First Session

Once everything is installed, this is all you do:

1. Open iTerm2
2. Create a project folder and enter it
3. Type `claude` to start Claude Code
4. Describe what you want to build!

For example, make a new folder, enter it, start `claude`, and ask it: *"Build me a personal website with a homepage, about page, and contact form with validation."*

### Tips for Better Results

- **🎯 Be specific** — "Add a login form with email and password fields, validation, and error messages" beats "add login."
- **🗺️ Let Claude plan first** — for big features, say "plan out how we'd build X" before diving in. Better roadmap, fewer dead ends.
- **🧪 Experiment safely** — say "try this but don't commit" when you're unsure. Easy to undo if it doesn't work out.
- **💡 Ask Claude to explain** — "Explain this code before we change it" helps you learn and catches mistakes before they happen.
- **📝 Create a CLAUDE.md file** — put a `CLAUDE.md` in your project root with notes about your app. Claude reads it automatically.

## Quick Reference — All the Links

| Tool | Link |
|------|------|
| GitHub | <https://github.com/join> |
| Node.js | <https://nodejs.org> |
| Homebrew | <https://brew.sh> |
| Claude Code | <https://docs.anthropic.com/en/docs/claude-code/overview> |
| iTerm2 | <https://iterm2.com> |
| GitHub CLI | <https://cli.github.com> |
| Chrome DevTools MCP | <https://github.com/anthropics/chrome-devtools-mcp> |
| Beads | <https://github.com/steveyegge/beads> |

> **🚀 Want the advanced guide?**
> Safety hooks, permission tiers, Playwright browser automation, sound notifications, session management, and much more: [github.com/tmad4000/vibe-coding-guide](https://github.com/tmad4000/vibe-coding-guide)

---
*Source: [Google Doc](https://docs.google.com/document/d/1JUCxLU9r2MOEdY971o2At6jsNSEZmmNG/edit), transferred to WikiHub 2026-06-07.*