Vibe Coding 实战：用自然语言打造有设计感的个人网站

如果你最近逛技术社区，大概率会看到“Vibe Coding”这个词。很多人把它理解成“用嘴写代码”，觉得只要对着 AI 说几句话，它就能自动把网站做出来。这个理解不算错，但恰恰是它害了很多人。

真正用 Vibe Coding 生成过个人网站的人，几乎都遇到过同一个尴尬时刻：AI 确实给了你一个能打开的页面，但怎么看都像“模板网站生成器直接套出来的”——布局很空、配色很怪、字体忽大忽小，完全没有“设计感”。

问题出在哪？不是 AI 能力不够，而是你还没有学会“把设计感翻译成 AI 能听懂的语言”。

这篇文章我想聊清楚一件事：Vibe Coding 真正的门槛不在写代码，而在你能不能把视觉需求说清楚。我会用“做个人网站”这个最合适的切入场景，从技术选型、Prompt 设计、迭代工作流、部署上线到问题排查，完整走一遍。读完你会发现，做有设计感的个人网站，确实不需要手写一行前端代码，但需要一套成体系的表达方法。

1. 这篇文章真正要解决的问题

先给自己做个定位：你到底是哪种人？

• 想搭一个个人主页、作品集、博客，但不想学前端三件套。
• 会写一点代码，但前端审美跟不上，每次做页面都“能跑但丑”。
• 已经在用 AI 生成网站，但总觉得效果像“半成品”，不知道下一步怎么调。

如果你是以上任何一种，这篇文章就是给你写的。

Vibe Coding 解决的核心痛点，是把“从零搭建一个网站”这件事的人力成本大幅压缩。过去做一个像样的个人网站，你需要做竞品分析、画线框图、写 HTML/CSS/JS、调响应式、部署上线，整套流程顺利的话也要两三天。现在，借助 AI 生成平台，第一版页面可能在十几分钟内就能跑起来。

但这带来一个新问题：当代码生成的成本趋近于零，判断力和审美表达就成了新的壁垒。

很多人没想明白这一点，于是把自己的 Prompt 写成“帮我做一个好看的个人网站”，结果 AI 也只能给你一个“还能看”的通用模板。不是 AI 敷衍你，而是“好看”这个词太模糊了。AI 没有你的审美偏好，它只能按统计概率给你“大多数人觉得还行”的设计。

所以这篇文章真正要解决的，是怎么用结构化 Prompt 把“我想要的风格”说清楚，怎么在生成之后不断迭代，一步步把页面从“能用”打磨到“有设计感”。

2. 什么是 Vibe Coding，为什么个人网站是最佳练手场景

Vibe Coding 最早由 Andrej Karpathy 在 2025 年初提出，原意是指“你不再把自己当成一个严格的程序员，而是沉浸在氛围里，用自然语言描述意图，让 AI 完成代码实现”。听起来很玄学，但落到工程上，其实就是一种新的人机协作模式：

• 你用自然语言描述产品意图。
• AI 完成代码生成、修改、重构。
• 你主要负责判断结果是否符合预期，然后继续提需求。

这里面有一个关键变化：你的角色从一个“实现者”变成了“评审者”和“决策者”。

传统开发流程里，改一个按钮颜色，你要先找到 CSS 文件，定位按钮的类名，改完刷新浏览器看效果。Vibe Coding 流程里，你要做的事只是说一句“把首页主按钮改成高饱和的橙色，加一点 hover 阴影”。

那为什么个人网站是最佳练手场景？三个原因：

第一，范围小。个人网站通常只有几个页面：首页、关于我、作品、博客、联系方式。没有复杂的业务逻辑，没有数据库，没有权限系统，非常适合在短周期内反复迭代。

第二，反馈快。改一个配色、调一个间距，几秒钟就能看到效果。这种“快速反馈循环”恰恰是学习工具最容易上瘾的地方，也是 Vibe Coding 流最好的演示场景。

第三，容错率高。不像企业项目那样要处理并发、事务、生产事故，个人网站出了问题大不了重新生成，心理负担小。

有人可能会问：那为什么不直接在 WordPress 或者已有的模板系统上改？这完全可行。如果你已经有一个 WordPress 个人站点，拿 Vibe Coding 来优化主题样式、重新设计页面文案，也是一个很好的路线。但如果你从零开始，我更建议直接用 AI 生成平台，因为你可以从第一行代码开始就感受到“意图驱动开发”的完整流程。

3. 动手之前先想清楚：你的网站到底要做什么

