Zero
to Hero.
You don't need to be a programmer to use Claude Code. Our method is plain English and good questions.
This is the field guide for the Vibelabs Claude Code Dagskurs — a one-day, no-jargon, hands-on intensive that takes complete beginners from install to deploy.
Read it before the workshop, work through it in class, return to it whenever you forget a shortcut. It's a single document on purpose: one page, fourteen chapters, every prompt and command worth keeping.
- Audience
- Total beginners
- Format
- 1-day, in person
- Tools
- Terminal, Claude
- Outcome
- Live web‑site
What's inside.
The first half is foundations. The second half is power. Skip around freely.
00
The Philosophy.
Before we touch the terminal, six things to internalise. Read them slowly.
- You don't need to be technical.Plain English and good questions are the method. If you can write an email to a smart colleague, you can do this.
- Ask questions, don't give orders.The Socratic method produces better results than specific commands. Question → conversation → better answer.
- Add context.The more context Claude has — files, research, your vision — the better the output. Context is the work.
- Let it research.Don't just have Claude generate. Have it find and learn from real human content first, then write.
- Use Plan Mode for big changes.Think before you build. Plan Mode forces a step back.
- Use multiple terminals.Run research in one, build in another. Work in parallel, not sequence.
The method is the conversation, not the command.— Vibelabs
01
Install Claude Code.
No Node. No Python. No tooling rabbit hole. The native installer handles everything.
1.1 What you need
- A Mac, Windows, or Linux machine — macOS 13+, Windows 10+ with WSL, or Ubuntu 20.04+
- A Claude Pro or Max subscription (or an Anthropic Console account with billing enabled)
- An internet connection
That's it. No developer tools required.
1.2 Install on Mac / Linux
Open Terminal (Spotlight → “Terminal”) and paste this:
$curl -fsSL https://claude.ai/install.sh | bash
1.3 Install on Windows
Open PowerShell and run:
PS>irm https://claude.ai/install.ps1 | iex
1.4 Verify the install
Close and reopen the terminal, then check:
$claude --version→claude-code 1.18.4 · ready
If you see a version number, you're in. If not, run claude doctor — it diagnoses the common issues automatically.
1.5 Log in
The first time you run claude, it opens a browser window for authentication. Click through, and you're done.
02
Getting started.
A folder, a terminal, a prompt. That's the entire setup.
2.1 Open a project folder
- Make a folder on your machine for the project.
- Right-click → New Terminal at Folder (Mac), or
cdinto it. - Type
claudeand press Enter. - You now have a Claude Code session running inside that folder.
Everything Claude creates lives there. It only has access to files inside the folder — so an empty folder is the safest place to start.
2.2 Your first prompt
Claude creates the files (index.html, etc.) and you iterate:
2.3 Permission modes
Press Shift + Tab to cycle modes:
| Mode | What it does |
|---|---|
| Default | Asks the first time Claude wants to use each tool, then remembers your answer. The safe baseline. |
| Accept Edits | Auto-accepts file changes; still asks before running shell commands. Recommended for daily use. |
| Auto | A safety classifier reviews each tool call. Safe actions go through; risky ones still pause for approval. The new sweet spot — faster than Accept Edits, safer than YOLO. |
| YOLO | Auto-accepts everything, including shell commands. Launch with claude --dangerously-skip-permissions. Only inside a throwaway folder, sandbox or VM — never on your main machine. |
There's also Plan Mode — a separate concept covered in chapter 05. Claude reads and reasons but doesn't touch a file until you approve the plan.
Auto Mode availability: Max, Team, Enterprise, or API plans (not Pro). On Team and Enterprise, an admin must enable it in Claude Code admin settings before you can turn it on.
2.4 /init — give your project a memory
Once you've built something, type /init in the chat. Claude will:
- Read all your files.
- Create a
CLAUDE.mdfile in your project folder. - Write down what the project is, its architecture, and key rules.
2.5 /resume — pick up where you left off
Close the terminal, come back tomorrow, type /resume. You'll see a list of previous sessions. Pick one and continue.
Starting a new session also works — Claude re-reads CLAUDE.md and gets caught up automatically.
03
How to prompt well.
Asking is more powerful than telling. Counterintuitive — but it's the whole game.
3.1 The Socratic method
Instead of telling Claude what to do, ask it questions.
When you ask, Claude thinks deeper. It asks clarifying questions back: What's the use case? How secure does it need to be? Do you need a backend? You answer in plain language. Together you arrive at a much better solution.
When Claude gives you three options and you don't know which to pick:
3.2 When you hit a bug
- Tell Claude to fix it. Let it try 2–3 times.
- Each failed attempt builds Claude's understanding of the problem.
- If it still can't crack it, escalate:
Works the vast majority of the time. It's literally what real programmers do — search Stack Overflow. Claude just does it for you.
3.3 Keep prompts focused
One task per prompt beats cramming five things into one. Want to redesign the homepage and add a contact form and change the fonts? Three separate prompts. Claude does its best work with focus.
04
Context engineering.
This is what separates basic prompting from building real things.
4.1 Local context — drop files in the folder
Anything you put in your project folder, Claude can read: PDFs, Excel sheets, text files, images, any format.
Pro tip: use @ to point at a specific file. Type @ and Claude autocompletes the filename — you don't write the path:
4.2 Web research — send agents out
Claude launches subagents — independent Claude instances, each on its own mission. They search, evaluate, refine, and bring back results. When done:
Now you have a structured docs/ folder Claude can reference while building.
4.3 Advanced research loops
When the agents return, analyze the information, find the gaps, send new agents to fill them. Do this three times. The compounding cycle produces a depth no single search achieves.
4.4 Claude in Chrome
Claude Code can drive your browser — open tabs, click around, fill in forms, read what's on the page. Useful for testing the site you're building, pulling data from apps you're already logged into, and kicking off deep research on Gemini or Perplexity.
Setup is two steps:
- Install the Claude in Chrome extension from the Chrome Web Store (also works on Microsoft Edge).
- Launch Claude Code with the
--chromeflag — or run/chromefrom inside an existing session.
$claude --chrome
To make it the default for every session, run /chrome and pick “Enabled by default”. The downside: browser tools always loaded means more context used, so leave it as a flag if you only reach for it sometimes.
Once it's connected, Claude shares your browser's login state — anywhere you're signed in, it can act. When it hits a CAPTCHA or login wall, it pauses and asks you to handle it manually.
05
Plan Mode.
A fundamentally different mode of working. Claude thinks first, you approve, then it executes.
Press Shift + Tab until you see Plan Mode, or type /plan. Now when you prompt:
Instead of changing files immediately, Claude:
- Analyzes everything.
- Writes a detailed plan — what to fix, what to improve, in what order.
- Presents it for approval.
- You can modify the plan or accept it.
- On accept, it executes everything at once.
5.1 When to use it
- Starting a new project.
- Making big changes.
- Any time you want to think before acting.
- When you want to understand what Claude will do, before it does it.
06
Checkpoints
and undo.
Like save points in a video game. You can be bold because you can always go back.
Claude Code automatically saves your code state before each change. If a change isn't right:
- Press
Esctwice to rewind to the previous checkpoint. - Or type
/rewindto pick which checkpoint to go back to.
When you rewind, choose what to restore:
- Just the code (keep the conversation going)
- Just the conversation (keep the code changes)
- Both
6.1 Git for permanent saves
Checkpoints are temporary. For permanent version control, use Git:
Claude handles the git commands for you. You now have a snapshot you can always return to.
07
Designing with Claude.
Apps, websites, slide decks, posters — anything visual. Sometimes you sketch first. More often, you build first and design last.
7.1 What it is
Claude Design is Anthropic's visual canvas — chat on the left, design on the right. Powered by Opus 4.7. Available on Pro, Max, Team, and Enterprise plans (research preview).
It builds apps, websites, slide decks, posters, one-pagers — anything visual. Once you've set up your design system once (a one-time, five-minute job), every project after that uses your colors, type, and components automatically.
7.2 Build first, design last
You can start a Claude Design project from screenshots, references, and prompts. That works. But here's the move that pays off:
Build the app, website, or deck in Claude Code first. Focus only on features and functionality. Ignore the design entirely — placeholder copy, default fonts, bare HTML. Get the structure right.
Then push it to GitHub.
Then run that GitHub repo through Claude Design — together with your prompts, screenshots, references, brand guidelines, whatever you've gathered.
Now Claude Design knows every component you actually have. It understands the whole project. The design it gives back fits the real thing — not a guess about what the real thing might look like.
It's the same lesson as Chapter 04: context is the work. Give Design the real codebase and it gives you back something real.
Build it first. Design it last.— The Vibelabs way
7.3 Same goes for decks
Building a slide deck for the board? Don't open Claude Design first. Open Claude Code, dump your numbers and key points into a markdown file, have Claude draft the speaker notes and rough slide structure.
Then push that to GitHub. Then run it through Claude Design with your brand guidelines.
Same flow, same payoff. The thinking happens in code; the polish happens in Design.
7.4 The handoff back to code
When the design feels right, hit Export → Send to Claude Code. You get a “handoff bundle”: HTML/CSS/JS prototypes, design system tokens, and the chat transcripts that got you there.
Back in Claude Code, point at the bundle and ask:
The chat transcripts are the underrated part — they give Claude the WHY behind every decision, not just the WHAT. The result is closer to what you actually meant.
08
Get it on the internet.
Four steps from your laptop to a live URL anyone in the world can visit.
8.1 The flow
Claude Code → Git commit → GitHub → Vercel
Claude Code writes locally. Git saves a version. GitHub stores it in the cloud. Vercel detects new commits and auto-deploys.
Vercel detects the new commit and deploys automatically. 10 seconds later, your live website is updated.
8.2 Other platforms
Claude Code isn't tied to Vercel. Netlify, Cloudflare Pages, anywhere — connect your GitHub repo to your preferred platform.
8.3 Importing a V0 or Lovable project
- Push it to GitHub from V0 or Lovable.
- Create a new folder in Claude Code.
- Open terminal there.
- Run
git clone <your-github-url> - Type
claude— your V0 project is now in Claude Code.
Both share the same Git repo. Use V0 for visual drag-and-drop. Use Claude Code for the heavy lifting.
09
Beyond websites.
Claude Code runs on your computer. The blast radius is bigger than you think.
- Read and process spreadsheets
- Send emails (with confirmation rules in CLAUDE.md)
- Connect to APIs
- Build command-line tools
- Transcribe audio files
- Automate repetitive tasks
- Organize files and folders
- Process images
Another example: 200 fakturas (invoices) as PDFs. Drop them in /regnskap, tell Claude to pull the data into Excel for the accountant. Done — work that would take a bookkeeper a full day, finished while you make coffee.
10
Where Claude Code runs.
Five surfaces. One context. Pick up any session, anywhere.
Terminal
Full power. Deep coding sessions. The original surface.
Editor integration
See changes as visual diffs in your editor of choice.
Desktop app
Quick access outside your IDE. For everyday tasks.
Web
Kick off tasks from your browser, anywhere.
iPhone app
Start a task in the terminal, finish it on the go. Use /remote-control to drive your local session from the official Claude app.
Cross-surface
Move a session from one surface to another, with all context intact.
11
Teach Claude a skill.
Of everything Claude Code does beyond writing code, skills are what you'll reach for most — captured know-how Claude loads only when it's needed.
11.1 What a skill is
A skill is a folder with one file inside it — SKILL.md — holding a short description and a set of instructions. Think of it as a reference booklet on a shelf: Claude only takes it down when the job in front of it needs that booklet.
Here is the part that matters. Claude always sees the one-line description of every skill. It loads the full instructions only when your request actually matches. So you can hand Claude a long, detailed process — a whole house style guide, a release checklist, a tone of voice — and it costs almost nothing in the conversation until the moment it is used. Knowledge on tap, no clutter.
#SKILL.md---description: Our writing voice.Use when writing copy or UI text.---Write in plain language. Short sentences,active voice. No buzzwords, no exclamation marks.
The lines between the --- markers are the description Claude always sees. Everything below loads only when it is needed. A skill can also be a whole folder — instructions plus templates, examples, even fonts — when one file is not enough.
A skill runs two ways: Claude loads it automatically when your request matches the description, or you run it yourself by typing /skill-name.
11.2 The skills you already have
Claude Code ships with a handful of skills built in — nothing to install. Type / in a session to see them; /loop, /simplify and /debug are three you will use. They behave like any other skill.
11.3 Make your own — with skill-creator
You do not have to learn the SKILL.md format by hand. There is a skill whose entire job is to write skills: skill-creator. It is the one skill worth installing on day one.
$npx skills add https://github.com/anthropics/skills --skill skill-creator
Then describe the process you want to capture — skill-creator asks a few questions and writes the skill file for you.
This is how you stop repeating yourself. A skill is the way to preserve work you have already done. Two clear signs that something should become one:
- You do the same thing over and over — reports, applications, press releases.
- You spent real time getting something specific right — a tone, a structure, a layout — and want next time to be easier.
Take something you built today and turn it into a reusable skill:
Claude writes the skill and saves it in the project. Next time you ask for something similar, it picks the skill up on its own.
11.4 The wider library — skills.sh
Beyond what you build yourself, skills.sh is the community library — hundreds of ready-made skills, from SEO audits to video editing. Every skill there shows its exact install command, always the same shape you saw above: npx skills add, a repository, and a skill name.
Anthropic publishes its own official skills in that library too. Among them are skills that let Claude build Word documents, spreadsheets and slide decks, and fill in PDF forms — Claude Code is not only for websites. They are not bundled in; you add them like any other skill. You can also type /plugin inside Claude Code to browse and install skill bundles, or simply ask Claude in plain language to install one for you.
11.5 Skill, CLAUDE.md, or rule?
Three places to put knowledge — the difference is when each one loads:
- CLAUDE.md — facts that are always true, loaded every session. “This project is Next.js. Deploy with
pnpm build.” - A skill — a procedure you only sometimes need, loaded on demand. A good rule: when a part of your CLAUDE.md has grown into a step-by-step procedure rather than a fact, move it into a skill.
- Rules (
.claude/rules/) — like CLAUDE.md, but split into small files, each one scoped so it loads only when you touch certain files.
Skills you write live in ~/.claude/skills/<name>/ for every project, or .claude/skills/<name>/ for just this one.
12
Advanced features.
Optional. But once you're comfortable with the basics, this is where it gets serious.
11.1 Custom slash commands
Reusable prompts you trigger with /your-command-name.
- Create a folder:
.claude/commands/in your project. - Add a markdown file. Example:
#review.mdReview the current codebase for:1. Code quality issues2. Performance problems3. Accessibility concernsGive me a prioritized list of improvements.
Now in Claude Code, type /review — it runs that prompt. Parameterized commands work too: fix-issue.md with $ARGUMENTS lets you run /fix-issue 42.
11.2 CLIs — most of the time, simpler than MCP
The lowest-friction way to give Claude Code a new ability is usually a command-line tool — GitHub's CLI, the Vercel CLI, the Stripe CLI, AWS, ffmpeg, anything you'd type yourself. Once it's on your PATH, Claude can run it.
Just ask:
Claude installs it (Homebrew on Mac, winget on Windows), then explains the next step. Authentication is the one thing you do yourself — and it has to happen in a new terminal, not the one Claude is running in.
Open a fresh tab and run:
$gh auth login
Pick the defaults, paste the one-time code into the browser when prompted, done. Back in Claude Code, gh works for the rest of the session — Claude can list issues, open PRs, check workflow runs, the lot.
11.3 MCP servers — for databases and live state
MCP (Model Context Protocol) lets Claude talk to external services through a structured API rather than a CLI. The cost is a bit more setup; the win is structured data flowing both ways.
The clearest case: a database. Neon is a serverless Postgres database, and their MCP server lets Claude create databases, run SQL, manage migrations, and optimize queries — all through natural language.
$claude mcp add neon --transport http --scope user https://mcp.neon.tech/mcp
The --scope user flag installs it globally — every Claude Code project can use your Neon databases. Start Claude Code, run /mcp, and a browser window opens for a one-time login. No API keys, no config files.
Then say:
And from there:
- “Create a new Postgres database for my todo app”
- “Add a users table with email, name, and created_at”
- “Show me the slowest queries and suggest indexes”
- “Create a branch so I can test this migration safely”
Other MCP servers worth knowing: Playwright (browser testing), Supabase, Linear, Stripe.
How to find and install them — two easy ways:
- Inside Claude Code, type
/pluginto browse officially supported MCP servers and install with one click. - Or visit the MCP server's own website and copy the install command they show you. It usually looks like this:
$claude mcp add supabase --transport http https://mcp.supabase.com/mcp
Paste, hit enter, follow any prompts. Done.
11.4 Hooks — automatic behaviours
Hooks run shell commands automatically when Claude does certain things:
- Auto-format code after every file edit
- Run linting before every commit
- Run tests after code changes
Configure hooks in settings.json, or just ask Claude to set them up.
11.5 Plugins — bundle and share
Plugins package slash commands, subagents, MCP servers, and hooks into a single installable unit. Starter kits for specific workflows. Install with /plugin, or browse community marketplaces.
13
Tips & shortcuts.
Bookmark this section. The hotkeys are how the speed compounds.
12.1 Terminal shortcuts
| Action | Shortcut |
|---|---|
| Cmd + V | Paste text |
| Ctrl + V | Paste a screenshot |
| Ctrl + C | Clear the input — or interrupt Claude if a process is running |
| Ctrl + U | Clear the entire line at once |
| ↑ | Cycle previous prompts |
| Esc | Interrupt Claude (same as Ctrl+C while running) |
| Esc esc | Rewind to last checkpoint |
| Option + T | Toggle thinking (run /terminal-setup first) |
| Shift + Tab | Switch mode (Plan / Auto) |
| Ctrl + B | Background a command |
| @filename | Reference a file in your prompt |
12.2 Useful commands
| Command | What it does |
|---|---|
| claude | Start a session in the current folder |
| /init | Initialize project rules (creates CLAUDE.md) |
| /resume | Continue a previous session |
| /plan | Switch to plan mode |
| /model | Switch between Claude models |
| /chrome | Enable Chrome browser control |
| /rewind | Go back to a previous checkpoint |
| /help | Show all available commands |
| /doctor | Diagnose installation issues |
| /config | Adjust settings |
| /plugin | Browse and install plugins |
12.3 Credit-saving tips
- Use Sonnet or Haiku for simple tasks and research — switch with
/model - Use Plan Mode to avoid wasted iterations
- Keep prompts focused — one task at a time
- Use CLAUDE.md rules to prevent unnecessary work
- Close sessions when you're done to avoid idle usage
14
Masterclass: what's new.
Claude Code shipped a wave of features in early 2026. The ones worth knowing — with how to actually use them.
13.1 Auto Mode
The newest permission mode. A safety classifier reviews each tool call before it runs. Safe actions proceed; dangerous ones get blocked.
$claude --enable-auto-mode
13.2 Agent teams
Multiple Claude agents in parallel, each in their own git worktree — no merge conflicts, no stepping on each other's toes. A lead coordinates; teammates work independently.
13.3 Git worktrees
Run 3–5 Claude Code sessions in parallel without interference.
$claude --worktree my-feature
13.4 Teleport, Loop, Voice
- /teleport — start in the terminal, continue on the web with full context.
- /loop 5m … — recurring background worker. Lightweight cron job inside your session.
- /voice — push-to-talk input. Hold space, speak, release. 20+ languages.
13.5 Computer Use + Dispatch
Claude can now control your Mac — click, type, navigate apps — like a human. If something doesn't have an API, Claude uses the screen.
13.6 No-flicker mode
An experimental terminal renderer that updates only what changed instead of repainting the whole screen on every token. The result: no flashing during long streams, a sticky input field at the bottom, and mouse support for clicking and selecting. Once you've tried it, the old renderer feels broken.
$CLAUDE_CODE_NO_FLICKER=1 claude
Add it to your shell profile (~/.zshrc or ~/.bashrc) to make it the default:
$export CLAUDE_CODE_NO_FLICKER=1
13.7 1 million token context
Opus and Sonnet now both support a 1M-token context window — enough to hold a serious codebase in memory. Switch with the [1m] suffix:
>/model opus[1m]
Or set it as your default model in ~/.claude/settings.json. Availability depends on your plan:
| Plan | Opus 1M | Sonnet 1M |
|---|---|---|
| Max · Team · Enterprise | Included | Extra usage |
| Pro | Extra usage | Extra usage |
| API · pay-as-you-go | Full access | Full access |
13.8 More slash commands
| Command | What it does |
|---|---|
| /copy | Copy session output to clipboard |
| /effort | Control thinking depth — low (fast), medium, high, xhigh (thorough) |
| /btw | Add context while Claude is working without interrupting |
| /color | Change the prompt bar color for this session |
| /rename | Rename the current session |
| /compact | Summarize conversation to free up context space |
| /clear | Reset conversation — use between unrelated tasks |
| /desktop | Open current session in the Desktop app |
| /status | Show session info (model, tokens, cost) |
| /undo | Undo the last file change |
13.9 One more thing — Channels
Push events into a running Claude Code session from outside — Telegram, Discord, iMessage, webhooks. Claude reacts in your terminal while you're away. It's plugin-based and currently in research preview.
This is really agent-course territory, but if you're curious: code.claude.com/docs/en/channels.
→
What to build first.
The best way to learn is to build something you actually need. Pick one and start.
Not sure where to start? Here are six honest first projects — small enough to finish today, real enough to use tomorrow.
Start simple. Iterate. Let Claude teach you along the way.
Read it, then build it
together with us.
This guide is the foundation. The dagskurs is where it clicks. Eight hours, twelve people, three coaches, one project per person — you leave with a deployed website and the muscle memory to keep going.