企业官网建设流程全解析

1. 为什么 48 小时能交付一个能收钱的 MVP

Vibe Coding 这个词从 2025 年初开始被反复提起，但很多人对它的理解停留在“对着 AI 说句话就出代码”。我实测下来，真正能跑通 48 小时交付的，不是靠一句提示词，而是靠一套可复制的工程节奏：需求拆解 → 项目规则 → 分阶段生成 → 逐块验收 → 部署验证。Cursor 负责在编辑器里落地代码，Claude 负责架构讨论和复杂逻辑梳理，两者分工明确，效率才起得来。

这篇文章要交付的东西很具体：一个叫 BriefMate 的 SaaS MVP，核心功能是把长文本或文档转成结构化简报，带用户注册、额度管理、订阅付费。技术栈选 Next.js 14 App Router + Tailwind + shadcn/ui + Supabase + Stripe + Vercel，AI 能力走 Claude API。选这套组合的原因只有一个——AI 对它们的训练数据覆盖足够深，生成准确率高，踩坑少。

适合谁看：有基本技术背景、想用 AI 把产出速度拉起来的独立开发者；或者已经会用 Cursor 但总觉得“生成的东西不太对”的人。如果你完全不懂技术，这篇文章也能帮你理解 Vibe Coding 的边界在哪里，但直接照做会有难度。全文按六个阶段展开，每个阶段都有可复制的配置、提示词模板和验收动作，你可以按顺序跟做。

2. TaoToken 前置：把模型调用通道先跑通

在 Cursor 里写业务代码之前，得先确保模型调用这条链路是通的。很多人在这一步卡住，不是因为不会写代码，而是因为 API Key 的配置方式不对，或者 Base URL 填错导致请求一直 401。我建议先把模型通道单独验证一遍，再进 Cursor 写业务逻辑，这样出问题时排查范围小很多。

TaoToken 在这里的角色是提供统一的模型调用入口。你可以在官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 了解它的能力范围，然后到 API Keys 页面 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite 生成一个 Key。这个 Key 后面会同时用在两个地方：一是 Cursor 的模型配置里，二是项目代码里的环境变量。

具体操作分三步。第一步，登录后进入 Console https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，确认账户状态正常。第二步，在 API Keys 页面创建一个新 Key，复制保存，注意它只显示一次。第三步，打开接入文档 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，对照里面的 Base URL 和请求格式，确认你要用的模型 ID。Base URL 统一是 https://taotoken.net/api ，不要加 UTM 参数，否则请求会异常。

这里有个容易忽略的点：Cursor 里配置模型和项目代码里调用模型是两套独立的配置。Cursor 的配置影响的是它帮你生成代码时用的模型，项目代码里的配置影响的是你产品运行时调用的模型。两者可以都用同一个 Key，但环境变量名要区分开，避免混淆。我试过把两者混在一起，结果调试时分不清是哪个环节出的问题，浪费了不少时间。

验证通道是否通，最简单的办法是用 curl 发一个最小请求。如果你更想先在对话界面里确认模型能正常响应，可以打开模型对话 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model_chat&utm_campaign=rewrite 发一条测试消息，看到正常回复就说明 Key 和通道都没问题。这一步花不了几分钟，但能帮你排除后面 80% 的“请求失败”类报错。

3. Cursor 项目规则配置与可复制片段

Cursor 用得好不好，很大程度上取决于项目规则文件写得对不对。很多人直接让 Cursor 生成代码，结果风格不统一、错误处理方式五花八门，改起来比手写还累。正确做法是在项目根目录放一个规则文件，把技术栈、命名规范、错误处理约定、目录结构都写清楚，Cursor 每次生成时会自动参考。

在项目根目录创建.cursorrules文件，内容如下：

# 项目：BriefMate # 技术栈：Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui + Supabase + Stripe ## 代码规范 - 所有组件使用函数式组件 + TypeScript，禁止 any - 文件命名：组件用 PascalCase，工具函数用 camelCase - API 路由统一放在 app/api/ 下，每个路由一个 route.ts - 错误处理统一返回 { error: string, code: number } 结构 - 所有数据库操作必须检查 user_id，遵循 RLS 策略 ## 目录结构 - app/ 页面与 API 路由 - components/ UI 组件 - lib/ 工具函数与客户端初始化 - types/ TypeScript 类型定义 ## 禁止事项 - 不要生成 console.log 调试代码 - 不要使用已废弃的 pages/ 目录 - 不要在前端直接暴露 Supabase service_role key

同时在.env.local里配置环境变量，这是项目运行的基础：

# Supabase NEXT_PUBLIC_SUPABASE_URL=你的_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=你的_anon_key SUPABASE_SERVICE_ROLE_KEY=你的_service_role_key # 模型调用（TaoToken 统一入口） TAOTOKEN_API_KEY=你的_taotoken_key TAOTOKEN_BASE_URL=https://taotoken.net/api TAOTOKEN_MODEL_ID=claude-sonnet-4-6 # Stripe STRIPE_SECRET_KEY=你的_stripe_secret STRIPE_WEBHOOK_SECRET=你的_webhook_secret STRIPE_PRO_PRICE_ID=你的_price_id

