最近“Vibe Coding”这个词频繁出现在各大技术社区。简单来说它不是一种新语言也不是某个框架而是一种新的写代码方式用自然语言描述你想要的“感觉”让 AI 完成代码的生成、修改和排错你只需要像导演一样把控方向。个人网站恰好是 Vibe Coding 最合适的练手场景规模小、表达自由、没有复杂的业务逻辑、随时可以推翻重来。本文会从 Vibe Coding 的概念讲起带你把“设计感”翻译成 AI 能理解的提示词完整走一遍从零生成个人主页到部署上线的流程最后附上常见问题的排查思路和工程建议。你不需要精通前端只要会用基础的文件操作、能看懂 HTML/CSS 的大致结构就能跟着做出来。如果你想做一个有设计感、能部署上线、还能持续迭代的个人网站这篇文章应该能帮到你。1. Vibe Coding 到底是什么1.1 从“逐行敲代码”到“描述意图”Vibe Coding 这个说法在 2025 年前后开始流行核心含义是开发者不再逐行编写代码而是用自然语言向 AI 描述功能需求和视觉风格由 AI 生成初始代码开发者再通过一轮轮“对话”调整细节。你可以把它理解成“面向 AI 的编程方式”。传统开发流程是想明白需求。拆解功能模块。逐行实现。调试排错。而 Vibe Coding 的流程变成了用一句话或一段文字描述你想要的效果。检查 AI 生成的结果。指出不满意的地方继续描述。重复直到符合预期。这种模式特别适合界面类项目。因为网页的“设计感”很难用精确的技术指标描述但很容易用语言表达比如“暖白色背景”“卡片圆角大一点”“标题用衬线字体”“间距再松一些”。AI 能理解这些描述并直接改代码。1.2 为什么个人网站是 Vibe Coding 的最佳场景个人网站有几个特点让它非常适合 Vibe Coding。第一技术栈简单。个人主页通常只需要 HTML、CSS、少量 JavaScript没有复杂的后端逻辑和数据库设计。AI 生成这种代码的准确率很高。第二视觉权重高。个人网站的核心是“表达”设计感、排版、配色、动效都比业务系统重要。而这些恰好是可以用语言描述的部分。第三迭代成本低。今天的个人网站明天可能完全改版与其手动维护一套复杂工程不如让 AI 快速生成新版本你负责审阅和微调。第四部署免费。静态网页可以托管在 Vercel 等平台有免费额度配合自定义域名就能得到一个正式的个人网站。1.3 哪些场景不适合 Vibe Coding客观地说Vibe Coding 不是万能的。涉及强业务逻辑、权限控制、复杂状态管理、支付流程、数据一致性要求的系统仍然需要严谨的人工设计。AI 生成代码的“感觉”很好但在边界条件、异常处理、安全校验上可能考虑不周。另外如果你完全不懂编程只靠 AI 生成的代码一旦出现部署报错或样式错乱排查会很困难。所以本文建议的姿势是Vibe Coding 负责“生成”你负责“理解”和“把关”而不是把 AI 当成魔法盒子。2. 环境准备工具箱与项目规划2.1 本地开发环境做个人网站不需要重型环境。你只需要一个现代浏览器推荐 Chrome 或 Edge用于本地预览和调试。一个代码编辑器推荐 VS Code免费且插件丰富。Git用于版本管理和后续部署到远程仓库。如果你不确定本机是否安装了 Git命令行执行git --version如果提示找不到命令需要先安装 Git。安装完成后顺手配置一下基本信息git config --global user.name your-name git config --global user.email your-emailexample.com版本需要根据你的系统实际情况调整这里重点是先把基础工具准备好。2.2 AI 辅助工具选型Vibe Coding 的“生产力”主要来自 AI 工具。目前常见的选型有几类。第一类是 IDE 内置 AI 编程助手比如 Cursor、GitHub Copilot、Windsurf 等。它们能直接在编辑器里和你对话修改文件、生成代码、解释报错适合本地开发。第二类是网页版 AI 对话工具比如 ChatGPT、Claude 等。你可以让它生成完整代码再复制到本地文件中。这种方式门槛低但文件较多时来回复制比较麻烦。第三类是 Vercel 推出的 v0 这类 AI 生成界面工具。它可以用自然语言生成 React / Tailwind 风格的组件和页面生成后可以直接在 Vercel 上部署。具体功能以官网说明为准适合想快速做出原型、又愿意接触 React 生态的读者。本文的实战部分以“网页版 AI 本地文件 Vercel 部署”为主线因为这条路最通用也最容易理解每一步在做什么。2.3 部署平台与域名部署个人网站推荐 Vercel。原因有三对静态网站和前端项目支持友好免费额度足够个人使用。支持 GitHub 仓库自动导入推送代码后自动构建部署。提供免费的.vercel.app二级域名也可以绑定自己的域名。如果你希望以后也维护一个博客考虑 SEO 和自定义域名可以再买一个域名国内服务商或海外服务商都可以根据预算和备案需求决定。本文不展开域名备案细节只演示 Vercel 免费部署流程。2.4 项目目录规划在开始之前先规划一个最简单的项目结构。个人主页建议分为这几个层次my-personal-site/ ├── index.html # 页面主入口 ├── style.css # 全局样式与设计变量 ├── script.js # 交互脚本 ├── assets/ │ ├── images/ # 本地图片资源 │ └── fonts/ # 如需本地字体 └── .gitignore # 忽略不需要提交的文件不要一上来就用重型框架。Vibe Coding 的第一步是先跑通再考虑优化。纯 HTML/CSS/JS 足够支撑一个设计感不错的个人主页。3. 设计感的内功先“Vibe”再“Coding”很多人拿到 AI 工具后第一句提示词是“帮我做个个人网站”。结果生成的页面千篇一律灰白卡片、居中文字、蓝色按钮像同一个模板刻出来的。问题出在你没有先把“设计感”讲清楚。Vibe Coding 的关键不是“让 AI 生成”而是“你会不会描述”。这一节我们先把视觉规划做在前面。3.1 先定设计关键词在写提示词之前先想清楚你的网站气质。设计关键词可以从这些维度出发维度例子整体风格极简、复古、未来感、手写感、杂志排版、新拟态配色情绪暖白、低饱和、黑白高对比、大地色、莫兰迪字体气质衬线、无衬线、等宽、细体、粗黑空间感受宽松、紧凑、多留白、密集信息交互方式悬浮动效、滚动渐入、平滑锚点、无动画举个例子如果你想要一个“安静、有文化感、像设计师个人简介”的主页可以这样描述极简主义接近杂志排版。底色是暖白接近米色。标题用衬线字体正文用干净的无衬线字体。大量留白卡片圆角不要太大。只有一个强调色用在小标题和链接上。这些描述 AI 能理解因为它背后对应的是具体的 CSS 属性底色是 background-color衬线字体是 font-family: Georgia/宋体留白是 padding 和 margin强调色是全局唯一的 accent color。3.2 页面结构拆解个人网站的内容差别很大但结构上有几个常见模块顶部导航栏Logo、菜单链接、移动端折叠按钮。Hero 区一句话介绍自己通常占据首屏很大面积。关于区个人简介、技能或经历。项目展示区卡片网格展示代表性项目。博客/文章列表如果你有写博客的习惯。联系区/页脚邮箱、社交链接、版权声明。你要在 Vibe Coding 之前确定一个原则一次对话只专注一个页面的一个模块。不要让 AI“一口气生成整个网站”那样很难控制质量。正确的做法是先生成整体骨架再逐块雕刻细节。3.3 把设计想法翻译成提示词把上面的思考写成一个结构化的提示词。我的习惯是使用“角色 任务 约束条件 输出要求”四段式。你是一名资深前端开发。请用 HTML CSS 原生 JavaScript 生成一个 个人主页的首屏Hero 区。 设计风格 - 极简主义暖白底色 #FAF9F7正文深灰 #333333 - 标题用 Georgia 衬线字体正文用系统无衬线字体 - 强调色用陶土色 #C4553F只用于链接和小标签 - 页面居中最大宽度 1080px左右留白 内容要求 - 左上角是名字右上角是三个导航链接关于、项目、博客 - Hero 区左侧是自我介绍右侧是一个抽象几何图形 - 底部有一个向下的滚动提示 技术约束 - 响应式布局移动端导航折叠为汉堡菜单 - 不要引入任何外部 UI 框架 - 输出完整 index.html 和 style.css 请先输出实现方案再输出代码。这段提示词里包含了设计关键词、布局要求、技术约束AI 生成的结果会比“帮我做个网站”靠谱得多。4. 完整实战从零 Vibe 一个个人主页这一节我们完整走一遍实战流程。为了便于演示我会给出示例提示词和对应的核心代码思路。实际使用时你可以把内容替换成自己的姓名、项目和博客信息。4.1 第一轮生成页面骨架先把整站的 HTML 骨架生成出来。提示词可以这样写请生成一个个人主页的完整 HTML 骨架包含 顶部固定导航、Hero 区、精选项目区、博客列表区、联系页脚。 每个区块用清晰的 class 命名不需要填充真实内容 用占位文字即可。样式先写在 style.css 中不要内联。AI 生成的骨架思路类似下面这样。这是核心片段需要放入index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title个人主页/title link relstylesheet hrefstyle.css / /head body header classnav div classnav__logoYour Name/div nav classnav__links a href#about关于/a a href#projects项目/a a href#blog博客/a /nav /header main section classhero h1你好我是你的名字/h1 p classhero__subtitle前端工程师 / 独立开发者 / 记录与创造者/p a classhero__button href#projects查看项目/a /section section idabout classsection h2关于我/h2 p这里写一段简短的自我介绍描述你的工作方向和个人兴趣。/p /section section idprojects classsection h2精选项目/h2 div classprojects__grid article classcard h3项目名称/h3 p一句话说明项目解决的问题。/p a href#查看详情/a /article /div /section section idblog classsection h2最新文章/h2 ul classblog__list lia href#文章标题示例/aspan2025-01-01/span/li /ul /section /main footer classfooter p© 2025 你的名字/p a hrefmailto:youexample.comyouexample.com/a /footer script srcscript.js/script /body /html拿到骨架后先别急着让它补样式。你要在浏览器里打开看一眼结构是否完整区块顺序是否合理。确认骨架没问题再进入下一轮。4.2 第二轮补充设计系统“设计感”的底层是一套一致的设计系统。所谓设计系统就是颜色、字体、间距、圆角、阴影这些视觉元素保持统一规则。在 CSS 中可以用自定义属性实现。/* 文件路径style.css */ :root { --bg: #faf9f7; --text: #333333; --text-light: #777777; --accent: #c4553f; --card-bg: #ffffff; --radius: 12px; --shadow: 0 4px 16px rgba(0, 0, 0, 0.06); --max-width: 1080px; --space: 24px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; line-height: 1.75; } h1, h2, h3 { font-family: Georgia, Times New Roman, serif; font-weight: normal; line-height: 1.3; } .nav { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; max-width: var(--max-width); margin: 0 auto; padding: 16px var(--space); background: rgba(250, 249, 247, 0.9); backdrop-filter: blur(8px); } .nav__links a { color: var(--text); text-decoration: none; margin-left: 24px; } .nav__links a:hover { color: var(--accent); } .hero { max-width: var(--max-width); margin: 80px auto; padding: 0 var(--space); } .hero h1 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 16px; } .hero__subtitle { color: var(--text-light); font-size: 18px; } .hero__button { display: inline-block; margin-top: 32px; padding: 12px 24px; background: var(--accent); color: #fff; text-decoration: none; border-radius: var(--radius); } .section { max-width: var(--max-width); margin: 80px auto; padding: 0 var(--space); } .projects__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; } .card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }这些 CSS 变量定义了一次后面所有区块的间距、圆角、颜色都引用同一批变量。整体看起来就会“设计感”统一不会东一块西一块。你可以把这段代码作为“设计基线”给 AI 看要求它后续生成的新模块都使用这些变量。4.3 第三轮交互与响应式优化骨架和样式到位后最后处理交互和移动端适配。最常见的是移动端导航折叠。这里用一个很简洁的 JavaScript 实现// 文件路径script.js const toggle document.querySelector(.nav__toggle); const links document.querySelector(.nav__links); toggle.addEventListener(click, () { links.classList.toggle(nav__links--open); });对应的移动端 CSS 逻辑.nav__toggle { display: none; border: none; background: none; font-size: 24px; cursor: pointer; } media (max-width: 640px) { .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); padding: 16px var(--space); flex-direction: column; } .nav__links--open { display: flex; } .nav__toggle { display: block; } .hero { margin: 48px auto; } .section { margin: 48px auto; } }如果你的风格描述里不需要动画那就不要硬加。很多个人网站败在“过度动效”上。Vibe Coding 也一样你要明确告诉 AI 哪些交互需要哪些不要。4.4 部署到 Vercel本地页面完成后接下来把网站部署上线。第一步是初始化 Git 并推送到远程仓库。git init git add . git commit -m feat: init personal website git branch -M main git remote add origin https://github.com/your-name/your-repo.git git push -u origin main第二步登录 Vercel 官网用 GitHub 账号授权登录然后点击“Add New Project”导入刚才的仓库。Vercel 会自动识别为静态项目不需要额外配置构建命令和输出目录。如果你的项目里没有package.jsonVercel 会按静态网站处理直接部署index.html。如果你希望更明确也可以加一个vercel.json{ framework: null, buildCommand: , outputDirectory: . }部署完成后Vercel 会分配一个https://your-project.vercel.app的地址。打开这个地址你的个人网站就已经上线了。4.5 验证与走查上线后不要急着到处分享先在浏览器里做一轮走查。我建议按这个清单逐项检查首屏内容是否完整标题和副标题是否正确。导航链接能否跳到对应区块。移动端打开汉堡菜单是否正常展开收起。项目卡片悬停效果是否符合预期。页面在 Chrome、Safari 下显示是否一致。文字有没有溢出或重叠。图片是否正常加载有没有引用失效路径。如果发现问题直接把问题描述给 AI比如“移动端导航菜单展开后背景不透明阅读体验差请改成占据整个视口高度的半透明面板”然后让它修改。5. 常见问题与排查思路Vibe Coding 生成个人网站的常见问题我整理成了下面这张表遇到报错或样式异常时可以对照排查。问题现象常见原因解决思路页面在手机上错位缺少 viewport 元信息或响应式布局不完整确认meta nameviewport存在检查 media query部署后字体风格不一致引用了本机没有的字体改用系统字体栈或用 Google Fonts 等 CDN 字体部署后图片失效使用了本地绝对路径用相对路径assets/images/xx.png或图床/CDNAI 生成的几块区域风格不统一提示词缺少设计变量约束要求 AI 统一使用:root中的设计变量部署失败仓库结构或构建命令配置错误检查 Vercel 的 Framework Preset静态站不需要 build导航锚点跳转被导航栏遮挡sticky 导航栏盖住了标题给区块加scroll-margin-top页面加载慢图片过大压缩图片合理使用 WebP 格式这里单独展开“AI 生成的几块区域风格不统一”这个问题。很多人的做法是每轮对话让 AI 生成一个区块结果五个区块像五个人写的。解决办法是在每轮提示词里都附上你的设计基线也就是:root变量、字体规则、间距规则。AI 有上下文限制但你可以把关键约束重复强调或者在项目根目录放一个DESIGN_CONSTRAINTS.md描述设计规范让 AI 每次先读这个文档再动手。这是 Vibe Coding 项目里比较实用的做法。另外补充一个如果你使用 Vercel 导入仓库后遇到构建失败优先看 Vercel 构建日志里的具体报错信息而不是猜。多数情况下是项目里多了个意外的package.json或配置项删除或修正即可。6. 最佳实践与工程建议6.1 提示词迭代方法Vibe Coding 的质量很大程度上取决于提示词的迭代方式。我总结了几个有效的方法。第一先结构后风格。第一轮只生成页面结构和内容框架不要同时纠结字体和配色。结构确认后再引导视觉细节。第二具体到属性级别。与其说“变得高级一点”不如说“把卡片圆角从 12px 改成 4px阴影调淡去掉边框”。AI 对属性级别的描述反馈更稳定。第三一次只改一个维度。每轮对话聚焦一个点比如这轮只调间距下轮只调配色。混在一起容易出现“修好一个地方破坏另一个地方”的情况。第四保留历史版本。每次修改前先把当前版本存一份或使用 Git 提交。这样 AI 改坏了可以快速回退不用从零再来。6.2 代码质量与版本管理Vibe Coding 不意味着放弃代码质量。个人网站虽然小但依然建议做到几点每个文件职责单一HTML 管结构、CSS 管样式、JS 管交互。类名语义化推荐 BEM 风格比如card__title、nav__links--open。所有阶段性稳定版本都执行git commit提交信息写清楚改动内容。不把本机无关文件提交进仓库.gitignore至少包含.env、node_modules等。如果你后续引入构建工具或框架比如 Astro、Next.js也建议保留这一套工程习惯。个人网站再小也值得用工程化的方式管理。6.3 性能与 SEO设计感之外访问体验直接决定访客去留。个人网站的性能优化从这三件事开始。第一压缩图片。个人网站最容易拖慢加载速度的就是原图直出。建议把图片压到 200KB 以内使用 WebP 或 AVIF 格式。第二控制外部依赖。用系统字体栈能省掉字体下载避免引入不必用的 UI 框架。每多一个外部依赖就多一分加载成本。第三做好基础 SEO。title要清晰meta namedescription要写一句有信息量的话h1只保留一个。文章如果有独立页面再加og:title等社交分享标签。这些 AI 都能帮你生成但需要你主动提出要求。6.4 安全与隐私个人网站暴露在公网需要注意最小权限和隐私边界。不要在网页源码里写邮箱以外的敏感信息如密码、密钥、身份证号、真实住址等。不提交任何.env文件环境变量应在 Vercel 的项目配置里设置。如果网站有表单或留言功能考虑后端接口的权限控制与输入校验避免信息泄露和垃圾提交。定期检查 Vercel 项目的访问日志和依赖更新做到可审计、可回滚。Vibe Coding 生成代码时如果你计划使用某个后端服务或第三方 API要让 AI 注意不要把密钥硬编码在页面代码中。密钥一旦进了前端代码就相当于公开了。7. 总结与下一步学习路线7.1 本文核心要点回顾一下这篇文章主要做了四件事。第一解释了 Vibe Coding 的本质用自然语言描述意图让 AI 生成和修改代码开发者负责把控方向和质量。第二强调了“设计感”来自提示词而不是 AI 的魔法。通过设计关键词、页面结构拆解、设计变量约束才能让生成结果有统一气质。第三完整走了一遍实战流程从骨架生成、设计系统补充、交互优化到 Git 推送和 Vercel 部署上线。第四给出了常见问题排查表和工程建议覆盖提示词迭代、代码质量、性能 SEO、安全隐私几个维度。7.2 下一步可以继续深入的方向如果你的个人主页已经上线下一步可以从这几个方向继续推进学习 Tailwind CSSv0 这类 AI 界面工具生成的组件大多基于 Tailwind了解它能让后续 AI 协作更顺畅。尝试 Astro 或 Next.js把静态主页升级成支持 Markdown 博客的完整站点。深入响应式设计把不同设备的显示细节打磨到位。研究 Web 性能指标比如 LCP、CLS用具体数据指导优化。Vibe Coding 不是让你放弃编程而是把编程的重心从“打代码”转移到“表达与把关”。当你发现一个念头能用几句话变成一个有设计感的网页时这种创造新东西的乐趣值得你亲自试一试。建议现在就打开编辑器从一句“我想要一个暖白底色、衬线标题、陶土色强调的个人主页”开始。