很多人第一次接触 Vibe Coding 时想象出来的画面是这样的打开一个对话框把想法打进去几秒钟后一个网站就自动出现了。但真正动手做过的人很快会遇到两种反馈。一种是被 AI 生成页面的速度惊艳到另一种则是在部署、样式适配、代码维护阶段被各种意外问题劝退。于是“Vibe Coding 只能做玩具”“AI 写的代码没法上线”这类评价成了技术社区里最常见的观感。我的判断不太一样。Vibe Coding 的工程价值不在于“让 AI 替代你写代码”而在于它把“想法到可见原型”的成本压到了极低。真正拉开开发者之间差距的是你会不会把一个模糊的“我想要个有趣的个人网站”翻译成 AI 可以逐条执行的任务清单以及你在 AI 生成的代码上有没有做工程化的验证、审查和回滚。这篇文章里我用一个具体到可以落地的“有趣个人网站”作为完整案例记录从工具选型、需求拆解、提示词编写、代码生成、本地验证到最后部署上线的全过程。读完你得到的不是一句“AI 真厉害”的空泛感慨而是一套你可以直接复用到个人网站、内部工具和小型项目里的 Vibe Coding 工作流。1. Vibe Coding 到底改变了什么先说一个背景。Vibe Coding 这个词在近一年的技术社区里出现频率越来越高围绕它的搜索热词也从一个纯概念逐渐变成“vibe coding guide”“vercel ai vibe coding platform怎么使用”“鸿蒙vibe coding”这类非常具体的使用问题。这说明它已经不是少数人尝鲜的玩法而是开始进入真实开发流程的工具形态。Vibe Coding 的核心定义并不复杂通过自然语言描述你的意图和约束由 AI 完成代码生成、依赖说明、问题修复甚至结构调整开发者更多时间花在“描述需求—运行验证—反馈修复”的循环里。它是 AI 辅助编程从“补全一行”向“完成一个功能”演进的产物。如果把传统编程和 Vibe Coding 放在一起对比差异会非常明显维度传统编程Vibe Coding技术选型人工查文档、比较方案AI 根据场景推荐并生成配置需求表达需求文档、接口定义、任务拆分自然语言描述与约束写代码逐行手写AI 生成初稿人工审查修改调试方式日志、断点、阅读调用链把报错信息交给 AI 分析维护成本代码可读性由人保证必须依赖代码审查与测试兜底最大风险人力成本高开发周期长AI 可能生成“看似合理但逻辑错误”的代码从这个对比里能得出一个关键判断Vibe Coding 真正降低的是“从想法到原型”的转化成本但它没有消除“验证和维护”的成本。恰恰相反因为 AI 生成代码的速度快验证和维护的压力会集中到开发者身上。所以 Vibe Coding 适合什么场景不适合什么场景值得摊开说。适合的场景包括个人网站、内容页面、内部工具、UI 原型、中小型应用的第一版实现。这些场景对“快速看到结果”的诉求远大于对“复杂业务规则”的诉求。不太适合的场景则包括银行级事务系统、权限模型复杂的后台、需要极致性能的底层模块以及所有“出一次错就要付很大代价”的核心链路。当然如果代码审查严格、测试覆盖到位团队也可以在更复杂的项目里用好它但那已经是另一种玩法了。2. 为什么“有趣个人网站”是最好的入门项目第一次接触 Vibe Coding 的开发者最容易犯的错误是选了一个超出能力范围的项目比如一上来就做“带用户体系的电商后台”。需求太复杂AI 生成的代码会出现大量隐藏问题结果就是反复修 bug最后得出“Vibe Coding 不行”的结论。个人网站是相反的例子。它规模小、边界清晰、可迭代而且发布链路简单。即使某个功能实现得不够好也不会造成严重损失。更重要的是个人网站天然允许“有趣”这个目标存在你可以把个人网站做成一个带粒子动态背景的展示页也可以放进打字机文字、鼠标跟随、暗色模式切换等小交互。这些功能单独拎出来都不难但组合在一起足以体现 Vibe Coding 在“快速实现视觉与交互创意”上的优势。“有趣”这个词在需求层面其实很模糊。如果你直接跟 AI 说“做一个有趣的个人网站”它大概率会给你一个通用模板。所以在进入提示词环节之前需要先把“有趣”拆成具体的技术点。一个个人网站通常可以从这些维度定义“有趣”视觉层粒子背景、渐变光晕、毛玻璃卡片、动态网格。文字层打字机效果、滚动渐入、关键词高亮。交互层鼠标跟随、卡片翻转、点击涟漪、滚动进度条。内容层用个人经历、作品集、签名文案制造记忆点。我个人更推荐从“打字机效果 粒子背景 项目卡片 社交入口”这组组合起步。它不会让技术栈变得复杂但视觉效果已经能超出静态页面的平均水平。等到这一版跑通再迭代加入新的交互点你会更能理解 Vibe Coding 的节奏。3. 工具选型与环境准备在做任何代码生成之前先把工具链准备好。Vibe Coding 的工具选择不是“哪个最强就选哪个”而是“哪个能匹配你现有的工作流”。目前常见的选择有 AI 编辑器、AI 编程助手、终端型 AI Agent 以及平台提供的 AI 能力。3.1 AI 编码工具的基本分类编辑器集成类以 Cursor 为代表。它把 AI 对话、代码补全、文件编辑集成进编辑器适合大多数 Web 项目对新手最友好。IDE 插件类例如 GitHub Copilot。适合你已经在使用 VS Code、JetBrains 等编辑器不想更换工具链的情况。终端 Agent 类通过命令行和 AI 对话AI 直接操作文件、运行命令、读取报错。适合习惯终端操作、希望 AI 参与更多工程环节的开发者。平台内置 AI 类例如把项目部署到 Vercel 后可以在平台上使用 AI 增强的预览、日志分析和前端能力。很多人搜索“vercel ai vibe coding platform怎么使用”本质上就是希望把 Vibe Coding 的流程延伸到部署和托管环节。我的建议是不要同时尝试太多工具。先固定一个 AI 编码入口把“写代码—运行—反馈—修改”的循环跑顺再考虑是否需要引入平台侧的 AI 能力。工具之间确实存在能力差异但在个人网站这个量级的项目上差异远没有工作流本身的影响大。3.2 本地环境清单个人网站项目对本地环境要求很低一般只需要以下内容Node.js建议安装当前 LTS 版本具体版本以官方下载页为准。如果选择纯 HTML/CSS/JS 方式不装 Node.js 也可以但如果之后想用构建工具或本地开发服务器Node.js 是必要的。Git用于版本管理和回滚。编辑器推荐 VS Code 或 Cursor配合 AI 插件使用。部署账号一个 GitHub 账号用于存放代码一个 Vercel 账号用于部署。浏览器开发者工具验证页面效果和控制台报错。不需要在开始之前就把所有工具配置到完全理想的状态。Vibe Coding 的一个特点就是快速迭代环境能支撑第一步“在本地打开页面”就够了。3.3 项目目录怎么定建议在提示词里就让 AI 先定义一个清晰的项目结构。一个纯静态个人网站可以长这样vibe-portfolio/ ├── index.html ├── styles.css └── main.js如果选 Vite 这类工具则可以是vibe-portfolio/ ├── index.html ├── package.json ├── src/ │ ├── main.js │ └── style.css └── public/定义目录结构的一个重要原因是AI 生成代码时如果知道自己该把哪段代码放进哪个文件输出质量的稳定性会高很多。这也是 Vibe Coding 中“需求拆解”的一部分。4. 把“有趣”翻译成工程需求很多 Vibe Coding 翻车不是 AI 能力不够而是提问的人自己没想清楚。AI 可以生成代码但它不会替你做出产品决策。一个模糊的问题必然得到一个模糊的答案。所以Vibe Coding 的成败至少有八成发生在写提示词之前的需求拆解阶段。4.1 需求拆解四步法第一步确定页面区块。个人网站至少需要头部介绍、技能或标签、项目作品、联系方式这几个区块。第二步确定交互点。决定哪些元素是“动的”哪些是“静的”。比如打字机效果只作用于标题粒子动画固定在背景层不要让所有元素同时动起来否则页面会显得乱。第三步确定技术边界。明确告诉 AI这是一个纯前端项目还是需要后端是否需要引入框架是否需要依赖安装。技术边界不清楚AI 可能自动引入一个你并不熟悉的依赖给后续维护埋下隐患。第四步确定验收标准。例如页面能在本地打开标题文字有打字机循环效果背景粒子动画不遮挡内容在移动端视口下不出现横向滚动条。4.2 写一份 AI 可执行的需求备忘单把以上分析写进一个 markdown 文件例如requirements.md然后让 AI 阅读后再开始实现。这样做的价值在于聊天窗口里的上下文是临时性的而文件是持久化的AI 每次生成代码时都能回到同一份需求文档避免“越改越偏”。# 个人网站需求备忘单 ## 目标 一个有趣、轻量的个人主页展示个人介绍、技能标签和项目入口。 ## 技术约束 - 纯 HTML/CSS/JS不引入前端框架。 - 不需要后端服务。 - 需要有打字机循环效果和粒子背景动画。 ## 页面区块 1. 顶部 Hero 区域昵称、打字机标题、一句话简介。 2. 标签区域技能关键词使用毛玻璃卡片。 3. 项目区域至少展示 2 个项目入口。 4. 页脚社交链接与联系方式。 ## 验收标准 - 本地打开 index.html 可正常展示。 - 打字机效果循环播放光标闪烁。 - 粒子背景不遮挡文字内容。 - 移动端无横向滚动。4.3 一个实用的初始化提示词写好需求备忘单之后可以用下面这段提示词来启动 AI你是一名资深前端工程师。请基于 requirements.md 中的需求帮我实现一个个人主页。 要求 1. 先读取 requirements.md确认需求后再开始写代码。 2. 使用纯 HTML/CSS/JS不安装额外依赖。 3. 文件结构index.html、styles.css、main.js。 4. 代码要加必要注释样式使用 CSS 自定义变量管理主色调。 5. 完成后给出本地运行方式。注意到没有这段提示词没有让 AI“即兴发挥”而是明确了“先读需求文档”“技术边界”“文件结构”“注释规范”“运行方式”五个约束。这就是 Vibe Coding 和单纯的“让 AI 写一段代码”的区别前者像一个协作流程后者像一次性的问答。5. 完整代码实现从提示词到可运行页面接下来是全文的核心部分。我会以一个典型 AI 编辑器的交互方式为例逐步展示从提示词到代码落地的过程。下面的代码是经过简化和整理的最终版本你可以直接复制运行。5.1 生成 HTML 骨架第一步让 AI 根据需求文档生成index.html。预期得到类似下面的结构!-- 文件路径index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title阿澜 | 个人主页/title meta namedescription content一名热爱 Vibe Coding 与前端设计的开发者 / link relstylesheet hrefstyles.css / /head body canvas idparticle-canvas aria-hiddentrue/canvas main classhero p classhello你好我是/p h1 span idtypewriter/spanspan classcursor|/span /h1 p classdesc一个用自然语言驱动 AI 写代码的实践者/p div classtags aria-label技能标签 spanVibe Coding/span span前端开发/span spanAI 工具链/span /div a classbtn hrefhttps://github.com/sample relnoopener noreferrer 查看 GitHub /a /main section classprojects h2最近在做的事/h2 div classcard h3Vibe Portfolio/h3 p用自然语言迭代个人主页的完整实践。/p /div div classcard h3AI 小工具/h3 p把重复的文案处理任务交给 AI 自动完成。/p /div /section footer p© 2025 · Built with Vibe Coding/p /footer script srcmain.js/script /body /html这份 HTML 有几个关键点canvas放在 body 最前面作为背景层main和section层级清晰语义化标签方便后续做 SEO 和读屏优化。对于个人网站来说title和meta description建议在一开始就写好避免部署后还要返工。5.2 生成打字机效果与粒子背景有了 HTML 骨架后下一步是让 AI 实现两个核心交互打字机效果和粒子动画。这两块是让页面“看起来有趣”的关键。main.js可以这样实现// 文件路径main.js const phrases [ 阿澜, 一个 Vibe Coder, 喜欢把想法变成原型, 也喜欢把原型变得更好用 ]; const typewriterEl document.getElementById(typewriter); let phraseIndex 0; let charIndex 0; let isDeleting false; const typeSpeed 80; const deleteSpeed 40; const holdTime 1200; function typeEffect() { const current phrases[phraseIndex]; if (isDeleting) { charIndex--; } else { charIndex; } typewriterEl.textContent current.slice(0, charIndex); let delay isDeleting ? deleteSpeed : typeSpeed; if (!isDeleting charIndex current.length) { delay holdTime; isDeleting true; } else if (isDeleting charIndex 0) { isDeleting false; phraseIndex (phraseIndex 1) % phrases.length; delay 400; } setTimeout(typeEffect, delay); } // 粒子背景 const canvas document.getElementById(particle-canvas); const ctx canvas.getContext(2d); let particles []; function resizeCanvas() { canvas.width window.innerWidth; canvas.height window.innerHeight; } function createParticles(count 60) { particles []; for (let i 0; i count; i) { particles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: (Math.random() - 0.5) * 0.4, vy: (Math.random() - 0.5) * 0.4, radius: Math.random() * 2 1, color: rgba(96, 165, 250, ${Math.random() * 0.6 0.2}) }); } } function drawParticles() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach((p) { p.x p.vx; p.y p.vy; if (p.x 0) p.x canvas.width; if (p.x canvas.width) p.x 0; if (p.y 0) p.y canvas.height; if (p.y canvas.height) p.y 0; ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); ctx.fillStyle p.color; ctx.fill(); }); requestAnimationFrame(drawParticles); } window.addEventListener(resize, resizeCanvas); resizeCanvas(); createParticles(); drawParticles(); typeEffect();这段代码里打字机效果的核心是用setTimeout控制进度通过isDeleting在“输入”和“删除”之间切换。粒子动画则使用requestAnimationFrame每帧清空画布并重新绘制粒子位置。这种实现方式对个人网站来说已经足够流畅而且不依赖任何外部库也不需要网络请求。配套的styles.css核心部分如下/* 文件路径styles.css */ :root { --primary-color: #6366f1; --text-color: #1e293b; --bg-light: rgba(255, 255, 255, 0.7); --radius: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--text-color); background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); min-height: 100vh; } #particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: 40px 20px; } .hello { font-size: 18px; color: #64748b; } h1 { font-size: clamp(36px, 6vw, 72px); margin: 12px 0; } .cursor { color: var(--primary-color); animation: blink 0.8s step-end infinite; } keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .tags { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 24px 0; } .tags span { background: var(--bg-light); backdrop-filter: blur(8px); padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.6); } .btn { display: inline-block; padding: 12px 28px; border-radius: var(--radius); background: var(--primary-color); color: #fff; text-decoration: none; transition: transform 0.2s ease; } .btn:hover { transform: translateY(-2px); } .projects { max-width: 720px; margin: 0 auto; padding: 32px 20px; } .card { background: var(--bg-light); backdrop-filter: blur(8px); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; } media (max-width: 640px) { .hero { min-height: 50vh; } .tags { gap: 8px; } }这里使用了 CSS 自定义变量管理主题色用clamp()让标题字号随视口变化用backdrop-filter做出毛玻璃效果。整体样式并不复杂但视觉效果和默认 HTML 页面已经有明显差异。5.3 部署到 Vercel 的配置个人网站的部署有很多种方案Vercel 是最省心的一种。GitHub 仓库推上去之后Vercel 可以自动识别静态项目并完成部署。为了让部署更可靠可以添加一个vercel.json配置文件{ cleanUrls: true, trailingSlash: false, headers: [ { source: /assets/(.*), headers: [ { key: Cache-Control, value: public, max-age31536000, immutable } ] } ] }cleanUrls让访问example.com/about而不是example.com/about.htmltrailingSlash去掉路径末尾的斜杠静态资源缓存策略则能加快图片和脚本的加载速度。对个人网站来说这个配置足够日常使用。部署命令也很直接。在本地项目目录里安装并执行npx vercel首次运行会提示登录 Vercel 账号然后依次选择项目目录、确认构建配置。预览环境生成后如果要发布到生产环境再执行npx vercel --prod如果不想用命令行也可以在 Vercel 控制台导入 GitHub 仓库框架预设选择 Other构建命令留空输出目录留空。这个操作路径在不同版本的控制台里菜单名称会有差异但核心逻辑不变Vercel 识别静态文件然后托管上线。6. 运行结果与效果验证代码写完之后需要验证的不只是“页面能打开”还包括“需求里的每一项都实现了”。纯静态个人网站可以用最简单的本地服务器。在项目目录执行python3 -m http.server 8000然后浏览器访问http://localhost:8000。如果你的电脑只装了 Node.js也可以用npx serve .默认端口通常也是 3000 或 5000以命令行输出为准。打开页面后按下面这个清单逐项验证页面是否能正常加载没有明显的样式丢失。打字机效果是否循环播放光标是否闪烁。粒子背景是否显示在文字下方而不是遮挡文字。浏览器开发者工具的控制台是否有红色报错。缩小窗口到手机尺寸页面是否出现横向滚动条。项目卡片是否正常展示链接是否可以点击。如果其中任何一项失败第一件事不是重新生成代码而是打开控制台看报错信息。Vibe Coding 的一个核心习惯是把报错信息原样复制给 AI让它先解释问题再给出修复方案。很多人遇到问题后直接重写反而会在循环里浪费时间。7. 常见问题与排查思路Vibe Coding 看起来是“对话生成代码”真正落地时还是会遇到工程问题。以下是我认为个人网站场景里最高频的一批问题和排查思路问题现象可能原因排查方式解决方案启动项目时报 node 版本错误本地 Node.js 版本与依赖要求不匹配查看报错信息中的版本要求运行node -v对比安装匹配的 Node.js LTS 版本或使用 nvm 切换页面白屏控制台提示 JS 语法错误AI 生成的代码包含残缺逻辑或模型输出被截断打开控制台定位到具体文件和行号将报错粘贴给 AI要求修复并解释原因部署后找不到样式文件静态资源路径使用了绝对路径部署目录和本地不同在浏览器 Network 面板查看 404 请求检查link和script的路径优先使用相对路径打字机效果只执行一次循环逻辑缺少 index 回绕阅读 JS 中phraseIndex的变化让 AI 补充 phraseIndex 重置逻辑粒子动画性能差粒子数量过多或每帧重复创建对象打开 Performance 面板观察帧率减少粒子数量或限制部分粒子的复杂度AI 改动一个新需求后旧功能失效没有版本控制改进无法回退检查 Git 状态和最近一次提交每次改动前提交一个版本必要时回滚页面在手机端布局混乱没有响应式样式或视口 meta 缺失开发者工具切换到设备模拟模式检查viewportmeta 和media规则在 Vercel 上部署后环境变量泄漏在代码里写死了密钥或 token检查 GitHub 仓库和部署日志立即吊销密钥改用平台环境变量并清理 Git 历史这里特别想强调版本控制的重要性。Vibe Coding 很容易让你进入一种“不断让 AI 改代码”的状态但如果改到第 5 轮发现思路错了却无法回到第 2 轮的状态会很痛苦。所以每次让 AI 完成一个可运行的功能后就应该立刻提交一次 Git。这是个人项目里成本最低的保险。8. Vibe Coding 的最佳实践与工程建议个人网站只是入口如果你想真正把 Vibe Coding 用到更多项目里下面这些工程建议会比较有用。8.1 需求文档优先于聊天记录聊天窗口的上下文有长度限制而且很脆弱。换一个会话、换一个文件AI 可能就忘记了之前的约定。把需求、验收标准、技术约束都写进项目里的requirements.md让 AI 每次改动前先读一遍这是提升长期项目稳定性的关键做法。8.2 让 AI 生成测试而不是只生成功能对于个人网站可以请 AI 补充一些基础的 DOM 测试或端到端检查。对于更复杂的项目则可以要求 AI“先设计测试用例再实现功能”。这个过程会逼着 AI 把模糊需求具体化也有助于你在代码运行之前思考清楚边界条件。8.3 代码审查不能省AI 生成的代码不一定错但它往往“看起来太合理了”以至于人和人之间会放松警惕。特别是权限、支付、数据删除、敏感信息处理这些环节AI 生成的代码绝对不能直接上生产环境。必须做代码审查必须在小范围测试环境验证必须准备好回滚方案。8.4 安全边界要人工把关个人网站虽然规模小但安全问题同样存在。不要在代码里写死任何 API Key、密码或 token如果用到第三方服务优先通过部署平台的环境变量注入表单和用户输入需要做服务端验证不能只靠前端校验不要在页面上收集不必要的个人信息。Git 仓库也要定期检查确保没有把.env这类敏感文件提交进去。一旦泄露正确做法是立即吊销相关密钥而不是只删掉仓库里的文件。8.5 保持小步快跑的节奏Vibe Coding 的优势在于速度但速度也会放大混乱。建议每个功能点单独一次迭代每次只加一个交互或一个区块。修改后立即本地验证和提交再发起下一次改动。这个节奏看似保守反而是长期保持项目可维护性的方法。9. Vibe Coding 的边界与下一步从个人网站出发Vibe Coding 的应用面其实在快速扩展。社区里已经可以看到“鸿蒙vibe coding”这样的搜索和实践说明从 Web 到鸿蒙生态从静态页面到跨端应用开发者都在尝试用自然语言驱动 AI 完成更多开发任务。Vercel 这类平台也在把 AI 能力嵌入部署和托管流程这些信号都指向同一个方向AI 编程正在从“辅助写代码”演进为“参与完整开发链路”。但边界依然存在。业务越复杂、约束越多、出错代价越高AI 的自主空间就应该越小。Vibe Coding 并不会让编程基础失去价值它只是把编程能力的释放点从“手写每一行”转移到“定义问题、审查方案、验证结果”。你可以把它当成一个执行力超强但需要盯紧方向的结对同事速度你负责不了但方向、验收和责任必须由你来扛。如果只选择一个可执行起点我建议你下次打开 AI 编程工具时先不要让它写代码而是让它帮你把想法拆成需求清单。确认清单无误后再让它从第一项开始实现。你会发现同样的工具Vibe Coding 的体验会完全不同。 Vibe Coding实战：从需求拆解到个人网站部署上线全流程
很多人第一次接触 Vibe Coding 时想象出来的画面是这样的打开一个对话框把想法打进去几秒钟后一个网站就自动出现了。但真正动手做过的人很快会遇到两种反馈。一种是被 AI 生成页面的速度惊艳到另一种则是在部署、样式适配、代码维护阶段被各种意外问题劝退。于是“Vibe Coding 只能做玩具”“AI 写的代码没法上线”这类评价成了技术社区里最常见的观感。我的判断不太一样。Vibe Coding 的工程价值不在于“让 AI 替代你写代码”而在于它把“想法到可见原型”的成本压到了极低。真正拉开开发者之间差距的是你会不会把一个模糊的“我想要个有趣的个人网站”翻译成 AI 可以逐条执行的任务清单以及你在 AI 生成的代码上有没有做工程化的验证、审查和回滚。这篇文章里我用一个具体到可以落地的“有趣个人网站”作为完整案例记录从工具选型、需求拆解、提示词编写、代码生成、本地验证到最后部署上线的全过程。读完你得到的不是一句“AI 真厉害”的空泛感慨而是一套你可以直接复用到个人网站、内部工具和小型项目里的 Vibe Coding 工作流。1. Vibe Coding 到底改变了什么先说一个背景。Vibe Coding 这个词在近一年的技术社区里出现频率越来越高围绕它的搜索热词也从一个纯概念逐渐变成“vibe coding guide”“vercel ai vibe coding platform怎么使用”“鸿蒙vibe coding”这类非常具体的使用问题。这说明它已经不是少数人尝鲜的玩法而是开始进入真实开发流程的工具形态。Vibe Coding 的核心定义并不复杂通过自然语言描述你的意图和约束由 AI 完成代码生成、依赖说明、问题修复甚至结构调整开发者更多时间花在“描述需求—运行验证—反馈修复”的循环里。它是 AI 辅助编程从“补全一行”向“完成一个功能”演进的产物。如果把传统编程和 Vibe Coding 放在一起对比差异会非常明显维度传统编程Vibe Coding技术选型人工查文档、比较方案AI 根据场景推荐并生成配置需求表达需求文档、接口定义、任务拆分自然语言描述与约束写代码逐行手写AI 生成初稿人工审查修改调试方式日志、断点、阅读调用链把报错信息交给 AI 分析维护成本代码可读性由人保证必须依赖代码审查与测试兜底最大风险人力成本高开发周期长AI 可能生成“看似合理但逻辑错误”的代码从这个对比里能得出一个关键判断Vibe Coding 真正降低的是“从想法到原型”的转化成本但它没有消除“验证和维护”的成本。恰恰相反因为 AI 生成代码的速度快验证和维护的压力会集中到开发者身上。所以 Vibe Coding 适合什么场景不适合什么场景值得摊开说。适合的场景包括个人网站、内容页面、内部工具、UI 原型、中小型应用的第一版实现。这些场景对“快速看到结果”的诉求远大于对“复杂业务规则”的诉求。不太适合的场景则包括银行级事务系统、权限模型复杂的后台、需要极致性能的底层模块以及所有“出一次错就要付很大代价”的核心链路。当然如果代码审查严格、测试覆盖到位团队也可以在更复杂的项目里用好它但那已经是另一种玩法了。2. 为什么“有趣个人网站”是最好的入门项目第一次接触 Vibe Coding 的开发者最容易犯的错误是选了一个超出能力范围的项目比如一上来就做“带用户体系的电商后台”。需求太复杂AI 生成的代码会出现大量隐藏问题结果就是反复修 bug最后得出“Vibe Coding 不行”的结论。个人网站是相反的例子。它规模小、边界清晰、可迭代而且发布链路简单。即使某个功能实现得不够好也不会造成严重损失。更重要的是个人网站天然允许“有趣”这个目标存在你可以把个人网站做成一个带粒子动态背景的展示页也可以放进打字机文字、鼠标跟随、暗色模式切换等小交互。这些功能单独拎出来都不难但组合在一起足以体现 Vibe Coding 在“快速实现视觉与交互创意”上的优势。“有趣”这个词在需求层面其实很模糊。如果你直接跟 AI 说“做一个有趣的个人网站”它大概率会给你一个通用模板。所以在进入提示词环节之前需要先把“有趣”拆成具体的技术点。一个个人网站通常可以从这些维度定义“有趣”视觉层粒子背景、渐变光晕、毛玻璃卡片、动态网格。文字层打字机效果、滚动渐入、关键词高亮。交互层鼠标跟随、卡片翻转、点击涟漪、滚动进度条。内容层用个人经历、作品集、签名文案制造记忆点。我个人更推荐从“打字机效果 粒子背景 项目卡片 社交入口”这组组合起步。它不会让技术栈变得复杂但视觉效果已经能超出静态页面的平均水平。等到这一版跑通再迭代加入新的交互点你会更能理解 Vibe Coding 的节奏。3. 工具选型与环境准备在做任何代码生成之前先把工具链准备好。Vibe Coding 的工具选择不是“哪个最强就选哪个”而是“哪个能匹配你现有的工作流”。目前常见的选择有 AI 编辑器、AI 编程助手、终端型 AI Agent 以及平台提供的 AI 能力。3.1 AI 编码工具的基本分类编辑器集成类以 Cursor 为代表。它把 AI 对话、代码补全、文件编辑集成进编辑器适合大多数 Web 项目对新手最友好。IDE 插件类例如 GitHub Copilot。适合你已经在使用 VS Code、JetBrains 等编辑器不想更换工具链的情况。终端 Agent 类通过命令行和 AI 对话AI 直接操作文件、运行命令、读取报错。适合习惯终端操作、希望 AI 参与更多工程环节的开发者。平台内置 AI 类例如把项目部署到 Vercel 后可以在平台上使用 AI 增强的预览、日志分析和前端能力。很多人搜索“vercel ai vibe coding platform怎么使用”本质上就是希望把 Vibe Coding 的流程延伸到部署和托管环节。我的建议是不要同时尝试太多工具。先固定一个 AI 编码入口把“写代码—运行—反馈—修改”的循环跑顺再考虑是否需要引入平台侧的 AI 能力。工具之间确实存在能力差异但在个人网站这个量级的项目上差异远没有工作流本身的影响大。3.2 本地环境清单个人网站项目对本地环境要求很低一般只需要以下内容Node.js建议安装当前 LTS 版本具体版本以官方下载页为准。如果选择纯 HTML/CSS/JS 方式不装 Node.js 也可以但如果之后想用构建工具或本地开发服务器Node.js 是必要的。Git用于版本管理和回滚。编辑器推荐 VS Code 或 Cursor配合 AI 插件使用。部署账号一个 GitHub 账号用于存放代码一个 Vercel 账号用于部署。浏览器开发者工具验证页面效果和控制台报错。不需要在开始之前就把所有工具配置到完全理想的状态。Vibe Coding 的一个特点就是快速迭代环境能支撑第一步“在本地打开页面”就够了。3.3 项目目录怎么定建议在提示词里就让 AI 先定义一个清晰的项目结构。一个纯静态个人网站可以长这样vibe-portfolio/ ├── index.html ├── styles.css └── main.js如果选 Vite 这类工具则可以是vibe-portfolio/ ├── index.html ├── package.json ├── src/ │ ├── main.js │ └── style.css └── public/定义目录结构的一个重要原因是AI 生成代码时如果知道自己该把哪段代码放进哪个文件输出质量的稳定性会高很多。这也是 Vibe Coding 中“需求拆解”的一部分。4. 把“有趣”翻译成工程需求很多 Vibe Coding 翻车不是 AI 能力不够而是提问的人自己没想清楚。AI 可以生成代码但它不会替你做出产品决策。一个模糊的问题必然得到一个模糊的答案。所以Vibe Coding 的成败至少有八成发生在写提示词之前的需求拆解阶段。4.1 需求拆解四步法第一步确定页面区块。个人网站至少需要头部介绍、技能或标签、项目作品、联系方式这几个区块。第二步确定交互点。决定哪些元素是“动的”哪些是“静的”。比如打字机效果只作用于标题粒子动画固定在背景层不要让所有元素同时动起来否则页面会显得乱。第三步确定技术边界。明确告诉 AI这是一个纯前端项目还是需要后端是否需要引入框架是否需要依赖安装。技术边界不清楚AI 可能自动引入一个你并不熟悉的依赖给后续维护埋下隐患。第四步确定验收标准。例如页面能在本地打开标题文字有打字机循环效果背景粒子动画不遮挡内容在移动端视口下不出现横向滚动条。4.2 写一份 AI 可执行的需求备忘单把以上分析写进一个 markdown 文件例如requirements.md然后让 AI 阅读后再开始实现。这样做的价值在于聊天窗口里的上下文是临时性的而文件是持久化的AI 每次生成代码时都能回到同一份需求文档避免“越改越偏”。# 个人网站需求备忘单 ## 目标 一个有趣、轻量的个人主页展示个人介绍、技能标签和项目入口。 ## 技术约束 - 纯 HTML/CSS/JS不引入前端框架。 - 不需要后端服务。 - 需要有打字机循环效果和粒子背景动画。 ## 页面区块 1. 顶部 Hero 区域昵称、打字机标题、一句话简介。 2. 标签区域技能关键词使用毛玻璃卡片。 3. 项目区域至少展示 2 个项目入口。 4. 页脚社交链接与联系方式。 ## 验收标准 - 本地打开 index.html 可正常展示。 - 打字机效果循环播放光标闪烁。 - 粒子背景不遮挡文字内容。 - 移动端无横向滚动。4.3 一个实用的初始化提示词写好需求备忘单之后可以用下面这段提示词来启动 AI你是一名资深前端工程师。请基于 requirements.md 中的需求帮我实现一个个人主页。 要求 1. 先读取 requirements.md确认需求后再开始写代码。 2. 使用纯 HTML/CSS/JS不安装额外依赖。 3. 文件结构index.html、styles.css、main.js。 4. 代码要加必要注释样式使用 CSS 自定义变量管理主色调。 5. 完成后给出本地运行方式。注意到没有这段提示词没有让 AI“即兴发挥”而是明确了“先读需求文档”“技术边界”“文件结构”“注释规范”“运行方式”五个约束。这就是 Vibe Coding 和单纯的“让 AI 写一段代码”的区别前者像一个协作流程后者像一次性的问答。5. 完整代码实现从提示词到可运行页面接下来是全文的核心部分。我会以一个典型 AI 编辑器的交互方式为例逐步展示从提示词到代码落地的过程。下面的代码是经过简化和整理的最终版本你可以直接复制运行。5.1 生成 HTML 骨架第一步让 AI 根据需求文档生成index.html。预期得到类似下面的结构!-- 文件路径index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title阿澜 | 个人主页/title meta namedescription content一名热爱 Vibe Coding 与前端设计的开发者 / link relstylesheet hrefstyles.css / /head body canvas idparticle-canvas aria-hiddentrue/canvas main classhero p classhello你好我是/p h1 span idtypewriter/spanspan classcursor|/span /h1 p classdesc一个用自然语言驱动 AI 写代码的实践者/p div classtags aria-label技能标签 spanVibe Coding/span span前端开发/span spanAI 工具链/span /div a classbtn hrefhttps://github.com/sample relnoopener noreferrer 查看 GitHub /a /main section classprojects h2最近在做的事/h2 div classcard h3Vibe Portfolio/h3 p用自然语言迭代个人主页的完整实践。/p /div div classcard h3AI 小工具/h3 p把重复的文案处理任务交给 AI 自动完成。/p /div /section footer p© 2025 · Built with Vibe Coding/p /footer script srcmain.js/script /body /html这份 HTML 有几个关键点canvas放在 body 最前面作为背景层main和section层级清晰语义化标签方便后续做 SEO 和读屏优化。对于个人网站来说title和meta description建议在一开始就写好避免部署后还要返工。5.2 生成打字机效果与粒子背景有了 HTML 骨架后下一步是让 AI 实现两个核心交互打字机效果和粒子动画。这两块是让页面“看起来有趣”的关键。main.js可以这样实现// 文件路径main.js const phrases [ 阿澜, 一个 Vibe Coder, 喜欢把想法变成原型, 也喜欢把原型变得更好用 ]; const typewriterEl document.getElementById(typewriter); let phraseIndex 0; let charIndex 0; let isDeleting false; const typeSpeed 80; const deleteSpeed 40; const holdTime 1200; function typeEffect() { const current phrases[phraseIndex]; if (isDeleting) { charIndex--; } else { charIndex; } typewriterEl.textContent current.slice(0, charIndex); let delay isDeleting ? deleteSpeed : typeSpeed; if (!isDeleting charIndex current.length) { delay holdTime; isDeleting true; } else if (isDeleting charIndex 0) { isDeleting false; phraseIndex (phraseIndex 1) % phrases.length; delay 400; } setTimeout(typeEffect, delay); } // 粒子背景 const canvas document.getElementById(particle-canvas); const ctx canvas.getContext(2d); let particles []; function resizeCanvas() { canvas.width window.innerWidth; canvas.height window.innerHeight; } function createParticles(count 60) { particles []; for (let i 0; i count; i) { particles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: (Math.random() - 0.5) * 0.4, vy: (Math.random() - 0.5) * 0.4, radius: Math.random() * 2 1, color: rgba(96, 165, 250, ${Math.random() * 0.6 0.2}) }); } } function drawParticles() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach((p) { p.x p.vx; p.y p.vy; if (p.x 0) p.x canvas.width; if (p.x canvas.width) p.x 0; if (p.y 0) p.y canvas.height; if (p.y canvas.height) p.y 0; ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); ctx.fillStyle p.color; ctx.fill(); }); requestAnimationFrame(drawParticles); } window.addEventListener(resize, resizeCanvas); resizeCanvas(); createParticles(); drawParticles(); typeEffect();这段代码里打字机效果的核心是用setTimeout控制进度通过isDeleting在“输入”和“删除”之间切换。粒子动画则使用requestAnimationFrame每帧清空画布并重新绘制粒子位置。这种实现方式对个人网站来说已经足够流畅而且不依赖任何外部库也不需要网络请求。配套的styles.css核心部分如下/* 文件路径styles.css */ :root { --primary-color: #6366f1; --text-color: #1e293b; --bg-light: rgba(255, 255, 255, 0.7); --radius: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--text-color); background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); min-height: 100vh; } #particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: 40px 20px; } .hello { font-size: 18px; color: #64748b; } h1 { font-size: clamp(36px, 6vw, 72px); margin: 12px 0; } .cursor { color: var(--primary-color); animation: blink 0.8s step-end infinite; } keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .tags { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 24px 0; } .tags span { background: var(--bg-light); backdrop-filter: blur(8px); padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.6); } .btn { display: inline-block; padding: 12px 28px; border-radius: var(--radius); background: var(--primary-color); color: #fff; text-decoration: none; transition: transform 0.2s ease; } .btn:hover { transform: translateY(-2px); } .projects { max-width: 720px; margin: 0 auto; padding: 32px 20px; } .card { background: var(--bg-light); backdrop-filter: blur(8px); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; } media (max-width: 640px) { .hero { min-height: 50vh; } .tags { gap: 8px; } }这里使用了 CSS 自定义变量管理主题色用clamp()让标题字号随视口变化用backdrop-filter做出毛玻璃效果。整体样式并不复杂但视觉效果和默认 HTML 页面已经有明显差异。5.3 部署到 Vercel 的配置个人网站的部署有很多种方案Vercel 是最省心的一种。GitHub 仓库推上去之后Vercel 可以自动识别静态项目并完成部署。为了让部署更可靠可以添加一个vercel.json配置文件{ cleanUrls: true, trailingSlash: false, headers: [ { source: /assets/(.*), headers: [ { key: Cache-Control, value: public, max-age31536000, immutable } ] } ] }cleanUrls让访问example.com/about而不是example.com/about.htmltrailingSlash去掉路径末尾的斜杠静态资源缓存策略则能加快图片和脚本的加载速度。对个人网站来说这个配置足够日常使用。部署命令也很直接。在本地项目目录里安装并执行npx vercel首次运行会提示登录 Vercel 账号然后依次选择项目目录、确认构建配置。预览环境生成后如果要发布到生产环境再执行npx vercel --prod如果不想用命令行也可以在 Vercel 控制台导入 GitHub 仓库框架预设选择 Other构建命令留空输出目录留空。这个操作路径在不同版本的控制台里菜单名称会有差异但核心逻辑不变Vercel 识别静态文件然后托管上线。6. 运行结果与效果验证代码写完之后需要验证的不只是“页面能打开”还包括“需求里的每一项都实现了”。纯静态个人网站可以用最简单的本地服务器。在项目目录执行python3 -m http.server 8000然后浏览器访问http://localhost:8000。如果你的电脑只装了 Node.js也可以用npx serve .默认端口通常也是 3000 或 5000以命令行输出为准。打开页面后按下面这个清单逐项验证页面是否能正常加载没有明显的样式丢失。打字机效果是否循环播放光标是否闪烁。粒子背景是否显示在文字下方而不是遮挡文字。浏览器开发者工具的控制台是否有红色报错。缩小窗口到手机尺寸页面是否出现横向滚动条。项目卡片是否正常展示链接是否可以点击。如果其中任何一项失败第一件事不是重新生成代码而是打开控制台看报错信息。Vibe Coding 的一个核心习惯是把报错信息原样复制给 AI让它先解释问题再给出修复方案。很多人遇到问题后直接重写反而会在循环里浪费时间。7. 常见问题与排查思路Vibe Coding 看起来是“对话生成代码”真正落地时还是会遇到工程问题。以下是我认为个人网站场景里最高频的一批问题和排查思路问题现象可能原因排查方式解决方案启动项目时报 node 版本错误本地 Node.js 版本与依赖要求不匹配查看报错信息中的版本要求运行node -v对比安装匹配的 Node.js LTS 版本或使用 nvm 切换页面白屏控制台提示 JS 语法错误AI 生成的代码包含残缺逻辑或模型输出被截断打开控制台定位到具体文件和行号将报错粘贴给 AI要求修复并解释原因部署后找不到样式文件静态资源路径使用了绝对路径部署目录和本地不同在浏览器 Network 面板查看 404 请求检查link和script的路径优先使用相对路径打字机效果只执行一次循环逻辑缺少 index 回绕阅读 JS 中phraseIndex的变化让 AI 补充 phraseIndex 重置逻辑粒子动画性能差粒子数量过多或每帧重复创建对象打开 Performance 面板观察帧率减少粒子数量或限制部分粒子的复杂度AI 改动一个新需求后旧功能失效没有版本控制改进无法回退检查 Git 状态和最近一次提交每次改动前提交一个版本必要时回滚页面在手机端布局混乱没有响应式样式或视口 meta 缺失开发者工具切换到设备模拟模式检查viewportmeta 和media规则在 Vercel 上部署后环境变量泄漏在代码里写死了密钥或 token检查 GitHub 仓库和部署日志立即吊销密钥改用平台环境变量并清理 Git 历史这里特别想强调版本控制的重要性。Vibe Coding 很容易让你进入一种“不断让 AI 改代码”的状态但如果改到第 5 轮发现思路错了却无法回到第 2 轮的状态会很痛苦。所以每次让 AI 完成一个可运行的功能后就应该立刻提交一次 Git。这是个人项目里成本最低的保险。8. Vibe Coding 的最佳实践与工程建议个人网站只是入口如果你想真正把 Vibe Coding 用到更多项目里下面这些工程建议会比较有用。8.1 需求文档优先于聊天记录聊天窗口的上下文有长度限制而且很脆弱。换一个会话、换一个文件AI 可能就忘记了之前的约定。把需求、验收标准、技术约束都写进项目里的requirements.md让 AI 每次改动前先读一遍这是提升长期项目稳定性的关键做法。8.2 让 AI 生成测试而不是只生成功能对于个人网站可以请 AI 补充一些基础的 DOM 测试或端到端检查。对于更复杂的项目则可以要求 AI“先设计测试用例再实现功能”。这个过程会逼着 AI 把模糊需求具体化也有助于你在代码运行之前思考清楚边界条件。8.3 代码审查不能省AI 生成的代码不一定错但它往往“看起来太合理了”以至于人和人之间会放松警惕。特别是权限、支付、数据删除、敏感信息处理这些环节AI 生成的代码绝对不能直接上生产环境。必须做代码审查必须在小范围测试环境验证必须准备好回滚方案。8.4 安全边界要人工把关个人网站虽然规模小但安全问题同样存在。不要在代码里写死任何 API Key、密码或 token如果用到第三方服务优先通过部署平台的环境变量注入表单和用户输入需要做服务端验证不能只靠前端校验不要在页面上收集不必要的个人信息。Git 仓库也要定期检查确保没有把.env这类敏感文件提交进去。一旦泄露正确做法是立即吊销相关密钥而不是只删掉仓库里的文件。8.5 保持小步快跑的节奏Vibe Coding 的优势在于速度但速度也会放大混乱。建议每个功能点单独一次迭代每次只加一个交互或一个区块。修改后立即本地验证和提交再发起下一次改动。这个节奏看似保守反而是长期保持项目可维护性的方法。9. Vibe Coding 的边界与下一步从个人网站出发Vibe Coding 的应用面其实在快速扩展。社区里已经可以看到“鸿蒙vibe coding”这样的搜索和实践说明从 Web 到鸿蒙生态从静态页面到跨端应用开发者都在尝试用自然语言驱动 AI 完成更多开发任务。Vercel 这类平台也在把 AI 能力嵌入部署和托管流程这些信号都指向同一个方向AI 编程正在从“辅助写代码”演进为“参与完整开发链路”。但边界依然存在。业务越复杂、约束越多、出错代价越高AI 的自主空间就应该越小。Vibe Coding 并不会让编程基础失去价值它只是把编程能力的释放点从“手写每一行”转移到“定义问题、审查方案、验证结果”。你可以把它当成一个执行力超强但需要盯紧方向的结对同事速度你负责不了但方向、验收和责任必须由你来扛。如果只选择一个可执行起点我建议你下次打开 AI 编程工具时先不要让它写代码而是让它帮你把想法拆成需求清单。确认清单无误后再让它从第一项开始实现。你会发现同样的工具Vibe Coding 的体验会完全不同。