2.2 Open It with an AI IDE and First Get to Know the Most Important Parts

After downloading the project files to your local machine, the next step is to open them with an AI IDE and get the project running on your own computer. What most easily intimidates beginners here is not the process itself, but the interface: a pile of files on the left, a terminal at the bottom, code in the middle, and maybe an AI chat panel on the right. The moment many people see this scene, they immediately think, “Am I not ready for this yet?” In fact, you do not need to understand everything all at once at this stage.

The most important goal of this section is simple: get the project running first. As long as you can see the local page open in your browser, a lot of anxiety immediately goes away. For the first time, you will feel very concretely that this work no longer exists only on the platform—it is now really on your computer, and you can keep modifying it. As for what commands are actually being executed in the terminal and why the project can start, you can understand those gradually. You do not need to master all of that in one go right now.

First, just pick one default tool

What Chapter 2 is most trying to avoid is not that you do not know how to operate things, but that you get discouraged by tool selection before you even begin. So for now, do not do a massive AI IDE comparison, and do not keep bouncing between Cursor, Trae, Claude Code, and other editors. Just pick one tool that is the most convenient for you to use right now and that you are willing to keep using.

The criterion for this decision is not “which one is the strongest,” but “which one can help me open the project and get it running today.” The basic version values closing the loop more than tool evaluations.

It is recommended to open the project in this order

You can directly let AI guide you through this step. A very practical sequence is:

1. Use your AI IDE to open the project folder you just downloaded
2. Ask the AI to first determine what type of project this is and how it should be started
3. Follow the AI’s steps to install dependencies and run the project
4. Open the local address in your browser and confirm that the page is actually running

If you do not know how to phrase it, you can say this directly:

I just exported a personal homepage project to my local machine.
Please first help me determine what kind of project this is and tell me how to run it locally.
If I need to execute commands, please guide me step by step.
If an error occurs, please continue helping me troubleshoot based on the error.

This kind of question is very plain, but extremely effective. It does not pretend that you already understand a lot, nor does it ask the AI to explain every principle all at once. It simply asks the AI to help you finish the most important thing right now.

If an error appears midway, do not guess on your own first

The mistake many beginners are most likely to make here is that the moment they see red error text, they start making assumptions: Did I install something wrong? Was there a problem with the platform export? Am I just not suited for doing this at all? In reality, most of the time, it is just a specific issue—for example, a missing dependency, an incorrect command, an incompatible Node version, or an environment that is not fully set up yet.

At this point, the safest move is not to try random things, but to give the error to the AI exactly as it is. You can directly paste the terminal output and add one more sentence:

This is the complete error message from when I just ran it.
Please first determine the most likely cause, then tell me only what to do next, without giving too many options all at once.

This sentence is important because it helps you slow down and control the troubleshooting rhythm. First diagnose, then act, and change only one variable at a time. You will continue using this way of thinking in Chapter 5.

After the project is running, learn the map first—do not read the whole book

Once the project is running, the next step is not “start reading the code line by line,” but to first identify a few of the most important locations. You only need to know roughly where three kinds of things are:

What you need to find	Why find it first
Page entry point	Many future content and layout changes will start here
Chat-related code	The presentation and interaction of the digital avatar usually live here
Styles or configuration	You will often touch these when changing colors, spacing, or copy experience

The goal here is not to understand everything, but to build a very important feeling: I do not need to understand every line, but I know where to look.

Directly ask AI to explain the structure in plain language

If you want, you can absolutely say something very practical to the AI directly:

Please first explain the structure of this project in plain language and tell me:
1. Roughly where the homepage entry point is
2. Roughly where the code related to the digital avatar chat area is
3. Which files mainly contain the styles
4. What parts I least need to understand first at this stage

Do not go too deep—just give me a usable map.

This kind of question is extremely valuable because it helps you form a mental map in the shortest possible time. Once you have that map, every modification you make later will feel much easier.

Want to go a bit deeper?

If you want a systematic understanding of environments, dependencies, terminals, and the basics of how code runs, you can jump to the advanced version and continue reading:

• Chapter 1: Environment Setup

---

Next section: Complete one minimal modification and learn 3 types of high-frequency questions →