如果你用 Cline 或 Claude Code 这类工具，配置方式略有不同。Cline 的 MCP 配置里需要填 Base URL、Key 和 Model ID 三件套；Claude Code 的 settings 文件里同样要写全这三项。以 Claude Code 为例，在~/.claude/settings.json里配置：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "你的_taotoken_key", "ANTHROPIC_MODEL": "claude-sonnet-4-6" } }

Codex 用户则在~/.codex/auth.json里配置：

{ "base_url": "https://taotoken.net/api", "api_key": "你的_taotoken_key", "model": "claude-sonnet-4-6" }

这三件套缺一不可。Base URL 决定请求发到哪里，Key 决定身份验证，Model ID 决定用哪个模型。少任何一个都会报错，最常见的是 401 和 model not found。配置完成后，在 Cursor 的 Composer 里发一条简单指令测试，比如“在 lib/supabase.ts 里初始化 Supabase 客户端”，看它能否正确生成代码。

4. 分阶段生成与验证请求

项目骨架搭好后，进入核心开发阶段。这里的关键原则是：每次只做一件事，把上下文控制到最小。不要一次性让 Cursor 写完整个模块，而是按功能点逐个生成、逐个验证。下面按四个阶段展开，每个阶段都有具体的提示词和验收动作。

4.1 数据库表结构与 RLS 策略

先在 Supabase Dashboard 里执行建表 SQL。这一步不要交给 Cursor 生成，因为数据库结构一旦定错，后面改起来很麻烦。直接复制下面这段：

create table profiles ( id uuid references auth.users primary key, email text, plan text default 'free', usage_count integer default 0, usage_reset_at timestamptz, stripe_customer_id text, stripe_subscription_id text, created_at timestamptz default now() ); create table briefs ( id uuid default gen_random_uuid() primary key, user_id uuid references profiles(id), title text, source_type text, source_content text, summary text, key_points jsonb, action_items jsonb, metadata jsonb, created_at timestamptz default now() ); alter table briefs enable row level security; create policy "Users can CRUD own briefs" on briefs for all using (auth.uid() = user_id);

执行完后，在 Supabase 的 Table Editor 里确认两张表都建好了，RLS 策略也生效了。验收动作：手动插入一条测试数据，然后用匿名请求查询，应该查不到，说明 RLS 起作用了。

4.2 核心 API 路由生成

这是整个产品最核心的部分。在 Cursor Composer 里输入以下提示词：

在 app/api/brief/generate/route.ts 创建 POST 接口。 功能：接收文本内容，调用模型生成结构化简报。 入参：{ "content": "原始文本", "title": "可选标题" } 处理流程： 1. 从 Supabase session 获取 user_id，未登录返回 401 2. 检查 profiles.usage_count，free 计划超过 10 次返回 429 3. 调用模型 API，使用 TAOTOKEN_BASE_URL 和 TAOTOKEN_API_KEY 4. 要求模型只返回合法 JSON，不要任何前缀后缀 5. 将结果存入 briefs 表，usage_count + 1 6. 返回生成的 brief 对象 模型 Prompt 要求： - summary：200 字以内核心摘要 - key_points：5~8 个要点，每条一句话 - action_items：可执行行动项数组 错误处理：401 未登录，429 额度不足，500 调用失败。

生成后不要直接跑，先读一遍代码。重点检查两个地方：一是模型 Prompt 是否明确要求只返回 JSON，二是额度检查和扣减之间有没有加锁。如果没有加锁，并发场景下会超扣。发现问题直接用口语描述给 Cursor 修，比如“在 usage_count 检查和更新之间加 select for update 行级锁”。

4.3 前端页面与交互

前端部分按页面逐个生成。登录页的提示词：

在 app/auth/login/page.tsx 创建登录页面。 使用 shadcn/ui 的 Card、Input、Button 组件。 表单：邮箱 + 密码，登录按钮，注册链接。 调用 Supabase Auth 的 signInWithPassword。 成功跳转 /dashboard，失败显示 Toast。 样式：居中卡片，简洁风格。

Dashboard 页面的提示词：

在 app/dashboard/page.tsx 创建仪表盘。 顶部显示欢迎语和当前日期。 使用情况用进度条展示（free: 已用 x/10）。 简报列表用卡片网格，每张卡片显示标题、摘要前 50 字、创建时间。 空状态显示居中 CTA："创建你的第一份简报"。

每生成一个页面，立刻在本地跑起来看效果。验收动作：手动走一遍登录 → 创建简报 → 查看列表的完整流程，确认没有报错。

4.4 验证请求与成功结果

所有功能跑通后，做一次完整的端到端验证。启动本地服务：

npm run dev

然后按顺序执行：注册一个新账号 → 登录 → 粘贴一段长文本 → 点击生成 → 等待几秒 → 查看简报详情 → 导出 Markdown。如果每一步都正常，说明核心链路通了。

