尧图网站建设 
如果你最近逛技术社区大概率会看到“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 个项目卡片。整体风格简洁现代使用深色背景。生成后你大概率会看到一个结构完整的页面。这时候不要急着开始改样式先做三件事把所有文案替换成你自己的真实信息。观察一下页面在桌面和手机宽度下的表现。把生成结果截图保存作为这一版的快照。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.6s8. 部署上线一键发布但别忽略细节当页面效果达到你的预期接下来就是部署。Vercel AI 平台通常支持自动部署过程很简单但有几个细节容易踩坑。8.1 绑定域名如果你只有默认的.vercel.app域名可以用。但如果追求更专业的个人品牌建议注册一个自己的域名。域名注册直接去域名服务商那里按流程操作即可选择与你的名字或品牌相关的短域名更好。8.2 检查页面元信息部署之前记得让 AI 帮你补上页面标题title搜索引擎描述meta description关键词meta keywords效果有限但仍可补充分享时的缩略图Open Graph 图片网站图标favicon这些信息的代码基本都是 HTML 的head部分让 AI 直接生成即可。下面是一份常见的元信息示例把内容替换成自己的就可以meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title你的名字 | 个人作品集/title meta namedescription content后端开发者专注于分布式系统与云原生技术这里有我的项目与博客。 / meta propertyog:title content你的名字 | 个人作品集 / meta propertyog:description content后端开发者专注于分布式系统与云原生技术。 /8.3 部署后的验证部署完成后以下几个验证建议在 Chrome 无痕窗口打开网站确认没有缓存旧版本。打开开发者工具的移动端模拟器检查手机宽度下排版是否正常。检查所有页面链接和按钮能否正常跳转。检查页面加载速度。如果首屏图片体积太大让 AI 换成压缩图或使用 CSS 渐变占位。如果你想把网站托管在更可控的位置也可以让 AI 把最终代码导出然后自己推送到 GitHub再通过 GitHub Pages、Gitee Pages 或 Netlify 部署。Vercel 国际平台在国内部分网络环境下访问可能不稳定如果你主要面向国内用户也可以优先选择国内访问更友好的托管方案。9. 常见问题与排查思路Vibe Coding 并不是任何时候都一帆风顺。整理几个高频问题遇到可以直接对照排查。问题现象可能原因排查方式解决方案生成页面空白生成任务未完成或代码编译出错检查生成状态查看预览控制台报错等待生成完毕如果持续空白重新生成或换一个更简单的 Prompt页面能打开但样式全乱单次 Prompt 里改动过多AI 没有完整更新样式截图确认哪些部分生效一次只改一类问题要求 AI 检查所有相关页面中文字体渲染效果差使用了不支持中文的英文字体检查字体栈配置明确要求正文使用中文字体图片加载慢使用了高清原图且未压缩查看网络请求耗时让 AI 改为压缩图片或使用图片压缩工具处理后再替换部署后样式和预览不一致浏览器缓存或资源路径问题无痕窗口打开查看控制台资源加载状态清理缓存或要求 AI 检查资源相对路径多页面导航点了没反应路由配置或锚点路径错误点击导航查看 URL 是否变化要求 AI 检查导航路径和区块 ID 是否匹配AI 改了 A 处导致 B 处出错修改范围过大组件逻辑耦合回滚到上一版本缩小修改范围建议维护 Git 或版本快照遇到问题及时回滚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 工作流把整个流程总结成下面的循环你会越用越顺手写需求文档告诉 AI 网站目标、访客、核心动作。用设计规范 Prompt 生成第一版。截图 文字描述一次改一类问题。每次成功改动后更新设计规范和版本快照。验证、部署、上线。11. 总结与后续学习方向Vibe Coding 做个人网站本质上是把原来写在代码里的“布局逻辑”和“设计约束”改成用自然语言表达。它提升的不只是生成效率更重要的是改变了开发者的工作方式你不再需要盯着 CSS 属性调试半天但你需要更清楚地理解“什么是好设计”。这篇文章主要讲清楚了几个点Vibe Coding 的门槛不是代码而是“把设计感说清楚”。开始生成之前先明确网站定位、目标访客、核心动作和视觉偏好。设计感 Prompt 要覆盖风格、配色、字体、间距、动效五个维度。生成之后不要做大而无当的调整要一次只改一类问题并用截图 文字描述来驱动迭代。部署不是终点元信息、响应式、加载速度、内容准确性都要检查。如果你已经跑通了第一个个人网站下一步可以尝试往里面加更多功能博客文章列表、标签页、暗色模式切换、表单提交甚至接入一个小型后台来管理内容。这些功能都可以继续用 Vibe Coding 的思路来迭代。最后提醒一句这份设计规范和 Prompt 模板建议收藏备用真正动手生成时直接从第 6 节的模板复制改起会比你从零开始写省力很多。 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 个项目卡片。整体风格简洁现代使用深色背景。生成后你大概率会看到一个结构完整的页面。这时候不要急着开始改样式先做三件事把所有文案替换成你自己的真实信息。观察一下页面在桌面和手机宽度下的表现。把生成结果截图保存作为这一版的快照。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.6s8. 部署上线一键发布但别忽略细节当页面效果达到你的预期接下来就是部署。Vercel AI 平台通常支持自动部署过程很简单但有几个细节容易踩坑。8.1 绑定域名如果你只有默认的.vercel.app域名可以用。但如果追求更专业的个人品牌建议注册一个自己的域名。域名注册直接去域名服务商那里按流程操作即可选择与你的名字或品牌相关的短域名更好。8.2 检查页面元信息部署之前记得让 AI 帮你补上页面标题title搜索引擎描述meta description关键词meta keywords效果有限但仍可补充分享时的缩略图Open Graph 图片网站图标favicon这些信息的代码基本都是 HTML 的head部分让 AI 直接生成即可。下面是一份常见的元信息示例把内容替换成自己的就可以meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title你的名字 | 个人作品集/title meta namedescription content后端开发者专注于分布式系统与云原生技术这里有我的项目与博客。 / meta propertyog:title content你的名字 | 个人作品集 / meta propertyog:description content后端开发者专注于分布式系统与云原生技术。 /8.3 部署后的验证部署完成后以下几个验证建议在 Chrome 无痕窗口打开网站确认没有缓存旧版本。打开开发者工具的移动端模拟器检查手机宽度下排版是否正常。检查所有页面链接和按钮能否正常跳转。检查页面加载速度。如果首屏图片体积太大让 AI 换成压缩图或使用 CSS 渐变占位。如果你想把网站托管在更可控的位置也可以让 AI 把最终代码导出然后自己推送到 GitHub再通过 GitHub Pages、Gitee Pages 或 Netlify 部署。Vercel 国际平台在国内部分网络环境下访问可能不稳定如果你主要面向国内用户也可以优先选择国内访问更友好的托管方案。9. 常见问题与排查思路Vibe Coding 并不是任何时候都一帆风顺。整理几个高频问题遇到可以直接对照排查。问题现象可能原因排查方式解决方案生成页面空白生成任务未完成或代码编译出错检查生成状态查看预览控制台报错等待生成完毕如果持续空白重新生成或换一个更简单的 Prompt页面能打开但样式全乱单次 Prompt 里改动过多AI 没有完整更新样式截图确认哪些部分生效一次只改一类问题要求 AI 检查所有相关页面中文字体渲染效果差使用了不支持中文的英文字体检查字体栈配置明确要求正文使用中文字体图片加载慢使用了高清原图且未压缩查看网络请求耗时让 AI 改为压缩图片或使用图片压缩工具处理后再替换部署后样式和预览不一致浏览器缓存或资源路径问题无痕窗口打开查看控制台资源加载状态清理缓存或要求 AI 检查资源相对路径多页面导航点了没反应路由配置或锚点路径错误点击导航查看 URL 是否变化要求 AI 检查导航路径和区块 ID 是否匹配AI 改了 A 处导致 B 处出错修改范围过大组件逻辑耦合回滚到上一版本缩小修改范围建议维护 Git 或版本快照遇到问题及时回滚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 工作流把整个流程总结成下面的循环你会越用越顺手写需求文档告诉 AI 网站目标、访客、核心动作。用设计规范 Prompt 生成第一版。截图 文字描述一次改一类问题。每次成功改动后更新设计规范和版本快照。验证、部署、上线。11. 总结与后续学习方向Vibe Coding 做个人网站本质上是把原来写在代码里的“布局逻辑”和“设计约束”改成用自然语言表达。它提升的不只是生成效率更重要的是改变了开发者的工作方式你不再需要盯着 CSS 属性调试半天但你需要更清楚地理解“什么是好设计”。这篇文章主要讲清楚了几个点Vibe Coding 的门槛不是代码而是“把设计感说清楚”。开始生成之前先明确网站定位、目标访客、核心动作和视觉偏好。设计感 Prompt 要覆盖风格、配色、字体、间距、动效五个维度。生成之后不要做大而无当的调整要一次只改一类问题并用截图 文字描述来驱动迭代。部署不是终点元信息、响应式、加载速度、内容准确性都要检查。如果你已经跑通了第一个个人网站下一步可以尝试往里面加更多功能博客文章列表、标签页、暗色模式切换、表单提交甚至接入一个小型后台来管理内容。这些功能都可以继续用 Vibe Coding 的思路来迭代。最后提醒一句这份设计规范和 Prompt 模板建议收藏备用真正动手生成时直接从第 6 节的模板复制改起会比你从零开始写省力很多。