前两天朋友问我能不能不学前端也做一个像样的个人网站。我打开电脑用自然语言描述了几段需求AI 在几十秒内生成了一版可以浏览的页面。我又说“导航区太挤了改成两列配色换成低饱和度的绿色”它直接在对话里改了样式。整个过程我没有动手写布局也没有去改 CSS 文件。这就是最近被反复讨论的 Vibe Coding。在我看来Vibe Coding 最值得关注的地方不是它能替你写代码而是它把“表达需求”和“实现代码”之间的距离压缩到了一个前所未有的程度。个人网站是这个趋势里最适合上手的实验场范围小、反馈快、部署简单出了问题也不会影响重要业务。这篇文章我想从一次真实的 Vibe Coding 建站经历出发聊聊它的价值、流程、坑以及什么情况下应该克制使用。1. 先搞清楚 Vibe Coding 真正改变的是什么1.1 从“写代码”到“描述问题”很多人第一次接触 Vibe Coding会产生一种错觉这不就是让 AI 写网页吗事实上它和“让 AI 写一段代码”有一个本质差异。传统开发流程里拿到一个个人网站需求后你要先决定用原生 HTML、React 还是 WordPress然后搭建环境写组件调样式处理响应式再考虑部署。每一步都是“实现细节优先”。而 Vibe Coding 的流程是反过来的你先描述想要什么AI 负责把描述转成代码然后你看到结果继续提出修改意见。这个模式真正改变的是反馈回路。以前写一个页面至少要等编辑器提示、浏览器刷新、控制台报错再一步步定位问题。现在从想法到可浏览页面往往只需要一次对话。你不需要先记住所有语法规则也能把脑海里的“页面大概长什么样”变成一个真实可访问的静态站点。当然它不代表零门槛。我在实际使用时发现最花时间的不是“让 AI 生成”而是“把需求说清楚”和“验证生成结果对不对”。如果你连最基本的 HTML 结构、CSS 作用、路径概念都没有出错时就会很难定位。Vibe Coding 更像是在“会读代码”和“会写代码”之间又把标准降低了一截但没有低到“完全不用动脑”。1.2 它和模板、低代码、WordPress 不是一回事个人网站这个场景里很多人会想到模板建站、低代码平台以及 XAMPP 导入 WordPress 这类传统方案。它们看起来都能快速上线但工作方式完全不同。方案使用方式主要门槛可控性适合对象传统模板选模板、换内容看不懂模板结构时很难改动中高追求快速上线风格可以接受固定模板低代码平台拖拽组件、配置属性平台规则和套餐限制中低不想碰代码愿意接受平台锁定WordPress安装环境、配置插件、换主题环境搭建、主题维护、安全更新中高内容型博客长期更新Vibe Coding自然语言描述 AI 生成 人工审查需求表达和代码审查能力取决于你的审查能力想保持灵活度愿意探索新方式的人模板建站的问题在于你可以换配色、换文字但很难跳出模板的框架。低代码平台则被组件库的天花板限制遇到平台没提供的能力往往要绕路。WordPress 功能强大但环境配置、插件兼容、安全更新这些隐性成本对一个只想放个人介绍和作品链接的人来说有点重。Vibe Coding 不是模板也不是可视化搭建而是一种“人和 AI 反复对话逐步收敛出一个可用作品”的过程。它不会给你生成一千套风格让你选但你可以告诉它“我要一个偏日式排版的单页导航站”然后基于结果再往你真正想要的方向调整。1.3 变化的意义从“先学实现”到“先想清楚要什么”Vibe Coding 让我最受触动的一点是它把“思考用户需求”重新放回了核心位置。以前写一个个人网站我会先想用什么框架、用什么组件库、怎么配置构建工具。这些当然重要但它们不是这个项目的真正价值。真正决定网站好坏的是你的简介写得是否清楚、作品集是否足够有说服力、导航结构是否顺手、页面在手机上的阅读体验是否自然。这些能力和写不写代码没有直接关系。Vibe Coding 把“实现”的部分外包给了 AI把人拉回到“意图”和“判断”上。你需要想清楚站点用途、目标访客、内容层级然后把这一切翻译成 AI 能理解的语言。这个过程本身就是在做产品设计。但它有一个明显边界AI 可能生成看起来很对、实际有问题的代码。你如果不能通过预览、控制台和简单逻辑判断“哪里不对”就会陷入一种“看起来没问题但不知道哪里不对”的茫然。所以我会强调Vibe Coding 真正适合的是愿意承担“需求定义者”和“结果验证者”角色的人。2. 用 Vibe Coding 搭个人网站我的实操路径2.1 最小可用流程从想法到上线的五步如果你也想用 Vibe Coding 做一个个人网站我建议先别急着追求花哨。先把一个最小可用流程跑通。明确站点用途个人主页、导航站、作品集、博客还是几者结合。准备好内容素材姓名、头像、一句话简介、社交链接、项目链接、联系方式。用自然语言分模块描述让 AI 生成静态页面。在本地预览检查结构、样式、链接、响应式表现。推到 Git 仓库部署到免费托管平台绑定域名。很多人会跳过第 2 步。结果 AI 已经生成了完整的页面但里面的项目名称、案例照片、社交链接全是占位符真正替换时还得改一遍。不如一开始把素材列清楚让 AI 生成时就用真实内容。我当初第一次生成的 prompt 大概是这样的帮我生成一个个人网站首页包含 - 顶部导航首页、关于、项目、博客 - Hero 区域我的名字、一句话简介、主要方向 - 精选项目三张卡片每张有标题、一句说明、项目链接 - 页脚社交链接和联系方式 技术栈纯 HTML CSS JavaScript不需要框架。 风格极简主义留白多字体偏大移动端优先。 内容用中文先给出完整代码。这个 prompt 不算复杂但它把结构、内容、技术栈、风格都约束住了。AI 生成的页面至少能看出“导航、Hero、项目、页脚”几个模块而不是一团混杂的首页。2.2 工具和平台怎么选关于工具我的建议是不要相信“某平台是唯一选择”而是看它能否覆盖“生成-预览-部署”这条链路。AI 辅助编码可以使用 VS Code AI 插件也可以使用在线 AI 编码环境。关键是它能否直接预览生成结果。部署平台Vercel、Netlify、GitHub Pages 都是常见选择。个人静态网站用免费额度通常够用。Vercel 这类平台把 AI 生成、模板、预览、部署整合到了一起确实降低了“生成完不知道放哪里”的尴尬。如果你只是做纯静态页面GitHub Pages 仍然是零成本路径。Vercel AI Vibe Coding Platform 这类工具的具体使用方式不同版本界面不一样落地前先看官方文档。我个人的习惯是先理解“连接 Git 仓库 - 自动构建 - 部署到 CDN - 绑定域名”的基本模式再看新功能。这样无论 UI 怎么变化核心链路不会乱。2.3 免费创建个人网站的几种路径我整理了三条路径按从轻到重排序纯静态站点AI 生成 HTML/CSS/JS推到 GitHub Pages免费适合个人主页和导航站。静态托管平台把仓库连接到 Vercel/Netlifypush 后自动部署免费额度够个人站用。传统内容管理用 XAMPP 导入 WordPress适合想要后台编辑、长期写博客且不介意 PHP/MySQL 环境维护的人。XAMPP 导入 WordPress 这条路以前我也走过。它真实可行尤其适合本地调试 WordPress 主题和插件。但对一个只想快速展示自己的人来说安装环境、导入数据库、配置固定链接、处理插件安全更新每一步都可能在消耗耐心。Vibe Coding 更像是“先让页面跑起来后面再慢慢升级”而不是“先把整套系统部署好再开始写第一篇文章”。另外最近也能看到“鸿蒙 Vibe Coding”一类的话题意思是在鸿蒙生态里尝试 AI 辅助编程。它的价值更多在于端侧开发而个人网站这类轻量项目用平台无关的 Web 技术栈反而更容易起手。你可以关注端侧趋势但不一定要在最开始就被生态绑定。2.4 从“一次性生成”到“项目化”一个只有index.html的页面文件所有内容挤在一起也能运行。但只要你想继续加博客、换样式、改交互就会很痛苦。所以第二次生成时我会有意识地把项目拆成多个文件。site/ ├── index.html ├── about.html ├── blog.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── assets/ ├── images/ └── favicon.png我会在 prompt 里加一句“请把 CSS 放在 css/style.cssJavaScript 放在 js/main.js图片资源使用相对路径”。这样生成出来的代码更接近真实项目结构也方便后续用 Git 管理。注意不要上来就想让 AI 一次生成五个页面。先让首页跑通再逐步生成关于页、博客页。范围控制得越小越好定位问题。3. 真正决定体验的不是模型有多强而是你的输入能力3.1 把“想法”翻译成“可生成的需求”使用 Vibe Coding 时间越长我越觉得它考验的是“需求表达能力”。同一个 AI你给它的是一段含糊描述它还给你的是一个含糊页面你把需求拆得足够细它生成的质量就会明显上升。我总结了一个“需求描述清单”每次生成前先过一遍目标用户是谁是自己用还是给别人看。页面包含哪些模块导航、Hero、作品、时间线、联系表单。每个模块要放哪些内容文案、图片、链接都要具体。视觉风格倾向什么极简、科技感、手写风格、轻量商务。技术栈有没有限制纯静态、React/Vue、还是可以引入 Tailwind。交付形式是什么单 HTML 文件还是多文件项目。一个更完整的 prompt 可能是我正在做一个个人作品集网站目标用户是招聘方和合作方。 需要四个页面首页、关于、项目、博客。 首页结构 - 顶部导航首页、关于、项目、博客移动端收起为汉堡菜单 - Hero 区姓名定位是“前端开发 / 技术写作” - 精选项目区从 4 个项目中选 3 个展示每个项目卡片包含标题、说明、标签、外链 - 联系区邮箱和 GitHub 链接 技术栈HTML CSS 原生 JS不使用框架。 响应式手机端优先桌面端 max-width 1200px。 视觉浅灰背景深灰文字强调色使用暖橙色卡片圆角 12px。 请先生成一个完整可运行的首页。这里的关键不是格式漂亮而是信息足够具体。AI 拿到这样的输入至少不会把“导航”猜成“侧边栏”也不会把“精选项目”漏掉。3.2 即使不写代码也要学会“读代码”我知道“Vibe Coding”很容易让人产生依赖感仿佛只要描述得当AI 就能交付完美成品。但真实情况是AI 生成的代码也可能存在低级问题。哪怕你不想手写代码也至少应该会做这几项检查HTML 结构里导航、Hero、项目区、页脚是否都出现了。链接的href是否指向真实存在的页面或地址。CSS 类名与 HTML 里的类名是否一致。JavaScript 中访问的元素id是否真的存在。图片路径是不是相对路径会不会在部署后变成失效的本地路径。这几项不要求你会“写”只要求你会“看”。但它们是 Vibe Coding 使用者和 AI 之间极其重要的平衡机制。没有这层检查AI 给你一个 404 页面你可能还以为是部署问题。3.3 分步生成比“一步到位”更可靠很多初学者会犯同一个错误把“个人网站的完整需求”一次性丢给 AI希望得到完美成品。结果通常是一份非常长、互相纠缠的代码。后续想改某个按钮颜色却导致某个完全不相关的样式被破坏。我后来改成“分步生成”先生成 HTML 骨架确认信息结构。再要求添加 CSS先看整体风格。然后调整不同屏幕尺寸下的表现。最后添加交互逻辑比如导航高亮、滚动监听、移动端菜单。每一步都在“小范围变更”内进行。AI 的修改影响面较小我也能及时预览并回退。注意同一个对话里叠加大量需求会让 AI 丢失上文约定。一次对话最好只做一个任务的微调。如果项目变得复杂建议把关键约定写进 README而不是指望 AI 记住。3.4 本地和部署环境里的隐蔽坑有几个问题是我使用 Vibe Coding 生成个人网站后反复遇到的。图片路径AI 可能生成srcimages/avatar.jpg但实际图片放在assets/images/下。部署后图片全部裂开。CDN 依赖AI 用到了某个字体库或图标库的 CDN但你的网络环境访问不到或者速度很慢。敏感信息AI 生成的代码里如果包含 API Key、密码之类的占位符你可能无意识把它推到了公开仓库。版本兼容AI 生成的代码依赖了某个组件库的最新特性但你的构建环境里还是旧版本导致构建失败。这些问题单靠 AI 自己很难发现因为它们不在自然语言描述的范围里。所以每次部署前我都要做一次“环境检查”确认文件路径、依赖引用、敏感信息、构建日志。4. 从“有趣”到“可用”上线后必须补齐的工程化4.1 部署别把 HTML 文件拖进服务器就完事Vibe Coding 完成后很多人的第一反应是把文件发给朋友看或者直接丢进一个静态空间。这样当然可以但如果你想长期维护我更建议走“Git 托管 自动部署”的链路。以静态网站为例常见流程是mkdir my-site cd my-site git init git add . git commit -m feat: init personal site然后把仓库推到 GitHub、GitLab 或 Gitea。接着在 Vercel 或 Netlify 上导入这个仓库选择构建命令为npm run build或什么都不填纯静态页面平台会自动检测并部署。如果你用的是 Vercel它会自动生成预览域名。绑定自定义域名后HTTPS 证书通常会自动配置。这个流程最关键的收益是以后每次修改代码只需要git push平台会自动重新构建和发布。注意部署前先检查一遍代码里有没有.env文件、密钥、本地绝对路径以及未替换的占位文案。公开仓库一旦提交历史记录里不容易彻底删除。4.2 SEO 与基础统计个人网站做完后至少要让搜索引擎知道你是谁。每个页面设置唯一的title和meta description。生成一个sitemap.xml让搜索引擎更容易收录。添加robots.txt明确哪些路径可以爬取。如果使用的是 React 或 Vue考虑预渲染或静态生成否则爬虫可能看到空页面。统计方面不建议一上来就接一堆分析工具。先接入一个简单的访问统计脚本能看到访问量、来源、页面排行就够了。等网站内容慢慢增多再决定要不要细化事件埋点。4.3 日志、错误跟踪与持续更新静态个人网站也可能出问题。比如图片 404、表单提交失败、某些手机上样式错乱。如果这些错误只出现在访客端你很难察觉。轻量做法是接入前端错误上报工具例如 Sentry 的免费额度。把window.onerror、未捕获的 Promise 异常上报到后台。这样你不需要天天盯日志也能知道网站在出什么问题。内容更新方面如果只是一年内改几次简介直接改 HTML 即可。如果开始写博客我建议用 Markdown 文件管理文章通过构建脚本生成静态页面。这比每次复制粘贴文章到 HTML 里更可控也比引入一个大型 CMS 更轻。4.4 版本管理永远是最后一层安全网Vibe Coding 生成的代码很容易让人产生“这不是我写的重要代码”的错觉于是不使用 Git。这是很危险的。AI 反复修改时可能把原本正常的区域弄坏。如果有 Git你可以git diff查看每次改动也可以一键回滚到上一个能运行的版本。对于个人网站来说这种“安全网”比任何新功能都重要。我会在项目的第一个 commit 就生成好之后无论 AI 怎么改都先确认 diff再提交。5. 常见问题排查与适用边界5.1 当你发现网站不对时按这个顺序排查Vibe Coding 项目出问题时最忌讳没有头绪地乱试。我建议按下面的链路逐层检查看现象页面空白、样式错乱、图片 404、点击按钮没反应、部署后构建失败。看输入HTML 结构是否完整内容是否真实文件路径是否和目录一致。看环境本地和线上是否用了不同版本的 Node.js、依赖版本、环境变量。看参数构建命令、输出目录、路由配置、域名解析是否正确。看工具边界AI 生成的代码是否超出当前平台能力比如前端无法直接读写数据库。举两个具体例子。页面空白时先按 F12 打开浏览器控制台。看到 JavaScript 报错“某个元素为 null”一般是 HTML 里没有对应 id或者脚本被放在元素前面。看到“Failed to fetch resource”再去检查路径。部署后 404先看平台日志。确认项目根目录是否正确构建输出目录是否是dist或build。纯静态页面不要开启 SPA fallback否则不存在的路径可能都被解析到首页。5.2 Vibe Coding 真正适合的场景聊了这么多还是要给 Vibe Coding 划定边界。不是所有东西都适合用自然语言直接生成。适合的场景个人介绍页、作品集、导航站。活动落地页、单页宣传页面。组件原型快速验证某个交互想法。内部小工具例如生成一个表格、一个时间线页面。学习项目用来理解一个布局或一个效果是怎么实现的。这些场景的共同点是范围可控、错误成本低、不需要复杂的权限管理和数据一致性保障。不适合的场景涉及用户注册、登录和复杂权限的系统。涉及支付、订单、金融交易的应用。需要严格审计和合规的数据处理场景。大流量、高并发的基础设施。原因很简单AI 生成的代码可能“看起来能跑”但它的安全模型、边界检查、异常处理不一定经得起推敲。你可以用它做原型直接上生产前必须由有经验的人做完整 review。5.3 我的最终判断Vibe Coding 不是“不会写代码也能做网站”的万能魔法而是“把越来越多实现细节交给机器把人的注意力转移到意图和验证上”的工作方式。个人网站能跑通不是因为 AI 有多聪明而是因为项目边界足够小反馈足够快错误成本足够低。当你在这种低风险场景里练熟了表达、拆解、审查和回滚能力再去面对更复杂的项目才有底气。真正值得长期关注的也不是某个 AI 工具或平台更新而是你如何在一个“写代码”越来越便宜的时代保持对结果负责的能力。先从一个有趣的个人网站开始挺好。