最近很多人讨论 Vibe Coding我不太想把它说成“不用写代码就能做网站”更准确的理解是你用一种更接近表达需求的方式让 AI 工具完成大量翻译成代码的工作。我自己用这套方法做了好几个个人网站有作品集、工具页、读书索引和纯玩玩的实验页。整体体验是如果只是做一个低风险的展示型网站Vibe Coding 是当前最值得认真试一下的思路之一。Vibe Coding 真正解决的问题是个人网站里的“启动成本”。过去想做一个好看的页面得先选框架、搭项目、想组件、调响应式这一套下来大量时间会花在跟 UI 细节较劲。现在你只需要把脑海里那个页面描述清楚AI 会用一套现成技术栈把骨架搭出来你再去改内容、调细节、决定保留或删除。这个流程一旦走熟从想法到上线几个小时到几天都有可能完成。下面会拆一套完整的实践方法包括开始前怎么想、准备什么环境、怎么跑通第一版、怎么做有趣的功能、上线后怎么持续迭代以及最容易踩的坑和排查顺序。1. 先理解 Vibe Coding 真正改变的是什么1.1 从“写代码”变成“描述期望”再变成“验收结果”Vibe Coding 这个名字听起来很玄落到实际操作里就是一条新的工作路径你提需求AI 生成代码你再验证和迭代。比如我做一个个人网站第一步不是新建项目也不是去后端配数据库而是先想清楚站点要有几个页面、每个页面传达什么感觉。以前写前端时我会先考虑技术选型用 React 还是 Vue用 Tailwind 还是普通 CSS用哪套路由。Vibe Coding 里面这些选型大部分被工具内置了或者会自动推荐一套主流组合。你要做的更像产品负责人把页面结构、内容顺序、交互反馈描述出来比如“顶部是一个简洁导航中间是作品卡片鼠标悬停有轻微上浮效果底部留版权栏”。但这里有一点很关键Vibe Coding 不等于彻底放弃理解代码。我自己在用的时候仍然会要求自己看得懂 AI 生成的 HTML 结构、样式命名、接口接法。因为网站迭代到后面问题基本不在“能不能生成”而在“能不能改对”。你如果连组件关系都不清楚AI 一改后面的样式可能全乱掉。一句话总结Vibe Coding 把“从零写”变成了“从描述到验证再到修改”核心能力是快速把想法变成可运行页面而不是彻底解放你的动手能力。1.2 个人网站为什么是 Vibe Coding 最容易跑通的场景不是所有软件都适合这个方式但个人网站几乎是最适合的。原因有三个。第一个人网站大多是展示型任务。展示型任务对稳定性要求不高不涉及交易、权限、高并发、复杂数据一致性。偶尔冒个泡、样式错一点修复成本很低不会造成业务事故。第二个人网站的迭代是滚动的。做完一版首页过两周想加一个读书清单再过一个月想换配色。这种小步迭代正好适合让 AI 帮忙改局部代码不需要重写整个架构。第三个人网站的“有趣”通常来自内容和组合而不是强大的底层能力。比如一个展示我在读什么书、在听什么歌、最近去了哪些地方的页面核心技术含量在于如何把数据展示得有设计感。Vibe Coding 的强项恰恰是快速生成这种设计感。所以我的建议很明确如果你一直想做一个自己的网站但总觉得没有足够时间从零搭工程那 Vibe Coding 值得认真试一次。不需要一开始就写出复杂系统只需要从一个能跑的“一页作品集”开始。先让它上线再慢慢加东西。2. 动手前先想清楚哪些个人网站适合用 Vibe Coding 做2.1 适合的类型与不适合的类型Vibe Coding 适合的个人网站我把它分成几类个人作品集首页、项目列表、关于页主要展示你做过什么适合设计师、前端开发、文案、运营。数字花园 / 知识索引把读过的书、看过的文章、收藏的链接做成结构化页面慢慢长出自己的知识库。个人工具页比如在线计算器、单位换算、每日摘抄、时间记录器。纯前端逻辑简单直接。实验游乐场放一些偏兴趣向的动效、卡片、音频可视化、随机算法生成画面。活动页或纪念页给某个阶段性的目标做一个独立页面比如“我的年度回顾”“旅行地图”。这些场景的共同点是页面数量少、依赖外部服务少、交互以展示和局部反馈为主。不适合用 Vibe Coding 直接做的我也列出来需要完整登录注册、支付结算、多人协作的网站。AI 能生成视觉页面但账号体系、数据库权限、支付回调会涉及一堆安全边界不适合直接交给生成代码。依赖大量私有接口和复杂状态管理的系统。比如对接公司内部接口或者前端状态需要跟后端实时同步这种场景更适合传统工程方式。对 SEO、无障碍、安全规范要求极高的项目。生成代码能跑不代表能满足生产级要求。用表格看更清楚网站类型是否适合 Vibe Coding原因个人作品集非常适合内容展示、页面结构简单、迭代频率高博客 / 笔记索引适合核心是内容排版和标签体系复杂度适中个人工具页适合前端逻辑简单可快速生成交互带登录 / 支付类网站不适合第一版直接用涉及权限和支付安全需要人工介入企业级复杂后台不建议状态管理、权限、接口边界复杂2.2 把“有趣”翻译成可验收的功能点当你决定做一个“有趣的个人网站”光有一个“有趣”的想法是不够的。AI 工具不理解“有趣”它只理解功能描述。所以我会先把“有趣”拆成几个具体功能点再交给它去实现。举个例子如果你想做一个“有趣的作品集”可以把“有趣”拆成这样首页有一个动态打字效果轮播展示“我是谁、我在做什么”。项目卡片有不同的背景色鼠标悬停时轻微翻转。导航栏滚动到一定位置后变成固定状态。站点支持深浅色主题切换。页脚显示一个每日随机句子。每个功能点都应该有验收标准。比如“动态打字效果”的验收标准是进入页面 2 秒内开始播放内容循环显示文字不超出屏幕宽度。这样 AI 生成完后你就能立刻判断是否达标。在开始写提示词之前先花十分钟把网站的功能清单列出来。这十分钟能避免后面反复改动的痛苦。功能点越具体AI 生成的结果越接近预期功能描述越模糊结果就越像一个普通模板。3. 环境准备选一套阻力最小的启动组合3.1 纯浏览器路线 vs 本地编辑器 AI 插件Vibe Coding 工作流里的环境准备可以很轻。我第一次做个人网站时没有从零搭前端工程而是直接用在线平台生成页面再逐步导出代码。这个流程适合没有本地开发环境的人。纯浏览器路线的优点很明显不需要安装 Node.js不需要配置包管理器。打开网页就能看到实时预览。平台已经内置了部署能力一键生成线上地址。适合快速改内容、改样式、做演示。缺点也很实在复杂项目在浏览器里操作会很别扭尤其是要接接口、做数据管理的时候如果平台把代码封装得很死后续迁移到本地会比较麻烦。另一条路线是本地编辑器加 AI 插件。这也是我现在更常用的方式。你建一个前端项目在编辑器里打开然后用 AI 插件做对话式修改让它生成一个组件、改一个布局、解释一段报错。本地开发的好处是代码可追踪、版本可管理、依赖和接口都能自己控制。我在实际使用中的建议是第一版可以用在线平台快速生成先看页面效果确认方向。页面方向确定后再把代码拉回本地用 Git 做版本管理继续迭代。如果本地环境对你没有压力直接本地起步也可以只不过前 30 分钟会花在环境配置上。3.2 部署环境和账号要准备什么Vibe Coding 时代部署已经集成到很多平台的默认流程里。以常见的托管平台为例工作流通常是你在平台上用提示词生成页面页面完成后自动获得一个预览地址确认没问题后再绑定自己的域名正式发布。也可以把生成后的项目推到代码托管平台让平台自动构建部署。走这条路需要准备的东西不多。一个代码托管平台账号。如果不习惯用命令行也有图形化客户端后面会方便很多。一个域名。如果没有可以先使用平台生成的免费域名等确认网站方向再换正式域名。本地电脑上不一定需要全套开发环境但如果要本地调试至少要准备 Node.js 和 Git。如果网站需要接天气、地图、表单提交等第三方接口再按需注册对应服务并把密钥保存好。这里要特别提醒密钥不要直接写进页面代码。AI 生成的代码很可能会把 API Key 写在前端请求里第一版能跑但一旦公开密钥就会暴露。更稳妥的做法是把密钥放到环境变量里在部署平台的后台配置再通过服务端接口或代理去调用。注意如果网站开始接第三方接口先确认平台是否支持环境变量再看密钥的调用位置。不要为了图快把密钥写死在页面中。4. 从“一句话想法”走到“第一版首页”4.1 把一个想法拆成四条提示词很多人在 Vibe Coding 里遇到的问题不是工具不会用而是提示词写得太粗糙。如果你只写“帮我做一个好看的个人网站”得到的结果通常很普通。我建议把一个大需求拆成四条提示词分别覆盖需求背景、页面结构、视觉风格、交互细节。下面是一个我自己常用的示例写法请你帮我做一个个人作品集网站的首页。 需求背景我是一名前端开发者有 5 个作品项目希望用卡片方式展示。 页面结构 - 顶部导航包含“首页、作品、关于、联系”四个链接。 - 中间是 Hero 区域大标题写明“你好我叫某某”。 - 下方是作品卡片区每张卡片包含项目名称、一句话介绍、技术标签。 - 底部是版权信息。 视觉风格 - 整体偏简约主色调用蓝色和白色。 - 字体使用无衬线体。 - 背景可以加一点淡灰色渐变。 - 卡片要有圆角。 交互细节 - 鼠标悬停到卡片时轻微上浮并出现阴影。 - 导航栏在页面滚动超过 60 像素后固定到顶部。这条提示词里已经包含了完整的信息层。AI 生成的页面会有清晰结构、明确风格和基本交互后续只需要替换文案和图片。不要期待一次性生成完美结果。比较推荐的做法是先生成一个初版然后逐个点提出修改。比如“Hero 标题再大一点”“卡片间距控制在 24 像素”“把导航栏改成黑色系”。这里要提醒一句如果你希望网站长期维护最好不要只靠在线平台的对话来生成。对话不会自动形成可复现的代码库。最好在生成后选择“导出代码”或“关联到代码仓库”把页面代码真正留下来。4.2 生成后的人工修正顺序AI 生成的代码通常会跑通但“跑通”不等于“正确”。我会按这个顺序做人工修正先看页面内容是否对。文字、链接、图片是否指向正确的位置占位内容是否替换干净再看响应式。把浏览器窗口拉窄看看手机端是否还能用。很多生成代码在桌面端好看手机端一塌糊涂。然后看交互状态。按钮有没有 hover 效果导航链接是否可用主题切换是否影响全部组件。最后看构建结果。如果在本地跑构建要确保命令能顺利结束没有报错。初次使用 Vibe Coding 的人最容易犯的错就是拿到初版后不加验证就发布。事实上生成页面的代码质量参差不齐有些会多出无用模块有些会漏掉关键样式。先动手改一遍才是我认为正确的节奏。5. 让网站变得“有趣”组件是一步步长出来的5.1 作品集页的基础组件顺序如果从零做一个个人网站我建议按照从“视觉架子”到“功能细节”的顺序来添加组件。第一步是页面骨架导航、Hero 区、内容区、Footer。先把骨架搭好再往里填内容。AI 生成一个这样的骨架非常快正常情况下一分多钟就能看到完整页面。第二步是内容卡片。作品集站点最重要的部分是项目卡片。每一张卡片应该包含项目名称、一句话介绍、技术标签、链接或演示入口。卡片不需要一开始就做得很炫先保证信息完整、布局整齐。第三步是细节打磨。这里可以加上主题切换、滚动动画、卡片翻转、代码块高亮、标签过滤等。比如你想要一个“按技术标签过滤项目”的功能不需要推倒重做只需要给 AI 描述清楚现有项目数据在哪点击标签后要过滤哪些卡片。要注意一个问题AI 在修改过程中经常会把已有的样式覆盖掉。我在实际修改时发现同一个页面反复改 6 到 8 次之后会出现样式堆叠混乱。解决办法是每次修改尽量针对一个局部区域不要同时让 AI 改多个不相关页面。5.2 增加交互和内容管理个人网站想变得有趣除了视觉还可以加一些轻量交互。比较常见的玩法有访问量计数展示在页面底部。“最近在听”模块展示你最近收藏的歌单。每日随机句子按钮点击后切换一句话。标签筛选功能筛选作品或笔记。联系表单让别人给你留言。这些功能单个来看都不复杂很适合用 Vibe Coding 边做边试。但也要知道它们各自的边界。访问量计数需要存数据要么接一个后端服务要么用云端数据接口不是纯前端能稳定实现的。每日随机句子只需要一个数组和随机函数纯前端就能做。表单提交则需要一个能接收消息的服务否则页面只是展示一个输入框提交后没有后续。我在做自己的网站时第一版只放了作品集和留言表单后来才逐步加了“最近在听”和随机句子功能。每次加一个小功能都能让网站慢慢变成你想要的样子。如果你不想引入数据库还可以考虑把内容做成结构化文本文件再让页面读取并渲染。这个方式很适合个人网站维护起来也简单。需要警惕的是不要一上来就做很重的功能。比如“用户注册 个人资料页 在线评论系统”这类功能听起来先进但一旦开发起来数据库、鉴权、接口、安全全部要处理Vibe Coding 生成的速度优势会被抵消。6. 部署、域名和持续打磨6.1 部署到托管平台的基础检查当网站第一版在本地或在线预览里看起来没问题就可以发布了。以常见的托管平台为例部署通常是自动化的你把代码推送到仓库平台检测到更新后自动构建并部署新的线上版本。发布前建议做这几项检查页面路由是否正常。刷新一个子页面时是否出现 404如果是单页应用需要确认平台是否配置了重写规则。环境变量是否齐全。如果网站依赖接口确认密钥和地址已经填到平台后台而不是写在页面代码里。资源是否失效。图片、字体、外部链接是否还能访问尤其是引用了外部字体文件时要确认跨域是否允许。HTTPS 是否自动生效。现在主流托管平台默认支持但自定义域名后要检查证书状态是否正常。如果部署失败不要立刻怀疑 AI 生成的代码有问题。先看构建日志。日志会告诉我们是在安装依赖时出错还是构建命令不对还是页面代码里有语法错误。大多数时候错误在日志里都能看到关键信息。6.2 上线后的迭代节奏网站上线之后真正的迭代才刚刚开始。我的经验是保持小额改动不要攒一堆功能再一次性改。比如今天只改一个按钮颜色和一段介绍文字明天再加一个项目卡片。这样每次变更都很小即使 AI 改错也容易定位和回退。另外要养成保存代码和记录提示词的习惯。你给 AI 用的提示词其实是一种“产品文档”。下次想改同一个功能把上次的提示词翻出来调整会比重新描述更稳定。上线后还可以定期看看访问数据。哪个页面访问最多哪个链接点不到哪个内容停留时间长。这些数据最能帮你判断网站要不要继续加功能或者哪些内容的优先级要提前。这段时间你会发现个人网站从“能打开”慢慢变成“有人愿意停留点一点”。这个阶段才是 Vibe Coding 做个人网站最值得的地方。7. 最容易踩坑的地方和排查顺序7.1 现象、输入、环境、参数、边界Vibe Coding 生成网站时遇到问题先不要急着怪 AI 工具。我建议按照下面这个顺序排查先看现象。是页面白屏、构建失败、样式错乱还是某个功能不生效现象不同下一步要查的方向完全不一样。再看输入。网站内容、图片路径、链接地址是否有明显错误很多页面显示异常其实是数据里混入了错误链接或空值。然后看环境。依赖版本是否过老Node.js 版本是否匹配部署平台是否缺少环境变量生成代码使用的依赖可能比较新本地环境太老会直接报错。再改参数。把构建命令、路由配置、样式参数逐个检查。同一个参数在不同运行环境里可能有不同要求。最后看工具边界。有些功能是 AI 模型本身解决不了的需要人工介入比如复杂的权限逻辑、账号体系、接口鉴权。这个顺序非常有用。我见过很多案例页面显示不出内容第一反应是让 AI 重写逻辑结果只是图片路径写错还有一些项目启动不了是因为本地 Node.js 版本和平台默认版本不一致。7.2 我踩过的几个具体问题下面这些是我在 Vibe Coding 做个人网站时真实遇到的问题仅供参考。中文字体问题。AI 默认生成的字体系统可能只包含西文字体结果中文页面显示成系统默认字体整个视觉档次下降。解决办法是引入中文字体来源或者定义一套合理的字体栈。图标缺失。生成页面里引用了图标库但忘记安装对应的依赖页面只显示一个方框。排查时需要看浏览器控制台请求是否返回 404。移动端布局崩掉。桌面端看着很好手机端导航变成三行堆叠。这通常是响应式断点没有处理好需要补充媒体查询。同时改多个页面导致遗漏。AI 在修改时可能只改到一个页面另一个页面还保留旧样式。遇到这种情况最好分开验证每个页面的效果。构建环境变量缺失。本地能跑部署后接口报错最常见的原因就是平台后台没有配置环境变量。这些问题的共同点是它们都不一定是 AI 能力不足而是生成代码与运行环境之间的衔接问题。按照上面的排查顺序大多数都能快速定位。7.3 新手最值得养成的三个习惯最后说三个习惯是我试用 Vibe Coding 一阵后觉得真正有用的事情。第一每次改动前先记录现状。保存当前版本页面截图或代码备份这样 AI 改崩时你能立刻回退。第二提示词要保留。你在对话里用的提示词比网站代码本身的注释更贴近你的需求变化应该当成重要资产。第三先做小验证再做大改动。不要一次性让 AI 重构整个网站。先用一个小组件或一个独立页面做完改动验证效果正常再进入下一步。8. 把个人网站当成长期迭代的作品而不是一次演示Vibe Coding 对个人网站最大的价值是把“做网站”这件事从一种工程任务变成了一种创作过程。你可以更快地把一个想法变成页面再根据使用体验慢慢调整。它的边界也很清楚适合低风险、展示型、滚动迭代的项目不适合一开始就要做权限、支付、高并发的复杂系统。我个人的建议是先把一个简单的作品集跑通再逐步加入你觉得有趣的小功能。过程中坚持做好版本管理、保留提示词、看构建日志。当你把一个网站从空壳慢慢改到有内容、有交互、有自己风格的时候你学到的会比打开工具时预期的多很多。如果你一直想做一个有趣的个人网站又觉得以前从零搭工程太麻烦现在就是很合适的尝试时机。先拆一个想法再写一条提示词跑通第一版后面的事情就会顺很多。