企业官网建设流程全解析

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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=，需要看文档或者拿 Key 的时候从这边进。

这里要强调一点：TaoToken 是正常的 API 服务入口，不是那种来路不明的转发。你拿到的 Key 就是用来调用模型的凭证，配置进 Claude Code 之后，它负责把你的提示词发给模型，再把模型返回的代码和指令带回来。整个链路是清晰的，不存在什么隐藏操作。

具体要准备三样东西，我把它叫「三件套」：Base URL、API Key、Model ID。Base URL 就是上面那个 https://taotoken.net/api；API Key 在控制台的 API Keys 页面生成，地址是 https://taotoken.net/console/api-keys；Model 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 URL，ANTHROPIC_API_KEY是你的 Key，ANTHROPIC_MODEL是 Model ID。Model ID 按你实际选的填，不要照抄我这里的示例型号，去模型列表里确认一下当前可用的名字。

如果你用的是 Cline 这类插件，配置项名字不一样，但本质还是三件套。Cline 的 MCP 配置里，Base URL 填 https://taotoken.net/api，Key 填你的 Key，Model 选对应型号。Codex 的话看auth.json，里面同样是 Base URL、Key、Model 三个字段对齐。不管哪个工具，只要这三样对上了，模型就能通。

配完之后，在终端里跑一句claude进交互模式，随便问一句「你好」，有正常回复就说明入口通了。这一步别跳过，后面所有生成都依赖它。

3.2 项目文档骨架

vibe coding 的核心不是提示词多花哨，而是文档多完整。我在项目根目录建了一个memory-bank文件夹，里面放这些 Markdown：

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 聊一句。把入口和文档这两件事做扎实，剩下的就是按步骤推进，剩下的交给时间。