用Claude code开发软件前后端完整流程（附踩坑细节+实操步骤）

近期我用Claude code全程辅助，开发了一款「收录实用软件工具的工具库」，支持第三方工具的收录、管理和共享，全程踩了一些小坑，也总结了不少高效技巧。下面把完整的开发流程（从功能策划到前后端联调）详细分享给大家，步骤清晰、实操性拉满，新手也能跟着复刻，建议收藏备用～

1. 功能策划（奠定基础，少走弯路）

1.1. 原型策划

原型是开发的核心，提前做好原型策划，能避免后续反复修改。我全程用AI辅助生成原型，效率提升不止一倍，具体步骤如下：

（1）大模型生成原型策划提示词

核心技巧：先找对标页面，把要实现的功能需求拆解得足够细致，再让大模型生成Figma提示词，这样生成的提示词更精准，减少后续修改成本。

我当时给大模型的核心需求的是：

开发「坐标工具库」页面，对标同类工具库界面，风格要极简苹果风，支持官方账户对工具的增删改查、工具上传（含图标、名称、直达链接等），并明确了导航、搜索、分类等细节。

大模型最终生成了中/英文对照版的Figma提示词，关键信息如下（截图为大模型回答核心内容）：

尽可能地找到对标页面并把要实现的的功能需求描述清楚，让大模型生成figma提示词。

大模型回答关键信息截图：

（2）将提示词粘贴到figma或stitch中，生成原型图

实操对比：我分别试了Figma和Stitch两个工具，最终选择了Figma——虽然Figma生成原型的速度稍慢，但生成的界面更贴合我要的苹果风，交互逻辑也更符合我们系统的整体风格，新手可以根据自己的需求选择。

（3）并将原型结果存入本地（关键步骤，避免丢失）

1）将设计截图保存到本地

方便后续对接开发、核对界面，建议按“功能模块+日期”命名，比如「2.2坐标工具库.png」，后续查找更高效。

这里可以先操作2.1（1），提前建好文件夹，避免代码存放混乱。

1.2. 需求文档（明确边界，避免扯皮）

需求文档是前后端开发的核心依据，不用自己逐字写，让Claude code自动生成即可，关键是要给足信息、引导它提问，确保需求无遗漏。

（1）打开Claude code，上传原型图片和提示词，进行几轮问答，自动生成需求文档

我当时给Claude code的提示词模板：

“上传图片为该功能原型策划图，该功能需要实现：xxxx（此处粘贴完整功能描述）。请你根据上述原型策划图和功能描述，生成需求文档，以markdown的格式生成，要求需求文档包含功能模块划分、数据库设计、接口设计、业务规则等部分，若你对实现的功能还有疑惑的地方，可以向我提问。”

之后Claude code会提出一系列关于功能细节的问题（比如“工具分类是否支持多级？”“收藏功能是否需要同步用户数据？”），我们只需逐一回答，它就会自动生成完整的需求文档，省去大量排版和撰写时间。

2. 前端代码（实操为主，踩坑必看）

2.1. 前期准备工作（基础打牢，后续不慌）

（1）复制粘贴框架代码，并建立前端文件夹

两种场景适配（新手必看）：

① 若基于公司已有平台开发：先在Git上拉取前后端代码，开发完成后及时上传同步，避免代码冲突；

② 若开发全新系统：直接新建一个空文件夹，所有前端代码都放在该文件夹内，建议文件夹路径不要有中文（避免后续启动报错），然后将从Figma下载的前端代码拷贝到该文件夹中。

（2）让Claude code记忆要求和规范（关键一步，避免后续代码不符）

1）技术栈：提前将项目规定的技术栈告知Claude code，包括前后端、存储、基础设施，确保它生成的代码符合项目规范，避免后期重构。

3）需求文档：制定需求文档的保存路径，让Claude code重新学习理解一遍，确保它掌握所有功能细节和业务规则，减少代码遗漏。

2.2 前端代码编写（AI辅助，高效避坑）

（1）给到前端代码路径，让Claude code写前端代码

实操步骤：先告知Claude code前端代码的存放路径（比如“F:\code-system test test-front这是前端代码存放的路径，你写前端代码都放在这个路径下”），并说明“已将Figma生成的原型代码下载并放入该路径，需理解该代码，并根据技术栈、原型图、需求文档编写前端代码，有问题可随时提问，界面必须与原型图保持一致”。

这个时候，因为figma下载的代码跟你要求的技术栈不同，因此会导致技术栈冲突，让Claude code重构figma代码即可：

1）通过IDEA导入代码

