Getting Started

Claude Code Guide

A Mac setup guide for building apps, websites, and cool stuff with AI — no coding experience needed.

01

Create a Claude Account

First things first — you need a Claude account.

Pro Plan Required

  1. Go to claude.ai
  2. Click Sign up and create your account (you can use Google or email)
  3. Once signed in, subscribe to the Pro plan ($20/month) — Claude Code requires a paid plan

The Pro plan gives you access to Claude Code plus the chat app. You can cancel anytime.

02

Download the Claude App

Before we start setting things up, grab the Claude chat app. You'll use it as your troubleshooting buddy for the rest of this guide — if you get stuck on any step, just ask Claude.

  1. Go to claude.ai/download
  2. Download the Mac app and open the .dmg file
  3. Drag Claude into your Applications folder
  4. Open it and sign in with the Claude account you just created
03

Set Up Two Screens

Put Claude on one screen and this guide on another so you can ask for help instantly.

  1. With the Claude app open, hover over the buttons (top-left corner) and click the green one → "Enter Full Screen"
  2. Switch to your browser (this guide) and do the same — green button, "Enter Full Screen"
  3. Swipe left or right with three fingers on your trackpad to jump between them

Pro tip: Double-tap the Option key to summon Claude from anywhere on your Mac — no need to switch screens.

Stuck on a step? Tell Claude: "I'm following a setup guide and I'm stuck on [step]. Here's what I see..."

04

Open Terminal

A window where you type commands to your Mac. We'll only need it for initial setup — we'll set up a proper code editor on the next page.

Press Cmd + Space to open Spotlight (the search bar that appears in the center of your screen). Type Terminal and press Enter.

A dark window with a blinking cursor appears — it looks like this:

user@MacBook:~$ █

This is where you'll paste the first few setup commands. To paste: Cmd + V.

05

Install Homebrew

Homebrew is a tool that lets you install other tools. Paste this into Terminal and press Enter:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

It will ask for your Mac password (the one you use to log in). You won't see characters as you type — that's normal. Type it and press Enter. Then wait.

After it finishes

Look at the last few lines of output. It will say "Next steps" and show you commands to run. The output looks something like this:

==> Next steps:
- Run these commands in your terminal to add Homebrew to your PATH:
  echo >> ~/.zprofile
  echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile

Copy and paste each command into Terminal one by one:

echo >> ~/.zprofile
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

Note: If you are on an Intel Mac, your commands might say /usr/local/bin/brew instead of /opt/homebrew/bin/brew. Use whatever the terminal output shows you!

🛠

Dev Tools

Node.js, Git, GitHub, and Claude Code.

01

Install Node.js

Node.js lets you run JavaScript projects on your Mac. You'll need it for most web projects. Paste these into Terminal one at a time:

brew install node

