Vibe Coding第二课：零基础搭建个人主页和数字分身

Vibe Coding这个词最近在开发者圈子里被反复讨论但对真正零基础的人来说它最诱人的点其实特别简单你不需要先把编程学个半吊子就能做出能给别人看的东西。第二课我们直接来干一件特别实在的事——从0到1搭一个你自己的个人主页再给它配一个能聊天的数字分身让访客打开你的页面随时都能问你“你是谁、你会什么、怎么找你”而你的分身替你回答。如果你已经看过第一课手头有了一台能用、配好环境的电脑也知道怎么跟AI编码助手来回对话那这一课你做下来会非常顺。我带过完全不碰代码的朋友用这套流程操作最快一个下午就把页面跑起来了慢一点的也就一个周末。这一课不追求让你成为工程师只追求一件事做出一个真实、在线、拿得出手的个人主页。1. 第二课到底要做什么先想清楚主页和数字分身的分工很多人一听到“个人主页”就想到要买服务器、写后端、搞数据库其实完全没必要。个人主页的本质就是几张网页静态的就行放上你的头像、介绍、作品、联系方式再挂一个能对话的数字分身。这个搭配看起来花哨拆开之后逻辑非常清楚主页负责“展示你是谁”数字分身负责“反复回答别人关于你的各种问题”。先说主页。对绝大多数人来说主页根本不需要多页面一个单页就够——从上往下依次是顶部的名字和一句自我介绍、关于你的段落、你做过的项目或作品、如何联系你。就这么简单。它不需要登录系统、不需要后台管理、不需要复杂的交互。而Vibe Coding最适合的恰好就是这种“内容展示型”的页面结构清晰、视觉驱动、没有复杂的数据逻辑AI生成这类HTML和CSS可以说是手到擒来。数字分身就不一样了。它不是嵌一个聊天框那么简单它的核心是“知识库”。比如访客问“你做过什么项目”你的分身得知道答案所以你得先把自己的资料整理成一份档案然后让对话服务读取这份档案来回答。说得再直白一点主页是你的门面数字分身是你的前台接待员接待员手里必须有一份关于你的“内部资料手册”。我把这两个东西的分工整理成了表格方便你在开工前先把目标钉死模块形态内容来源维护重点个人主页静态单页你的照片、简介、作品链接文字与视觉表达数字分身页面上的对话部件你整理的个人资料包资料是否完整与更新及时这一课适合谁来跟适合正在找工作的应届生适合自由职业者、独立开发者想给自己搞一块能展示作品的阵地适合想建立“个人品牌”的运营、设计师、内容创作者有一个别人打开就能立刻了解你的网址。不适合谁呢不适合打算做电商站、会员系统、复杂后台管理的需求那种项目有大量状态和权限逻辑Vibe Coding的口头禅式写法会翻车翻得很惨。想清楚这个分工之后你对“要做什么”就有了底。接下来第二件事就是掌握Vibe Coding的节奏——它不是甩手掌柜式地让AI写代码而是你要学会怎么“当导演”。2. Vibe Coding的节奏感先有灵魂再抠细节第一课里你大概已经体验过跟AI编码助手的对话流程了这一课我把心法再往前推一步。Vibe Coding的核心不是“让AI替我写”而是“我描述感觉AI负责实现我负责判断和纠偏”。这个差异非常关键。如果你打开编辑器直接打下“给我做一个网页”AI会给你一个四不像的样板货你看了只会更迷茫但如果你说“我希望打开页面第一眼是深色背景下我的大头照名字用大号粗体旁边有一句轻松的介绍”AI立刻就能明白你要什么。为什么这样有效因为AI擅长的不是替你思考而是把你的描述翻译成代码。描述越有画面感输出越精准。这就像你去理发店说“剪短一点”和说“两侧剪短、上面留长、能抓出纹理感”的结果完全不同。个人主页的定制也一样你得学会给自己通过提示词“做需求设计”。我总结了几条对新手最实用的节奏原则第一把网站想象成一页杂志。从上到下规划区块封面区名字和主视觉、编辑推荐区你的代表作、专栏区关于你的故事、底部信息区联系方式。你不需要懂所谓“前端分层”只要用“区域”的思维描述页面结构AI就能听懂。第二每次只改一件事。这是新手最容易踩的坑。有人一上来就写“帮我改成好看一点、再加个动画、字体换一下、背景也要渐变”AI往往会乱掉改出来的东西不伦不类。正确的姿势是一次对话里只提一个明确的修改点等落地了再看下一个。第三描述“不满意”时要说具体。不要只说“感觉不对”要说“顶部那个区块留白太多”“按钮颜色和背景太接近”“标题字体不够醒目”。AI能处理的指令粒度比你想象得细。第四善用“喂例子”。如果你看到了某个喜欢的页面风格你可以把那个页面的截图路径告诉AI或者把链接发过去让它参考。AI编码助手通常能读取图片和网页结构参考着改效率翻倍。这一段的实操演示我放到下一章展开因为你不是来学理论的你要看到到底怎么一步步从一个空文件变成能看的页面。先记住这个节奏先给灵魂再抠细节小步快跑改坏了随时回退。3. 从一句话到能看的页面个人主页的三轮迭代这一章是重头戏我带你完整走一遍三轮迭代。每一轮你都会看到“提示词长什么样、AI会返回什么、你接下来要做什么”。3.1 第一轮用一段话生成完整单页新建一个文件夹在里面新建一个index.html文件。然后打开你的AI编码助手给它一段这样的提示词我需要一个个人主页的单页HTML文件要求如下 - 整体风格干净、清爽白色背景主色调为深蓝色 - 区块从上到下依次是顶部导航包含锚点链接、英雄区我的名字一句介绍头像、关于我一段文字、作品集三张卡片、联系方式邮箱和社交媒体链接 - 字体使用系统默认的无衬线字体不要引入外部字体库 - 响应式设计手机上浏览时卡片纵向排列 - 所有文案先用占位文字中文占位即可注意我在这个提示词里刻意写了“不要引入外部字体库”——这一条能避免很多网络加载问题后面我会专门解释原因。AI生成代码之后直接在浏览器里打开index.html你会看到页面的骨架已经立起来了哪怕文案全是占位的那个“形状”已经在那边了。这一轮你最需要做的事情是检查区块顺序是否符合预期、颜色是否顺眼、卡片布局有没有乱跑。不要急着抠细节先确认大结构对。3.2 第二轮换成你的真实信息骨架没问题之后第二轮要做的就是把占位信息换掉。继续给AI下指令把页面里的占位文案全部替换成下面这些真实信息 - 名字张三 - 一句话介绍在互联网行业做了十年产品设计目前独立做设计咨询 - 关于我三段第一段讲我的职业经历第二段讲我做过的主要项目类型第三段讲我的联系方式 - 作品集三个项目卡片标题分别是“某跨平台系统”“图像处理Demo”“数据可视化面板”每张卡片配一句话描述和一个假链接 - 头像图片先用一张占位图路径用 https://picsum.photos/400这时候你会发现AI会直接把文字替换掉连CSS都不用动。头像链接我建议先用一个稳定的在线占位图等页面整体确定之后再换成你自己的图片。把图片文件改成你自己的头像放进同一个文件夹再把页面里的路径改成本地文件路径比如头像.jpg。有一点要提醒你作品集里的链接即使是假的也没关系关键是让页面看起来结构完整。你可以用#或者留空后面上线前再替换成真实作品链接。3.3 第三轮响应式与细节打磨第三轮的目标是把页面从“能看”变成“耐看”。这轮你要做一个三选一的检查把浏览器窗口拉窄模拟手机宽度缩放页面检查文字有没有溢出滚动页面检查锚点跳转是否顺畅。发现问题就直接丢给AI比如页面在手机宽度下英雄区的文字会溢出屏幕帮我改成文字自动换行、图片宽度不超过屏幕的90%。字体、留白、间距这类微调也可以在这一轮做。另一个很容易出效果的点是过渡动画给卡片加上轻微的悬浮阴影和上移动效会让整个页面显得精致不少。你可以这样提要求给作品集卡片加一个hover效果鼠标放上去时卡片向上移动2像素阴影略微加深过渡动画0.2秒。三轮走完你已经有了一个结构完整、信息真实、手机上也能看的个人主页。有的读者可能会问那我自己完全不会写代码AI生成的代码我看不懂怎么办没关系你只需要能看懂页面效果并通过描述把“想要的效果”传递给它。这就是Vibe Coding最舒服的地方——你负责感受它负责码字。当然页面只是上半场。下半场我们要做的才是这一课的亮点数字分身。4. 给主页装上一个“数字分身”让访客能和你的资料对话先澄清一个常见误解数字分身不是简单的聊天窗口更不是把某个大模型的通用对话接口一贴就完事。那样的话一切都靠模型常识回答访客问“张三做过什么项目”它根本答不上来还会胡编。真正的数字分身核心是把“关于你的资料”变成可检索、可对话的知识底座。4.1 先准备一份“关于你的资料包”这一步是数字分身的地基比选什么技术方案都重要。你需要在文档里把自己的信息整理成清晰的问答条目越具体越好。我的建议模板非常简单拿一个文本文件就行- 我是谁35岁产品设计师偏好简洁风格的设计有十年经验 - 我的服务产品需求梳理、界面设计、设计系统搭建 - 合作流程前期电话沟通、报价、合同、项目排期、提交成果、两轮免费修改 - 代表作品某跨平台系统、图像处理Demo、数据可视化面板 - 联系方式优先通过邮箱联系回复周期一天内 - 常见问题预算多少起目前排期到什么时候是否需要驻场 - 暂不接的活纯前端页面重构、长期外包驻场写完之后把这份资料整理成问答格式也就是每个主题都补上“如果访客问X应该怎么回答”。这样做的好处是让分身的回答更有针对性不需要模型临时发挥。4.2 两条接入路线现成工具有多快自研接口有多大自由度路线A使用现成的“知识库对话”服务。这类服务通常允许你上传资料文本、设置预设人格然后生成一段嵌入代码。你只需要把资料文档粘贴进去拿到类似下面这样的一段脚本插到你的主页文件尾部的/body之前script srchttps://某个分身服务的嵌入脚本.js>async function askBot(question) { const response await fetch(你的接口地址, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ question: question, knowledge: window.DIGITAL_TWIN_DATA // 你的资料文本 }) }); const data await response.json(); return data.answer; }注意实际生产时不要把接口密钥直接写在前端代码里否则任何人打开浏览器的开发者工具都能看到你的密钥这是新手最容易犯的安全错误。正确做法是让密钥保存在一个只有你控制的转发层里前端只请求公开接口。两种方式怎么选我给一个决策清单维度路线A现成对话部件路线B自研调接口上手时间15分钟到半小时半天到一天定制自由度低只能改边框位置和预设话术高可以完全控制界面和逻辑数据隐私资料在服务商侧资料在自己的页面里但仍需注意接口日志成本按量订阅按接口调用量计费谁适合想最快跑起来看效果的人想长期掌控配套的人不管你用哪条路线接完之后一定要做一件事把你自己想象成一个陌生人连着问十个问题。“你做什么的”“你接过什么类型的项目”“你的报价大概是什么范围”“你现在在哪个城市”如果资料包里没有覆盖就返回去补充。分身的回答质量直接取决于你喂给它的资料质量——这不是一句空话这跟人上班第一天啥也不懂全靠上岗培训是一模一样的道理。加完数字分身你的主页从单向展示变成了双向互动这是个人品牌的差异化所在。但东西做出来了还差最后一步把它放到公网上并且让它稳定地能被人打开。5. 部署上线与第一轮巡检你的主页要能经得住路人看部署这一步我推荐用静态托管方案。因为你的主页就是几个静态文件没有服务器端逻辑所以完全可以用支持免费静态托管的代码托管平台加静态页面服务来完成。流程整理出来就四步第一步把项目文件夹托管到一个代码仓库包括index.html、图片文件、可能存在的README文件。如果你不熟悉命令行可以完全用网页或桌面客户端的图形界面操作先创建仓库再把文件拖进去。第二步进入仓库的“设置”或者“Pages”相关选项把部署源指向你的主分支根目录。保存之后等几分钟平台会自动分配一个网址给你格式一般是“你的用户名.某平台域名”。第三步验证网址能正常访问。如果页面打不开多半是文件路径写错了或者首页没有被命名为index.html。第四步可以绑定自定义域名。你需要先去某个域名注册商买一个属于你的域名然后在托管平台的后台填自定义域名同时去域名管理页加一条 CNAME 解析记录。这步对新手来说是最容易卡住的但逻辑就一句话告诉访问者“你的名字”应该去“哪个家”。页面上了线接下来是最容易被忽视的步骤——巡检。很多人的主页挂在那边三五年不更新就是因为第一天上线的糟糕体感给人留下了“维护很麻烦”的印象。所以我专门列了一张巡检清单你拿着它配合上线当天一起走一遍巡检项通过标准出了问题怎么处理首屏加载速度手机流量下3秒内能看到主要内容压缩图片、移除大体积第三方库手机端布局无横向滚动条、文字不溢出用响应式CSS检查并修正锚点跳转导航链接都能定位到对应区块检查区块ID和链接的对应关系页面细节没有错别字、链接不是死链全部浏览器打开点一遍数字分身答复随机抽5个问题回答都靠谱补充资料包、调整预设话术对话兜底分身遇到不知道的问题不乱编设置“这个问题我暂时不知道请发邮件联系”的兜底话术跑完这张表你的主页就算正式“能见人”了。不要急着追加任何复杂功能先让它在网上活几天。这期间你可以观察两个数据一是有没有人在访问二是数字分身有没有真的收到对话。我自己见过不少案例页面做出来很兴奋发两轮朋友圈就没人管了结果三个月后自己都忘了还有这个网址存在。主页是一个人的线上门面不是一次性摆拍它值得你时不时擦一擦。6. 第二课之后的升级路线从单页到“有生命力”的个人品牌第一版跑稳之后很多人会想接下来呢我给几条按性价比排序的升级方向都是从第二课这个基础出发自然生长出来的。第一给主页加一个“近期动态”区块。它可以是简单的文章列表链接到你平时写东西的地方。这个区块没有技术难度却能极大提升主页的“活人感”——访客看到你最近还在输出信任感会明显上升。第二做深色模式。很多人第一版做的是浅色风格加一个根据系统设置切换的深色模式能让页面质感上升一个台阶。给AI的指令也很简单“根据用户的系统主题偏好自动切换深色模式用深灰背景配浅色文字。”第三多语言版本。如果你的工作面向不同地区的合作方可以加一个“中/英”切换。实现方式不必复杂同一份内容各写一份HTML区块切换时显示/隐藏即可。第四数字分身的进阶。后续可以让分身接入更多数据源比如你的作品列表、文章正文、视频链接甚至可以连到你的公开社交主页。但要注意边界只让它回答你主动整理过的内容不要贸然接入大量未审阅的数据否则AI“一本正经胡说八道”的能力会让你在访客面前很尴尬。按我自己的体会Vibe Coding到这一课结束最重要的不是你学会了多少代码技巧而是你建立了一种工作方式快速搭个雏形凭感觉调校小步上线再持续迭代。这个过程比“学完编程再做项目”的传统路径轻太多但也因此更容易让人产生错觉——以为AI全包了自己只要动嘴说就行。实际上那些真正把个人主页做得好看的人在反复打磨上花的时间一点都没少只是把力气从“写代码”转移到了“表达想法、审视效果、优化体验”上。最后给你一个我可以保证有用的建议每次AI生成完一段代码在丢进浏览器之前先扫一眼它到底改了什么哪怕只是看得似懂非懂。坚持这样做二十次之后你会发现你已经能读懂页面结构、CSS的常用写法、甚至能自己动手调整参数了。到那时候Vibe Coding就不再只是“让AI替你干活”的偷懒玩法而变成了你真实掌握的一项能力——这种感觉才是这个时代最值钱的正反馈。