查看全部代码内容，核对组件、接口是否完整，这里注意：IDEA免费版不支持Vue，若提示“升级到Ultimate订阅”，不用理会，不影响代码查看和运行。

2）本地执行前端代码，启动测试

步骤：打开IDEA终端，切换到前端代码文件夹，执行对应命令，不同场景命令不同（新手直接复制粘贴即可）：

cd F:\code-system\test\test-front

npm install

npm run dev

小插曲：启动时终端可能会提示“安装最新的PowerShell，了解新功能和改进！https://aka.ms/PSWindows”，不用管它，不影响前端启动，亲测有效。

打开idea终端，路径切换到前端代码文件夹：

按照以下步骤在命令行中执行：

打开本地链接：

如有问题，可以直接通过自然语言跟Claude code交流，进行修改，直到前端界面完成。

3. 后端代码（AI生成，核对关键）

3.1. 初始环境加载

和前端准备工作类似，分两种场景：

① 基于公司现有框架（如Bladex架构）：将代码框架放入对应文件夹，在终端启动Claude Code，执行初始化指令，让它扫描框架文件夹，理解Controller、Service、Entity和Mapper的代码规范与命名习惯，避免生成的代码不符合项目规范。

示例指令：

“我已经导入了BLadex架构。F:\code-system\test\bladex-4.0是核心框架,F:\code-system\test\blade-biz是业务代码存放处。请扫描这两个文件夹,重点关注F:codesystem test blade-bizbladeervice下的代码内容,理解其Controller、Service、Entity和Mapper的代码规范与命名习惯”

② 开发全新系统：新建一个空文件夹，专门存放后端代码，无需额外加载框架，让Claude code从零生成即可。

3.2. 建立数据库表（MySQL，必做且关键）

数据库是后端的核心，建议用Navicat操作，简单易上手，具体步骤如下：

（1）创建数据库

先下载并安装Navicat（新手可自行搜索教程），连接本地数据库，右击本地数据库，选择“新建数据库”（已新建的可忽略）。

（2）创建数据表

1）点击“查询”—>“新建查询”，打开SQL执行框

注意确认当前指定的数据库是刚刚新建的（避免建错数据库）。

2）找到之前生成的需求文档，翻到“数据库设计”部分，复制里面的SQL语句，粘贴到SQL执行框，点击“运行”，等待执行完成。

3）数据表则创建完成

3.3. 编写后端代码（AI生成，重点核对）

（1）编写代码

补充说明：

启动类中会提示接口文档地址（如http://localhost:8080/api/freeaxis-system/swagger-ui.htm1），后续可通过该地址查看接口详情，但实际访问时可能会出现“link hit security strategy”报错，这是系统安全策略限制，不影响接口正常使用，无需处理。

（2）检查代码

打开idea，确实看到了生成的代码。

4. 前后端联调（最终验证，确保可用）

4.1. 一键对齐（避免接口不匹配）

前后端代码都生成后，最容易出现的问题就是“接口路径、参数不匹配”，此时不用手动核对，让Claude code自动检查对齐即可，它会自动修正接口路径、补充缺失接口，确保前后端接口完全一致。

修改完成：

4.2. 启动后端服务（分步操作，避免报错）

（1）启动基础设施

我们的系统框架依赖MySQL、Redis和Nacos，必须先确保这三个服务已启动（新手需提前下载安装），可以让Claude code检查本地端口是否处于监听状态，避免端口占用。

检查指令：

“请检查本地 3306(MySQL), 6379(Redis) 和 8848(Nacos) 端口是否已处于监听状态。”

（2）启动后端代码

两种启动方式，新手推荐第一种，简单易操作：

① IDEA直接启动：打开后端项目，找到启动类（如FreeAxisSystemApplication.java），右键点击“运行”，等待启动成功即可。

② Claude code启动：用自然语言给Claude code发指令，让它启动后端服务，适合不熟悉IDEA操作的新手。

前端代码按照2.2中的步骤启动即可，确保前后端都处于运行状态。

4.3. 数据存取验证（最终测试，确认功能可用）

前后端都启动后，就可以在本地界面进行交互操作，测试功能是否正常，数据是否能正常存取。

1）界面交互测试：打开前端本地链接，进入工具库页面，尝试新增工具、填写信息（工具名称、链接、简介等），提交测试数据。

我随便加了一些测试数据：

此时你需要进行界面测试，有问题逐步让Claude code进行修复。

2）数据验证：我当时随便添加了一些测试数据，之后打开Navicat，找到对应的数据库表（tool_library），查看测试数据是否已成功保存。

说明数据确实已经保存成功，这样你就可以保存版本，进行下一个功能的开发了。