BrainBank
AI Classroom/Step by StepClaude Code Deep Dive

Claude Code Quick Start

7/12/2026, 9:14:47 PM · updated 7/12/2026, 9:16:23 PM

#claude-code#anthropic#cli#ai-coding#agent#step-by-step

This article details the installation, initialization, project creation, and core collaborative workflow of Anthropic's local AI programming assistant, Claude Code, helping developers efficiently conduct AI-assisted development through the rhythm of "plan first, execute later."

Who is it best suited for

If you already have a basic understanding of the terminal and want to truly bring AI into your local project development, Claude Code is a tool well worth getting your hands on.

It is especially suitable for the following types of people:

  • Already know a bit of command line and want to boost development efficiency
  • Maintain personal or company projects locally
  • Want AI to do more than just "write a few lines of code", but actually help you push tasks forward
  • Want AI to read the project, modify code, run commands, and help you verify results

Before you start, you should at least know these concepts

  • Terminal: The place where Claude Code runs
  • Project Directory: You need to enter the corresponding code repository first
  • Dependency Installation: Many projects require running npm install first for the first time
  • Building & Running: After modifications, you often need to run build or start

If these concepts are completely unfamiliar to you, it is recommended to first go back to the computer basics section of your original AI programming course to catch up.

Quick start process at a glance

image.png

The most basic steps of use

1. Installation

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

Once installation is complete, first confirm that the command is available:

claude --version

If the version number is output normally here, it means the CLI is installed.
If it prompts that the command cannot be found, it is usually because the global npm path has not been added to your environment variables.

1.5 Logging in for the first time

Before using it for the first time, you usually need to log in to your Claude account:

claude

Upon launching for the first time, Claude Code will guide you through the login or authorization process.
Once this step is completed, you can start using it directly after entering your project directory in the future.

2. Enter the project directory

cd your-project

This is absolutely critical. Claude Code is not a "chatbox detached from project context"; it directly reads the code, configurations, and file structures in your current directory.

Therefore, you need to first confirm two things:

  • The current directory is the root directory of the actual project you want to modify
  • The project can already install dependencies and run normally on your local machine

For example, for a frontend project, you usually need to do at least once:

npm install

If the project itself cannot run yet, it will be very difficult for Claude Code to help you steadily advance your tasks later.

If you don't have a project yet, how to let Claude Code help you start from scratch

Many beginners using Claude Code for the first time are not taking over an existing repository, but instead want to have it directly help them create a new project.
This is of course also possible, but the order of work needs to be changed slightly.

First, prepare an empty directory

For example, if you want to make a new React project, you can first manually create a folder:

mkdir my-new-app
cd my-new-app
claude

The key point here is:
Even if you don't have any code yet, it is best to first enter a clear, empty directory before letting Claude Code start working.
Do not start directly on your Desktop, Downloads directory, or a messy root directory.

Don't say "help me build a project" as your first sentence; instead, clarify your tech stack

If you only say:

Help me create a project

It is hard for Claude Code to determine whether you want:

  • React or Vue
  • Next.js or Vite
  • TypeScript or JavaScript
  • Whether you need routing, databases, authentication, or deployment configurations

So a better way to say it is:

I want to create a Next.js + TypeScript project from scratch.
First, tell me how you plan to initialize the project, what core files will be generated, and how dependencies will be installed.
Do not start executing yet.

Recommended rhythm for creating new projects

When building a project from scratch, the safest sequence is:

  1. First clarify the project type and tech stack
  2. Have Claude Code provide an initialization plan
  3. Then have it execute the project creation
  4. After creation, have it help you check if the project can run
  5. Finally, start working on specific features

In other words, do not mix "creating the project" and "developing complete features" into a single instruction all at once.

A more stable prompt for building a site from scratch

I am currently in an empty directory and want to create a Next.js + TypeScript project from scratch.

First, tell me your recommended initialization method:
- What scaffolding do you plan to use
- What dependencies will be installed
- What key directories will be generated

Do not execute yet.
After confirmation, start creating the project.
Once created, please start the project and tell me if it runs successfully.

This way, Claude Code's behavior will be much clearer:

  • Plan first
  • Then generate
  • Then verify

Instead of creating a bunch of files right from the start, leaving you not knowing what it actually did.

3 most common pitfalls when creating a new project

1. Not clarifying the tech stack

