Claude CodeVibe CodingBeginner GuideAI DevelopmentProduct Development

Claude Code Hands-On Tutorial (2026): Build Your First Product with AI, Step by Step

· 14 min read
Beginner Track (Desktop) · Part 3 of 5 View the whole series →
Table of Contents
  1. How is Claude Code different from other AI tools?
  2. Step 0: Install and log in
  3. Step 1: Get your idea clear (the most important step)
  4. Step 2: Start the conversation, and have it plan before it builds
  5. Step 3: Test → describe the problem → fix (the core loop of vibe coding)
  6. Step 4: Always verify, especially where data is involved
  7. From toy to real product: scale up the loop
  8. 1. Build in batches, don't ask for too much at once
  9. 2. Give enough context
  10. 3. Treat the AI as someone to discuss with, not just a worker
  11. FAQ
  12. A checklist you can start on today
  13. Summary

If you want to learn Claude Code and understand how vibe coding actually works in practice, this post is for you. The shortest answer: in Windows PowerShell, run irm https://claude.ai/install.ps1 | iex (no need to install Node.js first, and it updates itself), type claude inside your project folder, then tell it in plain English what you want to build. It reads your files, writes code and runs commands directly; your job is to test and keep the direction right. No copying and pasting, no memorising syntax. You only need to describe the problem clearly and judge whether the result is right.

👋 This is step three (the terminal stage) of the "Getting Started: Desktop Track" series. If you have never touched an AI development environment, start with Step 1: Install Google Antigravity and Step 2: Build your first real thing, and use the free graphical interface to get comfortable with the loop of "hand over a task → check the result → revise" before coming back to the terminal. If you can't wait, read on.

Claude Code is Anthropic's official agentic CLI (a command-line AI tool). The biggest difference from an ordinary chat AI: it can work on the project on your own machine. ChatGPT gives you a block of code, and you paste it back, run it and hunt down the errors yourself; Claude Code edits the files in your folder, runs commands, reads the errors and fixes them on its own. That is the difference between "chatting" and "doing the work". This post walks you through the whole path, and at the end you will have something that actually runs.


Disclosure: Ultra Lab, MindThread and Ultra Advisor are products of the same group, Ultra Creation (傲創實業).

How is Claude Code different from other AI tools?

First, be clear about why you would choose it, so you know what you are using.

ChatGPT / Claude on the web Cursor Claude Code
Can it work on the project on your machine No (it gives you code, you paste it yourself) Yes (inside the editor) Yes (edits files directly from the terminal)
Running commands Only in its own sandbox / agent mode, it cannot reach the project on your computer Yes Yes, directly on your project
Who it suits Asking questions, learning concepts People with some coding background People who want to build things, including those happy to start purely through conversation
How you interact One question, one answer Editor + AI Like handing tasks to a person

My own take: if you are starting from zero, Claude Code is actually easier to pick up than Cursor, because you don't need to understand an editor or project structure first. You just type and talk to it, and it handles the rest.


Step 0: Install and log in

Money first: Claude Code itself is free, but the AI behind it runs either on a Claude subscription (the Pro plan is about US$20 a month) or on an API key with prepaid, usage-based billing. The Antigravity from the first two steps is free for now. If it is still enough for you, you can stay there and come back when you hit something it can't do. This post isn't going anywhere.

The easiest way to install on Windows is Anthropic's official PowerShell install command: no need to install Node.js first, and it updates itself afterwards. (How do you open PowerShell? Press the Windows key on your keyboard, type powershell and press Enter. The dark window that appears is it.)

# Install Claude Code in PowerShell (no Node.js required)
irm https://claude.ai/install.ps1 | iex

A block of English text will scroll past when it runs. How to tell it installed: close PowerShell and reopen it, type claude --version and press Enter. If a version number appears, it worked.

To start it: in File Explorer, go into your project folder (if you have no project yet, create a new folder on the desktop), type powershell in the address bar at the top and press Enter, then type claude in the dark window that appears. If you end up using it every day and this window feels clunky, see the three upgrade layers for running Claude Code on Windows (Windows Terminal, VS Code, WSL2 + tmux); skip it for now.

On Mac / Linux, run this line in the terminal for the same result:

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

If Node.js is already installed on your computer, you can install with npm instead:

npm install -g @anthropic-ai/claude-code