很多人做个人网站的第一步就是打开 AI 工具，结果生成的页面和自己的想法完全不搭。原因很简单：你还没想清楚自己要什么，就不要指望 AI 替你想清楚。

在开始 Vibe Coding 之前，先花 20 分钟回答以下四个问题。

3.1 你的网站核心目标是什么？

个人网站常见的定位有四种：

• 个人品牌：展示你是谁、你做过什么，重点是形象和可信度。
• 作品集：展示具体项目，重点是案例和结果数据，适合设计师、开发者、摄影师。
• 技术博客：发布文章，重点是可读性和阅读体验。
• 导航页：聚合你的链接和常用入口，重点是简洁和一目了然。

目标不同，设计方向完全不同。作品集需要大图区和项目卡片，博客需要优秀的正文排版，导航页要尽量克制。定位不清是页面“没有设计感”的最常见根源。

3.2 你的目标访客是谁？

面试官、潜在客户、同行、还是朋友？不同访客关注的信息不一样。面试官想看项目和技能，客户想看服务和案例，同行想看观点和文章。

3.3 你希望访客完成什么动作？

一个页面最好只有一个核心动作。要么是“联系我”，要么是“看作品”，要么是“读博客”。这个核心动作决定了页面布局的优先级。

3.4 你的视觉偏好是什么？

这个可以简单设想要什么感觉。是极简干净、个性张扬、柔和温和，还是硬核技术感？记录你自己喜欢的 3 到 5 个参考网站或关键词，这会是后面写 Prompt 的重要素材。

完成上述分析后，你可以把你的结论整理成一段文字，作为后续 Prompt 的基础。这里先给一个信息架构模板：

网站定位：个人开发者作品集 目标访客：技术团队负责人、潜在合作方 核心动作：查看作品并联系我 首页结构： - Hero 区：姓名、一句话简介、主要身份 - 精选作品区：3 到 5 个代表性项目 - 关于区：简短个人背景 - 联系方式区：邮箱、GitHub、社交链接 视觉偏好：极简、大量留白、深色模式、强调色一种

有这份描述，你再去看 AI 生成的结果，会发现它真的“懂你”很多。

4. Vibe Coding 个人网站的技术方案选型

市面上能用来 Vibe Coding 生成网站的工具不少，但从 CSDN 读者的实操角度来看，我先帮你把范围缩小到三种主流路线。

4.1 路线一：Vercel AI 平台（推荐首选）

Vercel AI 是当前最接近“输入描述 → 生成完整网站 → 一键部署”的解决方案。你只需要用自然语言描述想要的网站类型、风格和内容，平台会帮你完成页面生成、组件设计和部署。对不熟悉 Git 和服务器的新手来说，这是最友好的入口。

它通常还带有可视化编辑器，可以直接在界面上改文本和样式，也可以在对话里持续描述修改需求，比如“把导航栏改成吸顶”“把作品卡片改成横向滚动”。这种双通道操作模式，刚好可以弥补纯对话生成的精度不足。

4.2 路线二：通用大模型 + 前端脚手架

如果你已经用惯了 ChatGPT、Claude 这类通用大模型，也可以走这个路线：让 AI 帮你生成一份完整的 HTML/CSS 页面代码，然后部署到 Netlify、GitHub Pages、Gitee Pages 等静态托管平台。

这个路线的优点是模型选择自由，缺点是每次修改都要把代码贴回对话，再重新生成，效率低一些，而且跨文件的样式调整容易出错。它适合你已经对 AI 对话比较熟练，或者想保留更高自由度的场景。

4.3 路线三：本地编辑器 + AI 插件

Cursor、VS Code + Continue 这类本地编辑器方案，适合有一点代码基础、希望逐步修改细节的开发者。你可以在本地保存代码、查看 Git 变更，也能在编辑器里让 AI 修改某个具体文件。

这个路线的学习曲线最陡，但也是可控性最强的。如果你未来有长期维护网站的计划，建议从这条路线入手。

我的建议：第一次跑通流程，优先选路线一，因为它把“生成 + 部署”合并成一个动作，能最快让你看到成果；等玩明白了，再迁移到路线三，把代码收归本地管理。

5. 第一次生成：用最小 Prompt 跑通流程

先不追求设计感，先把流程跑通。这里我用一个最小示例演示，平台以 Vercel AI 为例，其他平台逻辑类似。

5.1 注册与新建项目

访问 Vercel 官网并注册账号（用 GitHub 账号登录最方便），然后在控制台里找到 AI 生成或模板创建入口，新建一个空白项目。如果界面提示你选择项目类型，选择“Personal Website”或“个人网站”即可。

5.2 输入第一版 Prompt