"Help me build a blog" is too vague.
It is best to at least clarify:

  • What framework to use
  • What language to use
  • Whether you need a UI library
  • Whether you need a database

2. Initializing in the wrong directory

If your current directory already has other files, Claude Code might initialize the new project in an unclean place.
When creating a new project, it is best to ensure the directory is empty, or at least specifically created for this project.

3. Not verifying after creation

The completion of project creation does not mean it is actually usable.
You also need to have it continue with this step:

Please run the project and check if it starts normally.
If it fails, continue to help me locate the problem and fix it.

Most recommended usage for beginners: Scaffolding first, then gradually adding features

If you are doing this for the first time, it is recommended to split the process into two stages:

Stage 1: Create the project and get it running first
Stage 2: Then let Claude Code continue to help you build pages, APIs, and features

For example:

First help me create the Next.js project and confirm it can start.
After that's done, we will continue to build the homepage and login features.

This way, the success rate will be significantly higher, and it will be much easier to pinpoint whether a problem lies in "initialization" or "feature development."

3. Launch Claude Code

claude

Once inside, do not rush to throw a massive requirement at it.
The safest way to start is to first let it understand the project, then let it propose a plan, and finally execute it.

10-Minute Complete Getting Started Guide

If this is your first time actually using Claude Code, you can follow this exact process.

Step 1: Confirm you are in the correct project

First, confirm in the terminal that the current directory is correct:

pwd
ls

You should be able to see familiar project files, such as package.json, src, app, README.md, etc.

Step 2: Let it understand the project first, instead of modifying code immediately

After launching claude, it is recommended to ask this as your first sentence:

First, help me look at the overall structure of this project.
Tell me what the main directories do and roughly which files contain the code related to the homepage.
Do not modify any code yet.

The benefits of doing this are:

  • You first verify whether Claude Code has read the project correctly
  • It establishes context first, rather than blindly making modifications
  • You will also get an idea of which files the future modifications are likely to affect

Step 3: Let it propose a plan first

Once it understands the project, continue with:

I want to add a simple carousel to the homepage.
First, give me an implementation plan, telling me which files you plan to modify and how.
Do not execute yet.

The key point here is "plan first, execute later."
For beginners, this step is extremely valuable because you can first judge:

  • Whether its understanding of the problem matches what you actually want to do
  • Whether the scope of modifications is too large
  • Whether it is planning to touch places it shouldn't

Step 4: Have it execute after confirmation

If the plan is fine, then issue the execution command:

You can start modifying.
After making modifications, please run a build check and tell me which files were modified.

At this point, Claude Code will usually start to:

  1. Read the relevant files
  2. Modify the code
  3. Run builds, tests, or linting
  4. Report the results

Step 5: You only look at three things

For your first use, you don't need to micromanage its every step.
You only need to focus on these three things:

  1. Which files it modified
  2. Whether it actually ran the verification commands
  3. Whether the build or tests passed

If it says "Completed" but doesn't mention the verification results, you can follow up with:

Summarize the verification commands you just ran and their results.

Step 6: Continue with small, iterative steps

When getting started for the first time, it is not recommended to let it build a whole complex feature all at once.
A better way is to continue breaking it down into small steps:

Next, help me add autoplay and left/right toggle buttons to this carousel.
Tell me first how you plan to modify it.

This way, you will establish a stable collaborative rhythm much faster, rather than treating Claude Code as a "one-stop turn-key tool."

A highly recommended practice task for beginners

If you don't have a real task yet, the most suitable type of minor requirement to practice on is:

  • Add a banner to the homepage
  • Modify a button's text and color
  • Find which file a certain error originates from
  • Add a simple module to a certain page
  • Have it help you explain a directory structure

These types of tasks have several advantages:

  • Small scope of modification
  • Easy to verify
  • Low cost of failure
  • Perfect for establishing a collaborative habit between you and Claude Code

Prompts recommended to copy directly for your first use

You can use the following paragraph almost exactly as is:

First, help me understand this project's structure.
Tell me what the main directories of this project are responsible for, and roughly which files the features I want to modify are located in.

Then, give me an implementation plan. Do not modify the code yet.

After confirming the plan, start making modifications.
Once modified, please run a build or test check, and tell me which files were ultimately modified and whether the verification passed.

The advantage of this prompt is that it naturally breaks down a collaboration into:

  • Understanding
  • Planning
  • Execution
  • Verification

