企业官网建设流程全解析

一位只认识一点 CSS 和 HTML 的设计师，用 Cursor 的 Agent 模式建个人站，先选了 claude-3.7-sonnetMAX，结果测试两天就烧光按量额度；换到 claude3.7-sonnet 之后，同样的任务却顺顺利利跑完。这里有值得记下来的经验：去 TaoToken 官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 创建一把 Key，把它填进 Cursor 的模型设置，之后无论从 MAX 切到 sonnet 还是再切回去，都不需要重配地址、不需要换 Key，整个建站流程可以持续跑下去。

在原文的建站记录里，作者反复经历了“想放弃”和“硬着头皮再试一次”的循环。一次完整的从 0 到 1 的 AI 建站，踩过的坑几乎都集中在几件事上：提示词没有拆细导致 AI 乱改、MAX 模型按量计费烧得太快、Git 提交失败耽误整整一天。很多人以为换模型就要换供应商、重新申请密钥、重新填配置，实际不需要。TaoToken 提供一个统一 API 通道，把多个模型放在同一把 Key 后面，你只需要在配置文件里改一个模型 ID。

1. 为什么建站前先准备一把 TaoToken Key

1.1 长提示词和反复试错，正在悄悄烧掉 MAX 额度

原文作者一开始的想法很简单：给 Cursor 一个非常详细的提示词，包括网站尺寸、内容、跳转链接、需要调用的内容，希望它“一步生成”想要的网站。实际效果却比较粗糙，完全达不到上线水准。随后又尝试在 Figma 里做设计稿，通过 MCP 链接 Cursor，再尝试用 Sketch 切图标注，把标注文件、Figma 链接、文字描述一起交给 Cursor，结果仍然不理想。

这几轮尝试听起来只是“多试了几次”，但在 Cursor 里如果选了 claude-3.7-sonnetMAX，每一次生成、每一次布局调整、每一次报错重试都按使用量计费。原文里说得很直白：因为开始的测试，2 天直接用完了额度。问题不是 AI 不能干活，而是把高成本模型用在了“试探性任务”上。

如果你是同样的代码小白，建议一开始就把思路转过来：拿一把 Key 同时支持 MAX 和 sonnet，小修小改用性价比更高的模型，真正需要深度方案时才用 MAX。TaoToken 官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 提供统一接入，Key 创建之后，MAX 与 sonnet 的切换只是一个模型 ID 的改动。

1.2 拿到 Key 后，先分清楚“官网”和“接口地址”

准备材料非常少，核心就三行信息：

• 官网落地页：https://taotoken.net/?utm_source=taotoken_aicg_blog_end ，用于注册账号、创建 API Key、查看模型广场、查看用量
• Base URL：https://taotoken.net/api ，填进 Cursor、Codex、Claude Code 等工具的接口地址，末尾不要加 /v1
• API Key：YOUR_API_KEY ，从 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 创建

最容易出错的地方是把官网地址和接口地址混用。官网是给人用浏览器打开的，接口地址是给 AI 编程工具请求用的。TaoToken 的 Base URL 严格写成 https://taotoken.net/api，加到 Cursor 时不要把 /v1 拼在后面，也不要把带 UTM 参数的官网链接填到工具里。

2. 明确开发内容：先拆区块，再让 AI 动手

2.1 从“一步生成完整网站”退回到“一个区域一个区域过”

原文作者最后落地的方式，不是让 AI 一口气生成整个站，而是基于 V1.0 版本进行迭代：网站采用单列式布局，核心功能包括导航栏、头部区、内容区、底部区，内容区里放“关于我”“AI 辅助开发的产品”“文章教程”“个人成就”“联系我”“AI 产品推荐”，最终上线还原度达到 90% 以上。

这里有一个很适合代码小白复刻的思路：把页面拆成区块，每个区块单独描述。比如想让 Cursor 改导航栏，就说“导航栏目前间距太挤，把 logo 和菜单之间的距离加大，其余内容保持不变”。不要把一个页面的全部需求一次性倒给 AI，AI 面对十几条需求时，经常只处理最先识别到的几条，甚至会顺手改掉你不希望动的部分。