第一版 Prompt 不要写太复杂，先让 AI 理解你的基本需求和页面结构：

为一名后端开发者创建一个个人作品集网站，包含首页、作品展示、关于我、联系方式四个部分。首页需要一个大标题区，用一句话介绍我的技术方向。作品区展示 4 个项目卡片。整体风格简洁现代，使用深色背景。

生成后，你大概率会看到一个结构完整的页面。这时候不要急着开始改样式，先做三件事：

1. 把所有文案替换成你自己的真实信息。
2. 观察一下页面在桌面和手机宽度下的表现。
3. 把生成结果截图保存，作为这一版的快照。

5.3 验证结果

如果页面能正常打开、内容结构符合你的预期，第一步就算完成了。如果页面空白，先检查生成是否完成，再刷新预览窗口。

跑通这个流程的意义不只是得到一个初稿，更重要的是建立信心：原来我真的不需要手写代码就能搭出一个网站。

6. 如何让 Prompt 说清楚“设计感”

这是整篇文章的重头戏。很多人的 Vibe Coding 失败在“生成容易，调好难”，根本原因是在这个环节出了问题：你没有给 AI 提供足够多的设计约束条件。

6.1 为什么“好看”“有设计感”是无效描述

当你对 AI 说“做一个有设计感的网站”，AI 实际上会怎么做？它会把训练数据里出现频率最高的设计元素堆出来：渐变背景、圆角卡片、居中大标题、悬浮阴影。这些元素单独看不丑，但组合在一起就是典型的“模板感”。

设计感的本质不是某个元素有多炫，而是一致性。使用统一的间距、统一的圆角、统一的色彩比例，让页面所有部分看起来像一个整体。

AI 擅长的是模仿，而不是“设计决策”。你必须给它具体的约束，它才能产出有连贯性的页面。

6.2 设计感 Prompt 的五个必写维度

为了让 AI 产出的页面更有设计感，你的 Prompt 至少要覆盖五个维度：

视觉风格关键词

只写“现代”是不够的，要具体到风格流派：

• Minimal 极简：大量留白、克制配色、少装饰。
• Editorial 编辑排版风：大标题、强对比文字、类似杂志版面。
• Brutalist 粗野主义：高对比、原始网格、不加修饰的大字。
• Neo-brutalism 新粗野：硬阴影、高饱和、粗边框。
• Glassmorphism 玻璃拟态：半透明背景、模糊效果、悬浮感。
• Corporate 商务风：严谨网格、蓝灰主色、克制的动效。

如果你对风格不确定，可以从 Dribbble、Awwwards、BestWebsiteGallery 上找 2 到 3 个你喜欢的站点，把他们的风格描述给 AI。注意不要直接搬运别人的设计文案和代码，只参考风格方向。

配色方案

不要让 AI 自由发挥。你可以在 Prompt 里指定一个主色、一个辅助色、一个背景色，并且强调“最多使用三种颜色”。这样页面至少不会花。

配色方案：背景使用 #0F0F0F 深灰色，正文使用 #F5F5F5 浅灰色，强调使用 #FF5C39 一种暖橙色。全站不要出现第四种颜色。

字体选择

告诉 AI 使用什么字体。中文站点要特别注意，因为很多好看的西文字体不支持中文字符。更稳妥的方案是：标题用一套字体，正文用另一套，并给出备选。

标题使用系统字体栈，重点保证英文和数字的现代感；中文正文使用思源黑体或系统默认无衬线字体，保证阅读清晰。

间距与排布

设计感很多来自“呼吸感”，也就是留白。建议在 Prompt 里明确要求：

页面两侧保留至少 6% 的安全边距，所有卡片间距保持统一，Hero 区域上下留白不少于屏幕高度的三分之一。段落之间使用更多留白而不是分割线来进行视觉分区。

交互细节

微交互是个人网站“有质感”的关键。可以要求 AI 加入：卡片 hover 上浮、渐变按钮过渡、滚动进入动画等，但要控制数量：

页面只使用三种动效：卡片 hover 时轻微上浮和阴影加深、滚动进入视口时的淡入效果、导航栏点击滚动到对应区块。不允许使用闪烁、自动轮播等打扰性动画。

6.3 一个可以直接复制的中文 Prompt 模板

把上面的维度组合起来，给一个模板，你直接改括号里的内容就能用：