再用 curl 单独验证模型调用是否正常：

curl -X POST https://taotoken.net/api/v1/messages \ -H "Content-Type: application/json" \ -H "x-api-key: 你的_taotoken_key" \ -d '{ "model": "claude-sonnet-4-6", "max_tokens": 1024, "messages": [{"role": "user", "content": "返回一个 JSON：{\"status\": \"ok\"}"}] }'

看到正常返回就说明通道没问题。如果返回 401，检查 Key 是否正确；如果返回 model not found，检查 Model ID 是否拼写正确。

5. 常见报错排查对照表

这一节列出我在 48 小时里真实遇到的报错，以及对应的排查动作。你遇到问题时可以对照着看，大部分情况能快速定位。

401 Unauthorized：最常见的原因是 Key 没配对，或者 Base URL 写错了。检查.env.local里的TAOTOKEN_API_KEY是否和 API Keys 页面生成的一致，TAOTOKEN_BASE_URL是否是https://taotoken.net/api。注意 Base URL 不要加 UTM 参数，也不要多写/v1，具体路径以接入文档为准。如果 Key 是对的还报 401，可能是 Key 被删了或者过期了，重新生成一个。

local proxy failed：这个报错通常出现在 Cursor 或 Claude Code 的配置里。原因是本地代理配置和实际请求地址冲突。检查settings.json或auth.json里的base_url是否写成了https://taotoken.net/api，不要写localhost或127.0.0.1。如果之前配过其他地址，先清掉再重新填。

reading choices 报错：这个一般出现在模型返回格式不符合预期时。比如你要求返回 JSON，但模型返回了带 markdown 代码块的文本，解析就失败了。解决办法是在 Prompt 里加一句“只返回合法 JSON，不要用代码块包裹，不要有任何前缀后缀”。如果还是不稳定，可以在代码里加一层清洗逻辑，把json 和去掉再解析。

OAuth 相关报错：Supabase 的 OAuth 回调地址没配对会导致登录失败。检查 Supabase Dashboard 的 Authentication → URL Configuration，把本地地址http://localhost:3000和生产域名都加进去。Stripe 的 OAuth 类似，检查 Stripe Dashboard 里的回调地址是否和代码里的一致。

额度超扣：这是并发场景下的典型问题。AI 生成的代码通常是先查再更新，两步之间没有锁。修复方式是在查询时加for update，或者在数据库层面用原子操作。具体做法是在 Supabase 的 SQL 里写一个函数，把检查和扣减放在一个事务里。

PDF 解析截断：AI 生成的 PDF 解析代码有时会在大文件时截断内容。检查解析逻辑是否按页拼接，而不是只取第一页。如果用的是pdf-parse这类库，确认返回的是完整文本而不是摘要。

Stripe Webhook 签名验证失败：本地测试时需要用 Stripe CLI 转发事件，并且把 CLI 给出的 webhook secret 填到.env.local里。生产环境则要在 Stripe Dashboard 里配置正式的 webhook 地址，并把对应的 secret 更新到 Vercel 的环境变量里。两边 secret 不能混用。

排查时有个通用原则：先确认是配置问题还是代码问题。配置问题看报错信息里的地址和 Key，代码问题看请求和响应的数据结构。大部分报错在接入文档里都有对应说明，遇到不认识的错误先去文档里搜一下。

6. 从本地到上线：部署验证与后续动作

本地跑通后，部署到 Vercel 只需要几步。先把代码推到 GitHub 仓库，然后在 Vercel 里导入项目，把.env.local里的环境变量逐条填到 Vercel 的 Environment Variables 里。注意NEXT_PUBLIC_开头的变量是暴露给前端的，其他变量只在服务端可用，不要填错位置。

部署完成后，Vercel 会给你一个临时域名。用这个域名走一遍完整流程：注册 → 登录 → 生成简报 → 导出。如果都正常，再绑定自定义域名。绑定后记得去 Supabase 和 Stripe 的控制台更新回调地址，把新域名加进去。

上线前的最后检查清单：环境变量是否全部配置、Supabase 生产库的 RLS 是否生效、Stripe Webhook 是否指向生产地址、模型调用的 Key 是否有额度。这几项确认无误后，产品就算正式上线了。

后续如果要继续迭代，建议先把模型调用的稳定性做好。比如加一层重试逻辑，当模型返回格式异常时自动重试一次；再比如把额度检查做成数据库函数，彻底避免并发超扣。这些改动不大，但能显著提升产品的可靠性。

如果你打算长期做编码类项目或者 Agent 类应用，可以考虑用 Coding Plan https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite ，它在调用额度和模型选择上更灵活。日常调试和验证模型响应，用模型对话 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model_chat&utm_campaign=rewrite 就够了。接入过程中遇到配置问题，先查接入文档 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，大部分报错都有说明。Key 的管理在 API Keys 页面 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite ，建议定期轮换。