Then install the Vercel tool (you'll need this later to put websites on the internet):

npm install -g vercel

Wait for both to finish. That's it.

02

Set Up Git & GitHub

Git saves snapshots of your code so you never lose work. GitHub stores your code online. You need both.

Install Git and GitHub tools

Paste this into Terminal:

brew install git gh

Create a GitHub account

Go to github.com and sign up. It's free. Come back here when you're done.

Tell Git who you are

Replace "Your Name" and the email with your actual name and the email you used for GitHub. Paste each line into Terminal:

git config --global user.name "Your Name"
git config --global user.email "you@email.com"

Log in to GitHub from Terminal

Paste this into Terminal:

gh auth login

It will ask you questions. Use your arrow keys and Enter to select:

  1. GitHub.com
  2. HTTPS
  3. Yes (authenticate Git with your GitHub credentials)
  4. Login with a web browser

It shows a code. Press Enter to open your browser, paste the code, and click Authorize.

03

Install Claude Code

One command. Paste this into Terminal:

curl -fsSL https://claude.ai/install.sh | bash

Wait for it to finish. Then quit Terminal (Cmd + Q) and reopen it. Verify:

claude --version

See a version number? You're good.

This is the official installer from Anthropic. It auto-updates, so you never have to update manually.

💻

VS Code

Your home base for building with Claude Code.

01

Download & Install

VS Code is a free code editor. It's where you'll see your files, watch Claude make changes, and build everything.

  1. Go to code.visualstudio.com
  2. Click the big Download button for Mac
  3. Open the downloaded .zip file
  4. Drag Visual Studio Code into your Applications folder
02

Install the Claude Code Extension

This connects Claude Code to VS Code so it can edit your files and show changes live.

  1. Open VS Code
  2. Click the Extensions icon on the left sidebar
  3. Search for "Claude Code"
  4. Click Install on the one from Anthropic
03

Open Claude Code

Claude Code runs in a terminal inside VS Code. To make it easier to use, drag it up to the top tab bar so it sits alongside your files.

  1. Press Ctrl + ` to open VS Code's terminal (a panel appears at the bottom)
  2. Type claude and press Enter to start Claude Code
  3. See this small tab at the top of the terminal panel? zsh Click and drag it upward into the main editor area where file tabs normally appear. Let go when you see a blue highlight.

Now Claude Code lives as a tab at the top — right alongside your files. You can click between tabs to switch between Claude and your code.

04

Your Two-Screen Workflow

Remember the two-screen setup from Getting Started? Now put VS Code on one side instead of this guide:

  • Screen 1 — Claude Chat: For thinking and planning ("How should I structure this?")
  • Screen 2 — VS Code + Claude Code: For building ("Add a nav bar to the page")

Three-finger swipe on your trackpad to jump between them.

🚀

First Project

Everything's installed. Let's build something.

01

Create a project folder

In VS Code, click the Explorer icon in the left sidebar, then click Open Folder. Create a new folder called my-first-project anywhere you like, then open it.

The left sidebar now shows your empty folder. This is where Claude will create files for you.

02

Launch Claude Code

Open Claude Code in VS Code's terminal and drag it to the top tab bar (just like you set up on the VS Code page).

  1. Press Ctrl + ` to open the terminal
  2. Type claude and press Enter
  3. Drag the terminal tab up to the top bar

First time? It'll open your browser to log in. After that, you'll see a > prompt. You're in.

03

Tell it what to build

Type a prompt and hit Enter. Try this one:

Build me a simple website with a welcome page and a nice design

Claude will ask permission before writing files. Type y to approve.

04

See what you built

Claude is still running in one terminal tab. You need a second terminal to run your site.

  1. Click the button next to your terminal tabs, or press Ctrl + `, to open a new terminal
  2. Start the dev server:
npm run dev

It'll show a URL like http://localhost:3000 — open that in your browser to see your site.

Press Ctrl + C to stop the server when you're done. If npm run dev doesn't work, ask Claude: "how do I run this?"

💬

Daily Basics

The commands you'll use every day once you're set up.

The AI Mindset: Chat vs. Code

It's important to know which Claude to talk to:

  • Claude App / Chat: Best for thinking. Ask it "How should I structure this?" or "What's the best way to build a menu?"
  • Claude Code (Terminal): Best for doing. Tell it "Build that menu we just talked about" or "Fix the bug in this file."

Think of the Chat as your Architect and Claude Code as your Builder.

Pro tip: Use Chat to write your prompts

Not sure what to tell Claude Code? Ask Claude Chat first:

Write me a Claude Code prompt to add a contact form to my website

Claude Chat will give you a detailed, well-structured prompt. Copy it and paste it into Claude Code.

Something look wrong? Take a screenshot

If your site doesn't look right or you hit an error, take a screenshot (Cmd + Shift + 4) and drag it into Claude Chat. Ask "what's wrong with this?" — Claude can read images and tell you exactly what to fix.

Start Claude Code

Open your project folder in VS Code (click the Explorer icon in the left sidebar → Open Folder).

Press Ctrl + ` to open the terminal, type claude, and drag the terminal tab up to the top bar. Type what you want and hit Enter.

Resume where you left off

Left Claude Code? Pick up your last conversation:

claude --continue

Browse past conversations

Pick from a list of previous sessions:

claude --resume

Quick one-off question

Don't want a full session? Get an answer and exit immediately:

claude -p "what does this project do?"

Permissions

Claude always asks before changing files. It looks like this:

Claude wants to edit index.html
  y Allow   n Deny   a Always allow
yYes, allow this
nNo, don't do it
aAlways allow this type (this session)

Slash commands

Type these at the > prompt:

/helpShow all commands
/clearStart fresh
/compactCompress conversation
/commitCreate a git commit
/costShow how much this session has cost
/exitLeave Claude Code

Exiting

Type /exit or press Ctrl + C twice.

Troubleshooting

If things aren't working as expected, try these common fixes:

"Command not found: claude" Try source ~/.zshrc or restart your terminal.
Permission denied Ensure you're in a folder you have access to. Don't use sudo with Claude.
"Rate limit reached" Claude Code shares your Claude Pro limits. Take a short break or check your plan.
Authentication expired Run claude auth logout then claude auth login to re-authenticate.
✎

Making Changes

How to iterate on your project — ask for changes, review them, and build up piece by piece.

01

One thing at a time

The biggest beginner mistake is asking for too much at once. Small, specific prompts get better results than big vague ones.

"Build me a full website with a navbar, hero section, about page, contact form, and make it mobile responsive"
"Add a navigation bar at the top with links to Home, About, and Contact"

Each prompt should do one thing. Once it works, move on to the next thing. Think of it like giving directions — one turn at a time.

02

Check what changed

After Claude makes changes, look at the result. Open your browser, refresh the page, and see what actually happened.

Read the output

Claude tells you what it changed and why. Read its response before moving on — it often mentions things you'll want to know, like files it created or decisions it made.

If the change looks right, great — ask for the next thing. If something's off, tell Claude what to fix.

03

Ask for fixes

"That's not what I wanted" is a perfectly valid thing to say. Claude won't get it right every time, and that's fine. Just tell it what to change.

You don't need to be technical. These all work:

"Make the header smaller"
"Change the blue to green"
"Move the image to the right side"

It's a conversation. You don't need to get your prompt perfect on the first try — just keep talking.

04

Undo mistakes

Git is your safety net

If you set up Git on the Getting Started page, Claude automatically saves snapshots of your code. That means you can always go back if something breaks.

The easiest way to undo something is to just tell Claude:

"Undo the last change"

Claude will use Git to revert the change. If things get really messy, you can also undo multiple changes or go back to a specific point.

Fresh start

If Claude seems confused or stuck, type /clear to reset the conversation. It keeps your files but starts the chat fresh, which often fixes weird behavior.

05

Build piece by piece

Real projects are built in small steps. Here's what a typical session looks like:

Example flow

  1. "Add a nav bar with links to Home, About, and Contact" — check it, looks good
  2. "Change the background color to dark blue" — check it, looks good
  3. "Add a contact section with an email link" — check it, the font is too small
  4. "Make the contact section text bigger" — check it, looks good
  5. "Make everything look good on mobile" — check it on your phone, done

Each step is small. Each step gets checked. That's the whole workflow.

Don't try to build everything at once. Ask for one thing, check it, then ask for the next. You'll be surprised how fast things come together.

▲

Deploy with Vercel

Put your website on the internet so anyone can see it.

01

What is Vercel?

Vercel is a free service that turns your project into a live website with a real URL. You set it up once, and every time you push changes, your site updates automatically.

02

Create a Vercel Account

Sign up using your GitHub account — this is how Vercel accesses your code.

  1. Go to vercel.com
  2. Click Sign Up
  3. Choose Continue with GitHub
  4. Authorize Vercel to access your GitHub account
03

Deploy Your Project

Tell Claude Code to handle everything — creating the GitHub repo, connecting Vercel, and deploying:

Create a GitHub repo for this project, deploy it to Vercel, and give me the live URL

Claude Code will connect your project to Vercel and deploy it. Approve the commands when it asks. It may open your browser once to log in to Vercel — just authorize and come back.

When it's done, you'll get a live URL. Your site is on the internet.

04

Pushing Updates

Every time you want your live site to update, just tell Claude Code:

Commit my changes and push to Vercel

Claude Code handles the git commands. Your live site updates within a minute.

🧠

Memory

Claude has two ways to remember things: files you write (CLAUDE.md) and notes it keeps automatically (auto-memory).

What is CLAUDE.md?

A plain text file that Claude reads automatically at the start of every conversation. You don't need to ask it to read the file — it just does.

Think of it as your project's instruction manual for Claude. It tells Claude how you like things done so you don't have to repeat yourself every session.

Where CLAUDE.md files live

You can have multiple CLAUDE.md files in different places. Claude loads all of them and merges the instructions together.

~/.claude/CLAUDE.mdPersonal, all projects — your global preferences (e.g. "be concise")
CLAUDE.mdProject root — shared with your team via git (e.g. "use 2-space indentation")
CLAUDE.local.mdPersonal, this project — auto-gitignored, for your private preferences
.claude/rules/*.mdModular rules — split instructions into topic files (e.g. testing.md, api.md)

More specific files override broader ones. Project rules beat personal rules.

Create your first CLAUDE.md

The fastest way: run /init inside Claude Code. Claude scans your project and generates a starter CLAUDE.md for you.

/init

Or just ask Claude to create one for you:

Create a CLAUDE.md for this project with our conventions

What to put in it

  • How to run things: "Use npm run dev to start the app"
  • Your preferences: "Always use dark mode colors" or "Keep code simple"
  • Things Claude gets wrong: Corrections so it doesn't repeat mistakes
  • Project context: What the project is and how it's organized

What NOT to put in it

  • File lists: Claude can find files itself
  • Code style: Claude reads your existing code and follows it
  • Obvious things: "write clean code" — Claude already does this
  • Secrets: Use CLAUDE.local.md for personal stuff (it's gitignored)

Keep it short — under 100 lines. If it's too long, Claude loses important rules in the noise.

Auto-Memory: Claude's Notebook

Separate from CLAUDE.md, Claude also keeps its own notes called auto-memory. This is stuff Claude learns while working with you — project patterns, debugging insights, your preferences.

Auto-memory is stored in ~/.claude/projects/<project>/memory/ and the first 200 lines load automatically each session.

"Remember this"

Tell Claude to save something specific to auto-memory:

Remember that I want my website to have a blue and white theme

Claude saves it and recalls it in future sessions automatically.

Manage your memory

Type /memory to open the memory file selector. You can view, edit, or clear what Claude remembers.

/memory

CLAUDE.md vs Auto-Memory: Quick Reference

CLAUDE.mdYou write it. Instructions & rules. Like a project handbook.
Auto-memoryClaude writes it. Things it learned. Like Claude's notebook.
/initAuto-generate a CLAUDE.md based on your project
/memoryView and manage Claude's auto-memory
"Remember this"Tell Claude to save something specific to auto-memory
⚡

Skills

Add-ons that give Claude Code extra abilities — like apps on your phone.

What can skills do?

  • Generate PDFs, Word docs, or spreadsheets
  • Follow specific coding patterns
  • Run specialized workflows (testing, deploying)
  • Connect to external tools & services

Find & install skills

Inside Claude Code, type:

/find-skills

Claude searches for matching skills and helps install them.

Using a skill

Once installed, trigger a skill by typing its slash command. For example, if you installed a design skill:

/frontend-design

Skills add new slash commands. Built-in commands like /commit and /help work without installing anything.

Where skills live

~/.claude/skills/Your personal skills — available everywhere
.claude/skills/Project-specific skills

Browse the Skills Marketplace

Go to skills.sh — it's an open directory of community-built skills you can install with one command.

Popular skills include:

  • frontend-design — UI/UX design principles
  • vercel-react-best-practices — React patterns from Vercel
  • web-design-guidelines — Design standards and accessibility

Each skill listing shows the exact install command. For example:

npx skillsadd anthropic/frontend-design

Copy the install command from the skill's page on skills.sh — don't guess the name.

💡

Tips & Tricks

Level up your workflow once you're comfortable with the basics.

Plan before building

Press Shift + Tab to enter plan mode. Claude will research your code and propose a plan before writing anything. You approve first, then it executes.

Be specific

"make a login page"
"Create a login page with email and password fields, a submit button, validation errors, using our Button component from src/components"

Make Claude think harder

Add these words to your prompt to control how deeply Claude thinks:

"think" Moderate thinking — good for multi-file changes
"think hard" Deep thinking — for complex bugs or architecture decisions
"ultrathink" Maximum brainpower — for critical, high-stakes decisions

Example: "think hard about why this login page keeps crashing and fix it"

What Claude can read

Claude Code isn't just for writing code. You can throw all kinds of files at it:

  • Spreadsheets & Excel: Analyze data, find patterns, create summaries
  • PDFs: Extract text, summarize documents, compare versions
  • Images & screenshots: Read error messages, interpret charts, explain what's on screen
  • Writing: Draft emails, reports, meeting notes, documentation

Pipe things in

Send files or command output directly:

cat error.log | claude -p "explain what went wrong"

The | ("pipe") sends one command's output into the next.

Prompt Recipes

Try these specific prompts for better results:

Clean up: "Rewrite this file to be easier to read and simpler, but keep it working the same way."
Check: "Check my work for any mistakes and tell me if there's a better way to do it."
Explain: "Explain how this code works like I'm five years old."
Fix: "I'm seeing an error message that says [paste error here]. Can you find out why and fix it?"

Updating

Claude Code updates itself automatically. You don't need to do anything.

🚧

Advanced

MCP servers, custom hooks, headless mode, and other dark arts.

I made this guide because I was tired of explaining the same setup to each one of you fools one by one. But I'm still figuring out the advanced stuff myself.

If you've made it this far, congrats — you're now roughly as skilled as I am. We in this together.

Things I know exist but haven't fully figured out yet

  • MCP servers — connecting Claude Code to databases, APIs, and other tools
  • Custom hooks — shell commands that auto-run when Claude does things
  • Headless mode — running Claude Code in scripts and CI/CD pipelines
  • Multi-agent workflows — multiple Claude instances working together
  • Custom permission policies — fine-grained control over what Claude can do

When I figure these out, I'll update this page. Or more likely, I'll ask Claude Code to update it for me.

In the meantime, the official docs are at docs.anthropic.com. Good luck in there.

You made it.

You've gone through the whole guide. You know how to set up Claude Code, build projects, deploy them, and teach Claude your preferences. That's everything you need.

For the advanced stuff above, the official docs are your best bet: docs.anthropic.com