请帮我生成一个个人网站首页。 定位：[个人开发者作品集] 目标：让访客在 10 秒内了解我的技术方向，并愿意查看我的作品。 视觉风格参考：[极简 + 编辑排版风，参考杂志目录的标题层级，拒绝模板感] 色彩方案：背景 [暖白 #FAF9F7]，正文 [深灰 #1A1A1A]，强调色 [一个绿色 #2D6A4F]，全站最多三种颜色。 字体：标题使用大字号加粗无衬线体，正文使用易读的中文无衬线体，正文行高 1.8。 间距：页面两侧至少 6% 安全边距，区块间距统一为 80px，善用留白分割区块。 动效：卡片 hover 轻微上浮，滚动时淡入，其他动效一律不要。 首页结构： 1. Hero 区：名字 + 一句话简介 + 主 CTA 按钮 2. 精选作品区：3 个项目卡片，每张卡片有图片、标题、技术栈标签 3. 关于区：一段简短自我介绍 4. 页脚：邮箱 + GitHub 链接 内容先使用占位文本，后续再替换。

这套 Prompt 的关键是把“设计感”拆成了 AI 能执行的具体要求。你会发现，生成的页面哪怕还有瑕疵，至少不再是“标准模板感”。

7. 迭代工作流：从“能看”到“有设计感”

第一版生成的结果通常达不到理想效果，这不重要。真正有价值的是后续的迭代环节。以下是我实践下来效率很高的一套工作流，叫“截图描述法”。

7.1 不要空谈整体，要有“局部视角”

很多人迭代失败，是因为他们喜欢发“整体改一下”“稍微调整一下排版”这种指令。AI 会非常困惑，然后随机改几处，结果常常是越改越乱。

正确做法是：先把页面截图保存，然后用文字告诉 AI：“在这个页面的第 2 个区块，出现了什么问题，我希望怎么调整。”

例如这样：

在首页的作品展示区中，项目卡片之间的间距看起来不一致。我希望三张卡片水平对齐，间距统一为 24px，并且卡片高度保持一致。请直接修改布局代码。

一次只修改一类问题。如果同时提颜色、字体、布局、动效四个需求，AI 很容易顾此失彼，或者只完成了其中一两项，你却很难判断它做了哪些改动。

7.2 用“对比描述”纠正偏差

当 AI 生成的配色或排版不符合预期，不要只问“你觉得这个颜色好看吗”，而是要给出你想要的对比方向。

当前首页按钮是普通的圆角矩形，我希望改成圆角更大的 pill 形状，并且 hover 时背景色从深绿色变成浅绿色，文字从白色变成深色。

你描述得越具体，AI 的修改就越接近你的预期。

7.3 从“感觉不对”到“可执行”

迭代过程中最难受的体验是：你知道页面哪里不对，但说不出来哪里不对。这时候最好的办法不是硬描述，而是用类比和反例：

这个 Hero 区的标题太大了，显得页面很空。我希望标题的字号缩小 25%，并添加一段副标题文字，副标题要比主标题小一倍以上，这样层级更明显。

“哪里大了、比什么大、小多少”，这样的描述可执行性远超“帮我调一下 Hero 区”。

7.4 建立“风格记忆”

对于经常使用的项目，一定要在项目目录下维护一份design.md文件，把你在迭代中确定下来的设计规范写进去。比如颜色值、字体、间距、圆角、动效列表。

每次开始新一轮 Vibe Coding 时，先把这份文件发给 AI，让它遵守。这样即使你连续修改了很多版，也不会因为忘记之前的要求而让 AI 把设计改回去。这个文件就相当于你个人的“设计系统”。

# 我的网站设计规范 - 主色： #FAF9F7 - 正文色： #1A1A1A - 强调色： #2D6A4F - 圆角：大卡片 16px，按钮 999px - 间距：区块之间 80px，卡片之间 24px - 字体：标题 system-ui，正文 sans-serif，行高 1.8 - 动效：hover 上浮 4px + 阴影，滚动淡入 0.6s

8. 部署上线：一键发布，但别忽略细节

当页面效果达到你的预期，接下来就是部署。Vercel AI 平台通常支持自动部署，过程很简单，但有几个细节容易踩坑。

8.1 绑定域名

如果你只有默认的.vercel.app域名，可以用。但如果追求更专业的个人品牌，建议注册一个自己的域名。域名注册直接去域名服务商那里按流程操作即可，选择与你的名字或品牌相关的短域名更好。

8.2 检查页面元信息

部署之前，记得让 AI 帮你补上：

• 页面标题（title）
• 搜索引擎描述（meta description）
• 关键词（meta keywords，效果有限，但仍可补充）
• 分享时的缩略图（Open Graph 图片）
• 网站图标（favicon）

这些信息的代码基本都是 HTML 的<head>部分，让 AI 直接生成即可。

下面是一份常见的元信息示例，把内容替换成自己的就可以：

<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>你的名字 | 个人作品集</title> <meta name="description" content="后端开发者，专注于分布式系统与云原生技术，这里有我的项目与博客。" /> <meta property="og:title" content="你的名字 | 个人作品集" /> <meta property="og:description" content="后端开发者，专注于分布式系统与云原生技术。" />

8.3 部署后的验证

部署完成后，以下几个验证建议：

• 在 Chrome 无痕窗口打开网站，确认没有缓存旧版本。
• 打开开发者工具的移动端模拟器，检查手机宽度下排版是否正常。
• 检查所有页面链接和按钮能否正常跳转。
• 检查页面加载速度。如果首屏图片体积太大，让 AI 换成压缩图或使用 CSS 渐变占位。

如果你想把网站托管在更可控的位置，也可以让 AI 把最终代码导出，然后自己推送到 GitHub，再通过 GitHub Pages、Gitee Pages 或 Netlify 部署。Vercel 国际平台在国内部分网络环境下访问可能不稳定，如果你主要面向国内用户，也可以优先选择国内访问更友好的托管方案。

9. 常见问题与排查思路

Vibe Coding 并不是任何时候都一帆风顺。整理几个高频问题，遇到可以直接对照排查。

10. 最佳实践与工程建议

10.1 把“设计规范”当代码一样管理

无论你使用哪个平台，都应该把前面提到的design.md文件当作项目的一部分来维护。它是你和 AI 之间最重要的沟通桥梁。当 AI“失忆”时，把文件发给它，它就能立刻回到正确的设计轨道上。

10.2 善用版本快照

每次经过一轮成功的迭代，建议保存一版快照。很多 AI 平台自带版本历史，如果没有，你可以本地把关键代码复制一份，或者在聊天记录里保留每一版 Prompt 和生成结果。这样不小心改坏了，可以快速回退，而不是让 AI 越修改越乱。

10.3 控制单次需求数量

一次只提一个层次的修改请求。布局问题和颜色问题分开处理，字体的调整单独做，不要一次性提出 5 个需求。一次改一件事，验证完再进入下一件，整体效率反而更高。

10.4 重要内容不要依赖 AI 记住

联系方式、作品链接、个人简介这些关键信息，不要靠 AI 自行发挥。在 Prompt 里把准确的内容写进去，或者生成后自己手动检查替换。AI 生成的占位文本和虚构信息是常见的坑。

10.5 安全底线与边界

Vibe Coding 生成的是静态网站，安全风险通常可控，但仍有几点要注意：

• 不要在网站代码里写真实的私密信息，如手机号、身份证号、密码等。
• 如果后续要接入表单、留言、统计等动态功能，使用的第三方组件需要确认来源可靠。
• 部署时注意平台提示的权限设置，不要随意勾选高风险权限。
• 展示作品时要确认版权归属，不能直接用未经授权的图片、字体、设计素材。

10.6 效率优先的 AI 工作流

把整个流程总结成下面的循环，你会越用越顺手：

1. 写需求文档，告诉 AI 网站目标、访客、核心动作。
2. 用设计规范 Prompt 生成第一版。
3. 截图 + 文字描述，一次改一类问题。
4. 每次成功改动后更新设计规范和版本快照。
5. 验证、部署、上线。

11. 总结与后续学习方向

Vibe Coding 做个人网站，本质上是把原来写在代码里的“布局逻辑”和“设计约束”改成用自然语言表达。它提升的不只是生成效率，更重要的是改变了开发者的工作方式：你不再需要盯着 CSS 属性调试半天，但你需要更清楚地理解“什么是好设计”。

这篇文章主要讲清楚了几个点：

• Vibe Coding 的门槛不是代码，而是“把设计感说清楚”。
• 开始生成之前，先明确网站定位、目标访客、核心动作和视觉偏好。
• 设计感 Prompt 要覆盖风格、配色、字体、间距、动效五个维度。
• 生成之后不要做大而无当的调整，要一次只改一类问题，并用截图 + 文字描述来驱动迭代。
• 部署不是终点，元信息、响应式、加载速度、内容准确性都要检查。

如果你已经跑通了第一个个人网站，下一步可以尝试往里面加更多功能：博客文章列表、标签页、暗色模式切换、表单提交，甚至接入一个小型后台来管理内容。这些功能都可以继续用 Vibe Coding 的思路来迭代。

最后提醒一句：这份设计规范和 Prompt 模板建议收藏备用，真正动手生成时，直接从第 6 节的模板复制改起，会比你从零开始写省力很多。