Vibe Coding 是 2025 年开发者社区里出现频率很高的一个词通常认为来自 Andrej Karpathy 的一次公开分享。它的核心含义很直白开发者用自然语言描述想要的效果AI 工具生成大部分代码开发者负责把需求讲清楚、把生成结果审明白、然后快速迭代。个人网站是练习这套工作流最好的场地之一因为没有复杂业务、没有高并发、改版自由失败成本几乎为零。这里记录我实际用 Vibe Coding 思路搭建个人网站的过程内容包括需求描述怎么写、提示词模板怎么组织、AI 生成代码后要检查什么、怎么用 Vercel 这类平台一键部署以及上线后如何验证和排错。读完你可以直接照这套流程做一个属于自己的个人站或导航模板。1. 先搞清楚 Vibe Coding 到底在做什么1.1 不止是“让 AI 写代码”而是“把开发流程变成对话”很多人第一次听到 Vibe Coding会把它简单理解为“用 ChatGPT 写网页”。这个理解没有错但不够完整。传统开发里需求确认、技术方案、编码、调试、部署是一条线性流程每一步都要人来推动。Vibe Coding 把这条流程压缩成一个循环你说需求AI 生成代码你运行看效果发现问题再把反馈说给 AIAI 继续改。这个过程里开发者真正付出的不是打字而是三件事把需求表达准确、把生成结果审出问题、把迭代方向控制住。换句话说Vibe Coding 不是降低了开发的难度而是把难度从“怎么写代码”转移到了“怎么描述清楚”和“怎么判断好坏”。我在实际使用中最大的感受是当提示词写得足够具体时AI 第一次生成的页面就可能达到可用的水平当提示词写得模糊时后续会陷入“改了又改”的循环甚至比手写还慢。所以这篇文章会花不少篇幅讲需求描述因为这才是 Vibe Coding 真正的核心能力。1.2 Vibe Coding 与传统开发模式的关键差异为了说清楚适用边界这里用一张表对比传统开发与 Vibe Coding 的差异对比维度传统开发Vibe Coding需求表达文档、评审、接口设计自然语言描述、多轮对话代码来源开发者手写AI 生成开发者审查和修改项目上下文靠长期记忆和架构沉淀依赖对话窗口和当前文件容易遗忘调试方式阅读源码、打断点定位把报错信息贴回对话让 AI 给出修复适合场景复杂业务、高稳定性要求原型、个人网站、内部工具、页面开发主要风险开发周期长、沟通成本高AI 生成错误代码开发者审查不严表格里最值得注意的一行是“项目上下文”。Vibe Coding 工具的对话窗口通常只能记住当前会话的内容一旦项目文件多起来AI 就可能忘记“你要求过不要引入 UI 组件库”之类的约束。这也是为什么很多人用 Vibe Coding 做个人网站很顺手做公司中台系统却很痛苦——中台系统的上下文太庞大了。1.3 个人网站为什么是 Vibe Coding 的最佳练手场景个人网站满足 Vibe Coding 的理想条件以信息展示为主不涉及支付、复杂权限、敏感数据。数据结构简单大多数内容用 JSON 或 Markdown 就能维护。页面数量少首页、导航、博客、关于页基本覆盖全部需求。改版自由线上效果不满意可以推翻重来没有历史包袱。反过来如果项目涉及金钱交易、用户隐私、第三方系统对接、遗留代码维护就不要指望 AI 全包。这些场景对审计、异常处理、回滚机制要求很高AI 生成代码只能作为起点必须有资深开发者做完整 review。2. 从零构思个人网站给 AI 的输入质量决定输出质量2.1 动手前先把网站目标写清楚不要在项目描述只有一句话的情况下就打开 AI 工具。先用几句话回答三个问题网站给谁看、解决什么问题、期望访问者看完做什么。以我自己的项目为例目标描述是这个个人网站有三个用途展示我的前端作品整理常用开发资源和工具导航偶尔发布学习笔记。目标访问者是同行和潜在合作方。要求页面加载快、信息层次清楚、移动端体验好。这段描述在后续所有对话中都会反复用到。它定义了网站的内容边界AI 就不会在生成页面时擅自加上登录、购物车、后台管理等功能。2.2 设计最小页面结构个人网站最常见的结构是四个页面也可以合并成单页。这里用表格列一下页面核心功能主要内容首页第一印象建立身份认知个人简介、最近作品、最新博客导航页收藏和整理常用资源分类卡片、资源链接、搜索过滤博客页内容创作和知识沉淀文章列表、分类标签、阅读链接关于页展示背景和联系方式个人经历、联系方式、合作说明第一次做不要贪多。四个页面已经能覆盖 90% 的个人站需求多余的页面会让 AI 生成的内容越来越散。2.3 一份可复用的提示词模板把上面确定的目标、页面结构、技术约束组合成一段完整提示词。下面这份模板可以直接复制修改请帮我生成一个个人网站的完整前端项目要求如下 【定位】 一个前端开发者的个人主页包含作品展示、资源导航、博客列表、关于我四个板块。 【页面结构】 1. 首页个人简介、最近作品卡片、最近博客列表 2. 导航页分类展示常用开发资源和学习资料 3. 博客页按时间倒序展示文章列表 4. 关于页个人介绍和联系方式 【技术栈】 Next.js TypeScript Tailwind CSS不要引入重型 UI 组件库。 【样式】 浅色主题简洁现代卡片式布局顶部导航在移动端折叠为汉堡菜单。 【约束】 所有链接使用示例数据图片使用占位地址不要生成登录、支付、后台管理功能。这段提示词里最关键的是最后两行。“不要引入重型 UI 组件库”能避免 AI 生成大量没必要的依赖让项目保持轻量“不要生成登录、支付、后台管理”能防止 AI 自作主张扩展功能边界。生成后如果某个页面不是你要的样子不要推翻重来而是针对那一个页面单独说明问题。2.4 确认技术选型别被 AI 默认配置带跑Vercel 的 AI 建站入口默认偏向 Next.js 项目这对个人网站来说是合理的选型因为它和平台部署结合最好。但如果你有自己的偏好比如想用 Vue 生态、想用纯静态 HTML或者想用 Vitepress 管理博客应该在第一轮提示词里就明确写出来。技术选型确认后还要确认本地 Node.js 版本。Next.js 对 Node 版本有要求不同大版本需要的 Node 版本不同。建议统一用 nvm 管理nvm install 20 nvm use 20 node -v这一步看起来简单但很多“AI 生成的代码跑不起来”的报错最后都定位到 Node 版本和项目要求不匹配。3. 用 Vercel AI 建站入口从对话到上线的完整流程3.1 环境准备以“在 Vercel 上创建并部署个人网站”为例需要提前准备好下面的条件项目要求说明Node.js18 及以上推荐 20 LTS本地运行和构建项目Git安装并配置用户名邮箱提交代码触发自动部署GitHub 账号可直接使用免费仓库Vercel 部署需要关联仓库Vercel 账号支持 GitHub 登录免费额度可用于个人站点包管理器npm 或 pnpm安装项目依赖Vercel 的免费额度通常能满足个人网站场景但免费配额、构建时长、限制条件会调整落地前以平台当前页面的说明为准。3.2 第一步用提示词生成项目骨架登录 Vercel 后进入新建项目入口选择 AI 生成方式把上一节整理好的提示词粘贴进去。平台会返回一个可运行的项目结构并通常会自动创建关联的 Git 仓库。这里要注意AI 生成的“骨架”只是起点。生成完成后第一件事不是马上改代码而是先看一遍目录结构确认几个关键文件是否存在app/ layout.tsx page.tsx nav/page.tsx blog/page.tsx about/page.tsx components/ Navbar.tsx config/ site.ts如果发现页面目录缺失或者所有代码堆在同一个文件里要在第二轮对话里让 AI 拆分不要带着混乱结构继续开发。3.3 第二步本地运行与多轮迭代项目骨架生成后clone 到本地并安装依赖npm install npm run dev浏览器打开http://localhost:3000查看效果。迭代过程中遵循三条规则一次只让 AI 改一个点改完验证再进入下一项。浏览器控制台的报错原样贴回对话不要自己翻译或概括。明确告诉 AI“不要改其他文件”避免它顺手重构你已经满意的地方。多轮迭代是 Vibe Coding 的主要耗时环节。把每一轮对话控制在小范围最后得到的代码质量会明显高于一次性要求 AI 生成整个网站。3.4 第三步提交代码并触发自动部署本地验证没问题后把代码提交到远程仓库git add . git commit -m feat: 初始化个人网站 git push origin mainVercel 检测到远程仓库更新后会自动执行构建并生成线上预览地址。第一次部署完成后控制台会给出一个xxx.vercel.app形式的二级域名。这个域名可以直接用于分享也可以后续替换成自己的域名。如果不想走网页控制台也可以使用 Vercel CLInpm i -g vercel vercel vercel --prodCLI 方式适合习惯命令行的人第一次运行时按提示确认项目路径和构建命令即可。3.5 第四步绑定域名与检查部署结果个人网站最好绑定自己的域名。在 Vercel 项目设置里添加域名后按平台提示在 DNS 服务商处添加对应的 CNAME 或 A 记录。解析生效通常需要几分钟到几小时。上线后不要只看“页面能打开”就结束还要确认三件事HTTPS 是否自动生效、移动端访问是否正常、页面标题和描述是否正确展示。注意不同时间平台的界面入口和字段名可能不同不要死记某个教程里的截图按当前页面提示操作。遇到不确定的配置项先查看官方说明。4. 个人导航、博客列表等关键代码拆解4.1 导航收藏的数据结构个人网站的导航页本质是“分类 链接”的结构。对于个人规模的内容用 JSON 文件比数据库更合适修改方便、无需额外服务、对 AI 友好。下面是导航数据的示例结构{ categories: [ { name: 开发工具, slug: dev-tools, links: [ { title: GitHub, url: https://github.com, description: 代码托管与协作平台, icon: github } ] }, { name: 学习资料, slug: learning, links: [] } ] }这里有两个设计细节slug用于生成分类锚点或路由例如#dev-tools避免对中文分类名做 URL 编码icon保存的是图标名称字符串渲染时再映射到具体图标不要在数据文件里直接存 HTML 片段。这样数据文件保持纯数据后续迁移到数据库也容易。4.2 顶部导航组件导航组件在个人网站里出现频率最高也最容易出现移动端问题。用 Next.js App Router 写法导航需要点击展开菜单因此是一个客户端组件use client; import { useState } from react; import { siteConfig } from /config/site; export default function Navbar() { const [open, setOpen] useState(false); return ( header classNamesticky top-0 z-10 border-b bg-white/90 backdrop-blur div classNamemx-auto flex h-14 max-w-5xl items-center justify-between px-4 a href/ classNametext-base font-semibold {siteConfig.name} /a button typebutton classNamerounded border px-2 py-1 text-sm md:hidden onClick{() setOpen((v) !v)} 菜单 /button nav classNamehidden md:block ul classNameflex gap-5 text-sm {siteConfig.nav.map((item) ( li key{item.href} a href{item.href}{item.label}/a /li ))} /ul /nav /div {open ( nav classNameborder-t px-4 py-2 md:hidden ul classNameflex flex-col gap-2 {siteConfig.nav.map((item) ( li key{item.href} a href{item.href}{item.label}/a /li ))} /ul /nav )} /header ); }要点有三个use client声明让组件可以使用 state桌面端和移动端渲染同一份导航数据避免维护两份列表每个列表项都用key{item.href}作为唯一标识。siteConfig放在独立配置文件里后续增删导航项不需要改组件代码。4.3 全站 metadata 配置个人网站的 SEO 不复杂但 metadata 一定要配否则页面在搜索和分享时没有标题和描述。在 Next.js 的根布局或页面文件里导出 metadataimport type { Metadata } from next; const siteConfig { name: 我的个人网站, description: 前端作品、资源导航与学习笔记, url: https://example.com }; export const metadata: Metadata { title: { default: siteConfig.name, template: %s | ${siteConfig.name} }, description: siteConfig.description, openGraph: { title: siteConfig.name, description: siteConfig.description, url: siteConfig.url, type: website } };title.template的作用是当某个子页面自己设置标题时页面标题会自动变成“子页面标题 | 网站名”例如“关于我 | 我的个人网站”。根布局只设置一次所有子页面都会继承。4.4 常用配置参数速查Vibe Coding 生成的个人网站项目里最常打交道的参数和命令如下参数或命令含义常见值配置错误的典型表现npm run dev启动本地开发服务器端口 3000端口被占用时报EADDRINUSEnpm run build生成生产构建构建必须通过部署失败平台日志直接中断metadata.title页面标题建议不超过 60 字分享卡片标题截断或缺失langzh-CN页面语言声明中文站使用影响无障碍和搜索引擎识别siteConfig.nav导航数据数组对象路由重复时 React 会告警5. 运行验证从本地预览到线上检查5.1 本地预览检查清单开发模式下页面“能显示”不代表“没毛病”。本地预览时要按下面这张表逐项过一遍检查项操作方法通过标准页面导航点击顶部每个链接路由正确无 404移动端菜单浏览器切到手机宽度点击“菜单”展开收起正常无横向滚动图片资源检查所有 img 标签有alt属性占位图正常外链行为点开导航页所有链接新窗口打开链接地址正确控制台报错打开开发者工具 Console无红色 Error构建结果运行npm run build无 TypeScript 和编译错误5.2 部署后线上验证线上环境与本地存在差异常见的坑是本地正常、部署后样式丢失或接口 404。部署完成后先用命令行确认服务状态curl -I https://your-domain.example如果返回HTTP/2 200说明站点可以正常访问。接着做三件事打开线上首页源码确认 metadata 中的 title 和 description 已渲染。用手机访问线上地址确认菜单、字体大小、卡片间距正常。修改一篇文章或导航数据提交后观察自动部署是否生效。注意区分“预览部署”和“生产部署”。没合并到默认分支的提交会生成 preview 地址不会更新正式站点只有推送到默认分支才会触发生产部署。5.3 SEO 与访问体验个人网站不需要复杂的 SEO 策略但基础项不能省根布局设置langzh-CN帮助搜索引擎判断页面语言。为首页生成sitemap.xml和robots.txtNext.js 可以在app目录下添加对应路由。为每个页面设置独立标题避免整站只有一个标题。首屏图片使用 WebP 或压缩过的占位图减少移动端流量消耗。统计脚本选择隐私友好的方案避免影响页面加载速度。如果是纯学习项目这些都可以后补如果网站要长期公开建议第一次上线前就把 SEO 基础项做完。6. 常见问题排查6.1 AI 生成的代码本地跑不起来现象npm run dev启动失败终端直接报错。可能原因有三个Node 版本过低、依赖没有完整安装、路径别名指向了不存在的文件。检查顺序如下node -v npm install npm run dev如果报错信息包含Module not found说明某个 import 路径写错了。把完整报错贴回 AI 对话让它修正 import 路径不要自己猜测文件位置。6.2 样式错乱或移动端菜单失效现象页面能打开但布局挤在一起或者汉堡菜单点击没反应。这类问题在 Vibe Coding 项目里很常见根源通常是三类Tailwind CSS 配置缺失tailwind.config没有包含正确的页面目录导致类名没有生成。组件里直接调用window或document做条件判断服务端渲染时拿到不同的状态。菜单展开逻辑放在了服务端组件里useState不能被识别。检查顺序先看浏览器 Console 是否有 Hydration 告警再看 Tailwind 配置里的content数组是否覆盖了组件文件最后确认菜单组件开头有没有use client。6.3 部署失败现象代码 push 到仓库后Vercel 构建失败项目一直停留在上一版本。常见原因包括构建命令不匹配项目实际用next build平台配置成了vite build。生产构建依赖的环境变量没有配置。TypeScript 有类型错误本地 dev 模式不报错但npm run build会拦截。处理方式打开部署日志找到第一个 Error 行在本地跑npm run build复现对比本地 Node 版本和平台构建环境版本。Vercel 项目设置里可以指定 Node 版本要保持与本地一致。6.4 AI 在长对话中“失忆”现象对话进行到十几轮后AI 开始重复之前的错误或者反向修改你已经满意的东西。这不是工具坏了而是对话上下文太长早期约束被覆盖了。预防方法是在项目根目录放一个PROMPT.md把最重要的约束写进去并在关键对话轮次里重新贴一次。例如在修改导航组件前在对话里补充一句项目约束使用 Next.js TypeScript Tailwind CSS不引入 UI 组件库导航数据统一放在 config/site.ts 中只允许修改导航相关文件。当发现对话明显跑偏时不要继续在同一会话里拉扯直接新开会话把PROMPT.md作为第一轮输入。下面是常见问题的排查速查表问题现象可能原因检查方式处理建议本地启动报模块找不到import 路径错误看报错中的文件路径贴回 AI 修正路径样式不生效Tailwind 未扫描页面目录查 tailwind.config 的 content补充内容目录后重启菜单点击没反应组件缺少客户端声明看组件开头有无 use client改为客户端组件部署一直失败构建命令或 Node 版本不匹配查看平台构建日志本地 build 复现并修正AI 不遵守早期约束上下文过长检查对话是否超过十轮新开会话并粘贴 PROMPT.md7. 从“能打开”到“值得收藏”的最佳实践7.1 把提示词和需求文档当作资产Vibe Coding 项目里提示词不是一次性输入而是项目的核心资产。我在仓库里维护两个文件docs/requirements.md记录网站目标和页面结构PROMPT.md记录约束和常用修正指令。每次新开 AI 会话先让 AI 读取这两个文件再开始修改。这样做的好处是即使几天后想改动网站也不需要重新描述一遍需求即使换了工具也能把同样的上下文带过去。这种文档驱动的迭代方式比“每次打开就从头聊”稳定得多。7.2 审查 AI 代码时重点看四个位置Vibe Coding 最危险的不是 AI 写错代码而是开发者看了个大概就说“看起来没问题”。建议审查时重点看密钥和敏感配置是否出现在前端组件或提交记录里个人网站的 API key、邮箱地址不能硬编码。列表渲染是否都有key缺少 key 会造成状态错乱。外部链接是否设置了正确的协议和打开方式用户外链建议加relnoopener noreferrer。组件文件是否过度膨胀一个文件超过四五百行时应该要求 AI 拆分。这些检查不需要逐行读代码按关键词搜索和扫结构就能完成。7.3 个人网站的扩展方向第一版上线后可以按自己兴趣选择扩展方向博客内容改用 MDX 编写直接在 Markdown 里插入 React 组件。增加暗色模式用 Tailwind 的dark变体实现。导航页增加站内过滤搜索数据量小时在浏览器端过滤即可。增加访问统计用隐私友好的统计脚本站点。把导航数据改成远程 JSON让更新内容不触发重新部署。如果只是想要一个纯内容型博客用 XAMPP 搭建 WordPress 也是一条传统路线。但如果你想练习 Vibe Coding 工作流和前端部署流程静态站点生成器是更贴合的选择二者定位不同按需求取舍即可。7.4 上线前检查清单每次发布前对照这份清单过一遍本地npm run build通过无 Error。首页、导航、博客、关于四个页面均可访问。每个页面有独立标题和描述。根布局已设置langzh-CN。favicon 已替换成自己的图标。示例链接和占位图已替换或标注。移动端菜单展开收起正常。部署日志无红色错误线上返回 HTTP 200。自定义域名解析生效HTTPS 正常。Git 仓库包含全部源码PROMPT.md和docs/requirements.md已提交。Vibe Coding 的价值不在于省掉写代码的动作而在于把“从想法到可访问的页面”这个循环压缩到分钟级。个人网站是最好的练习场需求可控、技术栈固定、失败成本低。做完一轮之后你会明显感觉到自己的需求描述能力和代码审查能力比原来更敏感。下一步可以挑一个更大的项目比如内部工具或作品集平台用同一套流程验证它的边界在哪里。 Vibe Coding实战：用AI对话从零搭建个人网站全流程
Vibe Coding 是 2025 年开发者社区里出现频率很高的一个词通常认为来自 Andrej Karpathy 的一次公开分享。它的核心含义很直白开发者用自然语言描述想要的效果AI 工具生成大部分代码开发者负责把需求讲清楚、把生成结果审明白、然后快速迭代。个人网站是练习这套工作流最好的场地之一因为没有复杂业务、没有高并发、改版自由失败成本几乎为零。这里记录我实际用 Vibe Coding 思路搭建个人网站的过程内容包括需求描述怎么写、提示词模板怎么组织、AI 生成代码后要检查什么、怎么用 Vercel 这类平台一键部署以及上线后如何验证和排错。读完你可以直接照这套流程做一个属于自己的个人站或导航模板。1. 先搞清楚 Vibe Coding 到底在做什么1.1 不止是“让 AI 写代码”而是“把开发流程变成对话”很多人第一次听到 Vibe Coding会把它简单理解为“用 ChatGPT 写网页”。这个理解没有错但不够完整。传统开发里需求确认、技术方案、编码、调试、部署是一条线性流程每一步都要人来推动。Vibe Coding 把这条流程压缩成一个循环你说需求AI 生成代码你运行看效果发现问题再把反馈说给 AIAI 继续改。这个过程里开发者真正付出的不是打字而是三件事把需求表达准确、把生成结果审出问题、把迭代方向控制住。换句话说Vibe Coding 不是降低了开发的难度而是把难度从“怎么写代码”转移到了“怎么描述清楚”和“怎么判断好坏”。我在实际使用中最大的感受是当提示词写得足够具体时AI 第一次生成的页面就可能达到可用的水平当提示词写得模糊时后续会陷入“改了又改”的循环甚至比手写还慢。所以这篇文章会花不少篇幅讲需求描述因为这才是 Vibe Coding 真正的核心能力。1.2 Vibe Coding 与传统开发模式的关键差异为了说清楚适用边界这里用一张表对比传统开发与 Vibe Coding 的差异对比维度传统开发Vibe Coding需求表达文档、评审、接口设计自然语言描述、多轮对话代码来源开发者手写AI 生成开发者审查和修改项目上下文靠长期记忆和架构沉淀依赖对话窗口和当前文件容易遗忘调试方式阅读源码、打断点定位把报错信息贴回对话让 AI 给出修复适合场景复杂业务、高稳定性要求原型、个人网站、内部工具、页面开发主要风险开发周期长、沟通成本高AI 生成错误代码开发者审查不严表格里最值得注意的一行是“项目上下文”。Vibe Coding 工具的对话窗口通常只能记住当前会话的内容一旦项目文件多起来AI 就可能忘记“你要求过不要引入 UI 组件库”之类的约束。这也是为什么很多人用 Vibe Coding 做个人网站很顺手做公司中台系统却很痛苦——中台系统的上下文太庞大了。1.3 个人网站为什么是 Vibe Coding 的最佳练手场景个人网站满足 Vibe Coding 的理想条件以信息展示为主不涉及支付、复杂权限、敏感数据。数据结构简单大多数内容用 JSON 或 Markdown 就能维护。页面数量少首页、导航、博客、关于页基本覆盖全部需求。改版自由线上效果不满意可以推翻重来没有历史包袱。反过来如果项目涉及金钱交易、用户隐私、第三方系统对接、遗留代码维护就不要指望 AI 全包。这些场景对审计、异常处理、回滚机制要求很高AI 生成代码只能作为起点必须有资深开发者做完整 review。2. 从零构思个人网站给 AI 的输入质量决定输出质量2.1 动手前先把网站目标写清楚不要在项目描述只有一句话的情况下就打开 AI 工具。先用几句话回答三个问题网站给谁看、解决什么问题、期望访问者看完做什么。以我自己的项目为例目标描述是这个个人网站有三个用途展示我的前端作品整理常用开发资源和工具导航偶尔发布学习笔记。目标访问者是同行和潜在合作方。要求页面加载快、信息层次清楚、移动端体验好。这段描述在后续所有对话中都会反复用到。它定义了网站的内容边界AI 就不会在生成页面时擅自加上登录、购物车、后台管理等功能。2.2 设计最小页面结构个人网站最常见的结构是四个页面也可以合并成单页。这里用表格列一下页面核心功能主要内容首页第一印象建立身份认知个人简介、最近作品、最新博客导航页收藏和整理常用资源分类卡片、资源链接、搜索过滤博客页内容创作和知识沉淀文章列表、分类标签、阅读链接关于页展示背景和联系方式个人经历、联系方式、合作说明第一次做不要贪多。四个页面已经能覆盖 90% 的个人站需求多余的页面会让 AI 生成的内容越来越散。2.3 一份可复用的提示词模板把上面确定的目标、页面结构、技术约束组合成一段完整提示词。下面这份模板可以直接复制修改请帮我生成一个个人网站的完整前端项目要求如下 【定位】 一个前端开发者的个人主页包含作品展示、资源导航、博客列表、关于我四个板块。 【页面结构】 1. 首页个人简介、最近作品卡片、最近博客列表 2. 导航页分类展示常用开发资源和学习资料 3. 博客页按时间倒序展示文章列表 4. 关于页个人介绍和联系方式 【技术栈】 Next.js TypeScript Tailwind CSS不要引入重型 UI 组件库。 【样式】 浅色主题简洁现代卡片式布局顶部导航在移动端折叠为汉堡菜单。 【约束】 所有链接使用示例数据图片使用占位地址不要生成登录、支付、后台管理功能。这段提示词里最关键的是最后两行。“不要引入重型 UI 组件库”能避免 AI 生成大量没必要的依赖让项目保持轻量“不要生成登录、支付、后台管理”能防止 AI 自作主张扩展功能边界。生成后如果某个页面不是你要的样子不要推翻重来而是针对那一个页面单独说明问题。2.4 确认技术选型别被 AI 默认配置带跑Vercel 的 AI 建站入口默认偏向 Next.js 项目这对个人网站来说是合理的选型因为它和平台部署结合最好。但如果你有自己的偏好比如想用 Vue 生态、想用纯静态 HTML或者想用 Vitepress 管理博客应该在第一轮提示词里就明确写出来。技术选型确认后还要确认本地 Node.js 版本。Next.js 对 Node 版本有要求不同大版本需要的 Node 版本不同。建议统一用 nvm 管理nvm install 20 nvm use 20 node -v这一步看起来简单但很多“AI 生成的代码跑不起来”的报错最后都定位到 Node 版本和项目要求不匹配。3. 用 Vercel AI 建站入口从对话到上线的完整流程3.1 环境准备以“在 Vercel 上创建并部署个人网站”为例需要提前准备好下面的条件项目要求说明Node.js18 及以上推荐 20 LTS本地运行和构建项目Git安装并配置用户名邮箱提交代码触发自动部署GitHub 账号可直接使用免费仓库Vercel 部署需要关联仓库Vercel 账号支持 GitHub 登录免费额度可用于个人站点包管理器npm 或 pnpm安装项目依赖Vercel 的免费额度通常能满足个人网站场景但免费配额、构建时长、限制条件会调整落地前以平台当前页面的说明为准。3.2 第一步用提示词生成项目骨架登录 Vercel 后进入新建项目入口选择 AI 生成方式把上一节整理好的提示词粘贴进去。平台会返回一个可运行的项目结构并通常会自动创建关联的 Git 仓库。这里要注意AI 生成的“骨架”只是起点。生成完成后第一件事不是马上改代码而是先看一遍目录结构确认几个关键文件是否存在app/ layout.tsx page.tsx nav/page.tsx blog/page.tsx about/page.tsx components/ Navbar.tsx config/ site.ts如果发现页面目录缺失或者所有代码堆在同一个文件里要在第二轮对话里让 AI 拆分不要带着混乱结构继续开发。3.3 第二步本地运行与多轮迭代项目骨架生成后clone 到本地并安装依赖npm install npm run dev浏览器打开http://localhost:3000查看效果。迭代过程中遵循三条规则一次只让 AI 改一个点改完验证再进入下一项。浏览器控制台的报错原样贴回对话不要自己翻译或概括。明确告诉 AI“不要改其他文件”避免它顺手重构你已经满意的地方。多轮迭代是 Vibe Coding 的主要耗时环节。把每一轮对话控制在小范围最后得到的代码质量会明显高于一次性要求 AI 生成整个网站。3.4 第三步提交代码并触发自动部署本地验证没问题后把代码提交到远程仓库git add . git commit -m feat: 初始化个人网站 git push origin mainVercel 检测到远程仓库更新后会自动执行构建并生成线上预览地址。第一次部署完成后控制台会给出一个xxx.vercel.app形式的二级域名。这个域名可以直接用于分享也可以后续替换成自己的域名。如果不想走网页控制台也可以使用 Vercel CLInpm i -g vercel vercel vercel --prodCLI 方式适合习惯命令行的人第一次运行时按提示确认项目路径和构建命令即可。3.5 第四步绑定域名与检查部署结果个人网站最好绑定自己的域名。在 Vercel 项目设置里添加域名后按平台提示在 DNS 服务商处添加对应的 CNAME 或 A 记录。解析生效通常需要几分钟到几小时。上线后不要只看“页面能打开”就结束还要确认三件事HTTPS 是否自动生效、移动端访问是否正常、页面标题和描述是否正确展示。注意不同时间平台的界面入口和字段名可能不同不要死记某个教程里的截图按当前页面提示操作。遇到不确定的配置项先查看官方说明。4. 个人导航、博客列表等关键代码拆解4.1 导航收藏的数据结构个人网站的导航页本质是“分类 链接”的结构。对于个人规模的内容用 JSON 文件比数据库更合适修改方便、无需额外服务、对 AI 友好。下面是导航数据的示例结构{ categories: [ { name: 开发工具, slug: dev-tools, links: [ { title: GitHub, url: https://github.com, description: 代码托管与协作平台, icon: github } ] }, { name: 学习资料, slug: learning, links: [] } ] }这里有两个设计细节slug用于生成分类锚点或路由例如#dev-tools避免对中文分类名做 URL 编码icon保存的是图标名称字符串渲染时再映射到具体图标不要在数据文件里直接存 HTML 片段。这样数据文件保持纯数据后续迁移到数据库也容易。4.2 顶部导航组件导航组件在个人网站里出现频率最高也最容易出现移动端问题。用 Next.js App Router 写法导航需要点击展开菜单因此是一个客户端组件use client; import { useState } from react; import { siteConfig } from /config/site; export default function Navbar() { const [open, setOpen] useState(false); return ( header classNamesticky top-0 z-10 border-b bg-white/90 backdrop-blur div classNamemx-auto flex h-14 max-w-5xl items-center justify-between px-4 a href/ classNametext-base font-semibold {siteConfig.name} /a button typebutton classNamerounded border px-2 py-1 text-sm md:hidden onClick{() setOpen((v) !v)} 菜单 /button nav classNamehidden md:block ul classNameflex gap-5 text-sm {siteConfig.nav.map((item) ( li key{item.href} a href{item.href}{item.label}/a /li ))} /ul /nav /div {open ( nav classNameborder-t px-4 py-2 md:hidden ul classNameflex flex-col gap-2 {siteConfig.nav.map((item) ( li key{item.href} a href{item.href}{item.label}/a /li ))} /ul /nav )} /header ); }要点有三个use client声明让组件可以使用 state桌面端和移动端渲染同一份导航数据避免维护两份列表每个列表项都用key{item.href}作为唯一标识。siteConfig放在独立配置文件里后续增删导航项不需要改组件代码。4.3 全站 metadata 配置个人网站的 SEO 不复杂但 metadata 一定要配否则页面在搜索和分享时没有标题和描述。在 Next.js 的根布局或页面文件里导出 metadataimport type { Metadata } from next; const siteConfig { name: 我的个人网站, description: 前端作品、资源导航与学习笔记, url: https://example.com }; export const metadata: Metadata { title: { default: siteConfig.name, template: %s | ${siteConfig.name} }, description: siteConfig.description, openGraph: { title: siteConfig.name, description: siteConfig.description, url: siteConfig.url, type: website } };title.template的作用是当某个子页面自己设置标题时页面标题会自动变成“子页面标题 | 网站名”例如“关于我 | 我的个人网站”。根布局只设置一次所有子页面都会继承。4.4 常用配置参数速查Vibe Coding 生成的个人网站项目里最常打交道的参数和命令如下参数或命令含义常见值配置错误的典型表现npm run dev启动本地开发服务器端口 3000端口被占用时报EADDRINUSEnpm run build生成生产构建构建必须通过部署失败平台日志直接中断metadata.title页面标题建议不超过 60 字分享卡片标题截断或缺失langzh-CN页面语言声明中文站使用影响无障碍和搜索引擎识别siteConfig.nav导航数据数组对象路由重复时 React 会告警5. 运行验证从本地预览到线上检查5.1 本地预览检查清单开发模式下页面“能显示”不代表“没毛病”。本地预览时要按下面这张表逐项过一遍检查项操作方法通过标准页面导航点击顶部每个链接路由正确无 404移动端菜单浏览器切到手机宽度点击“菜单”展开收起正常无横向滚动图片资源检查所有 img 标签有alt属性占位图正常外链行为点开导航页所有链接新窗口打开链接地址正确控制台报错打开开发者工具 Console无红色 Error构建结果运行npm run build无 TypeScript 和编译错误5.2 部署后线上验证线上环境与本地存在差异常见的坑是本地正常、部署后样式丢失或接口 404。部署完成后先用命令行确认服务状态curl -I https://your-domain.example如果返回HTTP/2 200说明站点可以正常访问。接着做三件事打开线上首页源码确认 metadata 中的 title 和 description 已渲染。用手机访问线上地址确认菜单、字体大小、卡片间距正常。修改一篇文章或导航数据提交后观察自动部署是否生效。注意区分“预览部署”和“生产部署”。没合并到默认分支的提交会生成 preview 地址不会更新正式站点只有推送到默认分支才会触发生产部署。5.3 SEO 与访问体验个人网站不需要复杂的 SEO 策略但基础项不能省根布局设置langzh-CN帮助搜索引擎判断页面语言。为首页生成sitemap.xml和robots.txtNext.js 可以在app目录下添加对应路由。为每个页面设置独立标题避免整站只有一个标题。首屏图片使用 WebP 或压缩过的占位图减少移动端流量消耗。统计脚本选择隐私友好的方案避免影响页面加载速度。如果是纯学习项目这些都可以后补如果网站要长期公开建议第一次上线前就把 SEO 基础项做完。6. 常见问题排查6.1 AI 生成的代码本地跑不起来现象npm run dev启动失败终端直接报错。可能原因有三个Node 版本过低、依赖没有完整安装、路径别名指向了不存在的文件。检查顺序如下node -v npm install npm run dev如果报错信息包含Module not found说明某个 import 路径写错了。把完整报错贴回 AI 对话让它修正 import 路径不要自己猜测文件位置。6.2 样式错乱或移动端菜单失效现象页面能打开但布局挤在一起或者汉堡菜单点击没反应。这类问题在 Vibe Coding 项目里很常见根源通常是三类Tailwind CSS 配置缺失tailwind.config没有包含正确的页面目录导致类名没有生成。组件里直接调用window或document做条件判断服务端渲染时拿到不同的状态。菜单展开逻辑放在了服务端组件里useState不能被识别。检查顺序先看浏览器 Console 是否有 Hydration 告警再看 Tailwind 配置里的content数组是否覆盖了组件文件最后确认菜单组件开头有没有use client。6.3 部署失败现象代码 push 到仓库后Vercel 构建失败项目一直停留在上一版本。常见原因包括构建命令不匹配项目实际用next build平台配置成了vite build。生产构建依赖的环境变量没有配置。TypeScript 有类型错误本地 dev 模式不报错但npm run build会拦截。处理方式打开部署日志找到第一个 Error 行在本地跑npm run build复现对比本地 Node 版本和平台构建环境版本。Vercel 项目设置里可以指定 Node 版本要保持与本地一致。6.4 AI 在长对话中“失忆”现象对话进行到十几轮后AI 开始重复之前的错误或者反向修改你已经满意的东西。这不是工具坏了而是对话上下文太长早期约束被覆盖了。预防方法是在项目根目录放一个PROMPT.md把最重要的约束写进去并在关键对话轮次里重新贴一次。例如在修改导航组件前在对话里补充一句项目约束使用 Next.js TypeScript Tailwind CSS不引入 UI 组件库导航数据统一放在 config/site.ts 中只允许修改导航相关文件。当发现对话明显跑偏时不要继续在同一会话里拉扯直接新开会话把PROMPT.md作为第一轮输入。下面是常见问题的排查速查表问题现象可能原因检查方式处理建议本地启动报模块找不到import 路径错误看报错中的文件路径贴回 AI 修正路径样式不生效Tailwind 未扫描页面目录查 tailwind.config 的 content补充内容目录后重启菜单点击没反应组件缺少客户端声明看组件开头有无 use client改为客户端组件部署一直失败构建命令或 Node 版本不匹配查看平台构建日志本地 build 复现并修正AI 不遵守早期约束上下文过长检查对话是否超过十轮新开会话并粘贴 PROMPT.md7. 从“能打开”到“值得收藏”的最佳实践7.1 把提示词和需求文档当作资产Vibe Coding 项目里提示词不是一次性输入而是项目的核心资产。我在仓库里维护两个文件docs/requirements.md记录网站目标和页面结构PROMPT.md记录约束和常用修正指令。每次新开 AI 会话先让 AI 读取这两个文件再开始修改。这样做的好处是即使几天后想改动网站也不需要重新描述一遍需求即使换了工具也能把同样的上下文带过去。这种文档驱动的迭代方式比“每次打开就从头聊”稳定得多。7.2 审查 AI 代码时重点看四个位置Vibe Coding 最危险的不是 AI 写错代码而是开发者看了个大概就说“看起来没问题”。建议审查时重点看密钥和敏感配置是否出现在前端组件或提交记录里个人网站的 API key、邮箱地址不能硬编码。列表渲染是否都有key缺少 key 会造成状态错乱。外部链接是否设置了正确的协议和打开方式用户外链建议加relnoopener noreferrer。组件文件是否过度膨胀一个文件超过四五百行时应该要求 AI 拆分。这些检查不需要逐行读代码按关键词搜索和扫结构就能完成。7.3 个人网站的扩展方向第一版上线后可以按自己兴趣选择扩展方向博客内容改用 MDX 编写直接在 Markdown 里插入 React 组件。增加暗色模式用 Tailwind 的dark变体实现。导航页增加站内过滤搜索数据量小时在浏览器端过滤即可。增加访问统计用隐私友好的统计脚本站点。把导航数据改成远程 JSON让更新内容不触发重新部署。如果只是想要一个纯内容型博客用 XAMPP 搭建 WordPress 也是一条传统路线。但如果你想练习 Vibe Coding 工作流和前端部署流程静态站点生成器是更贴合的选择二者定位不同按需求取舍即可。7.4 上线前检查清单每次发布前对照这份清单过一遍本地npm run build通过无 Error。首页、导航、博客、关于四个页面均可访问。每个页面有独立标题和描述。根布局已设置langzh-CN。favicon 已替换成自己的图标。示例链接和占位图已替换或标注。移动端菜单展开收起正常。部署日志无红色错误线上返回 HTTP 200。自定义域名解析生效HTTPS 正常。Git 仓库包含全部源码PROMPT.md和docs/requirements.md已提交。Vibe Coding 的价值不在于省掉写代码的动作而在于把“从想法到可访问的页面”这个循环压缩到分钟级。个人网站是最好的练习场需求可控、技术栈固定、失败成本低。做完一轮之后你会明显感觉到自己的需求描述能力和代码审查能力比原来更敏感。下一步可以挑一个更大的项目比如内部工具或作品集平台用同一套流程验证它的边界在哪里。