用AI帮你一天写完一个网站：Next.js + TailwindCSS + Vercel 全流程拆解

1. 从零到上线一天做完一个网站到底卡在哪很多人对“一天写完一个网站”这件事的第一反应是不可能。设计稿要磨、组件要调、接口要接、部署还要踩坑光是环境配置就能耗掉半天。但如果你把目标收窄到“个人站点或产品落地页”并且把 AI 当成一个随时待命的结对伙伴这件事就变得非常现实。我试过的路径是Next.js 负责页面与路由TailwindCSS 负责样式Vercel 负责构建与托管AI 负责把需求翻译成可运行的代码片段再用一条统一的 Key/API 通道把模型能力接进页面里。这篇文章面向的是想快速跑通一个线上站点的开发者尤其是那些会一点前端、但不想在配置和部署上反复折腾的人。核心检索词就三个Next.js、TailwindCSS、Vercel。它们组合起来能做什么Next.js 提供 App Router 和文件路由TailwindCSS 让你不用离开 JSX 就能写样式Vercel 则把构建、CDN、域名绑定全部托管掉。适合谁适合独立开发者、做产品落地页的运营、以及想验证一个想法是否值得投入的人。整条流程我拆成四段推进需求拆解、页面生成、样式调优、构建部署。每一段都有可复制的命令或配置最后你会得到一个能访问的线上地址而不是一个躺在本地跑不起来的 demo。下面按顺序来。2. 前置准备用统一 Key/API 通道接入 AI 能力在写页面之前先把 AI 能力的接入方式定下来。很多人的做法是每个模型单独申请 Key、单独写请求逻辑结果代码里散落着各种 base_url 和鉴权头维护起来很痛苦。更省事的做法是用一个统一的 API 通道把模型对话、代码生成这类请求都走同一个入口。TaoToken 在这里扮演的就是这个统一通道的角色。它的 API 地址是https://taotoken.net/api你只需要在控制台生成一个 API Key就能用 OpenAI 兼容的方式发起请求。官网入口在https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content注册后在控制台里可以创建和管理 Key。具体操作路径是这样的先打开控制台https://taotoken.net/console在 API Keys 页面生成一个 Key复制保存好。如果你只是想先验证模型能不能通可以直接用模型对话页面https://taotoken.net/model-chat发一条消息试试。接入文档在https://taotoken.net/doc里面有完整的请求示例和参数说明。这里要强调一点Key 不要硬编码在前端代码里。Next.js 项目里应该把它放在.env.local文件中通过服务端路由或 Server Action 调用避免暴露在浏览器端。下面这段就是标准的.env.local写法# .env.local TAOTOKEN_API_KEYsk-你的实际key TAOTOKEN_BASE_URLhttps://taotoken.net/api有了这个前置后面页面里要加“AI 摘要”“智能推荐”之类的功能就只需要在服务端调一次接口不用再折腾鉴权。3. 项目骨架Next.js TailwindCSS 初始化与配置3.1 创建项目并安装依赖用create-next-app一条命令把骨架拉起来它会自动帮你配好 TailwindCSS。注意选 App Router这是现在的主流写法。npx create-next-applatest my-ai-site --typescript --tailwind --eslint --app --src-dir --import-alias /* cd my-ai-site执行过程中会问你几个选项按上面的参数走就行。装完之后目录结构大致是这样src/app放页面和布局src/components放组件public放静态资源。TailwindCSS 的配置已经在tailwind.config.ts里生成好了。3.2 TailwindCSS 配置片段默认配置够用但落地页通常需要自定义主色和容器宽度。打开tailwind.config.ts在theme.extend里加上品牌色和字体// tailwind.config.ts import type { Config } from tailwindcss; const config: Config { content: [ ./src/pages/**/*.{js,ts,jsx,tsx,mdx}, ./src/components/**/*.{js,ts,jsx,tsx,mdx}, ./src/app/**/*.{js,ts,jsx,tsx,mdx}, ], theme: { extend: { colors: { brand: { 50: #eff6ff, 500: #3b82f6, 600: #2563eb, 700: #1d4ed8, }, }, maxWidth: { content: 1120px, }, }, }, plugins: [], }; export default config;然后在src/app/globals.css里保留 Tailwind 的三条指令即可tailwind base; tailwind components; tailwind utilities;3.3 让 AI 生成页面组件骨架有了接下来把需求交给 AI。你可以用模型对话页面https://taotoken.net/model-chat直接发 Prompt比如“用 Next.js App Router 和 TailwindCSS 写一个落地页包含导航栏、Hero 区、三个特性卡片、一个 CTA 按钮主色用 brand-600。” 把返回的代码贴进src/app/page.tsx再拆出src/components/Navbar.tsx和src/components/FeatureCard.tsx。一个可复制的卡片组件长这样// src/components/FeatureCard.tsx type Props { title: string; desc: string; }; export default function FeatureCard({ title, desc }: Props) { return ( div classNamerounded-xl border border-gray-200 p-6 hover:shadow-lg transition h3 classNametext-lg font-semibold text-gray-900{title}/h3 p classNamemt-2 text-sm text-gray-600 leading-relaxed{desc}/p /div ); }页面里用grid排三列移动端自动堆叠div classNamegrid gap-6 md:grid-cols-3 max-w-content mx-auto px-4 FeatureCard title快速接入 desc统一 Key 通道一次配置多处复用。 / FeatureCard title样式即写即用 descTailwindCSS 原子类不用切文件。 / FeatureCard title一键部署 descVercel 自动构建推送到仓库即上线。 / /div这一步的关键是AI 生成的代码不要整段照抄先跑起来看效果再按自己的品牌色和文案微调。样式调优阶段主要改的就是间距、圆角和阴影这三类。4. 接入 AI 能力服务端路由调用统一 API页面静态部分完成后加一个真正调用模型的接口验证整条链路是通的。在src/app/api/summary/route.ts里写一个 POST 处理// src/app/api/summary/route.ts import { NextResponse } from next/server; export async function POST(req: Request) { const { text } await req.json(); const res await fetch(${process.env.TAOTOKEN_BASE_URL}/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${process.env.TAOTOKEN_API_KEY}, }, body: JSON.stringify({ model: gpt-4o-mini, messages: [ { role: system, content: 你是一个网页文案助手输出简洁的中文摘要。 }, { role: user, content: text }, ], }), }); const data await res.json(); return NextResponse.json({ summary: data.choices?.[0]?.message?.content ?? }); }前端调用时只请求自己的/api/summaryKey 始终留在服务端。这样既安全也方便以后换模型或加缓存。5. 构建部署Vercel 上线与验证动作5.1 本地构建先过一遍推送到 Vercel 之前先在本地跑一次生产构建把类型错误和缺失依赖提前暴露出来npm run build如果这一步报错大概率是 TypeScript 类型没对齐或者某个组件用了use client却没声明。修完再继续。5.2 推送到 GitHub 并导入 Vercelgit init git add . git commit -m init: next.js tailwind landing page git branch -M main git remote add origin gitgithub.com:你的用户名/my-ai-site.git git push -u origin main然后打开 Vercel选择 “Import Git Repository”授权后选中这个仓库。框架预设会自动识别为 Next.js构建命令和输出目录都不用改。唯一要手动加的是环境变量在 Vercel 项目的 Settings → Environment Variables 里把TAOTOKEN_API_KEY和TAOTOKEN_BASE_URL填进去和本地.env.local保持一致。5.3 验证线上站点部署完成后 Vercel 会给你一个*.vercel.app的地址。打开它检查三件事页面样式是否正常加载、导航链接是否可点、调用/api/summary的按钮是否返回内容。如果样式丢失多半是 Tailwind 的content路径没覆盖到组件目录如果接口 500去 Vercel 的 Functions 日志里看具体报错。绑定自定义域名在 Settings → Domains 里操作按提示加一条 CNAME 记录即可证书 Vercel 会自动签发。6. 本篇常见错排查构建时报 “Module not found: Cant resolve /components/...”检查tsconfig.json里的paths是否配置了/*指向src/*。用create-next-app生成时如果选了 import alias这一步是自动的手动改过目录结构就要补上。Tailwind 类名不生效页面全是裸样式先确认globals.css里三行tailwind指令没被删再检查tailwind.config.ts的content数组是否包含./src/**/*.{ts,tsx}。改完配置要重启 dev server。接口返回 401 或 403说明 Key 没读到或格式不对。确认.env.local里变量名和代码里process.env.XXX完全一致Vercel 上的环境变量要在部署前就配好改完需要重新部署一次才生效。Vercel 部署成功但页面 404检查src/app/page.tsx是否存在App Router 下首页必须是这个路径。如果用了src目录确认 Vercel 的 Root Directory 设置没指错。本地能跑线上接口超时Vercel 的 Serverless Function 有执行时长限制模型请求如果太慢会超时。可以在请求里加max_tokens限制输出长度或者把长任务拆成流式返回。7. 后续迭代与接入入口站点上线只是起点。接下来你可以让 AI 帮你补 SEO 的 meta 标签、生成 sitemap、加一个基于模型的内容推荐模块。如果要做长期编码和 Agent 类功能可以了解 Coding Planhttps://taotoken.net/coding-plan日常调试模型和验证输出用模型对话https://taotoken.net/model-chat就够了需要管理多个 Key 或查看用量去控制台https://taotoken.net/console接入细节和参数说明都在文档https://taotoken.net/doc。Claude Code 相关的接入方式在https://taotoken.net/ClaudeCodeAnthropic有单独说明。把 Key 管好、把环境变量配好、把构建跑通剩下的就是不断往页面里加东西。一天做完一个能访问的站点难点从来不是写代码而是别在配置环节反复打转。