This is also the workflow rhythm that Claude Code is best suited for.

How to ask questions after launching

The most recommended approach is not to dump all your requirements in a single sentence, but to follow this rhythm:

  1. First let it understand the project
  2. Then let it propose a plan
  3. Then have it execute

For example:

First, look at the overall structure of this project and tell me which files contain the code related to the homepage.

Then, give me an implementation plan for adding a carousel to the homepage. Don't modify the code yet.

After confirming the plan, start making modifications, and run a build check at the end.

A few mistakes beginners are most likely to make

  • Launching Claude Code without entering the correct directory
  • Letting it run the project directly without installing dependencies
  • Throwing a massive, vague requirement right from the start
  • Not having it verify the build and tests after making modifications
  • Not writing CLAUDE.md, repeating project constraints every single time

Here are two more frequently overlooked issues:

  • Clearly wanting to "analyze first" but not explicitly saying "do not modify the code yet"
  • Claude Code has already reported a build failure, but you didn't look at the failure details, only checking "whether it finished modifying"

The safest posture to start

image.png

Summary

The key to getting started quickly is not how many commands you know, but first mastering a rhythm:

  • Enter the project first
  • Understand first, then execute
  • Verify after modifying
  • Build a feel for collaboration starting with small tasks

As long as you follow this rhythm, Claude Code will quickly turn from a "new toy" into a "go-to development partner."

Learning map

Phase 1: Basic Environment and Installation

  • Installation and Authorization: After configuring the Node.js environment locally, use npm to install globally and log in to your Claude account. This is the prerequisite for all subsequent operations.
  • Directory Context Awareness: Understand that Claude Code runs directly within the project directory. It needs to read local files and package.json, so ensuring it is started in the correct directory is crucial.

Phase 2: Establishing Collaboration Rhythm (Golden Four-Step Method)

  • Understand the Project: First, have the AI explain the project structure instead of blindly modifying code, ensuring the context is correct.
  • Proposal First, Execution Later: First, have the AI provide the modification plan and the affected files. Once confirmed, authorize it to modify the code to prevent wide-ranging accidental changes.
  • Automated Verification: After modifications are complete, require the AI to run build or test commands to verify the results in a closed loop.

Phase 3: Advanced Engineering

  • Configuring CLAUDE.md: Create a constraint file in the project root directory, allowing Claude to automatically follow tech stack specifications, code styles, and test instructions during each run without repeatedly inputting prompts.

Get hands-on — step by step

Step 1: Install Claude Code globally

Open your terminal and run the following command to install the official CLI tool:

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

Once the installation is complete, run claude --version to confirm it was successful.

Step 2: Complete account authorization and login

Enter the following in your terminal:

claude

When running it for the first time, an authorization link will pop up. Open it in your browser and log in to your Anthropic account to complete the terminal binding and authorization.

Step 3: Prepare a test directory

Create a new, clean empty folder as a test project, and enter that directory:

mkdir claude-demo-project && cd claude-demo-project

Step 4: Initialize the project with a "Plan First, Execute Later" approach

Start claude in the current directory, and send the following instruction:

I want to create a Next.js + TypeScript project from scratch. Please first tell me your recommended initialization method and the files that will be generated. Do not make any modifications yet.

After Claude provides a clear plan, enter "Agreed, please proceed" and observe the process of it automatically creating the files.

Step 5: Run and complete the verification loop

Once the project is created, enter the following in the Claude interactive interface:

Please help me run the project and check if it starts up successfully. If there are any errors, please locate and fix them directly.

Experience the complete closed-loop of Claude Code automatically running local commands and fixing dependencies.

Top 3 sources

  1. 1
    Anthropic Official Claude Code Guide

    官方权威指南,详细介绍了 Claude Code CLI 的命令参数、安全策略以及本地权限控制。

    https://docs.anthropic.com/en/docs/about-claude/claude-code

  2. 2
    NPM @anthropic-ai/claude-code

    官方 NPM 托管页面,可查看最新发布版本、依赖项信息以及更新日志。

    https://www.npmjs.com/package/@anthropic-ai/claude-code

  3. 3
    Anthropic Developer Discord

    官方开发者社区,设有专门的 Claude Code 讨论区,适合交流复杂项目配置与使用心得。

    https://discord.gg/anthropic

Links are AI-suggested — worth a quick sanity check before diving in.