Zero to Agent

English

中文
Español
Français
हिन्दी
العربية
Português
Русский

English

中文
Español
Français
हिन्दी
العربية
Português
Русский

Project Initialization ​

📚 Series Navigation: The previous section 11 Web and Cloud wrapped up the installation and environment chapters. Starting from this article, we enter the practical combat phase. This article teaches you the posture of creating a brand new project from 0 to 1. Next article 13 Project Structure Analysis.

"Help me write a React project, it needs a login page and a dashboard."

When many beginners use Claude Code to create a new project for the first time, they just throw this sentence in an empty folder. Then they see Claude start creating index.html, package.json, App.js one by one, manually writing Webpack configurations, tinkering for ten minutes... Finally npm start reports an error, dependency versions conflict.

This is the most typical wrong posture.

Analogy: Building a house. You want a house, and you ask a master craftsman (Claude) to build it. The wrong way is to let him mold bricks from mud one by one, cut wood, and pile them up; the right way is to let him first use an excavator (scaffolding tool) to pour the standard concrete frame, and then let him do the fine interior decoration.

This article solves one problem: How to correctly use Claude Code to initialize a project from zero, avoiding the pit of 'manually rubbing the environment'.

After reading this article, you will get:

  • The iron rule of project initialization: Use tools to build the skeleton, use Claude to write the logic
  • A standard workflow from 0 to 1 (with a Vite+React project as an example)
  • How to let Claude automatically execute init commands, rather than you copying them

01 The Iron Rule: Never Let Claude "Manually Rub" Configuration Files ​

Large language models (including Claude 3.7) have a common weakness: Their training data might be slightly outdated, and they often fumble when handwriting modern, complex frontend/backend build configurations.

If you let it manually create package.json and vite.config.ts, it might give you a React 17 dependency mixed with a Vite 5 configuration, which is guaranteed to error out on the first run.

The correct practice: Utilize its ability to execute commands, let it invoke standard scaffolding.

Modern tech stacks all have standard initialization commands:

  • Frontend: npm create vite@latest, npx create-next-app
  • Backend: mvn archetype:generate (Java), nest new (Node), cargo new (Rust)
  • Python: poetry new or fastapi dev

You should let Claude run these commands, not write the files generated by these commands.

💡 One-sentence iron rule: Skeleton relies on standard scaffolding commands, flesh and blood relies on Claude's code generation.

02 Hands-on: Standard 3-Step Process (Vite + React Example) ​

Suppose we want to create a React frontend project with a login page. Follow this standard process, which is both fast and error-free.

Step 1: Create an empty folder and launch Claude ​

First, create an empty directory and launch Claude Code inside it.

bash
mkdir my-dashboard
cd my-dashboard
claude

Step 2: Instruct it to use standard tools to initialize ​

Type in the Claude Code prompt box (pay attention to the phrasing, explicitly require the use of commands):

text
Please use npm create vite@latest to initialize a React + TypeScript project in the current directory.
Run the command in non-interactive mode, or automatically accept default prompts.
After creation, help me run npm install to install dependencies.

What happens next? Claude will analyze your requirement and realize it needs to run a bash command. It will pop up a permission request asking if you allow it to run npm create vite@latest . -- --template react-ts and npm install. You click Accept.

Why is this step so smooth? Because you explicitly told it the "tool to use", it acts as an executor, calling the most standard, most correct official initialization script. The resulting project structure is officially guaranteed 100% correct.

Step 3: Fill in the business code ​

Now that the skeleton is up, npm install is also finished. Next is Claude's strong suit: writing business logic.

Continue typing in the prompt box:

text
Based on the project structure just created, help me complete these tasks:
1. Delete the default counter code in App.tsx
2. Create a src/components/Login.tsx component, containing username and password input boxes and a submit button (use simple inline CSS)
3. Render this Login component in App.tsx

Claude will generate the diffs, you accept. Finally, you can type:

text
Run npm run dev

(Or you can run it yourself in another terminal window). Open the browser, and a standard React project with a login page is running locally.

03 What if you don't know which command to use? ​

Sometimes you want to try a new language, say Go, and you don't know the initialization command yourself. What to do?

You can divide it into two questions.

Question 1 (Ask for strategy):

text
I want to write a simple Go language web service. What is the most standard way to initialize the project currently? Tell me the command first, don't execute it yet.

Claude will tell you to use go mod init <module-name>, and might suggest using standard libraries or frameworks like Gin.

Question 2 (Command execution):

text
Okay, please run go mod init my-go-web to initialize, and create a main.go containing a Hello World HTTP server.

This way you avoid it blindly guessing your intentions, ensuring the initialization method is standard and modern.

04 Summary ​

Project initialization is the first step of working with AI. If the first step is solid, subsequent development will be smooth; if the first step is crooked (chaotic dependencies), you'll spend hours fixing environments later.

  • Don't: Let Claude create package.json and build configurations from scratch file by file.
  • Do: Explicitly instruct Claude to execute official scaffolding commands (like npm create, cargo new).
  • Process: Scaffold builds the skeleton → npm install installs dependencies → Claude writes business code.

You should now be able to safely and quickly create projects of any tech stack using Claude Code, without worrying about dependency hell.

Next article 13 Project Structure Analysis—Initialization is from 0 to 1, but more often we take over an existing project (from 1 to 100). How to let Claude quickly understand an unfamiliar, massive codebase? We'll unlock the usage of the "Codebase Explorer".