如果你是一名前端工程师或者正准备搭一个属于自己的个人网站大概率经历过这种场景技术栈选来选去静态 HTML 觉得太简陋React/Vue 又显得重还要再纠结要不要上个 CMS、要不要买台服务器。页面功能倒是都能实现但打开浏览器一看配色不协调、间距不对、字体层级混乱看起来就像“程序员默认风格”。问题不在你不会写代码而在于从“脑中的想法”到“可浏览的页面”之间隔着一层很高的转换成本既要有视觉判断又要有前端实现还要理解部署链路。最近一年Vibe Coding 这个概念被频繁提起它正好把这层转换成本压了下来。很多人以为 Vibe Coding 只是“让 AI 写代码”更准确的理解是你像和一位前端同事沟通一样描述需求AI 负责把需求翻译成可运行的代码而你只需要判断方向、审查结果、不断迭代。这篇文章会从概念、工具选型、提示词设计、完整示例到部署上线讲清楚“如何用 Vibe Coding 做出一个有设计感的个人网站”。读完这篇你能获得三样东西一套可复用的个人网站 Vibe Coding 工作流一份可以直接改着用的提示词模板和完整页面代码一份覆盖常见问题的排查清单。我会尽量少讲抽象概念多讲能落地的判断和操作。1. 这篇文章真正要解决的问题个人网站这个需求看起来简单做起来其实很容易卡住。最常见的困境有三个。第一技术栈选择困难。个人网站介于“静态页面”和“完整应用”之间不知道选什么。用纯 HTML 直接写后期加博客、加留言、加项目展示扩展麻烦用 Next.js 或 Vue 全家桶又要搭建、配置、打包初期成本高。第二设计感缺失。设计感不是会写 CSS 就有的。字号比例、留白节奏、颜色搭配、圆角与阴影的分寸你很难用一句“font-size: 16px”表达清楚。第三部署和维护成本。服务器、域名、CI/CD、HTTPS每一项都容易劝退只是想展示自己的人。Vibe Coding 解决的是“用对话描述代替手工实现”的问题。你可以把技术栈选择交给 AI把初版视觉实现交给 AI把部署引导也交给 AI自己只做三件事清楚描述需求、审查生成结果、不断迭代细节。这意味着个人网站的门槛从“全栈工程师”降到了“你只需要知道网站长什么样”。如果你符合以下任意一种情况这篇文章适合认真读下去想给作品集做一个展示页的设计师或开发者想低成本验证个人品牌页面的初学者已经有技术基础、但想提高前端产出效率的工程师。我先给一个明确判断个人网站是目前最值得尝试 Vibe Coding 的入门场景没有之一。2. Vibe Coding 是什么概念、误区和边界Vibe Coding直译过来是“氛围编码”最早由 OpenAI CEO Sam Altman 在 2025 年初正式提出指的是开发者用自然语言描述软件需求让 AI 编码工具自动生成代码本质上是一种“对话式开发”。名字里的 Vibe 强调你的状态已经不再是一个字一个字地写代码而是像总导演一样描述画面让 AI 去执行每一帧。需要区分的是传统的 AI 辅助编码是你在写代码的同时让 AI 补全或建议主体还是“你在写”Vibe Coding 更极端主体是“你在说”AI 负责写。举例来说传统方式是你帮我写一个 flex 布局让三个卡片横向排列可以换行。 AI输出 flex 代码片段。而 Vibe Coding 方式可能是你做一个个人主页最上方是一句暖色的自我介绍下面用卡片展示三个项目整体用浅色背景加深色文字留白要有呼吸感。 AI输出完整的 HTML/CSS/JS 文件并告诉你如何本地打开。所以Vibe Coding 真正降低的是“想法到原型”的转换成本而不是把所有编程问题都解决掉。从当前行业实践看主流的工具包括 CursorAI 代码编辑器、Bolt.new浏览器内生成全栈应用、WindsurfAI 原生 IDE、Replit Agent云端开发智能体、v0专注前端页面生成的工具等。它们之间的差异主要在于是否需要本地环境、是否偏前端、是否能生成全栈后端、是否适合团队协作后面我会单独给一张对比表。Vibe Coding 也有明确的边界。它在原型验证、静态页面、工具类小应用上表现很好但在涉及复杂业务逻辑、严格的数据一致性、合规审计、高并发系统时仍然需要传统工程能力兜底。另一个常见误区是“完全放手”。AI 生成的代码可能包含冗余依赖、过时 API、安全隐患。正确姿势是让 AI 写初版但你必须能看懂关键逻辑并且能审查。还有一个值得注意的信号从各类开发者大会的动向看HarmonyOS 等客户端生态也在强调 Agent 化开发和 AI 辅助编码这说明 Vibe Coding 的实践范围正在从 Web 前端扩展到更多端侧场景。对于个人网站来说它同时是一个快速上手的入口。3. 为什么个人网站最适合做 Vibe Coding 入门项目这个判断不是随口说主要基于四个原因。第一边界清晰。个人网站的目标、页面结构、内容都由你定义业务逻辑复杂度低不像电商或后台管理系统那样有大量状态一致性要求。你不需要在需求描述里处理并发、事务、权限这些抽象概念只需要把“我是谁、我做过什么、怎么联系我”讲清楚。第二设计感可以通过模式化组合实现。有设计感的页面通常不是某个炫技效果而是字体比例、间距、颜色、留白这些基础规则组合出来的。这类规则 AI 很容易理解“字号层级为 24/18/14行高 1.6主色用深灰强调色用暖橙卡片圆角 12px阴影用低透明度”。当你能用一句话说清这套规则AI 就能稳定输出不错的视觉结果。第三部署链路非常简单。个人网站完全可以做成静态站点推到 Git 仓库后由 Vercel、GitHub Pages 或 Netlify 自动部署。相比 WordPress 需要 XAMPP、数据库、PHP 环境的传统路线Vibe Coding 加静态部署的方式省掉了大量环境维护成本。第四迭代成本极低。AI 改一次页面文案、调整一次布局只需要一次对话而传统方式可能涉及修改 HTML、CSS、构建配置多个环节。对于“设计师想快速看效果”这个高频需求快是最大的优势。这里把两种路线做一个直观对比维度传统个人网站路线Vibe Coding 静态部署路线技术栈选择需要自己权衡静态、框架、CMSAI 根据需求推荐并直接生成设计实现手写 CSS调样式费时用自然语言描述AI 输出完整样式本地环境可能需要 PHP、数据库、Node 环境纯静态或轻量框架环境要求低部署维护服务器、域名、HTTPS 自己配置推到 Git 仓库自动部署免费额度够用修改迭代改文件、重新部署对话式修改AI 直接生成新版本适合场景需要 CMS、多用户、复杂交互的站点展示型、作品集型、导航型个人网站很多人会纠结要不要上 WordPress。我的判断是如果网站核心是“长期写文章、需要后台管理希望一个成熟体系省掉前端开发”WordPress 依然是可靠选择但如果你的目标是“快速做出一个有个性、有设计感的展示页”Vibe Coding 加静态页面明显更省成本。个人导航网站这类场景同理一个静态页面配上图标和分组完全够用。4. 环境准备与工具选型如果你现在想动手不需要复杂的服务器。按“浏览器端”和“本地端”两条路线来准备即可。4.1 AI 编码工具选型不同的 Vibe Coding 工具体验差异较大我按实际情况整理了一张对比表工具形态适合场景特点Cursor本地 IDE已有代码库、需要深度编辑编辑器体验强适合工程师Bolt.new浏览器内开发快速生成全栈原型免本地环境交互式预览Windsurf本地 IDEAI 原生编码强调 Agent 式补全和编辑Replit Agent云端 IDE快速搭建 Web 应用内置运行、部署能力v0浏览器内生成纯前端页面和组件适合快速生成 UI 质量较高的页面对于“从零做个人网站”这个目标我更推荐先试浏览器内工具因为它不需要安装环境输入提示词就能看到预览效果。等你积累了需求描述能力再回到 Cursor 这类本地编辑器做精细修改会更顺手。账号规则和免费额度以工具官网实际要求为准本文不假设具体数字。4.2 部署平台选型只做静态个人网站优先考虑以下三个平台特点Vercel部署简单提供 HTTPS适合前端项目GitHub Pages仓库直出静态页面配合 GitHub 使用Netlify同样支持静态站点有表单和函数能力三者都可以从 Git 仓库自动部署。个人网站用 Vercel 的体验最顺滑也是目前 AI 生成前端项目时默认推荐较多的平台。4.3 需要提前准备的账号建议花十分钟准备这几样一个 GitHub或 Gitee账号用于存放代码仓库记录版本。一个 Vercel 账号可以直接用 GitHub 登录。一个 AI 编码工具的账号优先选择有免费额度的产品。如果有自定义域名的需求可以提前买一个域名但上线初期用平台分配的默认域名也完全够用。这几步做完你已经具备开始 Vibe Coding 的全部前置条件。不用安装 Node、不用配置数据库、不用购买云服务器。5. 核心流程拆解从想法到上线的完整链路Vibe Coding 的流程可以拆成五步每一步都有明确的目标和关键动作。5.1 定义站点目标和页面结构开始对话之前先自己想清楚三件事这个网站给谁看他们最想看到什么你希望他们看完后做什么。举个例子目标展示个人作品吸引合作机会。核心内容自我介绍、精选项目、联系方式。期望动作看完后点击“联系我”并发送邮件。页面结构不用复杂一页式就够Hero 区名字 一句话介绍、关于区、项目卡片区、联系区。先定义内容再谈设计。很多人一上来就想着配色和动效结果内容空洞页面再精致也没有价值。5.2 用提示词描述需求提示词是 Vibe Coding 的核心输入质量直接决定产出质量。一个合格的提示词至少包含五部分提示词要素说明示例角色希望 AI 以什么身份输出你是一位擅长极简风格的前端工程师目标要做出什么页面帮我生成一个个人主页内容页面要展示什么包含名字、头像、三个项目卡片、联系方式设计约束颜色、字体、风格浅色背景、深灰文字、暖橙色强调色字体层级清晰输出要求使用什么技术、返回什么格式使用单个 HTML 文件包含内联 CSS可以本地打开后面第 6 章会给出一个可以直接用的“完整提示词模板”你只需要把自己的信息填进去。5.3 生成、审查、再生成拿到 AI 输出的第一版代码后不要急着部署。先打开预览按三个问题检查页面内容是否完整有没有缺区块。布局在桌面和手机宽度下是否都正常。样式是否符合你描述的设计约束。如果不符合直接追问。比如“项目卡片之间的间距再大一点背景改成暖白色标题字体加大。” Vibe Coding 的优势就在于你不需要学 CSS说想要的效果就行。5.4 迭代设计与内容每一轮对话只改一类问题。不要在一次提示里既改布局又换配色AI 容易顾此失彼。建议按“内容、布局、视觉、交互”的顺序进行迭代先保证信息完整最后再做动效细节。5.5 部署与验证代码满意后把 HTML 文件提交到 Git 仓库再连接到 Vercel 部署。具体命令和步骤会在第 7 章演示。这五步看起来简单但真正决定成败的是第 5.2 步。下一章给出完整示例你可以直接复制改造。6. 完整示例用自然语言生成一个有设计感的个人主页6.1 差的提示词和好的提示词差的提示词长这样帮我做一个个人网站。这个提示词能跑通但产出的页面大概率没有方向感内容空泛、风格随机、页面结构不完整。问题不在 AI而在需求定义不清晰。好的提示词长这样可以直接复制替换你是一位擅长极简风格的前端工程师。请帮我生成一个个人主页保存为一个 HTML 文件包含内联 CSS浏览器打开即可运行。 页面要求 1. Hero 区顶部显示我的名字“小林”和一句介绍“全栈工程师喜欢把复杂问题变简单”背景为浅米色。 2. 关于区用简短段落介绍我的工作经历不超过 80 字。 3. 项目区展示三个项目卡片每张卡片包含项目名称、一句说明、一个“查看详情”链接使用灰色边框和圆角卡片。 4. 联系区显示邮箱 helloexample.com 和 GitHub 链接。 5. 风格整体使用浅色背景、深灰文字强调色用暖橙色#E8590C字体层级清晰留白充分有 hover 过渡效果。 6. 响应式在手机宽度下项目卡片变成单列。 7. 无障碍文字 Vibe Coding入门：如何用AI自然语言对话搭建个人网站
如果你是一名前端工程师或者正准备搭一个属于自己的个人网站大概率经历过这种场景技术栈选来选去静态 HTML 觉得太简陋React/Vue 又显得重还要再纠结要不要上个 CMS、要不要买台服务器。页面功能倒是都能实现但打开浏览器一看配色不协调、间距不对、字体层级混乱看起来就像“程序员默认风格”。问题不在你不会写代码而在于从“脑中的想法”到“可浏览的页面”之间隔着一层很高的转换成本既要有视觉判断又要有前端实现还要理解部署链路。最近一年Vibe Coding 这个概念被频繁提起它正好把这层转换成本压了下来。很多人以为 Vibe Coding 只是“让 AI 写代码”更准确的理解是你像和一位前端同事沟通一样描述需求AI 负责把需求翻译成可运行的代码而你只需要判断方向、审查结果、不断迭代。这篇文章会从概念、工具选型、提示词设计、完整示例到部署上线讲清楚“如何用 Vibe Coding 做出一个有设计感的个人网站”。读完这篇你能获得三样东西一套可复用的个人网站 Vibe Coding 工作流一份可以直接改着用的提示词模板和完整页面代码一份覆盖常见问题的排查清单。我会尽量少讲抽象概念多讲能落地的判断和操作。1. 这篇文章真正要解决的问题个人网站这个需求看起来简单做起来其实很容易卡住。最常见的困境有三个。第一技术栈选择困难。个人网站介于“静态页面”和“完整应用”之间不知道选什么。用纯 HTML 直接写后期加博客、加留言、加项目展示扩展麻烦用 Next.js 或 Vue 全家桶又要搭建、配置、打包初期成本高。第二设计感缺失。设计感不是会写 CSS 就有的。字号比例、留白节奏、颜色搭配、圆角与阴影的分寸你很难用一句“font-size: 16px”表达清楚。第三部署和维护成本。服务器、域名、CI/CD、HTTPS每一项都容易劝退只是想展示自己的人。Vibe Coding 解决的是“用对话描述代替手工实现”的问题。你可以把技术栈选择交给 AI把初版视觉实现交给 AI把部署引导也交给 AI自己只做三件事清楚描述需求、审查生成结果、不断迭代细节。这意味着个人网站的门槛从“全栈工程师”降到了“你只需要知道网站长什么样”。如果你符合以下任意一种情况这篇文章适合认真读下去想给作品集做一个展示页的设计师或开发者想低成本验证个人品牌页面的初学者已经有技术基础、但想提高前端产出效率的工程师。我先给一个明确判断个人网站是目前最值得尝试 Vibe Coding 的入门场景没有之一。2. Vibe Coding 是什么概念、误区和边界Vibe Coding直译过来是“氛围编码”最早由 OpenAI CEO Sam Altman 在 2025 年初正式提出指的是开发者用自然语言描述软件需求让 AI 编码工具自动生成代码本质上是一种“对话式开发”。名字里的 Vibe 强调你的状态已经不再是一个字一个字地写代码而是像总导演一样描述画面让 AI 去执行每一帧。需要区分的是传统的 AI 辅助编码是你在写代码的同时让 AI 补全或建议主体还是“你在写”Vibe Coding 更极端主体是“你在说”AI 负责写。举例来说传统方式是你帮我写一个 flex 布局让三个卡片横向排列可以换行。 AI输出 flex 代码片段。而 Vibe Coding 方式可能是你做一个个人主页最上方是一句暖色的自我介绍下面用卡片展示三个项目整体用浅色背景加深色文字留白要有呼吸感。 AI输出完整的 HTML/CSS/JS 文件并告诉你如何本地打开。所以Vibe Coding 真正降低的是“想法到原型”的转换成本而不是把所有编程问题都解决掉。从当前行业实践看主流的工具包括 CursorAI 代码编辑器、Bolt.new浏览器内生成全栈应用、WindsurfAI 原生 IDE、Replit Agent云端开发智能体、v0专注前端页面生成的工具等。它们之间的差异主要在于是否需要本地环境、是否偏前端、是否能生成全栈后端、是否适合团队协作后面我会单独给一张对比表。Vibe Coding 也有明确的边界。它在原型验证、静态页面、工具类小应用上表现很好但在涉及复杂业务逻辑、严格的数据一致性、合规审计、高并发系统时仍然需要传统工程能力兜底。另一个常见误区是“完全放手”。AI 生成的代码可能包含冗余依赖、过时 API、安全隐患。正确姿势是让 AI 写初版但你必须能看懂关键逻辑并且能审查。还有一个值得注意的信号从各类开发者大会的动向看HarmonyOS 等客户端生态也在强调 Agent 化开发和 AI 辅助编码这说明 Vibe Coding 的实践范围正在从 Web 前端扩展到更多端侧场景。对于个人网站来说它同时是一个快速上手的入口。3. 为什么个人网站最适合做 Vibe Coding 入门项目这个判断不是随口说主要基于四个原因。第一边界清晰。个人网站的目标、页面结构、内容都由你定义业务逻辑复杂度低不像电商或后台管理系统那样有大量状态一致性要求。你不需要在需求描述里处理并发、事务、权限这些抽象概念只需要把“我是谁、我做过什么、怎么联系我”讲清楚。第二设计感可以通过模式化组合实现。有设计感的页面通常不是某个炫技效果而是字体比例、间距、颜色、留白这些基础规则组合出来的。这类规则 AI 很容易理解“字号层级为 24/18/14行高 1.6主色用深灰强调色用暖橙卡片圆角 12px阴影用低透明度”。当你能用一句话说清这套规则AI 就能稳定输出不错的视觉结果。第三部署链路非常简单。个人网站完全可以做成静态站点推到 Git 仓库后由 Vercel、GitHub Pages 或 Netlify 自动部署。相比 WordPress 需要 XAMPP、数据库、PHP 环境的传统路线Vibe Coding 加静态部署的方式省掉了大量环境维护成本。第四迭代成本极低。AI 改一次页面文案、调整一次布局只需要一次对话而传统方式可能涉及修改 HTML、CSS、构建配置多个环节。对于“设计师想快速看效果”这个高频需求快是最大的优势。这里把两种路线做一个直观对比维度传统个人网站路线Vibe Coding 静态部署路线技术栈选择需要自己权衡静态、框架、CMSAI 根据需求推荐并直接生成设计实现手写 CSS调样式费时用自然语言描述AI 输出完整样式本地环境可能需要 PHP、数据库、Node 环境纯静态或轻量框架环境要求低部署维护服务器、域名、HTTPS 自己配置推到 Git 仓库自动部署免费额度够用修改迭代改文件、重新部署对话式修改AI 直接生成新版本适合场景需要 CMS、多用户、复杂交互的站点展示型、作品集型、导航型个人网站很多人会纠结要不要上 WordPress。我的判断是如果网站核心是“长期写文章、需要后台管理希望一个成熟体系省掉前端开发”WordPress 依然是可靠选择但如果你的目标是“快速做出一个有个性、有设计感的展示页”Vibe Coding 加静态页面明显更省成本。个人导航网站这类场景同理一个静态页面配上图标和分组完全够用。4. 环境准备与工具选型如果你现在想动手不需要复杂的服务器。按“浏览器端”和“本地端”两条路线来准备即可。4.1 AI 编码工具选型不同的 Vibe Coding 工具体验差异较大我按实际情况整理了一张对比表工具形态适合场景特点Cursor本地 IDE已有代码库、需要深度编辑编辑器体验强适合工程师Bolt.new浏览器内开发快速生成全栈原型免本地环境交互式预览Windsurf本地 IDEAI 原生编码强调 Agent 式补全和编辑Replit Agent云端 IDE快速搭建 Web 应用内置运行、部署能力v0浏览器内生成纯前端页面和组件适合快速生成 UI 质量较高的页面对于“从零做个人网站”这个目标我更推荐先试浏览器内工具因为它不需要安装环境输入提示词就能看到预览效果。等你积累了需求描述能力再回到 Cursor 这类本地编辑器做精细修改会更顺手。账号规则和免费额度以工具官网实际要求为准本文不假设具体数字。4.2 部署平台选型只做静态个人网站优先考虑以下三个平台特点Vercel部署简单提供 HTTPS适合前端项目GitHub Pages仓库直出静态页面配合 GitHub 使用Netlify同样支持静态站点有表单和函数能力三者都可以从 Git 仓库自动部署。个人网站用 Vercel 的体验最顺滑也是目前 AI 生成前端项目时默认推荐较多的平台。4.3 需要提前准备的账号建议花十分钟准备这几样一个 GitHub或 Gitee账号用于存放代码仓库记录版本。一个 Vercel 账号可以直接用 GitHub 登录。一个 AI 编码工具的账号优先选择有免费额度的产品。如果有自定义域名的需求可以提前买一个域名但上线初期用平台分配的默认域名也完全够用。这几步做完你已经具备开始 Vibe Coding 的全部前置条件。不用安装 Node、不用配置数据库、不用购买云服务器。5. 核心流程拆解从想法到上线的完整链路Vibe Coding 的流程可以拆成五步每一步都有明确的目标和关键动作。5.1 定义站点目标和页面结构开始对话之前先自己想清楚三件事这个网站给谁看他们最想看到什么你希望他们看完后做什么。举个例子目标展示个人作品吸引合作机会。核心内容自我介绍、精选项目、联系方式。期望动作看完后点击“联系我”并发送邮件。页面结构不用复杂一页式就够Hero 区名字 一句话介绍、关于区、项目卡片区、联系区。先定义内容再谈设计。很多人一上来就想着配色和动效结果内容空洞页面再精致也没有价值。5.2 用提示词描述需求提示词是 Vibe Coding 的核心输入质量直接决定产出质量。一个合格的提示词至少包含五部分提示词要素说明示例角色希望 AI 以什么身份输出你是一位擅长极简风格的前端工程师目标要做出什么页面帮我生成一个个人主页内容页面要展示什么包含名字、头像、三个项目卡片、联系方式设计约束颜色、字体、风格浅色背景、深灰文字、暖橙色强调色字体层级清晰输出要求使用什么技术、返回什么格式使用单个 HTML 文件包含内联 CSS可以本地打开后面第 6 章会给出一个可以直接用的“完整提示词模板”你只需要把自己的信息填进去。5.3 生成、审查、再生成拿到 AI 输出的第一版代码后不要急着部署。先打开预览按三个问题检查页面内容是否完整有没有缺区块。布局在桌面和手机宽度下是否都正常。样式是否符合你描述的设计约束。如果不符合直接追问。比如“项目卡片之间的间距再大一点背景改成暖白色标题字体加大。” Vibe Coding 的优势就在于你不需要学 CSS说想要的效果就行。5.4 迭代设计与内容每一轮对话只改一类问题。不要在一次提示里既改布局又换配色AI 容易顾此失彼。建议按“内容、布局、视觉、交互”的顺序进行迭代先保证信息完整最后再做动效细节。5.5 部署与验证代码满意后把 HTML 文件提交到 Git 仓库再连接到 Vercel 部署。具体命令和步骤会在第 7 章演示。这五步看起来简单但真正决定成败的是第 5.2 步。下一章给出完整示例你可以直接复制改造。6. 完整示例用自然语言生成一个有设计感的个人主页6.1 差的提示词和好的提示词差的提示词长这样帮我做一个个人网站。这个提示词能跑通但产出的页面大概率没有方向感内容空泛、风格随机、页面结构不完整。问题不在 AI而在需求定义不清晰。好的提示词长这样可以直接复制替换你是一位擅长极简风格的前端工程师。请帮我生成一个个人主页保存为一个 HTML 文件包含内联 CSS浏览器打开即可运行。 页面要求 1. Hero 区顶部显示我的名字“小林”和一句介绍“全栈工程师喜欢把复杂问题变简单”背景为浅米色。 2. 关于区用简短段落介绍我的工作经历不超过 80 字。 3. 项目区展示三个项目卡片每张卡片包含项目名称、一句说明、一个“查看详情”链接使用灰色边框和圆角卡片。 4. 联系区显示邮箱 helloexample.com 和 GitHub 链接。 5. 风格整体使用浅色背景、深灰文字强调色用暖橙色#E8590C字体层级清晰留白充分有 hover 过渡效果。 6. 响应式在手机宽度下项目卡片变成单列。 7. 无障碍文字