用 TaoToken 的 Key 跑 Cursor 时，这一步的模型选择完全可以固定用 sonnet。页面结构调整、字体间距、颜色深浅都属于增量修改，sonnet 已经足够稳定。真正需要 MAX 的情况，是比较少见的“跨文件逻辑重构”或“复杂报错定位”。

2.2 动态数据调不通，果断改为静态展示

原文作者原本计划让“文章教程”和“个人成就”通过接口动态调用公众号和小红书的数据，按阅读量、分享量自动排序展示。实际尝试后发现问题很多：有的数据无法读取，有的反而调取出已经隐藏或删除的旧内容，体验非常混乱，调试了大约一天仍然无法实现，最终放弃动态调用，改为直接静态展示。

这个经历对新手非常有参考价值。当你要求 AI 对接外部数据源时，不仅要写清楚展示逻辑，还要面对接口权限、数据结构、跨域限制等一系列问题。每次报错都会消耗一次模型调用，而这部分消耗用 MAX 跑特别不划算。正确做法是先确认数据源真的可用，再去调样式；如果数据源本身就不可靠，直接像原文作者一样用静态展示跑通流程，等后续有精力再做后端动态调用。

在 TaoToken 模型广场上，你可以看到同一个 Key 下可用的模型列表。遇到这种“接口不通先试探”的环节，记得切到 sonnet 再开始调试，避免高频轮询式报错把 MAX 额度烧在无意义的探测上。

3. AI 辅助生成代码：版本管理、单点修改、组件复用

3.1 从 V1.0.0 开始，每次改动都写进 Readme

原文作者习惯在项目最开始时创建一个 Readme 文件，用版本号管理每一步改动。每完成几个模块，就给 Cursor 下达类似指令：“把当前版本保存为 V1.0.0，更新 Readme，其余内容保持不变，保存好备份，确保可以回退。”

这套方法对代码小白极其友好。AI 改代码时偶尔会“自作主张”，把无关样式也顺带调整。有了版本号，随时可以回到上一个稳定点，不用因为一次失败修改推倒重来。建议每完成一个大区块就保存一个小版本，例如：

把当前开发进度保存为 V1.2.0，更新 Readme，不要改动其它文件，保留一份可回退备份。

版本号自己按心情定义即可，关键是让 Cursor 在修改前先留下备份。这个过程用 sonnet 执行毫无压力，因为你只是在让 AI 整理文件和记录状态，不是让它做高难度的逻辑推理。

3.2 一个需求只提一个点，结尾固定加一句“其余内容保持不变”

原文作者分享过一条重要经验：一次提两个修改点，AI 可能只识别其中一部分。比如第一段需求里同时写了修改按钮颜色和鼠标移入移出效果，结果 AI 只改了按钮颜色，第二次沟通才补上 hover 效果。从此之后再也不敢合并需求。

实际提示词可以这样写：

把文章教程标题的字号调大 2px，其余内容保持不变。

先调整整个区块的主标题和副标题、字体字号、间距颜色，然后再进入卡片部分，调整卡片中的文字大小、文字间距、图片样式。一个区块全部调整完之后，再进入下一个区块。每完成一个区块保存一个小版本。

这段过程中，模型切换的意义会非常明显。MAX 和 sonnet 在“调字号”“改颜色”“加间距”这类低难度任务上几乎没有体验差异，但计费差异巨大。用同一把 TaoToken Key，在 Cursor 的模型设置里把模型 ID 从 MAX 对应的值改成 sonnet 对应的值，然后继续同样的话术建站，输出质量和修改准确性不会有明显落差。

3.3 现成组件直接复制，图片先用占位图代替

原文作者没有从零实现所有交互效果，而是直接调用 Reactbits 中的现成组件，把代码复制给 Cursor 并让它集成，例如首页头部的 Text Pressure、Aurora，底部区域的 Falling Text。

对于代码小白，这是非常聪明的做法。AI 擅长把代码整合进项目，但让它从零设计复杂动效很容易失控。使用现成组件，再把组件集成任务交给 Cursor，成功率会高很多。

图片处理也建议采用原文的占位图策略：先在相关区域让 Cursor 生成灰色占位图，等 UI 静态效果确认后，再把自己的图片按指定命名拖进 public/images 文件夹，保存后自动替换。提示词可以写成“我想在 xx 位置替换成自己的图片，告诉我图片命名及格式”。

