Vibe Coding 这个说法近两年在开发圈已经不算陌生但真正把它落到“有设计感的个人网站”这个场景很多人还是没跑通完整链路。它指的不是某一种特定语言或框架而是用自然语言描述需求让 AI 完成大部分编码工作再通过持续对话逐步调优的开发方式。放到个人网站里好处很直接你不需要把 CSS 网格、响应式布局、交互动画全部背熟也能在几小时内得到一个设计感不错、并且能免费部署上线的站点。这篇文章围绕“如何 Vibe Coding 有设计感的个人网站”展开覆盖提示词设计、技术选型、本地预览、功能测试、Vercel 免费部署和域名配置的完整闭环。适合三类读者零基础但想快速上线个人主页的创作者想用 AI 辅助完成作品集或导航站的开发者已经会写基础 HTML但想把视觉细节和部署流程补齐的前端新手。先给结论Vibe Coding 特别适合把“个人网站”当作第一个练习项目因为它覆盖完整——页面布局、响应式、SEO、交互、部署、域名几乎每个环节都能借助 AI 快速推进。但不要指望 AI 生成完直接上线最关键的其实是验证和部署部分样式是不是稳定、移动端是否错乱、链接路径是否对、部署后有没有 404。后面这些环节才是这篇内容的重心。1. Vibe Coding 个人网站核心能力速览能力项说明开发方式自然语言对话驱动AI 输出 HTML/CSS/JS 或项目级代码面向人群零基础创作者、设计师、前端初学者、想快速迭代的工程师技术门槛极低能说清需求就能上手理解 Web 基础概念会更好成本开发阶段可使用主流 AI 编程工具部署阶段可用 Vercel / GitHub Pages 免费额度主要产出个人主页、作品集、导航站、博客页面、落地页、简历页核心难点视觉一致性、代码回归、部署配置而不是“写出第一行代码”适合场景个人品牌展示、作品集、导航站、活动落地页、简历型站点从实操角度我把它拆成四个关键能力需求描述、AI 生成、迭代调优、部署验证。流程跑通以后第二次做网站的时间会成倍减少后面你完全可以基于同一套 workflow去改造成导航站、作品集、甚至轻量博客。需要提醒一点Vibe Coding 门槛低但建议还是理解几个基础概念。HTML/CSS 负责结构和样式JavaScript 负责交互Git 负责版本管理部署平台负责把文件变成公网地址。理解这些概念不是让你去背文档而是为了在 AI 输出错误、页面白屏、部署失败时你能向 AI 准确描述问题。2. Vibe Coding 建站适用场景与使用边界Vibe Coding 不是万能方案它在个人网站场景里优势明显但边界同样要清楚。适合的场景个人主页展示你是谁、你的经历、你的项目单页就够。作品集用卡片形式展示设计、文章、代码、视频等适合设计师和内容创作者。导航站把常用工具、学习资料、灵感链接分类整理做成个人导航页。活动落地页一个独立页面承载活动信息、报名入口、二维码。轻量博客用 Vite/Astro 搭配 Markdown自动化生成文章列表和详情页。不适合或需要小心的场景带登录、支付、数据库的复杂业务系统AI 能生成原型但权限、安全和数据一致性很难保证。强隐私需求的应用涉及用户上传、个人数据收集需要有后端和隐私设计经验不建议只靠 AI 生成。像素级定制的品牌官网AI 可以接近最好效果但精细设计还原仍需要人工调整。高并发或强 SEO 型站点静态站基本可以但动态内容和服务端渲染仍需深入配置。使用边界方面有几个点特意说一下。Vibe Coding 会生成代码但代码的版权来源需要自己注意做网站时如果使用图片、字体、图标尽量选可商用授权或自备素材如果页面有表单、收藏夹、评论功能不要收集超过必要的用户信息也不要在未经授权的情况下展示他人作品或照片。涉及 AI 教程和导航站时不要做成仿冒官方、仿冒知名产品的页面避免产生侵权和误导风险。3. 免费个人网站技术选型与前置环境3.1 技术选型方案特点适合单个 HTML 文件结构最简单CSS/JS 内联文件即页面零基础第一步、导航页、落地页Astro / Vite 静态站组件化、支持 Markdown、构建快速想认真经营个人博客或作品集Next.js可扩展接口、SSR 强、SEO 好有后端或内容动态化需求WordPress XAMPP传统建站方式本地导入主题、后台管理已经熟悉 WordPress 的创作者个人导航网站模板基于开源模板改颜色和栏目想快速得到一个导航页个人建议第一次尝试 Vibe Coding 建站从“单个 HTML 文件”或“Vite 静态站”开始不要一上来就选择完整框架。单文件方案对 AI 对话窗口最友好生成完直接双击就能看Vite 方案适合你确定要长期维护这个网站需要组件化、自动构建、批量部署。另一种常见路径是 WordPress 加 XAMPP 本地建站如果你已有现成主题可以通过导入主题和插件的方式建立个人博客。这种方法适合已经习惯后台管理、不想碰代码的人。不过 Vibe Coding 的直接优势在于快速生成结构和样式WordPress 的动态模板反而会限制这种自由发挥所以本文主流程仍然推荐静态站方案。3.2 前置环境检查清单一个 GitHub 账号用于存代码也是大部分免费部署平台的基础。一个 Vercel 或 Netlify 账号负责构建和分发你的网站。Node.js可选但推荐安装当前 LTS 版本给本地预览和构建工具用。VS Code 或其他编辑器有内置终端和插件体验更好。浏览器 DevTools验证页面、查看报错、模拟移动端。一套 AI 编程工具ChatGPT、Claude 或其他主流工具都可以能输出代码就行。这些环境基本都是免费的。你不需要买服务器不需要域名也能先跑通流程最后再决定是否绑一个自己的域名。3.3 目录规划建议my-personal-site/ ├── index.html ├── assets/ │ ├── css/style.css │ ├── js/main.js │ └── images/ └── README.md即使 AI 一次只给了单个文件也建议把它放进规范目录。后面如果页面变多这个结构能避免一团糟。4. Vibe Coding 建站完整工作流4.1 第一步把设计需求写成提示词Vibe Coding 的关键不是直接说“做一个网站”而是把设计需求、内容结构、交互效果、目标用户拆开描述。AI 对模糊需求的猜测空间很大提示词写得越具体生成结果越稳定。这里给一个可以直接复制修改的示例请帮我生成一个个人主页网站单页结构风格定为 - 极简、留白多主色调为深蓝 #0F172A 搭配白底 - 板块包括Hero区、关于我、作品展示、联系方式 - 字体使用系统无衬线字体避免加载额外字体文件 - 页面在手机、平板、桌面三个尺寸下必须正常显示 - 交互要求Hero区标题有渐入动画作品卡片 hover 时上浮 - 不需要登录和后台 输出时请使用单一 HTML 文件CSS 和 JS 内联并在关键样式处加中文注释。提示词里最核心的四个要素是风格关键词、内容结构、交互细节、技术约束。如果你要做个人导航网站可以把“作品展示”换成“常用导航链接”再加一句“按分类两列展示每个分类带图标”。如果你想做作品集就补充“每个作品卡片包含封面、标题、关键词、外链”。4.2 第二步生成项目骨架在第一轮生成后AI 通常只输出一个 HTML 文件或若干代码片段。你需要让它补全文件目录和整体结构。请把上述页面按标准项目结构输出包括 - index.html - assets/css/style.css - assets/js/main.js - assets/images/README.txt - README.md 所有相对路径都要正确图片使用占位链接。这样做的好处是后续改动样式和逻辑时AI 能准确定位到具体文件而不是反复生成整个页面。生成的骨架符合预期后再进入迭代阶段。4.3 第三步持续对话迭代Vibe Coding 的“Vibe”就体现在这一步你不必一次确认所有细节而是像和同事沟通一样一轮一轮调整。常见对话方式包括Hero 区文案太长了压缩到 10 个字以内副标题保留两行。 作品卡片在移动端显示成单列间距缩小到 12px。 导航栏滚动后加半透明背景不要影响阅读。 “关于我”区域加一张圆形头像占位图使用灰色背景。迭代时建议一次只提 1 到 3 个改动点改动过多会导致 AI 生成结果不稳定。每轮改完立刻在本地预览确认通过后再输入下一轮需求。4.4 第四步本地预览本地预览是上线前最重要的一步。最简单的方式是直接双击 HTML 文件浏览器会打开本地静态页面。如果页面引用了多个 CSS/JS 文件推荐用本地 HTTP 服务方式cd my-personal-site python -m http.server 8080然后浏览器访问http://localhost:8080如果你用 VS Code也可以安装 Live Server 插件右键 index.html 选择 Open with Live Server它能自动刷新页面改完代码立刻看到效果非常适合 Vibe Coding 的快速迭代场景。4.5 第五步代码审查后部署部署前即使代码是 AI 生成的也建议人工过一遍关键点页面是否引入了不认识的第三方脚本来源是否可信。图片、CSS、JS 是否使用相对路径避免部署后资源 404。meta 标签是否完整、标题描述是否符合内容。是否意外暴露了个人信息、API Key、邮箱地址等敏感信息。页面内容是否真实、没有编造项目经历或成果。确认完这些再进入部署流程。5. 个人网站功能测试与效果验证AI 生成的页面功能测试不能跳过。即使视觉上看着没问题也可能在移动端、SEO 或者交互上出问题。5.1 响应式布局测试打开浏览器 DevTools切换设备模拟器分别测试 375px、768px、1440px 三档宽度导航栏是否折行或遮挡。文字和卡片是否有横向滚动。图片是否被拉伸或裁切。按钮和链接是否方便点击。如果发现问题直接把问题描述给 AI在移动端 375px 宽度下导航菜单四个链接挤在一起请改成汉堡菜单或竖向排列。5.2 SEO 基础验证个人网站要能被搜索引擎正确收录基本信息要完整。检查 HTML 的 head 区域是否包含以下内容title个人主页 - 作品集与导航/title meta namedescription content个人作品集网站展示设计与开发项目 meta propertyog:title content我的个人主页 meta propertyog:description content在这里了解我的项目和作品 meta propertyog:type contentwebsite可以告诉 AI请为页面补全 SEO 标签包括 title、description、og:title、og:description。5.3 交互与链接测试逐个点击页面里的所有链接确认站内锚点能否跳转到对应板块。外链是否新窗口打开并添加target_blank和relnoopener。图片链接是否有效没有出现破损图片图标。如果页面有表单确认没有收集多余信息并保证可提交路径合理。# 本地验证页面是否能正常返回 curl -I http://127.0.0.1:8080预期返回类似HTTP/1.1 200 OK如果返回 404检查文件路径和文件名。5.4 页面性能测试用 Chrome DevTools 的 Lighthouse 做一次性能检查重点关注性能、SEO、最佳实践三项分数。一般来说个人网站性能分数在 80 分以上就够用。分数偏低时优先检查图片体积和字体加载。请把页面中所有未压缩图片替换为占位图并给图片加上懒加载属性 loadinglazy。5.5 功能测试表格测试项操作方法预期结果异常处理页面打开本地访问 index.html首屏正常渲染无白屏查看 Console 报错响应式DevTools 模拟三档宽度无横向滚动布局不重叠检查 media query锚点导航点击导航链接平滑滚动到对应板块检查 id 是否重复图片资源查看 Network 面板全部 200无损坏检查相对路径SEO 信息查看 head 区域title/description 完整补充 meta 标签交互动画刷新页面Hero 标题渐入检查 JS 是否加载6. 免费部署到 Vercel 与自定义域名6.1 为什么选择 Vercel选择 Vercel 的原因很直接免费额度对个人网站足够用支持静态站和前端框架GitHub 仓库推送后能自动构建发布。如果你不想注册太多平台GitHub Pages 也可以实现类似效果但没有自动构建的自定义域名配置灵活。Vercel 也常常和 AI 建站流程绑定很多 AI 前端生成工具都支持导出直接部署到 Vercel。你可以在工具里确认生成的代码是否能导出为完整项目而不是只停留在在线预览。6.2 部署步骤第一步把本地项目推送到 GitHubcd my-personal-site git init git add . git commit -m feat: personal site initial git remote add origin https://github.com/yourname/my-personal-site.git git branch -M main git push -u origin main注意把仓库地址替换成你自己的。第二步登录 Vercel 控制台点击 Add New Project选择你刚推送的 GitHub 仓库。框架预设选择静态站或者直接让 Vercel 自动识别点击 Deploy 等待构建完成。如果更喜欢用命令行也可以安装 Vercel CLInpm i -g vercel vercel login vercel命令行会引导你完成登录和项目关联结束后会输出一个公网访问地址。6.3 自定义域名绑定在 Vercel 项目 Settings 里找到 Domains输入你的域名按照提示添加 DNS 记录。如果是 CNAME 记录一般填写 www 到 cname.vercel-dns.com如果使用根域名可能需要添加 A 记录。解析生效时间通常几分钟到几十分钟不等。配置完成后验证方式打开自己的域名访问确认能正常加载。检查 HTTPS 证书是否自动签发Vercel 一般会自动处理。访问一个不存在的路径确认 404 页面不会暴露源码目录结构。6.4 部署后的完整验证检查项操作方法预期结果线上可访问打开 Vercel 输出地址页面正常渲染静态资源DevTools Network 面板CSS/JS/图片均 200自定义域名浏览器访问域名HTTPS 正常无证书警告Git 自动部署本地修改后 pushVercel 自动重新构建移动端样式手机访问无横向滚动布局正常7. 资源占用与性能观察Vibe Coding 建站不同于本地大模型推理通常不依赖 GPU所谓的资源占用主要集中在编辑器、浏览器和构建工具上。测试阶段可以按下面几个维度观察。7.1 本地开发阶段本地开发时两个因素最容易影响体验打开的工具太多浏览器标签页太多。建议保持单个编辑器和单个预览标签页让 AI 对话工具和代码编辑器形成稳定的工作闭环。观察本机 CPU 和内存占用时可以在任务管理器中按进程查看正常情况下 VS Code 和 Node 进程的占用比较低如果构建工具内存持续飙升优先检查是否引入了体积过大的依赖。7.2 构建阶段使用 Vite 或 Astro 构建时命令行会输出构建产物大小。如果构建时间过长或产物过大可以执行npm run build构建完成后检查 dist 目录体积。如果产物非常大让 AI 把页面拆成更小的组件或者移除未使用的样式。个人网站静态产物通常控制在几 MB 以内比较理想具体占用以实际项目为准。7.3 部署平台侧Vercel 免费版对个人网站的带宽和请求量支持足够但如果你放了大量高清图片还是建议压缩图片或者使用免费图床。部署日志里可以查看每次构建的时间和产物大小构建时间过长通常是因为依赖包太多而不是页面本身复杂。8. Vibe Coding 常见问题与排查方法问题现象可能原因排查方式解决方案页面打开白屏JS 报错导致渲染中断DevTools Console 查看报错把完整报错信息发给 AI要求修复样式错乱没有图片CSS 或图片路径错误Network 面板看资源状态改为相对路径重新生成引用移动端菜单点不开JS 交互未绑定或事件被覆盖Console 查看事件绑定报错单独要求 AI 补全移动端交互本地预览时图片正常部署后图片消失本地路径和部署路径不一致Vercel 预览看资源 404统一使用相对路径并重新构建Vercel 部署失败依赖安装失败或框架识别错误打开部署日志定位错误按日志修正 package.json 配置自定义域名无法访问DNS 解析未生效使用 dig 命令或在线工具检查等待解析生效或检查 CNAME 是否错误Git push 报错本地身份认证未配置查看 Git 错误信息配置 SSH Key 或 tokenAI 生成的内容只有预览没有项目代码部分 AI 工具默认只展示结果明确要求输出完整项目和文件目录在提示词里写清“需要可部署的代码”页面 SEO 不被收录meta 标签缺失或 robots 配置错误检查 head 区域和 robots.txt补全 meta提交搜索引擎收录遇到问题时最有效的做法是把浏览器报错原样复制给 AI而不是只写“页面坏了”。AI 对完整报错信息的定位能力远比模糊描述强。9. Vibe Coding 最佳实践与合规提醒Vibe Coding 建站速度快但工程习惯不能丢。下面这组最佳实践是我比较推荐的每次改动前保留一个可用版本提交到 Git。Vibe Coding 有时会越改越坏有存档就能快速回退。提示词写好后存成文档。同一个项目隔几天再迭代时可以直接复用不用重新描述需求。第一次做项目时先用小参数测试。比如先做单页面再扩展多页面不要一开始就让 AI 生成一个巨大项目。图片和字体尽量压缩和使用本地资源。外链 CDN 虽然方便但失效后会影响页面显示。表单类功能不要直接在静态页面里接数据库没有后端时使用邮箱链接或第三方服务并明确隐私说明。批量任务而不是单页时例如批量生成多个分类页面先让 AI 生成一个模板再用模板套用不要一条条生成。涉及他人作品、头像、姓名时确认已获得授权不未经许可展示他人隐私信息。不模仿官方站点钓鱼不做品牌混淆页面导航站也不要大量复制他人文案和内容。AI 生成的第三方脚本要审查来源。如果涉及用户浏览数据收集必须明确告知和提供选择。这些点不是流程外的工作而是把 Vibe Coding 从“能跑”变成“能长期维护”的关键。10. 总结与下一步Vibe Coding 建个人网站最值得尝试的点是它把整个开发链路压得很短你只要能把需求讲清楚AI 就能给出页面结构和样式剩下的工作重点从“编码”变成“验证和迭代”。建议你最先做一个单页导航站它结构清晰、功能直接不会因为内容太多而失控。最容易踩的坑是跳过本地测试直接部署最后在手机上发现布局全乱。下一步的扩展方向可以从三方面走把单个 HTML 迁移到 Vite 或 Astro支持 Markdown 博客把个人主页和个人导航站合并成统一品牌页面把网站内容链接到自己的 GitHub 或作品集形成持续更新。如果你后续想尝试在鸿蒙生态里做应用页面原型Vibe Coding 的提示词和项目管理思维方式同样可以迁移过去只是目标平台和组件写法需要调整。先把这一套个人网站流程跑通后面的开发节奏会快很多。 Vibe Coding实战：AI自然语言生成个人网站与免费部署
Vibe Coding 这个说法近两年在开发圈已经不算陌生但真正把它落到“有设计感的个人网站”这个场景很多人还是没跑通完整链路。它指的不是某一种特定语言或框架而是用自然语言描述需求让 AI 完成大部分编码工作再通过持续对话逐步调优的开发方式。放到个人网站里好处很直接你不需要把 CSS 网格、响应式布局、交互动画全部背熟也能在几小时内得到一个设计感不错、并且能免费部署上线的站点。这篇文章围绕“如何 Vibe Coding 有设计感的个人网站”展开覆盖提示词设计、技术选型、本地预览、功能测试、Vercel 免费部署和域名配置的完整闭环。适合三类读者零基础但想快速上线个人主页的创作者想用 AI 辅助完成作品集或导航站的开发者已经会写基础 HTML但想把视觉细节和部署流程补齐的前端新手。先给结论Vibe Coding 特别适合把“个人网站”当作第一个练习项目因为它覆盖完整——页面布局、响应式、SEO、交互、部署、域名几乎每个环节都能借助 AI 快速推进。但不要指望 AI 生成完直接上线最关键的其实是验证和部署部分样式是不是稳定、移动端是否错乱、链接路径是否对、部署后有没有 404。后面这些环节才是这篇内容的重心。1. Vibe Coding 个人网站核心能力速览能力项说明开发方式自然语言对话驱动AI 输出 HTML/CSS/JS 或项目级代码面向人群零基础创作者、设计师、前端初学者、想快速迭代的工程师技术门槛极低能说清需求就能上手理解 Web 基础概念会更好成本开发阶段可使用主流 AI 编程工具部署阶段可用 Vercel / GitHub Pages 免费额度主要产出个人主页、作品集、导航站、博客页面、落地页、简历页核心难点视觉一致性、代码回归、部署配置而不是“写出第一行代码”适合场景个人品牌展示、作品集、导航站、活动落地页、简历型站点从实操角度我把它拆成四个关键能力需求描述、AI 生成、迭代调优、部署验证。流程跑通以后第二次做网站的时间会成倍减少后面你完全可以基于同一套 workflow去改造成导航站、作品集、甚至轻量博客。需要提醒一点Vibe Coding 门槛低但建议还是理解几个基础概念。HTML/CSS 负责结构和样式JavaScript 负责交互Git 负责版本管理部署平台负责把文件变成公网地址。理解这些概念不是让你去背文档而是为了在 AI 输出错误、页面白屏、部署失败时你能向 AI 准确描述问题。2. Vibe Coding 建站适用场景与使用边界Vibe Coding 不是万能方案它在个人网站场景里优势明显但边界同样要清楚。适合的场景个人主页展示你是谁、你的经历、你的项目单页就够。作品集用卡片形式展示设计、文章、代码、视频等适合设计师和内容创作者。导航站把常用工具、学习资料、灵感链接分类整理做成个人导航页。活动落地页一个独立页面承载活动信息、报名入口、二维码。轻量博客用 Vite/Astro 搭配 Markdown自动化生成文章列表和详情页。不适合或需要小心的场景带登录、支付、数据库的复杂业务系统AI 能生成原型但权限、安全和数据一致性很难保证。强隐私需求的应用涉及用户上传、个人数据收集需要有后端和隐私设计经验不建议只靠 AI 生成。像素级定制的品牌官网AI 可以接近最好效果但精细设计还原仍需要人工调整。高并发或强 SEO 型站点静态站基本可以但动态内容和服务端渲染仍需深入配置。使用边界方面有几个点特意说一下。Vibe Coding 会生成代码但代码的版权来源需要自己注意做网站时如果使用图片、字体、图标尽量选可商用授权或自备素材如果页面有表单、收藏夹、评论功能不要收集超过必要的用户信息也不要在未经授权的情况下展示他人作品或照片。涉及 AI 教程和导航站时不要做成仿冒官方、仿冒知名产品的页面避免产生侵权和误导风险。3. 免费个人网站技术选型与前置环境3.1 技术选型方案特点适合单个 HTML 文件结构最简单CSS/JS 内联文件即页面零基础第一步、导航页、落地页Astro / Vite 静态站组件化、支持 Markdown、构建快速想认真经营个人博客或作品集Next.js可扩展接口、SSR 强、SEO 好有后端或内容动态化需求WordPress XAMPP传统建站方式本地导入主题、后台管理已经熟悉 WordPress 的创作者个人导航网站模板基于开源模板改颜色和栏目想快速得到一个导航页个人建议第一次尝试 Vibe Coding 建站从“单个 HTML 文件”或“Vite 静态站”开始不要一上来就选择完整框架。单文件方案对 AI 对话窗口最友好生成完直接双击就能看Vite 方案适合你确定要长期维护这个网站需要组件化、自动构建、批量部署。另一种常见路径是 WordPress 加 XAMPP 本地建站如果你已有现成主题可以通过导入主题和插件的方式建立个人博客。这种方法适合已经习惯后台管理、不想碰代码的人。不过 Vibe Coding 的直接优势在于快速生成结构和样式WordPress 的动态模板反而会限制这种自由发挥所以本文主流程仍然推荐静态站方案。3.2 前置环境检查清单一个 GitHub 账号用于存代码也是大部分免费部署平台的基础。一个 Vercel 或 Netlify 账号负责构建和分发你的网站。Node.js可选但推荐安装当前 LTS 版本给本地预览和构建工具用。VS Code 或其他编辑器有内置终端和插件体验更好。浏览器 DevTools验证页面、查看报错、模拟移动端。一套 AI 编程工具ChatGPT、Claude 或其他主流工具都可以能输出代码就行。这些环境基本都是免费的。你不需要买服务器不需要域名也能先跑通流程最后再决定是否绑一个自己的域名。3.3 目录规划建议my-personal-site/ ├── index.html ├── assets/ │ ├── css/style.css │ ├── js/main.js │ └── images/ └── README.md即使 AI 一次只给了单个文件也建议把它放进规范目录。后面如果页面变多这个结构能避免一团糟。4. Vibe Coding 建站完整工作流4.1 第一步把设计需求写成提示词Vibe Coding 的关键不是直接说“做一个网站”而是把设计需求、内容结构、交互效果、目标用户拆开描述。AI 对模糊需求的猜测空间很大提示词写得越具体生成结果越稳定。这里给一个可以直接复制修改的示例请帮我生成一个个人主页网站单页结构风格定为 - 极简、留白多主色调为深蓝 #0F172A 搭配白底 - 板块包括Hero区、关于我、作品展示、联系方式 - 字体使用系统无衬线字体避免加载额外字体文件 - 页面在手机、平板、桌面三个尺寸下必须正常显示 - 交互要求Hero区标题有渐入动画作品卡片 hover 时上浮 - 不需要登录和后台 输出时请使用单一 HTML 文件CSS 和 JS 内联并在关键样式处加中文注释。提示词里最核心的四个要素是风格关键词、内容结构、交互细节、技术约束。如果你要做个人导航网站可以把“作品展示”换成“常用导航链接”再加一句“按分类两列展示每个分类带图标”。如果你想做作品集就补充“每个作品卡片包含封面、标题、关键词、外链”。4.2 第二步生成项目骨架在第一轮生成后AI 通常只输出一个 HTML 文件或若干代码片段。你需要让它补全文件目录和整体结构。请把上述页面按标准项目结构输出包括 - index.html - assets/css/style.css - assets/js/main.js - assets/images/README.txt - README.md 所有相对路径都要正确图片使用占位链接。这样做的好处是后续改动样式和逻辑时AI 能准确定位到具体文件而不是反复生成整个页面。生成的骨架符合预期后再进入迭代阶段。4.3 第三步持续对话迭代Vibe Coding 的“Vibe”就体现在这一步你不必一次确认所有细节而是像和同事沟通一样一轮一轮调整。常见对话方式包括Hero 区文案太长了压缩到 10 个字以内副标题保留两行。 作品卡片在移动端显示成单列间距缩小到 12px。 导航栏滚动后加半透明背景不要影响阅读。 “关于我”区域加一张圆形头像占位图使用灰色背景。迭代时建议一次只提 1 到 3 个改动点改动过多会导致 AI 生成结果不稳定。每轮改完立刻在本地预览确认通过后再输入下一轮需求。4.4 第四步本地预览本地预览是上线前最重要的一步。最简单的方式是直接双击 HTML 文件浏览器会打开本地静态页面。如果页面引用了多个 CSS/JS 文件推荐用本地 HTTP 服务方式cd my-personal-site python -m http.server 8080然后浏览器访问http://localhost:8080如果你用 VS Code也可以安装 Live Server 插件右键 index.html 选择 Open with Live Server它能自动刷新页面改完代码立刻看到效果非常适合 Vibe Coding 的快速迭代场景。4.5 第五步代码审查后部署部署前即使代码是 AI 生成的也建议人工过一遍关键点页面是否引入了不认识的第三方脚本来源是否可信。图片、CSS、JS 是否使用相对路径避免部署后资源 404。meta 标签是否完整、标题描述是否符合内容。是否意外暴露了个人信息、API Key、邮箱地址等敏感信息。页面内容是否真实、没有编造项目经历或成果。确认完这些再进入部署流程。5. 个人网站功能测试与效果验证AI 生成的页面功能测试不能跳过。即使视觉上看着没问题也可能在移动端、SEO 或者交互上出问题。5.1 响应式布局测试打开浏览器 DevTools切换设备模拟器分别测试 375px、768px、1440px 三档宽度导航栏是否折行或遮挡。文字和卡片是否有横向滚动。图片是否被拉伸或裁切。按钮和链接是否方便点击。如果发现问题直接把问题描述给 AI在移动端 375px 宽度下导航菜单四个链接挤在一起请改成汉堡菜单或竖向排列。5.2 SEO 基础验证个人网站要能被搜索引擎正确收录基本信息要完整。检查 HTML 的 head 区域是否包含以下内容title个人主页 - 作品集与导航/title meta namedescription content个人作品集网站展示设计与开发项目 meta propertyog:title content我的个人主页 meta propertyog:description content在这里了解我的项目和作品 meta propertyog:type contentwebsite可以告诉 AI请为页面补全 SEO 标签包括 title、description、og:title、og:description。5.3 交互与链接测试逐个点击页面里的所有链接确认站内锚点能否跳转到对应板块。外链是否新窗口打开并添加target_blank和relnoopener。图片链接是否有效没有出现破损图片图标。如果页面有表单确认没有收集多余信息并保证可提交路径合理。# 本地验证页面是否能正常返回 curl -I http://127.0.0.1:8080预期返回类似HTTP/1.1 200 OK如果返回 404检查文件路径和文件名。5.4 页面性能测试用 Chrome DevTools 的 Lighthouse 做一次性能检查重点关注性能、SEO、最佳实践三项分数。一般来说个人网站性能分数在 80 分以上就够用。分数偏低时优先检查图片体积和字体加载。请把页面中所有未压缩图片替换为占位图并给图片加上懒加载属性 loadinglazy。5.5 功能测试表格测试项操作方法预期结果异常处理页面打开本地访问 index.html首屏正常渲染无白屏查看 Console 报错响应式DevTools 模拟三档宽度无横向滚动布局不重叠检查 media query锚点导航点击导航链接平滑滚动到对应板块检查 id 是否重复图片资源查看 Network 面板全部 200无损坏检查相对路径SEO 信息查看 head 区域title/description 完整补充 meta 标签交互动画刷新页面Hero 标题渐入检查 JS 是否加载6. 免费部署到 Vercel 与自定义域名6.1 为什么选择 Vercel选择 Vercel 的原因很直接免费额度对个人网站足够用支持静态站和前端框架GitHub 仓库推送后能自动构建发布。如果你不想注册太多平台GitHub Pages 也可以实现类似效果但没有自动构建的自定义域名配置灵活。Vercel 也常常和 AI 建站流程绑定很多 AI 前端生成工具都支持导出直接部署到 Vercel。你可以在工具里确认生成的代码是否能导出为完整项目而不是只停留在在线预览。6.2 部署步骤第一步把本地项目推送到 GitHubcd my-personal-site git init git add . git commit -m feat: personal site initial git remote add origin https://github.com/yourname/my-personal-site.git git branch -M main git push -u origin main注意把仓库地址替换成你自己的。第二步登录 Vercel 控制台点击 Add New Project选择你刚推送的 GitHub 仓库。框架预设选择静态站或者直接让 Vercel 自动识别点击 Deploy 等待构建完成。如果更喜欢用命令行也可以安装 Vercel CLInpm i -g vercel vercel login vercel命令行会引导你完成登录和项目关联结束后会输出一个公网访问地址。6.3 自定义域名绑定在 Vercel 项目 Settings 里找到 Domains输入你的域名按照提示添加 DNS 记录。如果是 CNAME 记录一般填写 www 到 cname.vercel-dns.com如果使用根域名可能需要添加 A 记录。解析生效时间通常几分钟到几十分钟不等。配置完成后验证方式打开自己的域名访问确认能正常加载。检查 HTTPS 证书是否自动签发Vercel 一般会自动处理。访问一个不存在的路径确认 404 页面不会暴露源码目录结构。6.4 部署后的完整验证检查项操作方法预期结果线上可访问打开 Vercel 输出地址页面正常渲染静态资源DevTools Network 面板CSS/JS/图片均 200自定义域名浏览器访问域名HTTPS 正常无证书警告Git 自动部署本地修改后 pushVercel 自动重新构建移动端样式手机访问无横向滚动布局正常7. 资源占用与性能观察Vibe Coding 建站不同于本地大模型推理通常不依赖 GPU所谓的资源占用主要集中在编辑器、浏览器和构建工具上。测试阶段可以按下面几个维度观察。7.1 本地开发阶段本地开发时两个因素最容易影响体验打开的工具太多浏览器标签页太多。建议保持单个编辑器和单个预览标签页让 AI 对话工具和代码编辑器形成稳定的工作闭环。观察本机 CPU 和内存占用时可以在任务管理器中按进程查看正常情况下 VS Code 和 Node 进程的占用比较低如果构建工具内存持续飙升优先检查是否引入了体积过大的依赖。7.2 构建阶段使用 Vite 或 Astro 构建时命令行会输出构建产物大小。如果构建时间过长或产物过大可以执行npm run build构建完成后检查 dist 目录体积。如果产物非常大让 AI 把页面拆成更小的组件或者移除未使用的样式。个人网站静态产物通常控制在几 MB 以内比较理想具体占用以实际项目为准。7.3 部署平台侧Vercel 免费版对个人网站的带宽和请求量支持足够但如果你放了大量高清图片还是建议压缩图片或者使用免费图床。部署日志里可以查看每次构建的时间和产物大小构建时间过长通常是因为依赖包太多而不是页面本身复杂。8. Vibe Coding 常见问题与排查方法问题现象可能原因排查方式解决方案页面打开白屏JS 报错导致渲染中断DevTools Console 查看报错把完整报错信息发给 AI要求修复样式错乱没有图片CSS 或图片路径错误Network 面板看资源状态改为相对路径重新生成引用移动端菜单点不开JS 交互未绑定或事件被覆盖Console 查看事件绑定报错单独要求 AI 补全移动端交互本地预览时图片正常部署后图片消失本地路径和部署路径不一致Vercel 预览看资源 404统一使用相对路径并重新构建Vercel 部署失败依赖安装失败或框架识别错误打开部署日志定位错误按日志修正 package.json 配置自定义域名无法访问DNS 解析未生效使用 dig 命令或在线工具检查等待解析生效或检查 CNAME 是否错误Git push 报错本地身份认证未配置查看 Git 错误信息配置 SSH Key 或 tokenAI 生成的内容只有预览没有项目代码部分 AI 工具默认只展示结果明确要求输出完整项目和文件目录在提示词里写清“需要可部署的代码”页面 SEO 不被收录meta 标签缺失或 robots 配置错误检查 head 区域和 robots.txt补全 meta提交搜索引擎收录遇到问题时最有效的做法是把浏览器报错原样复制给 AI而不是只写“页面坏了”。AI 对完整报错信息的定位能力远比模糊描述强。9. Vibe Coding 最佳实践与合规提醒Vibe Coding 建站速度快但工程习惯不能丢。下面这组最佳实践是我比较推荐的每次改动前保留一个可用版本提交到 Git。Vibe Coding 有时会越改越坏有存档就能快速回退。提示词写好后存成文档。同一个项目隔几天再迭代时可以直接复用不用重新描述需求。第一次做项目时先用小参数测试。比如先做单页面再扩展多页面不要一开始就让 AI 生成一个巨大项目。图片和字体尽量压缩和使用本地资源。外链 CDN 虽然方便但失效后会影响页面显示。表单类功能不要直接在静态页面里接数据库没有后端时使用邮箱链接或第三方服务并明确隐私说明。批量任务而不是单页时例如批量生成多个分类页面先让 AI 生成一个模板再用模板套用不要一条条生成。涉及他人作品、头像、姓名时确认已获得授权不未经许可展示他人隐私信息。不模仿官方站点钓鱼不做品牌混淆页面导航站也不要大量复制他人文案和内容。AI 生成的第三方脚本要审查来源。如果涉及用户浏览数据收集必须明确告知和提供选择。这些点不是流程外的工作而是把 Vibe Coding 从“能跑”变成“能长期维护”的关键。10. 总结与下一步Vibe Coding 建个人网站最值得尝试的点是它把整个开发链路压得很短你只要能把需求讲清楚AI 就能给出页面结构和样式剩下的工作重点从“编码”变成“验证和迭代”。建议你最先做一个单页导航站它结构清晰、功能直接不会因为内容太多而失控。最容易踩的坑是跳过本地测试直接部署最后在手机上发现布局全乱。下一步的扩展方向可以从三方面走把单个 HTML 迁移到 Vite 或 Astro支持 Markdown 博客把个人主页和个人导航站合并成统一品牌页面把网站内容链接到自己的 GitHub 或作品集形成持续更新。如果你后续想尝试在鸿蒙生态里做应用页面原型Vibe Coding 的提示词和项目管理思维方式同样可以迁移过去只是目标平台和组件写法需要调整。先把这一套个人网站流程跑通后面的开发节奏会快很多。