早在传统框架还没完全吃透的时候AI 编程工具已经把“从想法到代码”的门槛拉低了一大截。很多开发者面对 Cursor、Claude Code 这类工具时第一反应不是“真好用”而是“我该从哪个学起”“装完怎么用”“让它生成项目为什么总翻车”。一个更常见的场景是让 AI 生成了几百行代码结果依赖装不上、跨域报错、前端后端各跑各的最后还是要回去手写。这篇文章围绕当前主流的 AI 编程工作流展开核心就是 Vibe Coding 实战。我会把 Cursor 和 Claude Code 这两个工具串成一条完整的开发链路从环境安装、界面配置、核心概念到一个可运行的全栈任务管理应用完整跑一遍。无论你是刚开始接触 AI 编程的新手还是已经用了一段时间想系统化整理工作流的开发者都可以按这篇文章的思路搭建自己的全栈开发环境。1. AI 编程时代从 Vibe Coding 到全栈开发1.1 什么是 Vibe Coding为什么突然流行起来Vibe Coding 指的是开发者用自然语言描述需求让 AI 生成代码自己负责引导、审查和修正的一种编程方式。“Vibe”在这里强调的是“保持节奏和感觉”你不需要在动手前把所有类和函数都想清楚而是把问题描述给 AI然后基于生成结果继续迭代。这种工作流之所以流行有两个直接原因。第一大模型对代码的理解和生成能力已经足够强不仅能生成单函数还能跨文件生成模块。第二IDE 和命令行工具把模型能力嵌入到开发流程中你不需要在浏览器和编辑器之间反复切换。尤其是全栈开发场景Vibe Coding 可以让你用几句话就生成一整套前后端骨架再通过多轮对话调整到可运行状态。但要注意Vibe Coding 不等于“撒手不管”。它把开发重心从“写代码”转移到了“提需求、审代码、控流程”。所以学习 Vibe Coding 的另一个重点是掌握如何让 AI 更稳定地产出正确代码。1.2 Cursor 与 Claude Code 的定位差异很多初学者容易把 Cursor 和 Claude Code 当成同一类工具其实它们的使用场景有比较明显的区别。Cursor 是一个 AI 优先的代码编辑器底层兼容 VSCode 的生态界面、快捷键和扩展体系都能平滑迁移。它适合在编辑器里边看边改补全和对话都能结合当前文件上下文。对于前端页面调试、代码重构、逐文件修改Cursor 的体验更直观。Claude Code 则是一个命令行 AI 编程代理它运行在终端中可以读取整个项目结构执行多步操作比如“找到某个接口的所有调用方并重构”。它更擅长处理批量任务、跨文件修改和需要执行命令的场景。由于它工作在你的终端会话里也方便与 Git 操作、依赖安装、测试运行等命令串起来。实际项目中两者常常配合使用Claude Code 负责大的生成和重构任务Cursor 负责细粒度的阅读、调试和界面调整。1.3 本文实战内容概览为了把概念落实到代码我会带你在本地完成一个“待办任务管理”的全栈小项目。后端使用 FastAPI 和 SQLite提供任务列表的增删改查接口前端使用 React Vite 搭建页面展示任务列表并支持新增、标记完成、删除操作。整个过程会演示两条路径Claude Code 在终端里生成后端代码Cursor 在编辑器中生成前端代码最后联调运行。完成之后你对 AI 编程工具的使用会有一个完整的认识什么时候让 Claude Code 动手什么时候打开 Cursor 自己改AI 生成的代码怎么检查遇到跨域、端口冲突这些问题怎么排查。2. 环境准备与工具链安装2.1 安装 Cursor 编辑器Cursor 支持 Windows、macOS 和 Linux直接到官网下载对应安装包即可。安装过程与普通软件一致没有特别需要勾选的选项。第一次打开 Cursor 后它会引导你选择主题和绑定 AI 账号。这里有两个关键点第一Cursor 的 AI 功能需要登录后才能使用免费版的基础功能和模型额度足够完成本文项目第二如果你之前使用 VSCodeCursor 可以直接导入扩展和设置迁移成本很低。安装完成后建议在设置里查看一下Cursor Settings中的模型配置。不同版本的模型列表会有变化你只需要选择“默认推荐”即可不必手动强行指定。2.2 安装 Node.js 和 Python 环境本文项目会同时用到 Node.js 和 Python建议先安装这两个运行时。Node.js 用于运行 Claude Code 命令行工具以及管理前端项目依赖。建议安装当前 LTS 版本因为 Claude Code 和 Vite 对 Node 版本有最低要求过旧的版本会导致安装失败。Python 用于运行 FastAPI 后端。建议安装 Python 3.10 或更新版本并确认pip命令可用。Windows 用户在安装 Python 时注意勾选“Add Python to PATH”否则后续直接在终端执行python和pip可能会报“不是内部或外部命令”。安装完成后在终端分别执行以下命令验证环境node -v npm -v python --version只要都能正常输出版本号说明环境准备就绪。2.3 安装 Claude Code 命令行工具Claude Code 官方提供 npm 安装方式。在终端执行npm install -g anthropic-ai/claude-code安装完成后执行claude --version可以查看版本号。首次运行claude命令时它会要求你完成身份认证具体认证方式以官方文档为准。开发测试场景建议把认证信息配置在单独的环境变量或配置文件中不要写进项目仓库。在当前阶段你只要保证claude命令能在终端正常启动即可。后续实战部分会在项目目录里通过对话方式使用它。2.4 Cursor 设置中文界面Cursor 基于 VSCode 架构界面语言可以通过扩展中心安装语言包来切换。在 Cursor 界面中打开扩展面板搜索“Chinese Simplified Language Pack”安装后重启编辑器界面就会切换为简体中文。不同版本的 Cursor 在扩展商店展示名称上可能会有细微差异搜索关键词使用“Chinese”一般能找到对应语言包。如果你使用的版本已经内置了语言切换选项也可以直接在设置中修改。需要注意中文语言包只影响编辑器界面文字不会影响代码提示和 AI 对话内容。AI 对话的语言由你的提问语言决定用中文提问就能得到中文回复和注释。3. 核心概念拆解Vibe Coding 工作流3.1 Vibe Coding 的核心四步流程Vibe Coding 不是“让 AI 一次性写出全部代码”而是一个循环迭代的过程。我把这个过程拆成四步描述需求。把功能、输入、输出、约束讲清楚越具体越好。生成代码。AI 根据描述生成文件或修改建议。运行验证。直接启动项目、调用接口或写单测验证结果是否符合预期。反馈修正。把报错信息或偏差反馈给 AI继续调整。很多人用 AI 编程失败问题多数出在第一步和第三步。第一步描述太模糊AI 只能靠猜第三步跳过验证错误就一路积累到最后。每一轮迭代都应该是“最小验证”生成了一个函数就测一个函数生成了一个接口就调一次接口而不是等所有代码都生成完再整体排查。3.2 AI 编程提示词让需求描述更有效好的提示词是 Vibe Coding 的核心技能。它不需要什么魔法咒语关键是包含足够的技术约束。我总结了一个简单的结构技术栈明确语言、框架、数据库、版本。项目位置告诉 AI 代码应该放在哪个目录或基于哪个现有文件修改。功能清单列出需要实现的接口或页面功能。边界要求比如字段校验、空值处理、错误返回格式。工作方式要求 AI 先给方案再写代码最后解释关键点。举个例子如果你只输入“做一个 todo 应用”AI 会默认生成一个它的“印象”版本。但如果你输入“使用 FastAPI 和 SQLite 实现 todo 后端提供 GET/POST/PUT/DELETE 接口字段包括 id、title、completed使用工厂函数管理数据库连接”结果会精准得多。在实战部分我会给出可以直接复制到 Claude Code 和 Cursor 中的完整提示词你可以先对照着用再逐渐形成自己的模板。3.3 Vibe Coding 与 Spec-Driven 开发的区别在搜索 AI 编程资料时你可能遇到过 Spec-Driven规格驱动开发的说法。它和 Vibe Coding 的区别并不在于“用不用 AI”而在于“先写什么”。Vibe Coding 偏向探索式开发。需求可能还不完整边写边想AI 的作用是快速生成原型和验证想法。它的优点是快适合原型、工具脚本和个人项目缺点是需求不明确时容易返工。Spec-Driven 更强调先写规格说明再让 AI 基于规格实现。规格文档包含接口定义、数据结构、业务规则和验收标准。它的优点是适合多人协作、复杂业务和长期维护的项目因为每个功能都有清晰定义AI 生成的代码也更容易评审。两种模式可以结合使用前期用 Vibe Coding 快速验证想法等方向确定后补写规格文档再让 AI 基于规格重写或补全。3.4 Cursor 与 Claude Code 的分工策略在真实项目中Cursor 和 Claude Code 的分工可以按任务类型划分任务类型推荐工具原因前端页面调整、组件编写Cursor编辑器中边看边改预览直观后端接口生成、跨文件重构Claude Code终端 Agent 可以读取项目上下文、执行命令批量修改多个文件Claude Code适合一次操作多文件排查单个报错Cursor结合文件和编辑器输出更直观执行命令、安装依赖、运行测试Claude Code可以直接在终端会话内执行进阶用户还可以关注 Claude Code 的本地模型接入场景。通过 CC Switch 之类的社区工具切换不同模型来源结合 Ollama 运行本地模型。这样做的好处是数据不出本机适合对代码隐私有要求的项目。不过本地模型的代码能力通常弱于主流云端模型建议只用于简单任务或敏感项目。4. 完整实战案例用 Cursor Claude Code 构建全栈待办应用4.1 项目需求与功能拆分我们要实现一个极简但完整的全栈待办任务管理应用功能包括查看任务列表。新建任务。标记任务完成。删除任务。后端采用 FastAPI SQLite数据存储在一个todos.db文件中无需单独安装数据库服务。前端采用 React Vite实现一个单页应用通过 AJAX 请求与后端接口交互。项目目录结构如下todo-ai-app/ ├── backend/ │ ├── main.py │ └── requirements.txt └── frontend/ ├── index.html ├── package.json └── src/ ├── main.jsx └── App.jsx先完成后端再完成前端最后联调。这样的顺序符合前后端分离开发的基本流程接口定清楚前端才能准确对接。4.2 使用 Claude Code 生成 FastAPI 后端进入后端目录启动 Claude Codecd todo-ai-app/backend claude在 Claude Code 的对话输入框中输入以下提示词请使用 Python FastAPI 创建一个待办任务后端数据库使用 SQLite项目结构如下 1. 在 backend/main.py 中实现全部接口。 2. 提供 GET /todos 查询任务列表POST /todos 新建任务PUT /todos/{todo_id} 更新任务标题或完成状态DELETE /todos/{todo_id} 删除任务。 3. 任务字段包括 id、title、completedcompleted 使用布尔类型对外展示。 4. 新建任务时 title 不能为空。 5. 更新任务时可以只传 title 或 completed没有传入的字段保持原值。 6. 初始化表结构时使用 CREATE TABLE IF NOT EXISTS并对数据库连接使用 with 语句管理。 7. 为前端跨域请求添加 CORS 中间件允许 http://localhost:5173 访问。这种描述方式把技术栈、接口列表、字段语义和注意点都写清楚了AI 生成错误结构的概率会小很多。以下是 Claude Code 可能生成的后端核心代码我整理成可直接运行版本# 文件路径todo-ai-app/backend/main.py import sqlite3 from typing import List, Optional from fastapi import FastAPI, HTTPException from fastapi.middleware.cors import CORSMiddleware from pydantic import BaseModel DB_PATH todos.db app FastAPI() # 允许前端开发服务器跨域访问 app.add_middleware( CORSMiddleware, allow_origins[http://localhost:5173], allow_methods[*], allow_headers[*], ) def get_db(): 获取数据库连接并开启行映射方便按字段名取值 conn sqlite3.connect(DB_PATH) conn.row_factory sqlite3.Row return conn def init_db(): 初始化任务表已存在则跳过 with get_db() as conn: conn.execute( CREATE TABLE IF NOT EXISTS todos ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, completed INTEGER NOT NULL DEFAULT 0 ) ) init_db() class TodoCreate(BaseModel): title: str class TodoUpdate(BaseModel): title: Optional[str] None completed: Optional[bool] None class Todo(BaseModel): id: int title: str completed: bool app.get(/todos, response_modelList[Todo]) def list_todos(): 查询任务列表按 id 倒序返回 with get_db() as conn: rows conn.execute( SELECT id, title, completed FROM todos ORDER BY id DESC ).fetchall() return [ {id: row[id], title: row[title], completed: bool(row[completed])} for row in rows ] app.post(/todos, response_modelTodo, status_code201) def create_todo(todo: TodoCreate): 新建任务标题不能为空白字符串 title todo.title.strip() if not title: raise HTTPException(status_code400, detail任务标题不能为空) with get_db() as conn: cur conn.execute(INSERT INTO todos (title) VALUES (?), (title,)) todo_id cur.lastrowid return {id: todo_id, title: title, completed: False} app.put(/todos/{todo_id}, response_modelTodo) def update_todo(todo_id: int, payload: TodoUpdate): 更新任务title 和 completed 至少修改一个 with get_db() as conn: row conn.execute( SELECT id, title, completed FROM todos WHERE id ?, (todo_id,) ).fetchone() if row is None: raise HTTPException(status_code404, detail任务不存在) new_title payload.title.strip() if payload.title is not None else row[title] new_completed ( int(payload.completed) if payload.completed is not None else row[completed] ) conn.execute( UPDATE todos SET title ?, completed ? WHERE id ?, (new_title, new_completed, todo_id), ) return {id: todo_id, title: new_title, completed: bool(new_completed)} app.delete(/todos/{todo_id}, status_code204) def delete_todo(todo_id: int): 删除任务任务不存在时返回 404 with get_db() as conn: cur conn.execute(DELETE FROM todos WHERE id ?, (todo_id,)) if cur.rowcount 0: raise HTTPException(status_code404, detail任务不存在)后端依赖写入 requirements.txt# 文件路径todo-ai-app/backend/requirements.txt fastapi uvicorn安装依赖并启动后端cd todo-ai-app/backend pip install -r requirements.txt uvicorn main:app --reload --port 8000启动成功后可看到Uvicorn running on http://127.0.0.1:8000。此时可以打开http://127.0.0.1:8000/docs查看 FastAPI 自动生成的接口文档也可以在页面上直接调试接口。4.3 使用 Cursor 生成 React 前端接下来打开 Cursor选择“打开文件夹”定位到todo-ai-app/frontend目录。如果该目录为空也没关系可以直接在 Cursor 中新建文件。前端代码可以在 Cursor 的对话面板中通过提示词生成。输入以下提示词请使用 React 和 Vite 创建一个待办任务前端页面功能包括 1. 页面标题为“AI 任务清单”。 2. 顶部是输入框和添加按钮输入框为空时点击添加不发送请求。 3. 下方展示任务列表每项显示任务标题、完成按钮、删除按钮。 4. 完成任务时向后端发送 PUT 请求更新完成后重新获取列表。 5. 删除任务时向后端发送 DELETE 请求删除完成后重新获取列表。 6. 后端接口地址为 http://localhost:8000。 7. 项目文件结构包括 index.html、package.json、src/main.jsx、src/App.jsx。如果 Cursor 直接把全部文件创建好了你只需要检查关键文件。如果它只给代码片段可以手动创建文件并粘贴。下面是对应完整代码// 文件路径todo-ai-app/frontend/package.json { name: todo-frontend, private: true, version: 0.0.0, type: module, scripts: { dev: vite }, dependencies: { react: ^18.3.1, react-dom: ^18.3.1 }, devDependencies: { vitejs/plugin-react: ^4.3.1, vite: ^5.4.8 } }!-- 文件路径todo-ai-app/frontend/index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleAI 任务清单/title /head body div idroot/div script typemodule src/src/main.jsx/script /body /html// 文件路径todo-ai-app/frontend/src/main.jsx import React from react; import ReactDOM from react-dom/client; import App from ./App.jsx; ReactDOM.createRoot(document.getElementById(root)).render( React.StrictMode App / /React.StrictMode );// 文件路径todo-ai-app/frontend/src/App.jsx import { useEffect, useState } from react; const API_BASE http://localhost:8000; export default function App() { const [todos, setTodos] useState([]); const [input, setInput] useState(); const fetchTodos async () { const res await fetch(${API_BASE}/todos); const data await res.json(); setTodos(data); }; const addTodo async () { if (!input.trim()) return; await fetch(${API_BASE}/todos, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ title: input }) }); setInput(); fetchTodos(); }; const toggleTodo async (todo) { await fetch(${API_BASE}/todos/${todo.id}, { method: PUT, headers: { Content-Type: application/json }, body: JSON.stringify({ completed: !todo.completed }) }); fetchTodos(); }; const deleteTodo async (id) { await fetch(${API_BASE}/todos/${id}, { method: DELETE }); fetchTodos(); }; useEffect(() { fetchTodos(); }, []); return ( div style{{ maxWidth: 560, margin: 40px auto, fontFamily: sans-serif }} h1AI 任务清单/h1 div input value{input} onChange{(e) setInput(e.target.value)} placeholder输入新任务... style{{ padding: 8, width: 320 }} / button onClick{addTodo} style{{ padding: 8, marginLeft: 8 }} 添加 /button /div ul {todos.map((todo) ( li key{todo.id} style{{ marginTop: 8 }} span style{{ textDecoration: todo.completed ? line-through : none, marginRight: 12 }} {todo.title} /span button onClick{() toggleTodo(todo)} style{{ marginRight: 4 }} {todo.completed ? 取消完成 : 完成} /button button onClick{() deleteTodo(todo.id)}删除/button /li ))} /ul /div ); }安装前端依赖并启动开发服务器cd todo-ai-app/frontend npm install npm run dev启动成功后终端会显示Local: http://localhost:5173。此时前后端已经同时运行可以进入联调验证。4.4 前后端联调与跨域问题前后端分别启动后浏览器访问http://localhost:5173页面会向后端http://localhost:8000/todos发起请求。由于前端运行在 5173 端口后端运行在 8000 端口浏览器默认会拦截这种跨域请求提示 CORS 错误。解决跨域的常用方法有两种。一种是在后端配置 CORS 中间件显式允许前端来源另一种是通过 Vite 代理转发请求让浏览器认为请求来自同一地址。本文后端已经配置了 CORS 中间件允许http://localhost:5173访问因此前端可以正常请求。联调时可以按以下清单验证操作预期结果页面首次加载显示空列表或已有任务输入任务并点击添加列表新增一条任务点击“完成”按钮任务标题出现删除线按钮文本变为“取消完成”点击“删除”按钮对应任务从列表中移除刷新页面已完成和未完成任务仍然存在说明数据已持久化4.5 运行效果与接口验证如果浏览器访问正常可以再通过接口文档验证后端。打开http://127.0.0.1:8000/docs你会看到每个接口的请求方式和参数说明。这里需要重点确认 DELETE 接口的返回状态是 204如果前端删除后没有刷新列表可以检查浏览器控制台是否有网络报错。这个项目虽然不是大型系统但已经覆盖了全栈开发的核心环节后端接口设计、数据库持久化、前端页面渲染、前后端联调、跨域处理。把它完整跑通你就掌握了 Vibe Coding 开发的基本节奏AI 生成代码、人工检查、运行验证、反馈修正。5. 常见问题与排查思路AI 编程工具链涉及多个组件安装和运行过程中常见问题也比较集中。下面整理了一份排查速查表。问题现象常见原因解决思路claude命令无法识别Node.js 未安装或全局 bin 目录不在 PATH确认 node -v 正常重装 npm 全局包Cursor 扩展加载慢或失败网络环境不稳定或扩展版本过旧更新 Cursor 到最新版重试安装语言包后端启动报端口占用8000 端口被其他进程占用换端口启动如 uvicorn main:app --port 8001前端访问后端报 CORS 错误后端未配置 CORS 或来源地址不一致检查 allow_origins 是否包含实际前端地址数据库文件已存在但表结构旧多次修改建表语句但未删除旧库删除 todos.db 重新初始化生产环境需迁移方案AI 生成代码结构混乱提示词缺少技术栈和目录约束补充项目结构说明要求 AI 先列方案再写代码5.1 Claude Code 安装后命令不可用这是最常见的坑。npm install -g安装成功后如果claude命令无法识别通常是 Node.js 的全局目录没有加入 PATH。Windows 下可以通过npm config get prefix查看全局目录再把它加入系统环境变量。macOS 和 Linux 下则需要检查 shell 配置文件中的 PATH 设置。5.2 前端请求接口报 500 或 404先看浏览器控制台的完整报错再根据状态码判断方向。404 通常是路径不对检查前端请求地址和后端路由是否一致500 则可能是后端代码运行异常回到后端终端查看 traceback 输出。FastAPI 的--reload模式会在代码修改后自动重启但数据库结构变更不一定自动同步必要时删除本地数据库文件重建。5.3 AI 生成的代码与预期不符不要急着改代码先把偏差反馈给 AI。反馈时要附带具体信息比如报错文本、接口返回结果、期望行为与现状的差异。比如你可以说“POST /todos 现在返回 422 错误因为模型缺少请求体字段请检查 TodoCreate 模型”AI 通常能直接定位问题。6. 最佳实践与工程建议6.1 把 AI 生成代码当成协作而不是黑盒AI 编程工具最大的风险不是“生成错”而是开发者看不懂生成结果就直接接受。无论在 Cursor 还是 Claude Code 中建议每次生成后要求 AI 解释关键设计并逐文件检查代码。尤其是数据库操作、命令执行、异常处理这几类代码一旦出错影响面最大。在项目初期建立代码审查习惯可以先从三个维度检查数据流是否闭环接口入参、数据库读写、返回结构是否一致。异常路径是否处理网络失败、空值、重复提交是否会崩溃。敏感信息是否泄露API Key、数据库密码是否出现在代码或日志中。6.2 建立项目级 Prompt 规范和上下文管理在多人协作或长期维护的项目中建议在项目根目录新增一份AI_CONTEXT.md文件记录项目技术栈、目录说明、代码规范、常用 AI 指令模板。这样无论是 Cursor 还是 Claude Code都能从项目中读取到统一背景减少重复解释。一个简单的 AI_CONTEXT.md 可以包含# 项目说明 - 技术栈FastAPI SQLite React Vite - 目录结构backend 存放后端frontend 存放前端 - 接口规范所有接口返回 JSON错误信息放在 detail 字段 - 代码规范函数需要注释数据库操作用 with 管理连接 - 常用指令/api 查看接口列表/gen 生成新接口这样每次开启新会话时让 AI 先读取这份文件再开始任务输出质量更稳定。6.3 安全边界与敏感信息保护凡是涉及 API Key、Token、数据库连接串的配置都不要硬编码在代码里。开发环境下可以使用本地环境变量生产环境建议使用配置中心或密钥管理服务。在 Git 仓库中通过.gitignore排除敏感配置文件。在执行 AI 给出的删除、更新、重置命令时先确认命令作用范围。比如“删除 todos 表”这类操作在测试环境可以执行在生产环境必须经过备份、评审和授权流程。本文项目使用本地 SQLite 文件操作前备份todos.db是成本最低的保险措施。6.4 从 Vibe Coding 过渡到 Spec-Driven 开发如果你只是做原型和个人项目Vibe Coding 的自由度非常合适。但项目进入正式开发阶段代码开始被多人维护时建议逐步加入规格驱动元素。最简单的做法是在大功能开发前先写一份接口约定文档包含请求方式、路径、入参、出参和错误码再交给 AI 实现。这样做的价值在于AI 生成的代码有了明确的验收标准人工 review 时也能快速判断是否符合预期。同时这份接口文档本身就是团队协作的基础后续前端、测试、文档工作都能复用。7. 总结与下一步学习路线顺着这篇文章你已经完成了一条完整的 AI 编程工具链搭建安装了 Cursor 和 Claude Code了解了 Vibe Coding 的四步工作流掌握了 Prompt 编写的基本结构然后用 Claude Code 生成 FastAPI 后端、用 Cursor 生成 React 前端最后完成了前后端联调和一个全栈待办应用的运行。下一步可以从几个方向继续深入。如果你对工具本身感兴趣可以研究 Cursor 的 Compose 多文件编辑、Claude Code 的自定义命令和自动化脚本如果你关注工程化可以尝试给项目补充单元测试和接口测试让 AI 根据测试结果自我修正如果你已经进入到真实业务项目建议尽早引入接口规格文档把 Vibe Coding 和 Spec-Driven 结合起来使用。这里有一个可以立刻行动的练习在你本地创建一个小工具项目比如日志分析脚本或个人书签管理器用本文的流程完整跑一遍记录 AI 生成代码中出现的错误和你的修正方式。经过几个项目的迭代你会慢慢找到最适合自己的 AI 编程节奏。