这些操作都属于低风险任务，切到 sonnet 执行足够。切模型不代表换个工具，也不会打断你正在进行的建站流程，只是把成本拉到更合理的位置。

4. 部署上线：Git 提交失败、Git 版本与 Vercel 自动更新

4.1 代码写完了，真正折磨人的是 Git 同步

原文作者在 Git 同步阶段几乎崩溃，甚至请了前后端同事现场支援。最初打算让 Cursor 直接部署到互联网，结果 Git 提交代码失败；改用 Gitee，仍然无法成功；最后靠同事写的一堆“强推命令”才推上去。本以为用 GiteePages 能部署，结果该服务暂停了，一时间不知道下一步该做什么。

后来排查发现，提交失败的根本原因不是文件大小问题，而是 Git 版本兼容性问题。让 Cursor 帮忙降低 Git 版本之后，代码才顺利 push 到 GitHub。

这段经历里藏着两个典型新手误区：第一，遇到报错先怀疑提示信息，没有第一时间检查工具版本；第二，反复重试同一套命令，而不是换一个思路。如果你在 Cursor 里处理 Git 问题，可以把报错信息完整贴给它，让它解释错误原因并给出分步操作，不要只发“push 失败”四个字。使用 TaoToken 的 sonnet 模型处理这类问题，足够理解报错上下文并给出可执行方案。

4.2 GitHub + Vercel 组合，一键部署加自动更新

原文作者对比了几个上线方案后，最终选择 GitHub + Vercel 的组合，理由是“一键部署+自动更新”：后期本地更新代码，只需要同步到 GitHub，Vercel 会自动更新线上版本。

这个流程值得直接复刻：

1. 本地代码通过 Git push 到 GitHub 仓库
2. 在 Vercel 中导入该 GitHub 仓库
3. 每次 push 后，Vercel 自动执行构建并部署

部署阶段一个重要前提是本地网络能正常访问 GitHub 和 Vercel。原文提到网络稳定很重要，这一点对国内开发者来说尤其关键。如果发现 push 经常超时，先排除网络因素，再去怀疑代码或配置问题。

部署期间的报错大多和构建环境有关，比如依赖安装失败、Node 版本不对、路径大小写错误等。这段排查过程建议保持 sonnet 模型，让 AI 帮忙读构建日志、定位失败命令，再给出针对性修复方案。等遇到跨文件重构或者需要整体评估架构时，再临时切回 MAX。

5. 模型切换：在 Cursor 里把 Claude MAX 切到 sonnet，Key 和 Base URL 都不动

5.1 先理解 Cursor 的三种模式，再理解模型成本

原文把 Cursor 的三种模式讲得很清楚：

• Agent 模式是最常用也最智能的模式，能自主探索代码库、阅读文档、浏览网页、编辑文件、运行终端命令，适合处理复杂任务
• Ask 模式类似只读模式，能读取文件和上下文，但不会修改任何文件
• Manual 模式完全手动控制，适合有针对性的代码修改，不会主动探索项目

原文作者建站全程使用 Agent 模式。如果你正在复刻它的建站流程，Agent 模式仍然是默认选择。但要注意，Agent 模式会自主执行连续操作，也意味着单次任务的模型调用量更高。在 Agent 模式下使用 MAX，一次修改任务可能触发多次推理；换成 sonnet 后，同样任务的总调用量和账单都会明显下降。

5.2 Cursor 里填写 Base URL、API Key 和模型 ID

打开 Cursor 的 Settings，找到 Model 相关设置，添加自定义模型。不同 Cursor 版本的菜单位置可能略有差异，但需要填写的内容是一致的：

请一定注意：Base URL 是 https://taotoken.net/api ，不是 https://taotoken.net/api/v1 ，也不是带 UTM 参数的官网链接。官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 只负责注册、查看模型列表、创建 Key、查看用量；工具内部请填接口地址。