💡 How do you "open a terminal inside the project folder"? Windows: open File Explorer, go into that folder, type powershell in the address bar and press Enter. Mac: right-click the folder in Finder and choose "New Terminal at Folder". That's it.

There are two ways to log in. Pick one:

  1. Log in with a Claude subscription: the first time you start it, it walks you through logging in via the browser and uses your subscription allowance directly. If you don't have an account yet: sign up at claude.ai with your Google account first (the interface is available in Chinese), upgrade to Pro there (paid monthly by credit card), then go back to the terminal and type claude to log in. For most people this is the least hassle.
  2. Use an API key: create an API key at console.anthropic.com and paste it in. (An API key is a password-like string that lets a program use the AI on your behalf, charged for what you use; that site is entirely in English, so beginners should take the first route.) This route suits people who want to hook up automation or track usage costs precisely.

Not sure which to choose? Log in with a subscription first and switch later if you need to. You can move between the two at any time.

The first time you type claude, an English setup menu appears (choose a colour theme, choose a login method). The mouse doesn't work on this screen, and that's normal: use the ↑↓ keys to move and Enter to confirm. Whatever you choose won't affect how you use it later.


Step 1: Get your idea clear (the most important step)

Where vibe coding most often fails is not that the AI isn't strong enough. It's that you haven't worked out what you want. The AI doesn't guess your intent. It does what you tell it.

Before you start, write these four lines in plain language:

What I want to build: a small tool that automatically generates Threads post ideas
Input: my topic (for example "insurance sales")
Output: 3 post ideas suited to Threads, with hashtags, in Traditional Chinese
Tech: don't know, let the AI decide

"Tech: don't know" is a perfectly fine answer. Your job is to describe the goal; choosing the tech is the AI's job.


Step 2: Start the conversation, and have it plan before it builds

Once claude is running, just say it in plain English:

"Build me a Node.js script that uses the Claude API to generate 3 Threads post ideas. The input is a topic keyword, the output is posts in Traditional Chinese with hashtags. Tell me how you plan to do it first, and start writing once I've confirmed the direction."

That last sentence, "tell me how you plan to do it first", is the key. It gives you a plan first, and you let it start only once you've confirmed the direction is right. That keeps it from building a pile of things you never wanted in one go.

An honest heads-up: the script in this example needs a separate, billed API key to run (unrelated to how you log in to Claude Code), and your computer also needs Node.js (Claude Code will walk you through installing it). If you'd rather not deal with either right now, change the task to editing a web page, for example: "Add an FAQ section to the service page I made in step two, then open it in the browser so I can see it." The loop you practise is exactly the same.

It may then ask you a few things back:

  • "Do you have an API key for the script?" → If not, just say "use mock data for now and connect it later", and you can still run through the whole flow
  • "Should the output just print in the terminal, or be saved to a file?" → Printing it is fine for now
  • "Do you want a web interface?" → Not yet, get the command-line version running first

Don't give random answers to look like you know. If you don't know, say so and let it suggest.


Step 3: Test → describe the problem → fix (the core loop of vibe coding)

Once it runs you'll see output. If it's wrong, just say in plain English what's wrong:

  • "The posts are too long. Threads has a 500-character limit, cut them down"
  • "Too few hashtags, go up to 5"
  • "The tone is too formal, make it more conversational"

It makes the change, you run it again, look again, say again. This loop, test, describe the problem, AI fixes, test again, is all there is to vibe coding. You don't need to be able to fix code. You only need to judge whether the result is right.

If the program throws an error, copy the whole error message and paste it in:

"It threw this error: [paste the full error]. How do I fix it?"

The answer is usually hidden in the error message, and it can read it. If it doesn't fix it the first time, paste the new error back in. It usually converges within a few rounds. If several rounds pass and it keeps circling the same spot, stop letting it guess and hand it new evidence, such as a screenshot or a photo of the real thing: we once saw one photo of the back of a board fix a black screen that another AI had spent a whole night and about fifty scripts on.


Step 4: Always verify, especially where data is involved

This is the most important section of the whole post. AI sometimes confidently produces code that looks right but is wrong. That is the biggest trap in vibe coding.

The fix is one word: verify. Don't assume the AI's output is right, especially in these places where things go wrong:

  • Saving and reading files (is the file location right)
  • Calling external APIs (did it really succeed, and what came back)
  • Anything involving money (payments, billing: always check by hand)

If what you build touches AI and handles user input, there is one more layer to watch: the security of the AI application itself. User input can hide a prompt injection that tricks your AI into doing things it shouldn't. This isn't a theoretical risk. It's an attack category OWASP already lists.

