Chapter 2

AI User Guide

Understand the economics of AI programming, build standard workflows, configure an efficient development environment, and let AI work better for you.

The economics of AI programming

Core principle: Tokens are money

Every time you let AI read project files, search code, or generate answers, you are incurring real costs.The larger the context, the higher the cost. Reading the entire project vs. reading only one file is a difference of orders of magnitude.

But more importantly—Precise context not only saves money, but also makes outputs more accurate. Optimizing prompts is not about "polishing wording"; it is about reducing the scope of context that AI needs to read.

Precise context strategy

❌ Vague description

"Please take a look and see if there are any issues with the project"

→ AI needs to read the entire project, consuming a large number of tokens

✅ Specify precisely

"Check the login logic in `src/utils/auth.ts`"

→ AI reads only the relevant files, reducing token consumption by 90%

Optimization tips

  • Specify the file path: better than a vague description
  • Clarify the scope of the feature: more focused than broadly saying "the project has issues"
  • Remove polite phrasing: do not set an expert role; state the task directly
  • Use summaries: Use summaries rather than full text for long documents
  • Monitoring usage: Regularly check token usage statistics to identify waste

Cost optimization example

Read the entire project (100+ files)~50,000 Tokens
Read only the relevant files (3-5 files)~5,000 Tokens
💡 Precise context can save 90% of the costwhile improving output accuracy

VibeCoding workflow

Core insight: the core of Vibecoding is Workflow, not Prompt

Previously, you would work as things came to mind and have AI write directly, but that often leads to rework. True experts do not rely on configuration, but onThe art of speakingandStandard process

Give AI an "exit"

Sometimes AI does not know the answer but will forcefully make one up. Tell it: "If you're unsure, say so clearly and wait for my confirmation instead of making something up."

Example prompt:
"If you are unsure about a certain implementation detail, please clearly mark it as [Need confirmation],
and explain your assumptions, then wait for my confirmation before continuing."

Five standard steps

1

Explore the project structure

First understand the project structure to avoid realizing halfway through that the file has already been written

2

Plan the implementation steps

List the implementation steps so AI follows the plan instead of writing wherever it comes to mind

3

Implementation

Implement features gradually according to the plan, validating after each step

4

Test validation

Verify that the feature works correctly, and check edge cases and error handling

5

Submit code

Commit code each time an independent feature is completed to build a version history

How to avoid rework

  • Explore before coding: Start writing code after understanding the project structure
  • Plan the implementation steps: List the steps to have AI execute according to plan
  • Stage-by-stage validation: Verify after each step; do not wait until the end
  • Submit on time: commit after completing each feature, making rollback easier

Scaling: Multi-agent systems

Once you have mastered the core workflow, you can explore multi-agent systems: let multiple AIs work together—one writes code, another reviews it; one writes tests, another writes documentation. They can work in parallel to improve efficiency, or sequentially to ensure quality.

Version control Git

AI coding is highly aggressive, so a safety net must be built

AI may break three old features just to fix one Bug. So it must be configured properly Git, build high-frequencyLocal version history

High-frequency commit strategy

Whenever you complete the development of an independent feature, or after fixing a bug and verifying it passes, automatically run git commit to commit the code.

Standard process:
1. AI completes the feature → verification passes
2. Run `git add .`
3. Run `git commit -m "feat: add user login functionality"`
4. Continue to the next feature

Commit Message conventions

Use a concise Chinese commit message that clearly describes the changes in this commit.

✅ Good example
feat: Add user login feature
fix: Fix the styling issue on the login page
refactor: refactor user authentication logic
❌ Bad example
Update code
fix bug
changes

You can roll back at any time

If the code breaks, you can always roll back to the previous stable version.

Rollback command:
# View commit history
git log --oneline
# Roll back to the previous commit
git reset --hard HEAD~1
# Roll back to a specified commit
git reset --hard <commit-hash>

Configuration tips

In addition to choosing the right tool, there are three tips to make AI even more useful, solving problems such as weak memory and writing nonsense. Different tools have different configuration methods, so below we introduce them by tool category.

4.1 Cursor configuration

Project rules (.cursorrules)

Create in the project root directory .cursorrules File, define project standards.

Example .cursorrules:
# Code Standards
- Do not use the `any` type
- `pnpm` must be used as the package manager
- All components must use TypeScript
- Follow the ESLint and Prettier configuration
- Use functional components and Hooks
- All API calls must include error handling

Create Skills

Skills are stored in .cursor/skills/ In the directory, use Markdown format.

Creation steps:
  1. Create .cursor/skills/ Table of contents
  2. Create skill-name.md File
  3. Write Skill descriptions and instructions
  4. Invoke Skill in Cursor