原文使用的是 Cursor 0.49.6 版本，先选了 claude-3.7-sonnetMAX，后来换成 claude3.7-sonnet 完成了整站开发。对应到 TaoToken，操作步骤就是：拿到 Key 后先配置 Base URL 和 Key，模型 ID 选择 MAX 对应的模型开始跑方案；发现测试阶段烧量太快时，回到模型设置里把模型 ID 改为 sonnet 对应的模型，继续跑页面调整、Git 同步和部署排查。全程不需要重新创建 Key，不需要修改 Base URL，也不会中断正在进行的建站会话。

5.3 什么时候切回 MAX，什么时候留在 sonnet

切到 sonnet 不意味着 MAX 永远不再用。根据原文建站流程，可以按任务类型区分：

• 页面细节调整、文字样式、卡片间距、深浅模式适配，用 sonnet 足够
• Git 提交失败、构建报错、部署失败这类“找原因”的排查任务，用 sonnet 更合适
• 跨文件大规模重构、多个组件之间的状态整合、需要快速给出整体方案的复杂任务，再临时切回 MAX

切换模型时，只要保持 Key 不变、Base URL 不变，只修改模型 ID，Cursor 会正常发起请求。切模型不会丢失上下文，同一个 Chat 里可以继续之前的对话。

6. 报错处理：截图给 Cursor，把请求失败和模型 ID 对上

6.1 通用报错姿势：截图加“报错”，或者 add to chat

原文作者处理报错的两种方法很适合代码小白。第一种，直接截图加“报错”两个字丢给 Cursor；第二种，看到代码里有红色报错时，复制错误代码并点击“add to chat”，Cursor 会自动跳转到相关位置分析问题。

如果你在 Cursor 里用了 TaoToken 配置后请求失败，先不要急着改代码，对照检查三处：

• Base URL 是否填成 https://taotoken.net/api ，少了 /v1
• API Key 是否完整复制，有没有多余空格
• Model ID 是否在模型广场能找到对应模型

这三处最容易出错。尤其是 Model ID，不同渠道展示名称可能带日期后缀或不同前缀，务必以 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 模型广场当时列表为准，不要凭记忆输入。

6.2 一个需求一个 Chat，让用量更清晰

原文作者提到，一个值得尝试的方法是“每一个小问题新开启一个 Chat”，方便回溯和复盘，例如【前端】SpotlightCard 样式调整、【Git】同步网络问题等。

这一点结合 TaoToken 的用量查询会很实用。每个 Chat 对应一个独立主题，后续回到控制台查看调用记录时，能清楚看到哪一轮用了哪个模型、消耗了多少按量额度。假如把“样式调整”“Git 排查”“部署配置”混在同一个长时间 Chat 里，AI 的上下文会越来越复杂，用量记录也难以快速定位。

建议建站期间这样开 Chat：

• 【前端】导航栏样式调整
• 【前端】文章教程卡片深浅模式适配
• 【Git】push 到 GitHub 失败
• 【部署】Vercel 构建日志报错

每个 Chat 开始前，明确告诉 Cursor 当前任务范围。任务结束后另开新 Chat，写上简短的主题前缀。这样既方便回溯，也方便在 TaoToken 控制台核对每次调用的模型和 Token 消耗。

7. 回到控制台，对一下这次建站调用

网站上线之后，可以先在 TaoToken 的模型对话页面用同一把 Key 发一条测试消息，确认 Base URL 和模型 ID 没有填错，也顺便确认 sonnet 模式下的回复质量。如果你打算像原文作者一样继续完善个人站，实现后端动态调用、上线 AIGC 周刊、补充更多产品案例，这些后续任务里大块的重构再切回 MAX，日常的样式调整和部署排查保持 sonnet 就好。

长期用 AI 编程工具的话，可以打开 Coding Plan 看看当前需求对应的套餐，再回 API Keys 检查这把 Key 在这几天建站过程中的调用次数。如果你还想在 Claude Code 这类命令行工具里使用同一个 TaoToken Key，环境变量和模型配置方式可以参考接入文档。

回头看这次建站，真正影响进度的不是模型能力，而是“用对模型”和“控制成本”。同一把 Key 从 MAX 切到 sonnet 继续建站，不打断对话、不重配地址、不折腾 API 权限，整个从 0 到 1 的过程才跑得顺。希望这段踩坑记录，能让你少经历一次“上线延后至少一天”的崩溃。