This is where UltraProbe comes in (our open-source AI security scanner, npm install -g ultraprobe). It runs detection purely on your machine, needs no API key and doesn't upload your data, and covers 25 detection vectors (12 LLM prompt-injection + 13 agent/ASI), mapped to OWASP's ASI Top 10. Before your vibe coding project goes live, have it scan once. That is far cheaper than patching holes after something goes wrong. The source code is at github.com/ppcvote/ultraprobe.


From toy to real product: scale up the loop

The "post idea generator" script above is a toy, but the same loop scales up to a real product. The only difference is whether you're willing to push forward one step at a time.

Take MindThread (mindthread.tw), which we built ourselves, as an example. It's a Threads automation SaaS that uses the official Threads Graph API (compliant, not a scraper). Its features include multi-account scheduling, AI image-to-post (upload an image and let AI write the copy), a copy library, a scheduling queue, fully automatic publishing and kanban-style account management, plus "comment patrol" (automatically finds relevant posts and leaves comments) and "golden 3-minute auto-reply". A product at this scale also started from "first build a minimal version that runs", then stacked up one piece at a time, rather than asking the AI to generate the whole system at the start.

Three principles to remember when you scale up:

1. Build in batches, don't ask for too much at once

❌ "Build me a complete scheduling system with login, multiple accounts, AI generation, a queue and an admin panel"
✅ "Step one: first build a post list for a single account, just show the content and the time."

2. Give enough context

❌ "Build me a login feature"
✅ "My project is React + Firebase, Firestore is already connected,
    build Email + password login, and redirect to /dashboard on success"

3. Treat the AI as someone to discuss with, not just a worker

When you're unsure of the direction:

"I want to build X. What are the ways to do it? What are the pros and cons of each?"

It doesn't just write code; it also helps you compare architectures. You still make the decision, but you make it on better grounds.


FAQ

"I can't understand what the AI built. How do I maintain it later?" Ask it: "Explain what this code does in plain English, without jargon." Gradually you'll start to understand it. Vibe coding isn't about never learning to code. It's learning as you build.

"How do I know whether I've explained it clearly enough?" Answer these three questions and give all of it to the AI: Who uses it? What does it need to do? What does the result look like (a web page / an Excel file / a Telegram message)?

"What if Claude Code runs on Windows and the Telegram notifications are unreliable?" We fell into this one ourselves. We open-sourced the fix as claude-tg-windows (a reliability toolkit for the Telegram plugin on Windows). We use this setup every day and keep making it more stable. If you have the same problem, you can use it directly.


A checklist you can start on today

  1. Install Claude Code by running irm https://claude.ai/install.ps1 | iex in PowerShell (no Node.js needed on Windows)
  2. If you already have Node.js, you can run npm install -g @anthropic-ai/claude-code instead
  3. Type claude and log in with a subscription or an API key (Step 0)
  4. Create a new folder on the desktop, open a terminal inside it and type claude
  5. Tell it in plain English what you want to build: have it plan first, and start once you've confirmed
  6. (Optional, advanced) Scan for security with ultraprobe before going live; if you don't know how to install npm packages yet, skip it and come back later

Summary

Claude Code removes most of the "can you code or not" barrier. Its value isn't thinking for you. It's letting you spend your effort where it really matters: working out what problem you're solving, judging whether the result is good, and deciding the next step.

Programming skills won't go out of date, but the era of "if you can't code, you can't build a product" really is over. The tools are all in your hands. All that's left is to open the terminal and type the first line.

Once you've built something, the desktop track has two more steps: hand your project to GitHub so your site updates itself, then write a CLAUDE.md so the AI remembers your project.


Ultra Lab is a Taiwan-based AI product company. Questions about our products, or a partnership in mind? Talk to us.

Beginner Track (Desktop) · Part 3 of 5

Try what you just learned — 60 seconds

Answer 3 taps on your phone and the AI builds a one-page personal site that is unmistakably you. Free, no signup, no code.

Weekly AI Automation Playbook

No fluff — just templates, SOPs, and technical breakdowns you can use right away.

Join the Solo Lab Community

Free resource packs, daily build logs, and AI agents you can talk to. A community for solo devs who build with AI.

Want to try it yourself?

UltraProbe is free and needs no sign-up. One scan tells you whether Google and AI engines can find your site.