很多开发者在拿到一个全新项目时往往不是在写代码阶段卡住而是卡在“怎么把项目骨架搭出来”前端用哪个脚手架、后端目录怎么分层、数据库怎么连接、接口怎么定义、页面怎么对接接口。这些工作并不难但非常琐碎每一个环节都要查资料、选方案、建目录、写配置。等终于跑通一个下午可能已经过去了。这篇文章要讲的方法是用 AI 编程工具的 Plan 模式先让 AI 生成完整的技术方案和项目框架规划再让它按计划逐步搭建把传统需要两三个小时的“项目初始化工作”压缩到 10 分钟左右。我们以一个 AI 测试用例项目为例前端用 React Vite后端用 FastAPI数据库用 SQLite走一遍完整的搭建流程。读完这篇文章你能理解 Plan 模式和普通对话写代码的本质区别也能掌握一套可复用的全栈项目搭建思路。先给一个明确判断Plan 模式真正提升的不是“打字速度”而是“决策效率”。普通模式里你让 AI 写代码它生成一段代码你发现不合适再改提示词再来一轮Plan 模式则是先让 AI 把文件结构、技术选型、接口设计、数据模型全部列出来你确认没问题再一次性落地。对于全栈项目框架这种“结构重于细节”的任务Plan 模式几乎是效率最高的方式。1. 为什么要用 Plan 模式搭建全栈项目框架很多使用 AI 编程工具的开发者会有一种感觉让 AI 写单个函数、单个组件很好用但让它“从零搭一个项目”时结果往往混乱。AI 可能生成了一堆文件但缺少统一的依赖管理也可能后端接口能用但前端调用时字段对不上最麻烦的是生成完才发现架构选型不合适改起来成本很高。这里真正的痛点是对话式生成代码天然缺少“全局视角”。Plan 模式解决的就是这个问题。在 Plan 模式下AI 不会直接修改文件而是先读取项目上下文、理解需求、输出一份完整方案。这份方案包含目录结构、技术栈、模块划分、数据模型、接口清单、实施顺序。它把“写代码”和“做决策”分成两个阶段让开发者可以在最关键的决策节点上介入和纠偏。对比一下三种使用方式使用方式交互特点适合场景主要问题手动模式普通对话开发者下指令AI 直接生成或修改代码改 bug、写单点功能缺乏全局规划结构容易混乱Plan 模式AI 先生成方案确认后再执行新项目搭建、大面积重构、多文件改动需要中间增加一次确认环节自动模式全程自动AI 独立完成整个任务不逐项确认明确、低风险的批处理任务方向错时返工成本高从这张表能看出手动模式灵活但缺少规划自动模式快但不可控Plan 模式是在可控性和效率之间取得平衡的选择。如果你想搭建一个全栈项目框架最推荐的方式就是先用 Plan 模式做好架构设计再切换到执行阶段落地代码。2. Plan 模式的工作原理与执行流程要真正用好 Plan 模式需要理解它在底层做了哪些事。以 Claude Code 等支持 Plan 模式的工具为例它的执行流程可以拆成四个阶段需求理解、方案生成、计划确认、计划执行。需求理解阶段AI 会读取项目目录中已有的文件包括代码、配置、文档同时结合你输入的指令判断当前项目处于什么状态。在全新项目中它面对的是空目录在已有项目中它需要先理解既有代码避免提出互相冲突的方案。方案生成阶段AI 会把最终要完成的目标拆成多步计划。每一步包含“要做什么”“要改哪个文件”“为什么这么做”。这些计划不是一次性生成的而是根据项目的复杂度动态调整。比如一个全栈项目AI 可能会生成 20 到 30 个执行步骤从创建后端项目结构到配置前端脚手架再到联调接口。计划确认阶段是 Plan 模式的关键。AI 会把完整计划展示给开发者等待确认。此时开发者可以提出修改意见比如“数据库换成 PostgreSQL”“不需要 Docker 配置”“前端不要用 Tailwind”。修改后 AI 会更新计划直到开发者认可。计划执行阶段AI 按照确认后的计划逐步创建文件、编写代码、安装依赖。每完成一步都会报告当前进展。如果执行过程中遇到问题比如某个依赖版本不存在、某个端口被占用AI 会先停下来询问处理方式而不是擅自换方案。这个流程意味着Plan 模式把“项目搭建”从一个黑盒变成了白盒。开发者全程知道下一步会发生什么知道每一项技术选型的理由也知道在哪个节点可以叫停。3. 环境准备与前置条件在开始搭建 AI 测试用例项目之前需要确保本机环境满足下面这些条件。这里不写死具体版本以实际安装为准但建议使用较新的稳定版本。依赖用途建议版本Node.js运行前端构建工具 Vite18 及以上Python运行后端 FastAPI3.10 及以上Claude Code作为 AI 编程工具使用最新稳定版Git初始化项目仓库建议 2.30 及以上还需要确认你能在终端中直接执行node、python、git命令。Windows 用户建议使用 PowerShell 或 WSLmacOS 和 Linux 用户直接使用终端即可。如果你是第一次使用 Claude Code还需要完成登录和授权。这里特别提醒AI 编程工具会读取项目目录中的文件用于理解上下文所以在正式项目中使用时要确认项目不包含敏感信息并遵守团队的安全规范。不要在包含密钥、证书、内网地址的仓库里随意授权 AI 工具访问。完成环境准备后我们创建一个空目录作为项目根目录mkdir ai-testcase cd ai-testcase git init目录名ai-testcase就是我们这个 AI 测试用例项目的根目录。后续所有的前后端代码、配置文件和文档都会放在这个目录下。4. 用 Plan 模式输出 AI 测试用例项目的技术方案环境准备好之后进入正式流程。第一步不是写代码而是让 AI 生成技术方案。这一步决定了整个项目的地基是否稳固。在终端中启动 Claude Code然后输入下面的提示词。注意这个提示词的角色不是“帮我写代码”而是“帮我做方案规划”这对于触发 Plan 模式至关重要。请进入 Plan 模式不写任何代码先帮我规划一个 AI 测试用例项目。 项目需求如下 1. 这是一个测试用例管理平台支持手动创建测试用例也支持调用大语言模型生成测试用例建议。 2. 测试用例包含用例标题、优先级、前置条件、操作步骤、期望结果、所属模块、标签等字段。 3. 支持按模块和标签筛选测试用例。 4. 后端需要提供 RESTful API前端通过 API 完成数据交互。 5. 项目需要提供数据库表结构设计、接口文档和启动说明。 请输出 - 推荐的技术栈及理由。 - 完整的目录结构。 - 数据模型设计。 - API 接口清单。 - 分步实施计划。在 Plan 模式下AI 不会立刻创建main.py或App.tsx而是会返回一份结构化的方案。这份方案通常包括以下内容。技术栈方面AI 很可能会推荐后端使用 FastAPI理由是它的异步支持好、自动生成接口文档、开发效率高。前端推荐 React Vite理由是生态成熟、组件复用方便、启动速度快。数据库推荐 SQLite 作为开发环境存储理由是不需要额外的数据库服务零配置即可运行。目录结构方面一个合理的方案大致如下ai-testcase/ ├── backend/ │ ├── app/ │ │ ├── main.py │ │ ├── database.py │ │ ├── models.py │ │ ├── schemas.py │ │ ├── crud.py │ │ ├── api/ │ │ │ ├── testcases.py │ │ │ └── ai_suggest.py │ │ └── ai/ │ │ ├── __init__.py │ │ └── llm_client.py │ ├── requirements.txt │ └── README.md ├── frontend/ │ ├── src/ │ │ ├── App.tsx │ │ ├── main.tsx │ │ ├── api/ │ │ │ └── client.ts │ │ ├── components/ │ │ │ ├── TestCaseForm.tsx │ │ │ ├── TestCaseList.tsx │ │ │ └── FilterBar.tsx │ │ ├── pages/ │ │ │ └── HomePage.tsx │ │ └── types/ │ │ └── testcase.ts │ ├── package.json │ └── vite.config.ts └── README.md数据模型方面至少需要一张testcases表建议字段包括id主键、title、module、priority、preconditions、steps、expected_result、tags、created_at、updated_at。API 接口清单大致如下方法路径功能POST/api/testcases创建测试用例GET/api/testcases查询测试用例列表GET/api/testcases/{id}查询测试用例详情PUT/api/testcases/{id}更新测试用例DELETE/api/testcases/{id}删除测试用例POST/api/ai/suggest调用 AI 生成测试用例建议拿到这份方案之后不要急着点确认。需要做的第一件事是检查方案是否符合自己的需求。看技术栈是否可接受、有没有多余的模块、数据库选型是否适合团队现状、API 设计是否覆盖了需求。有不同意见直接提让 AI 修改方案后再确认。这里特别提醒Plan 模式的意义就在于“这个环节值得花时间”。很多开发者用 Plan 模式效果不好原因就是方案还没看清楚就点了确认结果生成出的代码结构和自己预期完全不符然后再浪费更多时间返工。5. 确认计划后让 Plan 模式生成后端框架技术方案确认之后就可以让 Plan 模式开始执行了。在 Claude Code 中确认计划后AI 会按计划逐步创建文件。第一步通常是搭建后端框架因为先有接口前端才能对接。后端框架的核心文件包括requirements.txt、main.py、database.py、models.py、schemas.py和crud.py。这里给出最终生成的代码示例你可以对照理解每个文件的作用。首先是依赖文件backend/requirements.txtfastapi uvicorn[standard] sqlalchemy pydantic然后是后端入口backend/app/main.pyfrom fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware from app.api import testcases, ai_suggest from app.database import engine, Base Base.metadata.create_all(bindengine) app FastAPI( titleAI Test Case API, descriptionAI 测试用例项目管理后端, version0.1.0, ) app.add_middleware( CORSMiddleware, allow_origins[http://localhost:5173], allow_credentialsTrue, allow_methods[*], allow_headers[*], ) app.include_router(testcases.router, prefix/api/testcases, tags[testcases]) app.include_router(ai_suggest.router, prefix/api/ai, tags[ai]) app.get(/health) def health_check(): return {status: ok}这段代码做了三件关键的事初始化数据库表结构配置 CORS 允许前端开发服务器访问挂载测试用例和 AI 建议两个路由。再看数据模型backend/app/models.pyfrom datetime import datetime from sqlalchemy import Column, DateTime, Integer, String, Text from sqlalchemy.orm import declarative_base Base declarative_base() class TestCase(Base): __tablename__ testcases id Column(Integer, primary_keyTrue, indexTrue) title Column(String(200), nullableFalse) module Column(String(100), nullableFalse) priority Column(String(20), nullableFalse, defaultP2) preconditions Column(Text, default) steps Column(Text, default) expected_result Column(Text, default) tags Column(String(200), default) created_at Column(DateTime, defaultdatetime.utcnow) updated_at Column(DateTime, defaultdatetime.utcnow, onupdatedatetime.utcnow)这里priority用字符串类型存储取值一般是P0、P1、P2、P3。tags用逗号分隔的字符串存储方便简单场景下快速筛选。如果后续需要复杂标签查询可以拆分成关联表。接口文件backend/app/api/testcases.pyfrom fastapi import APIRouter, Depends, HTTPException from sqlalchemy.orm import Session import crud import schemas from database import SessionLocal router APIRouter() def get_db(): db SessionLocal() try: yield db finally: db.close() router.post(, response_modelschemas.TestCaseOut) def create_testcase(payload: schemas.TestCaseCreate, db: Session Depends(get_db)): return crud.create_testcase(dbdb, payloadpayload) router.get(, response_modellist[schemas.TestCaseOut]) def list_testcases( module: str | None None, tag: str | None None, db: Session Depends(get_db), ): return crud.list_testcases(dbdb, modulemodule, tagtag) router.get(/{testcase_id}, response_modelschemas.TestCaseOut) def get_testcase(testcase_id: int, db: Session Depends(get_db)): testcase crud.get_testcase(dbdb, testcase_idtestcase_id) if not testcase: raise HTTPException(status_code404, detailTest case not found) return testcase router.put(/{testcase_id}, response_modelschemas.TestCaseOut) def update_testcase( testcase_id: int, payload: schemas.TestCaseUpdate, db: Session Depends(get_db), ): testcase crud.update_testcase(dbdb, testcase_idtestcase_id, payloadpayload) if not testcase: raise HTTPException(status_code404, detailTest case not found) return testcase router.delete(/{testcase_id}, status_code204) def delete_testcase(testcase_id: int, db: Session Depends(get_db)): success crud.delete_testcase(dbdb, testcase_idtestcase_id) if not success: raise HTTPException(status_code404, detailTest case not found)注意一个细节router.post()的路径是空字符串因为路由被挂载时已经带上了/api/testcases前缀。这样写避免出现//api/testcases//之类的重复斜杠问题。运行后端只需要一条命令cd backend pip install -r requirements.txt uvicorn app.main:app --reload启动成功后浏览器访问http://127.0.0.1:8000/docs就能看到 FastAPI 自动生成的 Swagger 接口文档。6. 用 Plan 模式生成前端框架并对接后端后端框架搭建完成后Plan 模式会继续生成前端部分。前端使用 React Vite TypeScript 组合代码量不大但组织清晰。前端最重要的两个部分是 API 客户端和页面组件。API 客户端负责统一发送请求页面组件负责渲染和交互。frontend/src/api/client.tsexport interface TestCase { id?: number; title: string; module: string; priority: string; preconditions: string; steps: string; expected_result: string; tags: string; created_at?: string; updated_at?: string; } const BASE_URL http://localhost:8000/api; async function requestT(path: string, options?: RequestInit): PromiseT { const res await fetch(${BASE_URL}${path}, { headers: { Content-Type: application/json }, ...options, }); if (!res.ok) { throw new Error(Request failed: ${res.status}); } if (res.status 204) { return undefined as T; } return res.json() as PromiseT; } export const api { listTestcases: (params?: { module?: string; tag?: string }) { const query new URLSearchParams(params).toString(); return requestTestCase[](/testcases${query ? ?${query} : }); }, getTestcase: (id: number) requestTestCase(/testcases/${id}), createTestcase: (data: TestCase) requestTestCase(/testcases, { method: POST, body: JSON.stringify(data), }), updateTestcase: (id: number, data: PartialTestCase) requestTestCase(/testcases/${id}, { method: PUT, body: JSON.stringify(data), }), deleteTestcase: (id: number) requestvoid(/testcases/${id}, { method: DELETE }), };页面组件frontend/src/pages/HomePage.tsximport { useEffect, useState } from react; import { api, TestCase } from ../api/client; import { TestCaseForm } from ../components/TestCaseForm; import { TestCaseList } from ../components/TestCaseList; export function HomePage() { const [cases, setCases] useStateTestCase[]([]); const [module, setModule] useState(); const [tag, setTag] useState(); const load async () { const data await api.listTestcases({ module, tag }); setCases(data); }; useEffect(() { load(); }, [module, tag]); const handleCreate async (payload: TestCase) { await api.createTestcase(payload); load(); }; const handleDelete async (id: number) { await api.deleteTestcase(id); load(); }; return ( div style{{ maxWidth: 960, margin: 0 auto, padding: 24 }} h1AI 测试用例管理/h1 div style{{ marginBottom: 16 }} input placeholder按模块筛选 value{module} onChange{(e) setModule(e.target.value)} / input placeholder按标签筛选 value{tag} onChange{(e) setTag(e.target.value)} / /div TestCaseForm onSubmit{handleCreate} / TestCaseList cases{cases} onDelete{handleDelete} / /div ); }启动前端需要先安装依赖cd frontend npm install npm run dev启动后访问http://localhost:5173就能看到测试用例管理页面。前端通过http://localhost:8000/api与后端通信。7. 数据库设计与初始化过程AI 测试用例项目的数据库设计比较简单生产环境可以扩展到 PostgreSQL开发环境下用 SQLite 完全够用。SQLite 的优势是零配置、单文件、不需要单独启动数据库服务非常适合本地开发和初期小规模部署。项目启动时代码中的Base.metadata.create_all(bindengine)会自动创建testcases表。这个过程只会创建不存在的表不会修改已有的表结构。如果你的数据模型后续有变更需要用迁移工具而不是直接改模型后重启。这里给出完整的backend/app/database.pyfrom sqlalchemy import create_engine from sqlalchemy.orm import sessionmaker SQLALCHEMY_DATABASE_URL sqlite:///./testcase.db engine create_engine( SQLALCHEMY_DATABASE_URL, connect_args{check_same_thread: False}, ) SessionLocal sessionmaker(autocommitFalse, autoflushFalse, bindengine)check_same_thread: False是 SQLite 在 FastAPI 多线程环境下的必要配置。如果不加接口在非主线程访问数据库时会报错。这个小细节很容易被忽略却是开发中常见的坑。还要注意sqlite:///./testcase.db是相对路径数据库文件会生成在当前工作目录。如果你用uvicorn app.main:app从backend目录启动文件就在backend/testcase.db。如果你从项目根目录启动文件就在根目录。建议固定启动目录避免找不到数据库文件。8. 完整运行验证与效果确认代码生成完成后需要完整跑一遍验证流程确认整个全栈框架真的能工作。建议按下面的顺序操作。后端启动验证cd backend pip install -r requirements.txt uvicorn app.main:app --reload打开http://127.0.0.1:8000/docs如果能看到 Swagger 页面并且/health接口返回{status:ok}说明后端正常运行。前端启动验证cd frontend npm install npm run dev打开http://localhost:5173如果能看到页面说明前端正常。数据链路验证可以在页面中创建一个测试用例填写标题和所属模块保存后刷新页面。如果数据还在说明前后端接口和数据库链路完整。也可以在终端执行一条 curl 命令验证curl -X POST http://localhost:8000/api/testcases \ -H Content-Type: application/json \ -d { title: 登录功能-输入正确用户名密码, module: 用户模块, priority: P1, preconditions: 系统已部署, steps: 1. 打开登录页; 2. 输入正确账号密码; 3. 点击登录, expected_result: 登录成功跳转首页, tags: 冒烟测试 }预期返回一个包含id的 JSON 对象。再执行curl http://localhost:8000/api/testcases返回列表中应该包含刚创建的测试用例。如果前端页面请求报 CORS 错误优先检查main.py中的allow_origins是否写成了http://localhost:5173。Vite 默认启动端口是 5173但如果你改过端口前后端配置要同步更新。9. 常见问题与排查思路以下是在用 Plan 模式搭建全栈项目框架时容易遇到的问题以及对应的排查办法。问题现象可能原因排查方式解决方案Plan 模式生成的目录结构和预期不符方案确认阶段没有仔细检查回看方案确认时的对话记录在确认前要求调整目录结构后端启动报错Module not found依赖没有安装完整查看requirements.txt与安装日志重新执行pip install -r requirements.txt前端请求接口提示 CORS后端没有配置 CORS 或端口不匹配检查浏览器 Network 面板报错信息更新allow_origins为当前前端地址SQLite 数据库访问报错缺少check_same_threadFalse查看完整堆栈日志在create_engine中补充该参数数据库文件生成在意外位置启动目录不一致检查testcase.db所在位置统一启动目录或改成绝对路径Plan 模式执行步骤到一半停下执行遇到需要决策的问题查看 AI 提示信息根据提示做出选择后继续执行接口返回 422 校验错误请求字段和后端 Pydantic 模型不一致查看 Swagger 文档中的字段定义修正请求参数遇到问题时第一原则是看日志。后端看终端输出前端看浏览器 Network 面板和 Console。AI 生成代码出现问题并不意味着方案错了很多情况都是环境配置或版本细节不一致导致的。10. 最佳实践与工程建议用 Plan 模式高效搭建项目框架只是第一步真正决定项目能否持续发展的是开发过程中的工程习惯。以下建议来自实际项目的通用经验适合大多数全栈项目。第一让 Plan 模式成为项目的“架构评审工具”。不止是搭建新项目在新增模块、重构接口、调整数据库表结构时都可以先进入 Plan 模式让 AI 输出方案再由开发者确认。这样可以避免“直接让 AI 改代码改完不知道改了什么”的失控状态。第二把方案沉淀为文档。Plan 模式生成的目录结构、接口清单、数据模型应该保存到项目的README.md或docs/目录。这不仅是给当前开发者看的也是给后续加入的成员看的。AI 生成的方案经过人工确认后本身就是一份高质量的技术文档。第三注意数据模型变更的管理。Base.metadata.create_all只适合初始化不适合迁移。当数据模型迭代到第二版、第三版时建议引入 Alembic 之类的迁移工具记录每次变更保证测试环境和生产环境的表结构可控、可回滚。第四安全边界不能忽视。这个示例项目没有做用户认证测试环境可以直接访问。如果部署到真实环境至少需要增加 Token 认证、输入校验和权限控制。凡是涉及数据库写入操作的接口都要强调参数校验和最小权限原则。生产环境部署时SQLite 也要替换成 PostgreSQL 等更合适的数据库。第五版本管理使用语义化提交。建议让 AI 每次完成一个功能模块后提交一次 Git提交信息使用feat(backend): 添加测试用例 CRUD 接口这种格式。这样即使后续某个阶段生成结果不理想也能通过 Git 回滚到任意一个里程碑。第六合理控制 Plan 模式的执行粒度。如果你发现 AI 一次执行的步骤过多中途频繁出错可以把大计划拆成小计划分阶段执行。比如先让 Plan 模式完成后端验证接口可用后再让 Plan 模式规划前端。粒度越小可控性越高。11. 总结与后续实践建议回到本文开头的问题为什么很多人用 AI 写代码效率提升却不够明显核心原因不是 AI 能力不够而是使用方式停留在“让 AI 帮你打字”的层面。Plan 模式提供了一套流程让 AI 在动手前先思考、先规划让开发者在关键决策点上掌握主动权。用它搭建全栈项目框架10 分钟跑通主要流程并不是夸张的说法前提是需求描述清楚、方案确认认真、环境准备到位。如果你准备自己动手试一次建议直接拿这个 AI 测试用例项目练手。搭建完成之后可以继续让它增加 AI 生成测试用例建议的接口。技术栈选择没有唯一标准你可以把前端换成 Vue把后端换成 Spring Boot核心方法论是一样的先规划后实施再验证。建议收藏这篇文章下次需要搭建新项目时打开 Plan 模式照着流程走一遍。你会发现项目初始化的时间成本真的可以压到 10 分钟级别。 用AI编程工具的Plan模式快速搭建全栈项目框架
很多开发者在拿到一个全新项目时往往不是在写代码阶段卡住而是卡在“怎么把项目骨架搭出来”前端用哪个脚手架、后端目录怎么分层、数据库怎么连接、接口怎么定义、页面怎么对接接口。这些工作并不难但非常琐碎每一个环节都要查资料、选方案、建目录、写配置。等终于跑通一个下午可能已经过去了。这篇文章要讲的方法是用 AI 编程工具的 Plan 模式先让 AI 生成完整的技术方案和项目框架规划再让它按计划逐步搭建把传统需要两三个小时的“项目初始化工作”压缩到 10 分钟左右。我们以一个 AI 测试用例项目为例前端用 React Vite后端用 FastAPI数据库用 SQLite走一遍完整的搭建流程。读完这篇文章你能理解 Plan 模式和普通对话写代码的本质区别也能掌握一套可复用的全栈项目搭建思路。先给一个明确判断Plan 模式真正提升的不是“打字速度”而是“决策效率”。普通模式里你让 AI 写代码它生成一段代码你发现不合适再改提示词再来一轮Plan 模式则是先让 AI 把文件结构、技术选型、接口设计、数据模型全部列出来你确认没问题再一次性落地。对于全栈项目框架这种“结构重于细节”的任务Plan 模式几乎是效率最高的方式。1. 为什么要用 Plan 模式搭建全栈项目框架很多使用 AI 编程工具的开发者会有一种感觉让 AI 写单个函数、单个组件很好用但让它“从零搭一个项目”时结果往往混乱。AI 可能生成了一堆文件但缺少统一的依赖管理也可能后端接口能用但前端调用时字段对不上最麻烦的是生成完才发现架构选型不合适改起来成本很高。这里真正的痛点是对话式生成代码天然缺少“全局视角”。Plan 模式解决的就是这个问题。在 Plan 模式下AI 不会直接修改文件而是先读取项目上下文、理解需求、输出一份完整方案。这份方案包含目录结构、技术栈、模块划分、数据模型、接口清单、实施顺序。它把“写代码”和“做决策”分成两个阶段让开发者可以在最关键的决策节点上介入和纠偏。对比一下三种使用方式使用方式交互特点适合场景主要问题手动模式普通对话开发者下指令AI 直接生成或修改代码改 bug、写单点功能缺乏全局规划结构容易混乱Plan 模式AI 先生成方案确认后再执行新项目搭建、大面积重构、多文件改动需要中间增加一次确认环节自动模式全程自动AI 独立完成整个任务不逐项确认明确、低风险的批处理任务方向错时返工成本高从这张表能看出手动模式灵活但缺少规划自动模式快但不可控Plan 模式是在可控性和效率之间取得平衡的选择。如果你想搭建一个全栈项目框架最推荐的方式就是先用 Plan 模式做好架构设计再切换到执行阶段落地代码。2. Plan 模式的工作原理与执行流程要真正用好 Plan 模式需要理解它在底层做了哪些事。以 Claude Code 等支持 Plan 模式的工具为例它的执行流程可以拆成四个阶段需求理解、方案生成、计划确认、计划执行。需求理解阶段AI 会读取项目目录中已有的文件包括代码、配置、文档同时结合你输入的指令判断当前项目处于什么状态。在全新项目中它面对的是空目录在已有项目中它需要先理解既有代码避免提出互相冲突的方案。方案生成阶段AI 会把最终要完成的目标拆成多步计划。每一步包含“要做什么”“要改哪个文件”“为什么这么做”。这些计划不是一次性生成的而是根据项目的复杂度动态调整。比如一个全栈项目AI 可能会生成 20 到 30 个执行步骤从创建后端项目结构到配置前端脚手架再到联调接口。计划确认阶段是 Plan 模式的关键。AI 会把完整计划展示给开发者等待确认。此时开发者可以提出修改意见比如“数据库换成 PostgreSQL”“不需要 Docker 配置”“前端不要用 Tailwind”。修改后 AI 会更新计划直到开发者认可。计划执行阶段AI 按照确认后的计划逐步创建文件、编写代码、安装依赖。每完成一步都会报告当前进展。如果执行过程中遇到问题比如某个依赖版本不存在、某个端口被占用AI 会先停下来询问处理方式而不是擅自换方案。这个流程意味着Plan 模式把“项目搭建”从一个黑盒变成了白盒。开发者全程知道下一步会发生什么知道每一项技术选型的理由也知道在哪个节点可以叫停。3. 环境准备与前置条件在开始搭建 AI 测试用例项目之前需要确保本机环境满足下面这些条件。这里不写死具体版本以实际安装为准但建议使用较新的稳定版本。依赖用途建议版本Node.js运行前端构建工具 Vite18 及以上Python运行后端 FastAPI3.10 及以上Claude Code作为 AI 编程工具使用最新稳定版Git初始化项目仓库建议 2.30 及以上还需要确认你能在终端中直接执行node、python、git命令。Windows 用户建议使用 PowerShell 或 WSLmacOS 和 Linux 用户直接使用终端即可。如果你是第一次使用 Claude Code还需要完成登录和授权。这里特别提醒AI 编程工具会读取项目目录中的文件用于理解上下文所以在正式项目中使用时要确认项目不包含敏感信息并遵守团队的安全规范。不要在包含密钥、证书、内网地址的仓库里随意授权 AI 工具访问。完成环境准备后我们创建一个空目录作为项目根目录mkdir ai-testcase cd ai-testcase git init目录名ai-testcase就是我们这个 AI 测试用例项目的根目录。后续所有的前后端代码、配置文件和文档都会放在这个目录下。4. 用 Plan 模式输出 AI 测试用例项目的技术方案环境准备好之后进入正式流程。第一步不是写代码而是让 AI 生成技术方案。这一步决定了整个项目的地基是否稳固。在终端中启动 Claude Code然后输入下面的提示词。注意这个提示词的角色不是“帮我写代码”而是“帮我做方案规划”这对于触发 Plan 模式至关重要。请进入 Plan 模式不写任何代码先帮我规划一个 AI 测试用例项目。 项目需求如下 1. 这是一个测试用例管理平台支持手动创建测试用例也支持调用大语言模型生成测试用例建议。 2. 测试用例包含用例标题、优先级、前置条件、操作步骤、期望结果、所属模块、标签等字段。 3. 支持按模块和标签筛选测试用例。 4. 后端需要提供 RESTful API前端通过 API 完成数据交互。 5. 项目需要提供数据库表结构设计、接口文档和启动说明。 请输出 - 推荐的技术栈及理由。 - 完整的目录结构。 - 数据模型设计。 - API 接口清单。 - 分步实施计划。在 Plan 模式下AI 不会立刻创建main.py或App.tsx而是会返回一份结构化的方案。这份方案通常包括以下内容。技术栈方面AI 很可能会推荐后端使用 FastAPI理由是它的异步支持好、自动生成接口文档、开发效率高。前端推荐 React Vite理由是生态成熟、组件复用方便、启动速度快。数据库推荐 SQLite 作为开发环境存储理由是不需要额外的数据库服务零配置即可运行。目录结构方面一个合理的方案大致如下ai-testcase/ ├── backend/ │ ├── app/ │ │ ├── main.py │ │ ├── database.py │ │ ├── models.py │ │ ├── schemas.py │ │ ├── crud.py │ │ ├── api/ │ │ │ ├── testcases.py │ │ │ └── ai_suggest.py │ │ └── ai/ │ │ ├── __init__.py │ │ └── llm_client.py │ ├── requirements.txt │ └── README.md ├── frontend/ │ ├── src/ │ │ ├── App.tsx │ │ ├── main.tsx │ │ ├── api/ │ │ │ └── client.ts │ │ ├── components/ │ │ │ ├── TestCaseForm.tsx │ │ │ ├── TestCaseList.tsx │ │ │ └── FilterBar.tsx │ │ ├── pages/ │ │ │ └── HomePage.tsx │ │ └── types/ │ │ └── testcase.ts │ ├── package.json │ └── vite.config.ts └── README.md数据模型方面至少需要一张testcases表建议字段包括id主键、title、module、priority、preconditions、steps、expected_result、tags、created_at、updated_at。API 接口清单大致如下方法路径功能POST/api/testcases创建测试用例GET/api/testcases查询测试用例列表GET/api/testcases/{id}查询测试用例详情PUT/api/testcases/{id}更新测试用例DELETE/api/testcases/{id}删除测试用例POST/api/ai/suggest调用 AI 生成测试用例建议拿到这份方案之后不要急着点确认。需要做的第一件事是检查方案是否符合自己的需求。看技术栈是否可接受、有没有多余的模块、数据库选型是否适合团队现状、API 设计是否覆盖了需求。有不同意见直接提让 AI 修改方案后再确认。这里特别提醒Plan 模式的意义就在于“这个环节值得花时间”。很多开发者用 Plan 模式效果不好原因就是方案还没看清楚就点了确认结果生成出的代码结构和自己预期完全不符然后再浪费更多时间返工。5. 确认计划后让 Plan 模式生成后端框架技术方案确认之后就可以让 Plan 模式开始执行了。在 Claude Code 中确认计划后AI 会按计划逐步创建文件。第一步通常是搭建后端框架因为先有接口前端才能对接。后端框架的核心文件包括requirements.txt、main.py、database.py、models.py、schemas.py和crud.py。这里给出最终生成的代码示例你可以对照理解每个文件的作用。首先是依赖文件backend/requirements.txtfastapi uvicorn[standard] sqlalchemy pydantic然后是后端入口backend/app/main.pyfrom fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware from app.api import testcases, ai_suggest from app.database import engine, Base Base.metadata.create_all(bindengine) app FastAPI( titleAI Test Case API, descriptionAI 测试用例项目管理后端, version0.1.0, ) app.add_middleware( CORSMiddleware, allow_origins[http://localhost:5173], allow_credentialsTrue, allow_methods[*], allow_headers[*], ) app.include_router(testcases.router, prefix/api/testcases, tags[testcases]) app.include_router(ai_suggest.router, prefix/api/ai, tags[ai]) app.get(/health) def health_check(): return {status: ok}这段代码做了三件关键的事初始化数据库表结构配置 CORS 允许前端开发服务器访问挂载测试用例和 AI 建议两个路由。再看数据模型backend/app/models.pyfrom datetime import datetime from sqlalchemy import Column, DateTime, Integer, String, Text from sqlalchemy.orm import declarative_base Base declarative_base() class TestCase(Base): __tablename__ testcases id Column(Integer, primary_keyTrue, indexTrue) title Column(String(200), nullableFalse) module Column(String(100), nullableFalse) priority Column(String(20), nullableFalse, defaultP2) preconditions Column(Text, default) steps Column(Text, default) expected_result Column(Text, default) tags Column(String(200), default) created_at Column(DateTime, defaultdatetime.utcnow) updated_at Column(DateTime, defaultdatetime.utcnow, onupdatedatetime.utcnow)这里priority用字符串类型存储取值一般是P0、P1、P2、P3。tags用逗号分隔的字符串存储方便简单场景下快速筛选。如果后续需要复杂标签查询可以拆分成关联表。接口文件backend/app/api/testcases.pyfrom fastapi import APIRouter, Depends, HTTPException from sqlalchemy.orm import Session import crud import schemas from database import SessionLocal router APIRouter() def get_db(): db SessionLocal() try: yield db finally: db.close() router.post(, response_modelschemas.TestCaseOut) def create_testcase(payload: schemas.TestCaseCreate, db: Session Depends(get_db)): return crud.create_testcase(dbdb, payloadpayload) router.get(, response_modellist[schemas.TestCaseOut]) def list_testcases( module: str | None None, tag: str | None None, db: Session Depends(get_db), ): return crud.list_testcases(dbdb, modulemodule, tagtag) router.get(/{testcase_id}, response_modelschemas.TestCaseOut) def get_testcase(testcase_id: int, db: Session Depends(get_db)): testcase crud.get_testcase(dbdb, testcase_idtestcase_id) if not testcase: raise HTTPException(status_code404, detailTest case not found) return testcase router.put(/{testcase_id}, response_modelschemas.TestCaseOut) def update_testcase( testcase_id: int, payload: schemas.TestCaseUpdate, db: Session Depends(get_db), ): testcase crud.update_testcase(dbdb, testcase_idtestcase_id, payloadpayload) if not testcase: raise HTTPException(status_code404, detailTest case not found) return testcase router.delete(/{testcase_id}, status_code204) def delete_testcase(testcase_id: int, db: Session Depends(get_db)): success crud.delete_testcase(dbdb, testcase_idtestcase_id) if not success: raise HTTPException(status_code404, detailTest case not found)注意一个细节router.post()的路径是空字符串因为路由被挂载时已经带上了/api/testcases前缀。这样写避免出现//api/testcases//之类的重复斜杠问题。运行后端只需要一条命令cd backend pip install -r requirements.txt uvicorn app.main:app --reload启动成功后浏览器访问http://127.0.0.1:8000/docs就能看到 FastAPI 自动生成的 Swagger 接口文档。6. 用 Plan 模式生成前端框架并对接后端后端框架搭建完成后Plan 模式会继续生成前端部分。前端使用 React Vite TypeScript 组合代码量不大但组织清晰。前端最重要的两个部分是 API 客户端和页面组件。API 客户端负责统一发送请求页面组件负责渲染和交互。frontend/src/api/client.tsexport interface TestCase { id?: number; title: string; module: string; priority: string; preconditions: string; steps: string; expected_result: string; tags: string; created_at?: string; updated_at?: string; } const BASE_URL http://localhost:8000/api; async function requestT(path: string, options?: RequestInit): PromiseT { const res await fetch(${BASE_URL}${path}, { headers: { Content-Type: application/json }, ...options, }); if (!res.ok) { throw new Error(Request failed: ${res.status}); } if (res.status 204) { return undefined as T; } return res.json() as PromiseT; } export const api { listTestcases: (params?: { module?: string; tag?: string }) { const query new URLSearchParams(params).toString(); return requestTestCase[](/testcases${query ? ?${query} : }); }, getTestcase: (id: number) requestTestCase(/testcases/${id}), createTestcase: (data: TestCase) requestTestCase(/testcases, { method: POST, body: JSON.stringify(data), }), updateTestcase: (id: number, data: PartialTestCase) requestTestCase(/testcases/${id}, { method: PUT, body: JSON.stringify(data), }), deleteTestcase: (id: number) requestvoid(/testcases/${id}, { method: DELETE }), };页面组件frontend/src/pages/HomePage.tsximport { useEffect, useState } from react; import { api, TestCase } from ../api/client; import { TestCaseForm } from ../components/TestCaseForm; import { TestCaseList } from ../components/TestCaseList; export function HomePage() { const [cases, setCases] useStateTestCase[]([]); const [module, setModule] useState(); const [tag, setTag] useState(); const load async () { const data await api.listTestcases({ module, tag }); setCases(data); }; useEffect(() { load(); }, [module, tag]); const handleCreate async (payload: TestCase) { await api.createTestcase(payload); load(); }; const handleDelete async (id: number) { await api.deleteTestcase(id); load(); }; return ( div style{{ maxWidth: 960, margin: 0 auto, padding: 24 }} h1AI 测试用例管理/h1 div style{{ marginBottom: 16 }} input placeholder按模块筛选 value{module} onChange{(e) setModule(e.target.value)} / input placeholder按标签筛选 value{tag} onChange{(e) setTag(e.target.value)} / /div TestCaseForm onSubmit{handleCreate} / TestCaseList cases{cases} onDelete{handleDelete} / /div ); }启动前端需要先安装依赖cd frontend npm install npm run dev启动后访问http://localhost:5173就能看到测试用例管理页面。前端通过http://localhost:8000/api与后端通信。7. 数据库设计与初始化过程AI 测试用例项目的数据库设计比较简单生产环境可以扩展到 PostgreSQL开发环境下用 SQLite 完全够用。SQLite 的优势是零配置、单文件、不需要单独启动数据库服务非常适合本地开发和初期小规模部署。项目启动时代码中的Base.metadata.create_all(bindengine)会自动创建testcases表。这个过程只会创建不存在的表不会修改已有的表结构。如果你的数据模型后续有变更需要用迁移工具而不是直接改模型后重启。这里给出完整的backend/app/database.pyfrom sqlalchemy import create_engine from sqlalchemy.orm import sessionmaker SQLALCHEMY_DATABASE_URL sqlite:///./testcase.db engine create_engine( SQLALCHEMY_DATABASE_URL, connect_args{check_same_thread: False}, ) SessionLocal sessionmaker(autocommitFalse, autoflushFalse, bindengine)check_same_thread: False是 SQLite 在 FastAPI 多线程环境下的必要配置。如果不加接口在非主线程访问数据库时会报错。这个小细节很容易被忽略却是开发中常见的坑。还要注意sqlite:///./testcase.db是相对路径数据库文件会生成在当前工作目录。如果你用uvicorn app.main:app从backend目录启动文件就在backend/testcase.db。如果你从项目根目录启动文件就在根目录。建议固定启动目录避免找不到数据库文件。8. 完整运行验证与效果确认代码生成完成后需要完整跑一遍验证流程确认整个全栈框架真的能工作。建议按下面的顺序操作。后端启动验证cd backend pip install -r requirements.txt uvicorn app.main:app --reload打开http://127.0.0.1:8000/docs如果能看到 Swagger 页面并且/health接口返回{status:ok}说明后端正常运行。前端启动验证cd frontend npm install npm run dev打开http://localhost:5173如果能看到页面说明前端正常。数据链路验证可以在页面中创建一个测试用例填写标题和所属模块保存后刷新页面。如果数据还在说明前后端接口和数据库链路完整。也可以在终端执行一条 curl 命令验证curl -X POST http://localhost:8000/api/testcases \ -H Content-Type: application/json \ -d { title: 登录功能-输入正确用户名密码, module: 用户模块, priority: P1, preconditions: 系统已部署, steps: 1. 打开登录页; 2. 输入正确账号密码; 3. 点击登录, expected_result: 登录成功跳转首页, tags: 冒烟测试 }预期返回一个包含id的 JSON 对象。再执行curl http://localhost:8000/api/testcases返回列表中应该包含刚创建的测试用例。如果前端页面请求报 CORS 错误优先检查main.py中的allow_origins是否写成了http://localhost:5173。Vite 默认启动端口是 5173但如果你改过端口前后端配置要同步更新。9. 常见问题与排查思路以下是在用 Plan 模式搭建全栈项目框架时容易遇到的问题以及对应的排查办法。问题现象可能原因排查方式解决方案Plan 模式生成的目录结构和预期不符方案确认阶段没有仔细检查回看方案确认时的对话记录在确认前要求调整目录结构后端启动报错Module not found依赖没有安装完整查看requirements.txt与安装日志重新执行pip install -r requirements.txt前端请求接口提示 CORS后端没有配置 CORS 或端口不匹配检查浏览器 Network 面板报错信息更新allow_origins为当前前端地址SQLite 数据库访问报错缺少check_same_threadFalse查看完整堆栈日志在create_engine中补充该参数数据库文件生成在意外位置启动目录不一致检查testcase.db所在位置统一启动目录或改成绝对路径Plan 模式执行步骤到一半停下执行遇到需要决策的问题查看 AI 提示信息根据提示做出选择后继续执行接口返回 422 校验错误请求字段和后端 Pydantic 模型不一致查看 Swagger 文档中的字段定义修正请求参数遇到问题时第一原则是看日志。后端看终端输出前端看浏览器 Network 面板和 Console。AI 生成代码出现问题并不意味着方案错了很多情况都是环境配置或版本细节不一致导致的。10. 最佳实践与工程建议用 Plan 模式高效搭建项目框架只是第一步真正决定项目能否持续发展的是开发过程中的工程习惯。以下建议来自实际项目的通用经验适合大多数全栈项目。第一让 Plan 模式成为项目的“架构评审工具”。不止是搭建新项目在新增模块、重构接口、调整数据库表结构时都可以先进入 Plan 模式让 AI 输出方案再由开发者确认。这样可以避免“直接让 AI 改代码改完不知道改了什么”的失控状态。第二把方案沉淀为文档。Plan 模式生成的目录结构、接口清单、数据模型应该保存到项目的README.md或docs/目录。这不仅是给当前开发者看的也是给后续加入的成员看的。AI 生成的方案经过人工确认后本身就是一份高质量的技术文档。第三注意数据模型变更的管理。Base.metadata.create_all只适合初始化不适合迁移。当数据模型迭代到第二版、第三版时建议引入 Alembic 之类的迁移工具记录每次变更保证测试环境和生产环境的表结构可控、可回滚。第四安全边界不能忽视。这个示例项目没有做用户认证测试环境可以直接访问。如果部署到真实环境至少需要增加 Token 认证、输入校验和权限控制。凡是涉及数据库写入操作的接口都要强调参数校验和最小权限原则。生产环境部署时SQLite 也要替换成 PostgreSQL 等更合适的数据库。第五版本管理使用语义化提交。建议让 AI 每次完成一个功能模块后提交一次 Git提交信息使用feat(backend): 添加测试用例 CRUD 接口这种格式。这样即使后续某个阶段生成结果不理想也能通过 Git 回滚到任意一个里程碑。第六合理控制 Plan 模式的执行粒度。如果你发现 AI 一次执行的步骤过多中途频繁出错可以把大计划拆成小计划分阶段执行。比如先让 Plan 模式完成后端验证接口可用后再让 Plan 模式规划前端。粒度越小可控性越高。11. 总结与后续实践建议回到本文开头的问题为什么很多人用 AI 写代码效率提升却不够明显核心原因不是 AI 能力不够而是使用方式停留在“让 AI 帮你打字”的层面。Plan 模式提供了一套流程让 AI 在动手前先思考、先规划让开发者在关键决策点上掌握主动权。用它搭建全栈项目框架10 分钟跑通主要流程并不是夸张的说法前提是需求描述清楚、方案确认认真、环境准备到位。如果你准备自己动手试一次建议直接拿这个 AI 测试用例项目练手。搭建完成之后可以继续让它增加 AI 生成测试用例建议的接口。技术栈选择没有唯一标准你可以把前端换成 Vue把后端换成 Spring Boot核心方法论是一样的先规划后实施再验证。建议收藏这篇文章下次需要搭建新项目时打开 Plan 模式照着流程走一遍。你会发现项目初始化的时间成本真的可以压到 10 分钟级别。