前几天有朋友问我大家都在说的 Vibe Coding是不是真的可以让我这种不太会写前端的人直接做出一个有设计感的个人网站我当时的回答是能但不是靠一句“帮我做一个漂亮网站”就完事。真正能用 Vibe Coding 把个人网站做到有设计感的人往往不是提示词写得最长的人而是愿意先想清楚“我要什么感觉”、再一步步把这种感觉翻译成 AI 能执行需求的人。这段时间我陆陆续续帮朋友搭了好几个个人网站也看了一些 AI 生成的项目一个很直观的感受是工具已经把生成代码的门槛拉得很低真正拉开差距的是围绕“设计感”做拆解、验证和迭代的能力。1. Vibe Coding 不是偷懒而是换了一种和代码对话的方式1.1 先破除“一句话生成网站”的误解“Vibe Coding”这个词如今在技术社区里几乎绕不开。它可以被理解成一种“带着感觉写代码”的工作方式你把自己期望的体验、风格、交互细节描述出来AI 生成草稿你再基于结果调整方向继续让 AI 修改。这个过程很像在设计工作室里跟助手不断说“再高级一点”“这里有点闷”“左边能不能再透点气”——只是你对话的对象变成了模型输出物变成了能直接运行的代码。但很多人第一次尝试都会被现实教育在对话框里输入“帮我做一个有设计感的个人网站”得到的往往是一个套着默认色板、居中布局、圆角卡片、hover 阴影的通用页面。它不丑但也没设计感。它最大的问题是“零个性”——和一百个其他 AI 生成站点的观感没有区别。这不是模型能力不够而是你的需求描述里缺少设计约束。设计感不是一个附加属性不是最后“美化一下”就能解决的它是由版式、字体、色彩、间距、动效和内容气质共同决定的系统结果。你没说清楚这些变量模型就只能选择最安全、最平均的输出。1.2 为什么过去个人网站难在“设计感”早年间个人网站主要靠手写 HTML/CSS或者套用现成模板。对不是设计出身的人来说难点是“不会写代码”对会写代码的人来说难点是“不会做设计”。前者卡在实现后者卡在审美。模板能解决一部分问题但模板有它的边界你用模板只是换衣服衣服的结构、尺码、气质都是别人定好的想要调整成自己的想法反而比从零开始更难。Vibe Coding 真正的价值是同时降低了两边的门槛。它不要求你精通 CSS 语法也不要求你背下来设计规范你只需要具备两样能力知道自己想要什么感觉以及能识别输出结果离这种感觉有多远。这两样能力不需要五年美术功底更接近日常审美判断你觉得某个人网站舒服是因为它的留白够多、字体够稳、信息层级清楚还是因为配图干净、动效克制过去这些“感觉”很难直接变成代码。现在你可以把它们写成文字左边窄栏放导航主内容区留白多标题用略带几何感的衬线字体正文用普通无衬线主色调不超过两种卡片之间用大间距而不是边框线。AI 会把这些描述转成基础代码。真正的设计感是在这一轮又一轮描述、生成、审视、修正中长出来的。1.3 Vibe Coding 真正改变的是迭代成本这是我最想强调的一点。过去你请一个前端朋友帮你改网站往往不好意思反复说“再试一版”你找模板改一个全局配色都可能牵一发动全身。而 Vibe Coding 把“改一版”的成本压到了极低对话里补一句几秒后你就能看到新的结果。你不再需要为了一个按钮的圆角半径去翻文档也不需要担心把页面改坏后回不去——版本在你每一次对话里自然留痕。低迭代成本带来的连锁反应是你愿意试更多方向愿意先跑出来再优化。这非常重要因为“设计感”不是一次生成出来的它是反复逼近出来的。如果说传统的网页设计流程是“先取景再动笔最后渲染”Vibe Coding 更像是“先糊一个泥胚再一边转一边修形”前者要求你一开始就完整后者允许你在过程中不断调整。当然低迭代成本也有副作用你很容易陷入“不断让它改但整体仍不理想”的原地打转。这也是后面几个章节要解决的问题。2. 开始之前先想清楚你的网站要解决什么问题2.1 个人网站的三种定位不管你是想要一个作品集、博客、个人名片还是一个“把各种链接和导航收在一起的中转站”定位不同设计语言完全不同。我一般把个人网站分成三类作品集型核心目标是展示项目、案例、能力。适合用大图、网格、项目详情的叙事结构视觉上可以更个性。博客型核心目标是长文阅读。设计重点在排版、栏目、内容分类和阅读体验视觉应该比作品集更安静。链接集合型很多人的个人网站其实是一个个人导航站把社交账号、文章目录、联系方式、作品入口集中在一起。结构越轻越好信息密度高但层级清楚。你可以先问自己这个网站的访客是谁他们进来之后五秒内应该看到什么他们最可能需要做什么这三个问题会直接影响信息架构而信息架构又决定了设计骨架。如果一开始不做这个判断后面所有“设计感”都只是涂脂抹粉。2.2 用“三句话”定义设计方向我建议你和 AI 开始对话之前先写下三句话作为这个项目的“设计宪法”。比如我希望访客感觉这个网站像一个安静的工作室而不是热闹的商场橱窗。我希望首页能在三秒内告诉别人我是谁我在写什么我的联系方式是什么。我接受少量动态效果但所有动效都必须服务于表达而不是为了炫技。这三句话看起来像是文字概念但它们会极大改善 AI 的生成质量。因为模型在理解风格时需要具体的方向词而不是“好看”“高级”“有设计感”这样的形容词。形容词是结果方向才是路径。你也可以把喜欢的网站截图发给 AI告诉它“我想要这样的整体气质但不需要完全一样的元素”。比较新的 AI 编程工具大多支持图片输入你可以把参考网站的头图、配色、字体搭配作为输入。这个时候你其实是在给 AI 提供高质量的先验样本它会比你用纯文字描述更准确地理解你的审美倾向。2.3 选定技术栈的底线原则对非前端专业的人来说技术栈不用太复杂。我的建议是能在静态托管上跑的就不要先上服务器能用单页解决的就不要先上复杂路由能用轻量方案就不要一上来引入重型框架。这个选择不是因为技术越轻越“高级”而是因为个人网站最大的敌人不是功能不够而是你半年后懒得更新。越轻的栈越容易被你重新打开修改。在常见实践里如果你用 AI 编程平台通常不需要自己搭脚手架平台会生成一个可以直接预览的项目如果你在代码托管平台配合 Vercel 一类部署服务流程也基本是“推送代码 - 自动构建 - 生成访问地址”。这里有一个原则任何你不想手动维护的部署步骤都应该自动化。个人网站能活多久不取决于当时做得多惊艳而取决于内容更新和改版的阻力有多大。还要注意很多 AI 生成的项目会默认引入 Node.js 环境、依赖包构建流程。如果你不熟悉这些后期维护会感觉很吃力。这时候可以优先选择输出为纯静态 HTML/CSS 或者轻量静态站点生成器的方案。先跑通再扩展比一开始把所有工具都堆上去更稳妥。3. 让 AI 做设计而不是让 AI 替你做梦3.1 最小可行页面先让页面跑起来很多人一开始就让 AI 生成“一个完整个人网站”然后对着一个长页面开始挑错。这样容易陷入两个问题一是结果文件太复杂改一个模块容易影响另一个二是你还不清楚自己到底要什么就急着让 AI 输出“完整答案”。我更建议你先定义一个最小可行页面一个首页包含标题、简短介绍、导航、一个主要行动按钮。让 AI 生成这一页部署到临时地址然后集中精力把这一页的设计语言打磨到你满意。为什么这么做因为个人网站的视觉体系通常在一个页面里就可以定义清楚用什么字体、什么间距、什么卡片样式、什么动效风格。你确定这些之后再扩展到其他页面AI 只需要按照既有风格复制和延展即可。如果一开始就多页面并行风格很容易乱排查成本也会成倍增加。3.2 设计感从情绪板开始设计感不是从“我不喜欢这个颜色”开始的而是从情绪板开始的。情绪板不一定非要做成 PPT你可以用一段话、一组描述词、三张参考图来构成。比如写一个个人博客你可以告诉 AI参考方向安静杂志排版大量留白标题带一点报纸标题感 正文用衬线字体行距 1.8页面底色用暖灰不要用亮红色。这些描述比“极简风”更有价值。“极简风”是概念模型无法判断你的极简是包豪斯、日式还是侘寂但“暖灰底色、衬线字体、行距 1.8”是可执行参数。你把可执行参数给到 AIAI 生成的页面会更接近你的想象。你需要小心的是不要在一个提示词里塞进太多设计约束。一次提太多AI 可能会顾此失彼。最好是先定整体方向再逐层优化细节每次只改一个关键变量。3.3 迭代式提示词一次只改一个变量这是整个 Vibe Coding 工作流里最重要的一条。一个常见的反面案例是“标题字体不好看颜色也太艳然后间距也再大一点顺便把导航放上面。”这种提示词会让 AI 同时修改多个变量结果就是它可能把字体改好了但颜色更艳了间距变大后布局又乱了一点。你很难判断问题是出在“这个变量本来就不合适”还是“多个变量互相干扰了”。正确的节奏是一次只改一个变量观察效果确认满意后再进入下一个。比如先只调字体再只调颜色再只调间距。每轮修改后你都要明确告诉 AI“这个方向对了继续保持下一个问题是……”或者“这个方向不对我们回到上一版只改 XX”。注意一次只改一个变量是 Vibe Coding 项目里最值得养成的习惯。它能把你从“玄学调参”里拉出来让每一次修改都可追溯。你可以把这理解为一种“人机合奏”你负责审美判断和方向选择AI 负责快速输出不同方案。你不需要每行代码都看懂但需要能判断“这次改完是不是更接近目标”。这种判断力本身就是设计能力的重要组成。3.4 引入参考结构而不是直接抄参考站如果你想参考某个网站的风格不要直接要求 AI“一模一样复制它”。一方面没有必要另一方面完全复刻会让你的网站失去自己的骨架。你可以把参考站拆解成结构语言它用的是左右分栏还是上下分栏导航是常驻还是滚动后隐藏内容密度是高还是低卡片是照片为主还是文字为主把这些结构特征告诉 AI比直接扔给它一个“模仿某某网站”的指令更可控。AI 生成的代码也会更接近你的需要而不是在“像素级模仿”和“完全无感”之间摇摆。如果你用的是支持上传图片的 AI 工具可以上传参考截图但同时补充一句“参考它的版式节奏和配色关系但内容结构和文案不要照搬。”这样模型会理解你的意图是风格借鉴不是内容复制。4. 设计感不是一句“好看”而是可拆解的四个层面4.1 版式节奏设计感首先来自版式。一个有设计感的页面通常不会让所有内容都居中堆在页面中心。它会有一种“节奏”标题区可能占满全宽正文区缩窄成舒适阅读列图片列表用非对称网格页脚回到简单居中的信息行。在给 AI 的提示词里你可以描述“首页先用一个大标题区标题左侧留白右侧放一句话简介下面用两列项目卡片不要整体居中采用左对齐。”版式节奏是设计感的第一根骨架它比颜色和字体更早被访客感知。一个非常实用的检查方法把页面缩得很小看轮廓。如果整个页面看起来像一个均匀分布在屏幕上的长方形色块那通常是节奏太平了。好的页面应该有一个明显的视觉焦点有疏密关系有对比。4.2 字体和层级字体是个人网站设计感的重要来源。默认字体最容易让页面显得像“任务式开发”的产物。你可以让 AI 引入一组字体搭配标题用带几何感的无衬线字体正文用阅读流畅的衬线或人文字体代码、数据等内容用等宽字体。字体设计需要注意两点一是字体数量不要太多通常两族到三族就够二是字重和字号要形成清晰层级比如“首页大标题 72px二级标题 28px正文 16px辅助文字 13px”。字重不要全部用 400适当用 500 或 700 制造强调。要注意的是使用在线字体时需要留意网络加载。字体文件通常比较重如果只是个人站点建议最多引入一套重点字体。加载速度本身就是体验的一部分一个“设计感十足”但打开要等三秒的站点给访客的体验反而不好。4.3 色彩和间距色彩上最容易出现的坑是“什么都想用”。一个稳的做法是选择一到两个主色再加上中性色背景和深色文字构成整个页面的颜色系统。个人网站不需要明显的品牌色也可以只用黑白灰加一个强调色。强调色应该被用于需要被看见的操作或信息比如链接、按钮、当前导航项。间距比颜色更容易体现设计感。合适的间距会让一个简单的页面显得从容间距不足则会让页面显得局促。你可以给 AI 设定一个间距系统例如页面最大宽度 1080px卡片间距 24px区块间距 96px正文段落间距 1.8 倍行高。间距系统统一后页面的高级感会明显提升。有一个反直觉的点很多普通页面是因为“元素之间靠得太紧”显得像半成品而不是因为缺少装饰。所以当你觉得页面没有设计感时先检查间距再检查颜色通常比继续加装饰更有效。4.4 动效和交互细节动效是双刃剑。一个有效的动效是“让用户知道发生了什么”鼠标悬停时卡片轻微上移、按钮颜色渐变、页面滚动时模块渐入。一个无效的动效是“每样东西都在动”弹跳、旋转、粒子特效结果让访客注意力被分散。用 Vibe Coding 做动效最省力的方式是把动效描述成“触发条件 动作 时长”比如标题在页面加载后 0.2 秒内淡入并向上移动 10px 卡片 hover 时阴影加深并上移 4px持续 0.3 秒 所有动效遵循 ease-out。这比“加一个炫酷入场效果”具体得多AI 生成的代码也更容易控制。另一个建议是在动效调试阶段先把所有动画时间设置为 0.6 秒以上方便你观察效果等确认之后再调成 0.2 到 0.4 秒。因为动画太快很难看清是否符合预期。5. 部署、域名、内容与长期维护5.1 免费部署与自动更新个人网站最常见的方式是静态托管。部署平台有很多选择比如 Vercel、Netlify、GitHub Pages一些 AI 编程平台也内置了发布能力。至于选哪个取决于你的技术栈纯 HTML 静态文件几乎哪里都能托管基于 Git 仓库构建的项目用 Vercel 或 Netlify 会更顺手。如果不想碰命令行使用网页版 AI 工具时通常会直接提供一个预览和发布入口很多平台支持一键绑定域名。如果你是第一次操作建议走“AI 生成项目 - 平台预览 - 一键发布 - 访问临时域名”的路径。整个过程不需要理解服务器配置但也正因如此发布后有条件的话要自己刷新检查一遍确认字体、样式、图片都正常加载。如果你不熟悉命令行优先走“AI 生成 - 平台预览 - 一键发布”的路径不要一开始就折腾服务器配置。个人网站的访问量通常不高免费方案基本能满足初期需求。在你还没想好用哪个平台之前不要急着买付费方案。先用免费额度把开发流程跑通。等你真的需要自定义域名、更多带宽或更多构建分钟数再升级也不迟。5.2 内容从“站点”变成“工作流”很多个人网站的问题是做的时候很有热情三个月后因为更新太麻烦就闲置了。要避免这个结局关键在于把“内容发布”变成一门低成本的手艺。如果是博客型网站建议用 Markdown 写内容然后让 AI 帮你根据文章内容生成页面卡片、摘要和标签。你不需要每次改 HTML只需要维护内容文件如果是作品集建议把项目资料整理成一个统一格式的 JSON 或 Markdown 文件后续想新增项目时只要复制一条记录改内容即可。Vibe Coding 在这里的价值是“把重复流程固化下来”。你可以让 AI 生成一个“新增文章指南”用非常短的操作步骤描述你每次更新内容的路径在哪改文件、命令是什么、如何提交。把这个指南放在项目里下次想更新时不用重新研究之前的代码。另一个很重要的工作是“留档”。每次 AI 生成的关键版本如果感觉不错建议截图或者保存为一个分支。这样你改坏了某个版本时可以回到之前的思路而不是靠记忆复原。这比“让它继续改”安全得多。5.3 什么时候该从 Vibe Coding 切换到手写代码Vibe Coding 不是万能的你也不用永远依赖对话生成代码。当你开始频繁做这些事时说明已经可以手写一些关键部分了反复调整同一个样式但 AI 每次都会在其他地方引入新问题。你需要精确控制某些交互逻辑靠文字描述越来越难。你已经有稳定视觉体系想把它固化成可复用组件。此时更合理的做法是让 AI 生成基础组件你用编辑器手写微调细节再让 AI 帮助你解释代码、写注释、补充边界处理。这比“全盘手写”更快也比“全盘让 AI 写”更可控。很多时候Vibe Coding 的终点不是“不再写代码”而是“把写代码的主要精力放在理解项目、定义边界和验证结果上”。这反而是更接近工程师思维的状态。6. 常见问题排查链路先看输入再看环境最后看边界6.1 页面和预期差距大当你觉得页面整体气质不对先不要急着让 AI 继续改。先回到输入层检查你说的方向是否足够具体你给的是“好看”“高级”这类评价还是“背景用暖灰、标题字重加大、区块间距增加”这类可执行指令如果方向词太多先重新写一轮提示词把审美判断转成参数判断。如果输入明确但页面还是不对再检查是否为技术限制。比如你想实现某个复杂的边框融合效果或全屏滚动动画但 AI 生成的代码可能只是模拟了两三成。这个时候你要考虑降低目标或换一种实现方式而不是无休止地让它重试。6.2 部署成功但样式丢失“本地预览正常部署后页面没有样式”是静态站点部署里很常见的问题。排查顺序建议是打开浏览器开发者工具看 CSS 文件是否 404。检查项目里引用的路径是相对路径还是绝对路径。很多 AI 生成的代码会写死“/style.css”之类的绝对路径部署在子路径或某些静态托管服务时就会找不到。检查构建命令是否正确。基于框架的项目通常需要执行构建步骤如果你没有配好构建命令部署结果可能只是源码目录里的 HTML。检查字体资源是否也部署上线。使用在线字体一般没有这个问题本地字体则要注意路径。这一套排查链路里最容易被忽略的是“路径问题”。AI 在生成代码时经常使用当前开发环境下的绝对路径换到另一个部署环境就会失效。遇到样式丢失时优先检查路径而不是怀疑浏览器缓存。6.3 AI 反复修不好同一个问题如果你连续几轮让 AI 修同一个 Bug但问题没消失甚至出现了新问题通常有几种原因当前的上下文里已经有过多版本代码AI 自己也不清楚哪一段是“最新正确”。问题其实不止一个但你只描述了表象AI 没看到根本原因。生成环境和你本地/预览环境之间不一致修改方案没有真正跑到能复现问题的环境里。这种时候我建议你停止继续对话。新建一个会话把项目目录结构和当前关键代码贴给 AI并把问题压缩成一句带复现步骤的描述“这个页面在 1080px 宽度下底部导航会遮挡正文。可能和 .nav 的 fixed 定位有关我已经在样式里启用了 z-index但依然被遮挡。请帮我检查父容器和定位上下文。”当连续让 AI 修同一个问题都失败时先别继续对话而是整理问题描述并重开会话。给 AI 一个干净的开始往往比在旧上下文里继续纠缠更有效。给 AI 足够具体的错误描述比连续问“为什么不对”有效得多。同时也说明一个问题当工具不稳定时你要做的不是更用力地使用工具而是停下来整理问题、缩小范围。6.4 什么时候要放弃当前方案最后一条边界判断如果一个页面改动超过十几轮而每次修改都在破坏别处很可能不是因为 AI 笨而是因为你选择的方案结构不适合这个需求。比如你让 AI 在纯 HTML 页面里实现复杂路由和状态管理它即使能生成代码也会越来越难维护。此时建议重开项目换一种技术栈或页面结构把上一次得到的视觉方向作为“样式参考”带过去。保留设计方向重构底层结构比在歪斜的地基上继续垒墙更重要。7. 沉淀一套属于自己的 Vibe Coding 方法7.1 建立个人“好设计”样例库使用 Vibe Coding 做得越久你越会发现审美判断是有复利效应的。把平时看到的好网站、好配色、好排版保存下来整理成一个笔记或文件夹分类可以包括“版式参考”“字体搭配”“色彩方案”“交互动效”。下一次开新项目时你不用从零描述直接从中挑几张截图作为情绪板。这个样例库是你的审美参照系也是你和 AI 沟通的“词典”。当 AI 不理解你说的“安静”时你可以从样例库里给它一张图片当 AI 生成的风格太花哨时你可以从样例库里找一张更“素”的作为反向示例。随着样例库越来越丰富你的 Vibe Coding 效率也会明显提升。7.2 写一份“提示词模板”但不要被它限制在你做过两三个站点后可以写一份自己的“项目启动提示词模板”大体长这样[项目定位] 个人博客 [设计气质] 安静、杂志感、留白充足 [颜色范围] 暖灰背景 深灰文字 一个琥珀色强调色 [字体系列] 标题用思源宋体正文用系统无衬线行距 1.8 [首页内容] 标题区、一句话简介、最新文章列表、订阅入口 [其他页面] 文章页、关于页 [技术偏好] 纯静态不引入重型框架模板能帮你减少重复输入也能保证每个项目都有清晰起点。但模板不能替代每次的判断。不同网站的目标不同你不应该把一个博客的提示词原样套到作品集上。更合理的用法是把模板当作检查清单每次开始前先逐项回答一遍再基于回答和 AI 对话。这样既稳定又不会僵硬。另外建议记录哪些提示词有效、哪些无效。你会慢慢发现一些自己的“高频表达”比如我常用“更大的留白”或“更克制的信息层级”来描述方向。这些表达在别人眼里可能不够精确但因为你已经和同一个模型建立了反馈循环它反而成为你个人工作流里的一部分。7.3 从个人项目到长期生产力个人网站看起来是个小项目但它几乎覆盖了前端开发、内容组织、设计系统、部署发布、迭代维护的完整链路。只要你愿意把它当成一个“可持续打磨的项目”它会带给你比一个页面本身更多的东西你会理解一个按钮的 hover 效果如何影响整体气质会知道为什么同样的代码在本地和线上表现不同也会习惯在每一次改版前先问“这次想解决什么”。我一般会把整个流程压缩成五步定位 - 三句话设计方向 - 最小可行页面 - 逐模块迭代 - 部署与复盘。每次开始新项目时我都会先走一遍这五步它看起来简单却能避免大部分“AI 生成后不知道从哪改起”的困境。这些经验会迁移到工作里也会让你以后学新工具时拥有更好的判断力。Vibe Coding 最有价值的产物可能不是一个漂亮的个人网站而是那套你用来描述感觉、验证结果、修正方向的方法。工具更新很快方法不会。所以回到最开始的问题用 Vibe Coding 做有设计感的个人网站真正要练的并不是提示词技巧。它更像是一种“有方向感的试错”把模糊的审美直觉转化成可执行的变量把一次性的页面打磨成可持续维护的小系统。如果你现在正要动手我的建议是从最小页面开始先写三句话确定方向再让 AI 生成第一版然后一次只改一个变量。过程中不要追求一步到位设计感会在迭代里慢慢长出来。下次打开 AI 对话框之前先问自己一个问题这个页面最需要立住的是排版、是字体、是颜色还是那个让人想点下去的按钮想清楚了再开始Vibe Coding 会很有意思。