我用 AI 辅助工具搭建了一个 AI 网站整个过程大约用了三个小时。上线后不到两天后台统计显示的注册用户数是 562。这个数字放在大厂产品里不值一提但作为一个周末项目它已经超出了我最初的预期。真正让我意外的不是注册量而是我面对这个注册量时的感受我的第一反应不是兴奋而是茫然。用户来了我却还没有想清楚他们为什么来用完会不会再回来第二天早上应该修 Bug、加功能还是先分析这批数据到底意味着什么。这篇文章不是标题党也不是在教你“用 AI 三小时做出爆款产品”的鸡汤。我想完整复盘一次真实过程提示词怎么设计技术栈怎么选代码生成到哪一步需要手动干预部署上线后怎么统计注册以及最关键的问题——为什么技术完成度越高反而越容易迷失在“下一步该做什么”里。如果你正在尝试用 AI 建站或者已经用 Cursor 这类工具快速搭过一个产品这篇文章里的排查路径和检查清单可以直接拿去用。1. 为什么 AI 建站在今天真的能把时间压缩到 3 小时1.1 AI 建站不是“自动生成网页”而是“AI 辅助工程”很多人理解 AI 建站是输入一句话就生成一个网页。但真实情况是一个能获得注册用户的网站至少要包含前端页面、登录注册、数据库、API 路由、大模型调用、部署和统计。这里面任何一环断裂用户都会卡在中间注册量也就无从谈起。所以这里的“AI 建站”应该定义为开发者使用 AI IDE、生成式代码补全、自动脚手架和托管平台把传统开发中需要几天的部分压缩到几小时。AI 不是替代你完成所有事而是替代你完成大量样板代码和重复工作让你把精力集中在业务逻辑、数据表和异常分支这些真正需要判断的地方。我这次的目标是做一个“AI 文案改写工具”。用户输入一段中文文案选择语气更简洁、更文艺、更商务、更幽默由大模型改写后返回结果。游客可以体验 1 次注册用户获得 10 次免费额度。这个产品足够小恰好适合验证 AI 建站的边界。1.2 三个小时到底花在了哪里很多人质疑“3 小时建站”是因为把 AI 建站理解为“3 分钟生成页面”。实际上三小时只是把传统开发中需要几天的工程量压缩了并没有省略工程环节。以下是我这次三个小时的分配时间段任务传统开发大致耗时AI 辅助耗时前 30 分钟项目初始化、技术栈确认、目录结构设计0.5 到 1 天30 分钟中间 60 分钟用户表、注册接口、登录配置、额度字段1 到 2 天60 分钟后 60 分钟大模型调用、改写逻辑、前端表单和结果展示1 天60 分钟最后 30 分钟部署、环境变量、注册统计0.5 天30 分钟AI 提升效率最高的是脚手架和样板代码比如创建 Next.js 项目、写 Prisma 数据模型、生成注册接口、配置 Tailwind 样式。这些代码结构固定AI 犯错概率低人工检查成本也低。真正消耗时间的部分反而不是写代码而是确认“用户注册后额度存在哪里”“游客体验次数怎么限制”“额度扣减会不会并发超卖”。这些逻辑只要 AI 生成得不够仔细就会埋下隐患。后面第 6 节会专门展开这些坑。1.3 适合 AI 建站的项目边界不是所有项目都适合 AI 建站。从我这次经验看适合的项目通常是“小而完整”的工具型产品内容生成工具包括文案改写、摘要生成、标题生成。信息聚合页面例如 AI 工具导航、资源列表、落地页。表单驱动的工具站例如简历模板、问卷生成、数据格式化。活动页和营销页例如产品发布页、倒计时活动页。不适合 AI 建站的项目包括强实时交互系统、复杂权限系统、高并发业务、需要深度定制行业逻辑的软件。这类项目即使 AI 能生成代码后续排错成本也很高。关键判断标准是如果产品核心是一个请求进来、一个结果返回的闭环那么 AI 建站非常合适。一旦涉及状态机、消息队列、多租户隔离、精确对账等复杂逻辑AI 生成的代码只能作为起点不能作为最终交付物。2. 环境准备工具链、账号和项目初始化2.1 工具链清单搭建之前先把工具链确认好否则中途切换成本很高。我这次使用的是以下组合环节工具说明AI IDECursor也可以使用 VS Code 配合 Continue 等插件前端框架Next.js 14 TypeScriptApp Router 模式样式Tailwind CSS生成页面时效率高数据库Prisma SQLite本地生产环境切换为 PostgreSQL认证NextAuth v4使用 Credentials Provider大模型OpenAI 兼容接口或本地模型通过环境变量切换部署Vercel环境变量管理方便这里要注意版本。写文章时 Next.js 14 和 NextAuth v4 是一套经过大量项目验证的稳定组合。新项目落地前要先确认官方文档当前的版本要求不要直接照搬我的依赖版本。2.2 最小产品功能拆解动手写代码前我先把功能边界拆到了最小闭环游客访问首页输入文案选择语气点击生成。游客调用生成接口前通过 Cookie 判断体验次数是否已经用完。注册用户登录后获得 10 次免费额度。每次成功调用生成接口服务端扣减一次额度。注册统计通过数据库用户表记录。刻意砍掉了两个功能历史记录和分享链接。原因很简单这两个功能会引入新的页面和查询逻辑直接扩大三小时的工作量。AI 建站最忌讳贪多功能边界越清晰生成效率越高。2.3 项目初始化命令我使用以下命令创建项目npx create-next-applatest ai-copywriter --typescript --tailwind --eslint cd ai-copywriter npm install prisma/client auth/prisma-adapter bcryptjs npm install -D prisma tsx npx prisma init --datasource-provider sqlite创建成功后修改 Prisma 数据模型。用户表里除了邮箱和密码哈希还有一个字段叫credits表示剩余可用次数。这是整个产品的核心字段model User { id String id default(cuid()) email String unique passwordHash String credits Int default(10) createdAt DateTime default(now()) usageLogs UsageLog[] } model UsageLog { id String id default(cuid()) userId String input String output String createdAt DateTime default(now()) user User relation(fields: [userId], references: [id]) }额度放在User表而不是前端本地存储是因为额度控制必须在数据层完成。如果额度存到localStorage用户改一下前端代码就能无限使用。这个设计不是 AI 帮我想到的而是我在手动审查 AI 生成的 model 时补进去的关键字段。3. 三小时实操从提示词到可上线网站3.1 第一个提示词让 AI 生成项目方案打开 Cursor 之后我输入的第一个提示词不是“帮我写网站”而是先让 AI 生成方案你是一名资深 Next.js 全栈工程师。 我要做一个 AI 文案改写工具面向中文用户。 技术栈Next.js App Router TypeScript Tailwind CSS Prisma。 核心功能 1. 用户输入一段文案最多 3000 字。 2. 选择语气更简洁、更文艺、更商务、更幽默。 3. 调用大模型 API 改写文案。 4. 游客可以体验 1 次注册用户获得 10 次免费额度。 5. 登录方式使用邮箱加密码。 请先给出项目目录结构和数据模型设计确认后再写具体代码。这个提示词的关键点在于先让 AI 出方案而不是直接生成全部代码。AI 给出的目录结构我看了一遍确认没有遗漏核心模块后再让它去写具体的 route、页面和配置。这样流程是可控的后续排错时也知道去哪个文件里找问题。3.2 第二个提示词实现注册登录注册登录是单体应用里最容易出错的部分。我让 AI 生成注册接口保留了 NextAuth v4 的 Credentials 配置。注册接口的核心逻辑如下// app/api/auth/register/route.ts import { prisma } from /lib/prisma; import bcrypt from bcryptjs; import { NextResponse } from next/server; export async function POST(request: Request) { const { email, password } await request.json(); if (!email || !password || password.length 8) { return NextResponse.json( { error: 邮箱不能为空密码至少 8 位 }, { status: 400 } ); } const existing await prisma.user.findUnique({ where: { email } }); if (existing) { return NextResponse.json( { error: 该邮箱已经注册 }, { status: 409 } ); } const passwordHash await bcrypt.hash(password, 10); const user await prisma.user.create({ data: { email, passwordHash }, }); return NextResponse.json({ id: user.id, email: user.email }); }这段代码有三点值得注意第一passwordHash存储的是bcrypt哈希结果绝不能明文存储密码。第二注册接口做了重复邮箱判断避免用户重复注册产生脏数据。第三密码最少 8 位的校验写在服务端而不是只靠前端表单因为接口可能被绕过前端直接调用。NextAuth 部分的 Credentials 配置需要把authorize回调实现为通过邮箱查用户、再用bcrypt.compare验证密码// lib/auth.ts import CredentialsProvider from next-auth/providers/credentials; import bcrypt from bcryptjs; import { prisma } from /lib/prisma; export const authOptions { providers: [ CredentialsProvider({ name: 邮箱密码, credentials: { email: { label: 邮箱, type: email }, password: { label: 密码, type: password }, }, async authorize(credentials) { if (!credentials?.email || !credentials?.password) { return null; } const user await prisma.user.findUnique({ where: { email: credentials.email }, }); if (!user) { return null; } const valid await bcrypt.compare(credentials.password, user.passwordHash); if (!valid) { return null; } return { id: user.id, email: user.email }; }, }), ], session: { strategy: jwt }, secret: process.env.NEXTAUTH_SECRET, };这里最容易踩的坑是authorize返回的对象里如果没有id后续拿 session 时可能只有email导致查用户表时需要通过email而不是id。AI 生成代码时经常忽略这一点。3.3 第三个提示词实现 AI 改写核心流程核心生成接口是整个网站真正产生价值的地方。这里要注意的不仅是调用大模型还要同时处理游客额度和注册用户额度// app/api/generate/route.ts import { NextResponse } from next/server; import { getServerSession } from next-auth; import { prisma } from /lib/prisma; import { authOptions } from /lib/auth; export async function POST(request: Request) { const session await getServerSession(authOptions); const { text, tone 更简洁 } await request.json(); if (!text || text.trim().length 0) { return NextResponse.json({ error: 请输入需要改写的文案 }, { status: 400 }); } if (text.length 3000) { return NextResponse.json({ error: 文案不能超过 3000 字 }, { status: 400 }); } let user null; if (session?.user?.email) { user await prisma.user.findUnique({ where: { email: session.user.email }, }); } // 游客处理通过 Cookie 限制体验次数这里只做简单判断 if (!user) { const count Number(request.cookies.get(guest_usage)?.value ?? 0); if (count 1) { return NextResponse.json( { error: 游客只能体验一次请注册后使用 }, { status: 403 } ); } } // 注册用户额度判断 if (user (user.credits ?? 0) 0) { return NextResponse.json( { error: 免费额度已用完请联系管理员补充 }, { status: 403 } ); } const output await rewriteWithLLM(text, tone); if (user) { await prisma.user.update({ where: { id: user.id }, data: { credits: { decrement: 1 } }, }); await prisma.usageLog.create({ data: { userId: user.id, input: text, output }, }); } const response NextResponse.json({ output }); if (!user) { response.cookies.set(guest_usage, 1, { maxAge: 60 * 60 * 24 }); } return response; }这里需要说明的是大模型调用函数rewriteWithLLM。为了兼容多种服务我把它设计成读取环境变量指向的地址// lib/llm.ts export async function rewriteWithLLM(text: string, tone: string) { const baseURL process.env.LLM_BASE_URL || https://api.example.com/v1; const apiKey process.env.LLM_API_KEY; const model process.env.LLM_MODEL || default-model; const response await fetch(${baseURL}/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${apiKey}, }, body: JSON.stringify({ model, messages: [ { role: system, content: 你是一个中文文案改写助手。请将用户文案改写成${tone}的语气保留原意不增加事实。, }, { role: user, content: text }, ], }), }); if (!response.ok) { throw new Error(LLM request failed: ${response.status}); } const data await response.json(); return data.choices?.[0]?.message?.content ?? ; }实际上大模型服务可以有两种选择云厂商提供的 OpenAI 兼容接口或者本地部署的模型。两者在成本、数据合规和响应速度上差异很大。使用云接口时API Key 必须只存在于服务端环境变量使用本地模型时要确认机器的显存和推理延迟是否满足网页端实时返回的需求。3.4 部署上线与注册统计本地跑通后部署到 Vercel 之前最重要的操作是把数据库从 SQLite 切换到 PostgreSQL。npx vercelSQLite 在本地开发时很方便文件即数据库零配置。但到了 Vercel 的无服务器环境SQLite 文件不能跨实例持久化用户注册数据可能写入后立刻丢失。切换到 PostgreSQL 后数据库连接串通过环境变量注入保证用户表是全局唯一的存储。生产环境的最小环境变量清单DATABASE_URLpostgresql://... NEXTAUTH_SECRETyour-secret NEXTAUTH_URLhttps://your-domain.com LLM_API_KEYyour-api-key LLM_BASE_URLhttps://api.example.com/v1 LLM_MODELyour-model-nameNEXTAUTH_SECRET是 NextAuth 用来加密 session cookie 的密钥生产环境必须生成一个足够随机的值不能写死在代码里。生成方式可以使用openssl rand -base64 32。部署完成后注册统计直接查数据库用户表即可。这也是后续分析 562 个注册用户的第一手数据来源。4. 562 个注册是怎么来的上线后的验证路径4.1 上线当天我做了什么网站部署完成后我把链接发到了几个开发者社区和产品分享平台。没有做付费投放也没有做复杂的 SEO只是写了一小段介绍说明这个工具解决什么问题、免费额度怎么获取。这批注册用户的来源大概率是两类一类是对 AI 文案改写有真实需求的用户另一类是看到“免费额度”字样后注册但未必会深入使用的用户。当时我还没有接来源统计所以无法精确区分这是网站设计阶段留下的一个明显盲区。4.2 注册数据怎么查562 这个数字来源于数据库的users表行数。查询方式很简单SELECT DATE(created_at) AS reg_date, COUNT(*) AS reg_count FROM users GROUP BY DATE(created_at) ORDER BY reg_date DESC;但看注册数远远不够。注册用户是否真的使用了生成功能需要关联usage_logs表SELECT COUNT(DISTINCT user_id) AS active_users FROM usage_logs;再查注册后一次都没有调用过生成接口的用户这些用户对产品来说只是“注册数”不是“激活用户”SELECT COUNT(*) AS registered_but_inactive FROM users u LEFT JOIN usage_logs ul ON ul.user_id u.id WHERE ul.id IS NULL;这一条查询就解释了我为什么迷茫注册数 562但真正使用过核心功能的用户远低于这个数。注册流量到来的时候我还没有为“激活”“留存”“复访”设计任何机制。4.3 数据背后的问题注册不等于留存把指标拆开看问题更清楚指标含义我在上线后的状态注册数用户在 users 表建立了账号562很显眼激活用户数注册后至少调用一次生成接口需要联表查询留存的用户数第二天再次访问并使用的用户没有统计付费意愿用户是否愿意为额外额度付费没有设置付费入口所以“感到 lost”的第一层原因是目标错位。我把“获得注册”当成了阶段性目标但当注册真的到来时这个目标本身无法回答“接下来该做什么”。激活、留存、付费才是产品成立的关键而这三个指标在网站上线时都没有被定义清楚。5. 感到迷茫的根因技术完成不等于产品成立5.1 我打开后台才发现的问题上线后我花了一个晚上检查数据库和日志发现了几个比注册量更值得注意的问题。第一用户注册没有做邮箱验证。所有邮箱都可以直接注册这导致数据里可能存在无效邮箱后续做邮件触达时退信率会很高。第二没有记录用户来源渠道无法判断流量从哪里来。第三没有设置单用户并发调用限制。如果有人在脚本里循环调用生成接口额度会在几分钟内耗尽同时产生大量大模型费用。第四大部分用户用完 10 次额度后没有继续访问而网站没有保存历史记录用户下次再来时无法找到之前生成的内容。这些问题在 3 小时开发时完全没有出现在任务清单里因为 AI 只负责把我提示词里的功能写出来不会主动追问“邮箱验证要不要做”“来源统计要不要接”。产品完整性的判断责任始终在开发者身上。5.2 AI 代码的隐性负债AI 生成的代码有一个共同特征主流程是通的但边界情况覆盖不够。比如大模型调用失败时前端可能只显示默认错误用户输入超长文本时接口可能没有提前截断额度扣减时没有使用事务极端并发下可能出现超扣。这不是说 AI 生成的代码不能用于生产而是说使用 AI 代码之前要按照生产标准重新走一遍检查流程。最稳妥的做法是让 AI 生成主流程然后把异常分支、参数校验、费用上限作为第二个提示词让 AI 补充最后人工审查所有涉及钱、权、敏感数据的代码。5.3 从“开发完成”到“产品验证”的思维切换三小时建站这个动作本质上是在短时间内完成了“开发完成”这一步。但一个产品立不立得住要看“产品验证”是否闭环用户是否理解产品价值是否愿意为价值支付时间或金钱是否愿意回到产品里继续使用。当开发速度被 AI 大幅提高后真正决定项目走向的已经不是代码能力而是产品判断力。这也是 562 个注册用户让我感到 lost 的根本原因网站“能上线”了我也证明了自己可以快速完成开发但我没有为“用户来了之后怎么办”准备答案。6. 常见问题排查AI 建站的 6 个典型坑这一节是我在这次实战中最想复用的部分。按现象、原因、检查方式、处理建议来组织问题现象常见原因检查方式处理建议注册后无法登录NextAuthauthorize中没有验证密码或返回结构不规范查看服务端日志打印authorize返回值使用bcrypt.compare对比密码返回对象包含id和email部署后页面刷新 404使用了静态导出或服务端路由不匹配查看 Vercel 构建日志检查路由文件路径确认使用动态渲染避免把带 session 依赖的页面静态化用户注册后数据丢失SQLite 文件在无服务器环境不持久检查环境变量是否指向 PostgreSQL生产环境切换 PostgreSQL运行prisma migrate deployAI 调用失败但前端不报错异常被catch后只返回空字符串查看函数日志和 LLM 接口返回状态码记录错误堆栈前端显示可读错误例如“生成失败请稍后重试”免费额度被刷额度判断写在前端或未在服务端扣减检查调用日志看单用户调用次数是否异常把额度校验和扣减放到服务端并使用事务处理统计数据对不上用户表混入爬虫注册或批量注册连接数据库查邮箱域名分布增加邮箱验证注册接口增加频率限制下面重点展开两个最容易反复出现的问题。6.1 额度扣减被绕过如果额度扣减只发生在前端按钮点击后、后端只返回生成结果不检查额度那么用户直接调用 API 路由就可以绕过额度限制。检查方式是在日志里看某个userId的调用次数是否超过配置的额度上限。修复方式是在生成接口入口处先查用户余额再调用大模型最后在同一个接口内完成扣减。要注意的是大模型接口本身有延迟如果在调用大模型之前不锁住额度高并发下可能出现多个请求同时通过校验、最后都扣减成功或都不扣减的情况。MVP 阶段可以接受少量误差但生产环境要使用数据库事务或乐观锁保证扣减的精确性。6.2 环境变量缺失导致 AI 调用失败本地开发时.env.local如果被 Git 忽略部署到 Vercel 时忘了配置LLM_API_KEY前端就会显示“生成失败”。这个问题很容易被忽略因为本地运行正常。检查方式是在 Vercel 项目设置里查看 Environment Variables 是否有值然后看函数日志里是否出现LLM_API_KEY is not set这类错误。修复方式是把所有密钥集中放到环境变量管理面板并在代码入口处做一个启动检查缺变量时直接抛出明确错误。注意不要在客户端组件里读取任何以LLM_或NEXTAUTH开头的环境变量。Next.js 中只有以NEXT_PUBLIC_开头的变量会被打包进浏览器而大模型 API Key、数据库连接串、session 密钥都必须只存在于服务端。7. 最佳实践AI 建站之后该做什么7.1 AI 代码的信任边界使用 AI 生成代码时我给自己的规则是让 AI 写模板代码自己审查业务逻辑。凡是涉及扣费、权限、密码、数据删除的地方必须人工阅读完整代码不能只扫一眼就上线。具体来说AI 生成的代码可以信任的部分包括页面布局、表单组件、CRUD 路由、配置文件、基础样式。需要人工重点审查的部分包括用户认证回调、额度扣减、邮件发送、外部 API 调用、异常递归和日志记录。7.2 第一批用户来了以后优先级怎么排如果让我重新来一次拿到第一批注册用户后我会按以下顺序处理先接错误监控确保用户遇到问题时我能看到日志。增加邮箱验证和注册频率限制过滤无效账号。从usage_logs表里找出真正使用过产品的用户主动联系他们收集反馈。为历史记录做基础的表结构和查询让用户下次回来能看到之前的内容。最后才考虑新增语气、新增模型、新增分享链接等功能。这个顺序的核心原则是先保证“能看到问题”再处理“用户价值留存”最后才做“功能扩展”。7.3 可复用的 AI 建站检查清单以下清单适合任何 AI 辅助生成的网站在正式发布前逐项确认数据库连接串是否通过环境变量注入是否区分本地和生产。NEXTAUTH_SECRET是否随机生成是否没有出现在 Git 历史里。大模型 API Key 是否只存在于服务端环境变量。注册接口是否校验了邮箱格式和密码长度。额度扣减是否发生在服务端是否使用事务。是否记录了usage_logs用于分析用户是否激活。是否接入错误日志或至少能查看云端函数日志。是否限制单用户并发调用次数。生产 PostgreSQL 是否配置了备份。是否设置了大模型调用成本上限避免费用失控。是否在隐私政策中说明用户输入文本会被发送给第三方大模型服务。是否准备了回滚方案例如保留上一个部署版本。这次经历最大的收获不是 562 这个数字而是让我明白了一件事AI 建站把“能上线”这件事变容易了但并没有把“产品成立”这件事变容易。三小时建站只是第一步后续的验证、迭代和运营才是真正消耗时间的地方。如果你准备用 AI 快速搭建一个网站我的建议是把 AI 当成一个熟练但粗心的协作者让它完成骨架自己盯住业务闭环和成本控制。等注册量真的出现时你才不会像我当时那样面对后台数据不知道是应该庆祝还是应该先关掉额度扣减的入口。