Example Skill:
# Code Review Skill ## Purpose Automatically review code quality ## Instructions Check whether the code complies with team standards: - TypeScript type safety - Completeness of error handling - Code readability

MCP server configuration

in .cursor/mcp.json Configure the MCP server in.

.cursor/mcp.json:
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-token"
      }
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem"],
      "env": {
        "ALLOWED_DIRECTORIES": ["/path/to/allowed"]
      }
    }
  }
}

Using Agent mode

Press in Cursor Cmd/Ctrl + K Open Agent mode, or use Cmd/Ctrl + L Open Chat mode.

  • Agent mode: AI can automatically execute multi-step tasks and modify multiple files
  • Chat mode: talk with AI to get suggestions and code snippets
  • Composer: Combine multiple operations to process tasks in batches

4.2 Claude Code configuration

MCP server configuration

Claude Code's MCP configuration is ~/.claude/mcp.json or the project directory's .claude/mcp.json

~/.claude/mcp.json:
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-token"
      }
    },
    "sequential-thinking": {
      "command": "node",
      "args": ["path/to/sequential-thinking-server.js"]
    }
  }
}

Create Skills

Claude Code Skills are stored in ~/.claude/skills/ in the directory.

Creation steps:
  1. Create ~/.claude/skills/ Table of contents
  2. Create skill-name.md File
  3. Write Skill description (Markdown format)
  4. Use in the terminal @skill-name Call

4.3 Codex CLI configuration

Project rules (.codexrules)

Create in the project root directory .codexrules file, or use /init Commands are generated automatically.

Use the /init command:
codex /init
→ Automatically analyze the project structure
→ Generate .codexrules file
Manually create:
# .codexrules The project uses TypeScript + React Use pnpm as the package manager Follow the Airbnb ESLint configuration

Monorepo analysis configuration

Codex CLI can analyze large Monorepo projects and requires workspace information to be configured.

  • Automatic detection: Codex automatically detects Monorepo structures
  • Workspace settings: specify the workspace path in .codexrules
  • Context management: load only the code from the relevant workspace

4.4 Other tool configuration

Windsurf

  • Fast Context: Automatic configuration, no manual setup required
  • Cascade Agent: Enable in settings
  • Project rules: use .windsurfrules File

GitHub Copilot

  • Project rules: use .github/copilot-instructions.md
  • Related files: automatically identify the context of related files
  • Code completion: Configure completion behavior in settings

Continue.dev

  • Configuration file.continue/config.json
  • Custom models: Configure a local model (Ollama)
  • Context provider: Configure repository context

Fabric

  • Patterns: stored in ~/.config/fabric/patterns/
  • Custom Pattern: Create pattern-name.md
  • API Key: Configure in environment variables

Efficient debugging essentials

With AI, don't panic when you run into errors

But to get AI to help you, you need to learnThe right way to ask for help

First: provide the complete error log

Beginners often get scared when they see a screen full of red errors and end up copying only the last line. But AI is like a doctor: it needs to see the full symptoms to make an accurate diagnosis.

❌ Incorrect approach
Error: Cannot read property 'x' of undefined

→ Insufficient information, AI cannot diagnose

✅ Correct approach
Error: Cannot read property 'x' of undefined at UserService.getUser (src/services/user.ts:45:12) at UserComponent.handleClick (src/components/User.tsx:23:5) ...complete stack information...

→ With complete information, AI can pinpoint accurately

💡 Operational suggestions: Take the longest, most complex-looking red error message — select it all as-is, copy it, and send it to the AI.

Second: loop repair mode

If AI doesn't fix it on the first try, don't give up. Describe the results after your attempts and keep AI trying.

Iterative fix process:
  1. AI provides a fix
  2. You modify the code according to the plan
  3. If a new error appears, describe the result: "I changed it according to your method, but now a new error appears..."
  4. AI continues fixing based on new information
  5. Repeat steps 2–4 until the problem is solved

💡 Experience: most bugs require 2–3 iterations to fix. Don't expect AI to solve all problems in one go.

Common error types and handling

Type error
TypeScript type mismatch
💡 Provide type definitions and error messages
Runtime error
Crash during code execution
💡 Provide complete stack information and related code
Logical error
The feature does not meet expectations
💡 Describe the expected behavior and the actual behavior
Dependency error
Package installation or import failed
💡 Provide package.json and the error message

Learning outcomes

After completing this chapter, you will:

  • 1Master Token cost optimization strategies, precisely control the context scope, and save 90% of costs
  • 2Establish a standard VibeCoding workflow, master the five-step development process, and avoid rework
  • 3Configure project rules and Skills so AI remembers project conventions and improves code quality
  • 4Master efficient debugging methods, learn how to ask for help correctly, and solve problems quickly
  • 5Build the habit of frequent Git commits so you can roll back at any time and create a safety net