1. 为什么我用 vibe coding 重做博客管理系统先说结论vibe coding 不是让 AI 替你写代码而是让 AI 按你写好的约束去写代码。约束越清晰返工越少。我这次用 Claude Code 配合 SpringBoot3 Vue3从零搭了一套博客管理后台前后端分离包含文章管理、分类标签、登录鉴权、分页查询这些常规功能。整个过程大概两天真正坐在电脑前敲键盘的时间也就四五个小时剩下的时间基本都在等 AI 生成和跑测试。很多人对 vibe coding 的理解是「对着 AI 说一句我要一个博客系统然后它全给我写好」。我试过结果是一堆跑不起来的代码接口对不上前端调后端 404数据库字段和实体类不一致。问题不在 AI 能力而在于你没给它一个稳定的「施工图」。博客管理系统这种项目说大不大说小也不小它涉及数据库设计、REST 接口约定、前端路由和状态管理任何一个环节含糊后面就是连锁报错。所以这篇内容我按「能跟着做」的路线来写先讲清楚项目结构和文档约束怎么建再讲 Claude Code 怎么接、提示词模板长什么样然后是 SpringBoot3 和 Vue3 的具体配置、接口联调验证最后把我在 401、local proxy failed、reading choices 这些报错上踩的坑摊开说。适合谁看会一点 Java 和 Vue、想用 AI 提效但不想被 AI 带偏的开发者。你不需要很深的架构经验但得愿意先把文档写清楚。核心检索词就三个vibe coding、博客管理系统、SpringBoot3 Vue3。下面所有步骤都围绕这三个词展开不跑题。2. TaoToken 前置给 Claude Code 一个稳定的模型入口Claude Code 本身是个命令行工具它需要连到一个模型服务才能工作。你可以把它理解成一个「只会写代码的实习生」实习生再聪明也得有个能随时问问题的老师。TaoToken 在这里扮演的就是这个入口角色它提供兼容 Anthropic 接口的调用方式Claude Code 可以直接对接。为什么不用别的因为 Claude Code 默认走的是 Anthropic 的接口协议如果你手上有兼容这个协议的 Key配置起来最省事。TaoToken 的 API 地址是 https://taotoken.net/api注意这个地址不带任何多余参数配置的时候原样填进去就行。官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content需要看文档或者拿 Key 的时候从这边进。这里要强调一点TaoToken 是正常的 API 服务入口不是那种来路不明的转发。你拿到的 Key 就是用来调用模型的凭证配置进 Claude Code 之后它负责把你的提示词发给模型再把模型返回的代码和指令带回来。整个链路是清晰的不存在什么隐藏操作。具体要准备三样东西我把它叫「三件套」Base URL、API Key、Model ID。Base URL 就是上面那个 https://taotoken.net/apiAPI Key 在控制台的 API Keys 页面生成地址是 https://taotoken.net/console/api-keysModel ID 根据你选的模型填比如 claude 系列的具体型号。这三样缺一不可后面配置 Claude Code 和 Cline 的时候都要用到。如果你只是想先验证模型通不通可以打开模型对话页面 https://taotoken.net/models 直接聊两句确认 Key 有效、模型有响应再去配 Claude Code。这个顺序能帮你排除掉「到底是 Key 问题还是配置问题」的干扰。长期做编码和 Agent 任务的话Coding Plan 页面 https://taotoken.net/coding-plan 有对应的方案说明按自己的使用频率选就行。我建议你在动手写博客系统之前先把这一步走通。因为后面 Claude Code 要反复读文档、生成代码、跑测试模型入口不稳定整个 vibe coding 流程就断了。先把入口配好再谈项目。3. 可复制配置Claude Code 接入与项目文档骨架这一节是全文最需要你动手的部分。我按「先配工具再建文档」的顺序来配置片段都可以直接复制。3.1 Claude Code 的 settings 配置Claude Code 读取配置的位置通常在用户目录下的.claude/settings.json如果你用的是项目级配置就放在项目根目录的.claude/settings.json。内容长这样{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的Key填这里, ANTHROPIC_MODEL: claude-sonnet-4-20250514 } }三个字段对应三件套ANTHROPIC_BASE_URL是 Base URLANTHROPIC_API_KEY是你的 KeyANTHROPIC_MODEL是 Model ID。Model ID 按你实际选的填不要照抄我这里的示例型号去模型列表里确认一下当前可用的名字。如果你用的是 Cline 这类插件配置项名字不一样但本质还是三件套。Cline 的 MCP 配置里Base URL 填 https://taotoken.net/apiKey 填你的 KeyModel 选对应型号。Codex 的话看auth.json里面同样是 Base URL、Key、Model 三个字段对齐。不管哪个工具只要这三样对上了模型就能通。配完之后在终端里跑一句claude进交互模式随便问一句「你好」有正常回复就说明入口通了。这一步别跳过后面所有生成都依赖它。3.2 项目文档骨架vibe coding 的核心不是提示词多花哨而是文档多完整。我在项目根目录建了一个memory-bank文件夹里面放这些 Markdown文件名作用prd.md产品需求写清楚博客系统有哪些功能tech-stack.md技术选型SpringBoot3 Vue3 MySQLapi-design.md接口约定路径、方法、请求响应字段implementation-back-plan.md后端分步实施计划implementation-front-plan.md前端分步实施计划progress-back.md后端已完成步骤记录progress-front.md前端已完成步骤记录architecture.md每个文件的作用说明test-plan.md测试计划prd.md要写细。比如「文章管理」不能只写四个字要写支持新增文章字段包括标题、正文、分类、标签、状态草稿/发布、创建时间支持分页查询每页默认 10 条支持按标题模糊搜索。你写得越具体AI 生成的实体类和接口就越贴近你要的。api-design.md是前后端联调的生命线。我建议你让 Claude Code 读完 prd 和 tech-stack 之后生成初稿然后追问一句「阅读 memory-bank 里所有文档api-design.md 是否完全清晰你有哪些问题需要我澄清」它会反问你几个边界问题比如分页参数叫什么、删除是软删还是硬删。你回答完这份接口文档才算定稿。implementation-back-plan.md和前端那份要求 AI 只写指令不写代码每一步都要小且每步都带验证方式。比如「第 1 步创建 SpringBoot3 项目引入 web、mybatis-plus、mysql 依赖验证方式mvn spring-boot:run能启动且不报错」。这样你每步都能自己跑一下确认。文档建好后在 Claude Code 里输入/init它会生成CLAUDE.md这个文件相当于给 AI 的「项目须知」后面每次对话它都会参考。到这里工具和骨架都齐了可以开始生成代码。4. 验证请求从后端到前端的联调步骤配置通了、文档齐了接下来就是让 Claude Code 按计划一步步生成。我按后端、前端、联调三段来说每段都给你可复制的提示词。4.1 后端生成与验证后端提示词模板阅读 memory-bank 所有文档然后执行 implementation-back-plan.md 的第 1 步。 我会负责跑测试。在我验证测试通过前不要开始第 2 步。 验证通过后打开 progress-back.md 记录你做了什么 再把新的架构洞察添加到 architecture.md 中解释每个文件的作用。AI 生成完第 1 步的代码后会告诉你验证方式。你照着跑比如mvn spring-boot:run启动成功就回它「测试通过」它才会写 progress 和 architecture然后进入第 2 步。这个循环一直重复到后端接口全部生成完。中间记得时不时/clear一下清掉上下文不然文档加代码会把上下文撑爆AI 后面就开始胡言乱语。后端跑起来之后先别急着写前端。让 AI 把实现的接口和api-design.md对齐一遍提示词对比当前后端实现的接口和 api-design.md列出不一致的地方并修正。 然后为这些接口生成单元测试代码确保测试通过。单元测试跑绿了后端这关才算过。我踩过的坑是AI 生成的 Controller 路径和接口文档差一个/api前缀前端调的时候直接 404。所以对齐这一步不能省。4.2 前端生成与验证前端提示词和后端结构一样只是把 plan 和 progress 换成 front 版本阅读 memory-bank 所有文档然后执行 implementation-front-plan.md 的第 1 步。 我会负责跑测试。在我验证测试通过前不要开始第 2 步。 验证通过后打开 progress-front.md 记录你做了什么 再把新的架构洞察添加到 architecture.md 中解释每个文件的作用。Vue3 这边我用的是 Vite Vue Router Pinia Axios。AI 生成基础页面后通常比较丑这时候可以用 UI 优化类的 skill 让它调整布局和样式但功能逻辑别让它乱动。4.3 联调验证前后端都跑起来后做三件事第一确认后端端口和前端代理对得上。Vue3 的vite.config.js里配 proxy把/api转发到http://localhost:8080。第二打开浏览器登录、发文章、查列表、删文章每个功能点走一遍。报错就截图丢给 Claude Code让它定位。第三让 AI 生成test-plan.md你按计划逐条测错的地方让它一步步改别一次让它改一堆改多了容易引入新问题。联调通过的标准很简单前端能正常调后端接口数据能存进 MySQL刷新页面数据还在。到这一步一套可运行的博客管理后台就成了。5. 本篇常见错排查401、local proxy failed、reading choices这一节是我实际撞过的报错按现象、原因、解决来写你对照着查。401 Unauthorized。这个最常见基本是 Key 的问题。先检查settings.json里的ANTHROPIC_API_KEY有没有填错、有没有多余空格。再去控制台确认这个 Key 还有效、额度没用完。如果 Key 没问题看 Base URL 是不是写成了带路径的地址正确写法就是 https://taotoken.net/api不要自己加/v1之类的东西。三件套里任何一个错都可能报 401。local proxy failed。这个通常出现在你本地配了代理但代理没起来或者端口不对。Claude Code 走的是你配置的 Base URL如果你系统里还挂着别的代理设置请求可能被拦。解决方式是检查环境变量里有没有HTTP_PROXY、HTTPS_PROXY这类设置有的话先清掉或者确认代理服务正常运行。注意这里说的是本地开发环境的网络配置问题不是让你去搞什么特殊网络手段纯粹是排查配置冲突。reading choices 报错。这个一般出现在模型返回的内容格式不对Claude Code 解析响应时读不到预期的choices字段。原因可能是 Model ID 填错了调到了不兼容的模型也可能是 Base URL 指向的服务返回格式和 Anthropic 协议不一致。先确认 Model ID 是当前可用的型号再确认 Base URL 是 https://taotoken.net/api。如果还不行去模型对话页面手动发一条消息看返回结构是否正常能帮你判断是模型问题还是工具配置问题。OAuth 相关报错。Claude Code 某些版本会走 OAuth 流程如果你用的是 API Key 模式确保配置里没有残留的 OAuth token 字段。把settings.json里多余的认证字段删掉只留三件套重启终端再试。接口 404 或字段对不上。这不是模型入口问题是前后端约定问题。回到api-design.md让 Claude Code 重新对齐一遍接口路径和字段名。我遇到过前端传pageNum、后端收page的情况就是文档没写死导致的。排查顺序建议先确认三件套配置对不对再看模型能不能单独调通最后才查项目代码。大部分「AI 不听话」的问题其实是入口没配对。6. 把流程跑顺之后我的几点实际经验这套流程跑下来我最大的感受是vibe coding 的瓶颈不在 AI在你自己对需求的清晰度。PRD 写得含糊后面就是无尽的调试接口文档定得死联调就顺。Claude Code 配合 TaoToken 的入口能把重复的代码生成和文档维护接过去但「要做什么」这件事还是得你想清楚。几个实用技巧文档一定要放在memory-bank里让 AI 反复读别散落在聊天记录里每完成一步就让它写 progress 和 architecture这样上下文清掉之后还能接上/clear要勤用但清之前确保关键信息已经落进文档。项目代码我放在 GitHub 上结构就是上面说的那套你可以照着搭。如果你也想试建议从一个小模块开始比如先只做文章管理的增删改查把文档和提示词流程走通再扩展到分类、标签、鉴权。别一上来就全量生成那样出错很难定位。模型入口用 TaoToken 的 API 配好三件套Claude Code 就能稳定工作。需要看接入细节就去文档页 https://taotoken.net/doc要拿 Key 就去 https://taotoken.net/console/api-keys验证模型直接开 https://taotoken.net/models 聊一句。把入口和文档这两件事做扎实剩下的就是按步骤推进剩下的交给时间。