第二课了。如果你已经跟着第一课把开发环境折腾明白也体验过用自然语言指挥AI生成代码的感觉那这一课我们来做点实实在在能拿出手的东西搭一个属于你自己的个人主页再给这个主页配一个能陪访客聊天的数字分身。项目本身不算难但它非常典型几乎能把Vibe Coding生成页面、联调接口、修样式、防翻车这几个关键环节全部覆盖一遍。这个教程是给零基础同学准备的默认你已经能打开AI编程助手、知道怎么在本地启动一个网页预览。第二课我们不做花里胡哨的3D特效也不去碰复杂的后端框架只讲怎么用好自然语言把需求一步一步说清楚让AI替你把页面和交互都搭出来。后面每一段我都会给出可以直接复制的提示词、代码和检查步骤你照着做就能得到一套完整能运行的个人站点。1. 第二课的项目目标拆解个人主页和数字分身为什么放在一起1.1 先明确“数字分身”在这一课指的到底是什么“数字分身”这个词现在被用得很玄乎有人做成全息影像有人做成3D建模角色还有人做成动作捕捉的虚拟主播。但对一个零基础、想快速搭建个人展示页的人来说那些东西都需要专门的图形能力和动捕设备明显超纲。这一课里的数字分身我把它定义为一个挂在主页上的交互式对话助手。访客点开你主页右下角的按钮会弹出一个聊天窗口里面的“你”会主动打招呼回答“你会哪些技术”“做过什么项目”“怎么联系你”这类问题。本质上它就是一个被设定成你风格的AI聊天角色但带上了你的个人信息和说话语气。这个定义有三个好处。第一实现门槛低它只依赖HTML、CSS和一次对话接口请求不需要建模软件第二它比单纯的简历页面更直观访客不用自己翻找信息直接开口问就行第三它足够好玩给页面增加了一种“活人感”这也是我觉得个人主页最值得投入的地方。我在实际做的时候尽量让这个分身保持“话不多但准确”的状态因为用户来找你的主页通常带着明确目的要么看项目要么找联系方式。数字分身的核心价值不是话痨聊天而是快速给出有效信息。1.2 项目最终交付物的功能清单在动手之前先把目标拆成一张功能清单我会在整篇教程里围绕这四件事反复检查避免做着做着就跑偏。第一单页式个人主页。页面包含顶部导航、首屏欢迎区、关于我、项目展示、联系方式这五个主要区块整页通过滚动浏览手机和电脑上都能正常观看。第二数字分身组件。主页右下角有一个可折叠的聊天气泡点击后展开聊天区域支持发送消息、显示回复和基本的状态提示。第三AI问答能力。聊天组件能请求对话接口并且按预设的角色设定回答和“我”相关的问题。第四无障碍的基础体验。加载状态、报错提示、输入为空时的判断这些交互细节也要做进去不然访客会以为页面坏了。我建议把这个清单写在一张纸上生成完代码后对照着逐项验收。很多新手Vibe Coding翻车就是因为需求只有一个模糊的“做个主页”结果AI生成出来的东西偏了十万八千里。1.3 为什么这个项目最适合用来练 Vibe CodingVibe Coding容易让人产生一个错觉好像随手写一句话就能生成宏大项目。实际上AI编程助手最适合承接的是结构清晰、模式成熟的任务而个人主页恰好就属于这一类。它足够标准。导航、首屏、关于、项目、页脚这个结构被无数网页用过AI在训练数据里见过大量类似代码生成出来的内容靠谱率很高。它足够小。一个单页应用一旦生成你可以在几秒内刷新预览马上看到哪里不对这样反复修改的过程能让你快速理解提示词的写法这种快速反馈对新手很重要。它也足够发散。主页做完以后你会自然想加更多东西项目展示要不要做筛选要不要加博客列表数字分身能不能接上你的作品集这些后续玩法刚好可以锻炼你迭代需求的能力。我建议你千万别小看这个项目先按部就班做出来后面往里面加料的基础就稳了。2. 开工前准备工具、设计草图和分身的形态选择2.1 工具清单三个必备项就够很多新手会把环境准备想得很复杂其实做这个项目只需要三样东西。一个能生成代码的AI编程助手。现在市面上这类工具不少你选一个自己用着顺手、对话额度够用的就行。我在实际体验里发现不同助手对中文长提示词的理解能力差别明显如果你连续试了两次都生成出完全跑不起来的代码果断换一个再试。一个现代浏览器以及它自带的开发者工具。浏览器人人都有但开发者工具很多人不敢用其实你只需要会按F12打开面板看控制台和网络请求这两个页签定位基本问题就够用了。一个本地静态网页预览环境。最简单的方案是在你的项目文件夹里执行一条命令把当前目录变成一个临时网站常用的是python3 -m http.server 8000执行完浏览器里打开http://localhost:8000就能看到页面。如果你用的是那种自带预览功能的编辑器这一步可以完全省略直接在编辑器里点预览按钮。这三样东西里最关键的其实是AI编程助手。大原则是不要用那种只能回复纯文字的聊天机器人要用能直接输出代码项目文件、或者能在编辑器里帮你改文件的工具不然你把生成结果复制来复制去一会儿就累了。2.2 画一张能被AI理解的设计草图Vibe Coding的难点不在“让AI写代码”而在“把脑子里的画面翻译成AI能听懂的描述”。我见过很多同学第一句话就是“帮我做个好看的主页”AI回出来一个四不像然后互相拉锯十几轮。正确做法是先花十分钟画一张草图。不一定非要画得多好看手绘拍照都行但你得明确几件事页面从上到下分成哪几块每块里面大概放什么内容有没有特殊交互比如点击按钮弹出窗口。这个信息落在纸面上后你就有了跟AI沟通的地图。我自己习惯用最土的办法表达结构直接在聊天窗口里写下来顶部固定导航栏左侧放名字右侧放四个锚点链接首页、关于、项目、联系首屏居中大标题下面一句副标题再下面一个“查看我的项目”按钮关于两栏布局左侧照片占位右侧自我介绍文字项目三张卡片一排每张卡片包含项目名、一句话简介、一个跳转链接联系居中显示邮箱和社交媒体链接底部版权信息 整页配色偏深色主色用浅蓝色字体用系统无衬线字体不需要任何外部图片资源占位用带颜色的方块就可以这份描述就是你的设计草图转化版把它直接丢给AI它生成出来的页面就不会是满屏飞鸿混乱的文字堆了。我还建议把“不需要任何外部资源”写进提示词这样AI就不会动不动引用一堆在线图标库或者远程字体特别适合还不会处理网络加载问题的初学者。2.3 数字分身三种做法怎么选做数字分身之前先给“做哪种分身”定个方向这一步不定清楚后面容易半路翻车。我根据实现的容易程度把常见的分身做法分成三种方案交互形式开发成本适合场景文本对话分身聊天框很低一个组件加一个接口个人主页、作品集、咨询页语音分身文字转语音对话中需要音频权限和语音合成线上展厅、演示视频3D形象分身虚拟人物动画高需要专用工具和大量素材游戏、元宇宙类项目零基础第一课量力而行我强烈建议先做文本对话分身。它可以把精力集中在“角色性格设定”和“交流逻辑”这两件真正重要的事情上而不是被视觉特效拖垮。不要一上来就想做3D形态。我刚开始也动过这个念头后来发现一个简单的3D人物光模型布线、动画状态、表情驱动就把我逼疯了最后连个人主页都没跑起来。文本分身做好以后以后再想升级继续加语音、加形象都是在现有功能基础上的增量不是推翻重来。3. 用一句自然语言生成整个个人主页3.1 写好第一条提示词的四个要点搭个人主页的第一条提示词是整个项目的地基。地基歪了后面怎么改都别扭。想要AI一次生成一个能看的页面提示词里必须包含四个东西输出物类型、整体结构、视觉风格、技术约束。缺一项生成结果就会明显不完整。我给你的模板可以这样写请生成一个完整的个人主页单页HTML文件。 页面从上到下依次为 固定导航栏左侧放“我的名字”右侧放“首页、关于、项目、联系”四个锚点链接 首屏区域居中显示大标题“你好我是XX”下方一句副标题和“查看项目”按钮 关于区域左侧一个圆形占位块右侧3-5句话介绍我的背景 项目区域三张卡片并排每张卡片有占位图、项目名称和一句说明 联系区域居中显示邮箱地址和两三个社交链接 最底部是版权信息。 视觉风格采用深色背景、浅蓝色主色字体使用系统无衬线字体不要引入任何外部图片、字体或库所有样式写在style标签里。这个提示词看起来很长但它把每一个区块都交代得清清楚楚AI不需要揣测你的意图自然不容易跑偏。我要特别解释一下“不要引入任何外部资源”这条约束。很多AI默认会使用来自云端图标库的图标、来自在线字体服务的字体如果你网络环境不太稳定这些资源加载失败后页面就会非常难看。把所有资源内联在文件里你即使在没有外网的条件下也能正常预览这是最容易排查的隐患之一。3.2 生成后必做的三处调整AI一次性生成完代码后我不会直接拿去用而是按固定流程做三处调整每处只用一分钟但能帮你避免后面的大麻烦。第一检查HTML结构里有没有明显的占位字段。AI生成的代码通常会用“你的名字”“你的邮箱”这类中文占位文本有些则用“Lorem ipsum”之类的无意义英文。这里看一遍全局把自己真实的信息填进去注意别漏掉title标签里的页面标题。第二确认锚点导航能不能用。顶部导航的“关于”“项目”“联系”一般会对应页面里某个区块的id如果你改名或删除了某个区块的id导航链接就失效了。验证方法很简单点一下导航里的链接看页面有没有滚动到对应区域。第三看一下页面是否适配手机宽度。在浏览器里按F12打开开发者工具点一下面板顶部的手机小图标把宽度拖到375左右模拟一台手机。如果发现文字挤在一起或者按钮消失回去让AI加一条约束“确保页面在375px宽度下不出现横向滚动。”我建议每做一处调整刷新一次页面亲眼看到结果。不要一次性调完再刷新那样你分不清是哪一步改坏的尤其是网络不熟的时候排查起来特别痛苦。3.3 本地预览与页面调试生成好的HTML文件如果你用的是那种自带实时预览的编辑器直接在编辑器里点预览按钮就行。如果你只装了一个普通编辑器就需要自己起一个本地服务。我最常用来做本地服务的方式是python3 -m http.server 8000运行完以后浏览器打开http://localhost:8000就能看到index.html的内容。也有人直接双击HTML文件用文件协议打开这样在简单页面下通常能正常显示但我还是建议用本地服务因为文件协议下JavaScript的某些接口会被限制后面接入数字分身的对话请求时一定会踩坑。遇到页面显示不对的情况先按F12打开控制台面板。红色报错是最优先要解决的把报错文字复制下来直接发给AI让它解释并给出修复方案。这一招比你自己懵着猜原因快得多这也是Vibe Coding时代的红利浏览器和AI编程助手合起来就是最好的调试搭档。4. 把数字分身接到主页上4.1 让AI生成一个对话小部件个人主页静态部分做完以后现在开始做重头戏数字分身。这一步我们分两层来做第一层是界面组件第二层是背后的对话逻辑。先把界面做出来你会立刻看到一个能点、能输入、能发消息的小窗口那种“页面活过来了”的感觉特别强烈。提示词可以这么写请生成一个固定在网页右下角的聊天窗口组件。 初始状态时右下角只显示一个圆形按钮按钮上写“联系我” 点击按钮后从右下角弹出一个聊天面板宽320px高480px 面板顶部是标题栏显示“你好我是XX的数字分身”和一个关闭按钮 面板主体是消息列表区域系统消息靠左用户消息靠右 面板底部是输入框和发送按钮 点击关闭按钮后整个面板收回成圆形按钮 请在HTML文件末尾附加这段组件的HTML、CSS和JavaScript样式风格与页面整体一致消息区域的滚动条样式修饰一下。这段提示词把组件的五种基本状态全部交代清楚了收起的圆形按钮、展开的面板、消息列表、输入区、关闭行为。AI会把它理解成一个独立的功能模块不会跟页面其他部分的样式打架。生成出来的代码会包含一个按钮的click事件、一个切换面板显示的函数以及一个假的“回复”逻辑比如你发一句消息它会回一句固定文案。这一步先别急着自己接入接口把界面交互跑通后面替换逻辑就很轻松。4.2 给分身接入AI对话接口界面有了现在要让这个分身真正说出有意义的话。我们借助一个对话API来实现这个接口本身需要一个后台地址来调用。我强烈建议给零基础同学分两步走。第一步先用一个固定的模拟接口验证前端的网络请求代码能不能正常工作。代码大概长下面这样async function sendMessage(message) { const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ message: message }) }); const result await response.json(); return result.reply; }这里/api/chat是一个后端接口地址你可以先把它指向一个本地返回固定内容的地址保证前端调用成功。验证通过后第二步再把实际对话地址换上来。接入真实接口时需要设置一个很关键的系统提示词用来告诉AI它现在是“你的数字分身”。我的系统提示词长这样你是“我的名字”的个人数字分身你在我的个人主页上接待访客。 请始终用第一人称以我的语气回答保持真诚、简洁。 遇到你不知道的事情直接说“这个我还不太确定建议你直接发邮件给某某地址”。 你主要介绍我的技术方向、做过哪几类项目、怎么联系我。 回复不要超过100字。这段提示词决定了分身能不能说人话。很多人做完数字分身发现它回答得“不像自己”问题基本都出在提示词描述得不够具体。你把“我的语气”“我的项目经历”只字未提AI就只能空泛回答自然没有灵魂。4.3 数据安全、成本控制与样式整合接入对话接口以后有一个新手最容易犯、而且后果严重的错误把接口密钥直接写进前端HTML里。由于前端代码任何人都可以在浏览器里查看如果密钥写在前端等于把它公开给了全世界别人可以盗用它疯狂调用让你的账号欠费。正确的做法是把对话请求放到一个后端服务里前端只向后端请求密钥保存在后端环境变量中。如果零基础同学还没有后端能力可以先在调研阶段用一个受限的免费额度并且坚决不要在公开部署的页面里写真实密钥。你本地给自己的小页面玩无所谓但一旦要公网上线请务必走后端转发。样式整合也别忘了。很多同学把生成的聊天组件粘到主页里以后发现它的颜色跟原页面格格不入。我会让AI统一做三件事把组件里所有硬编码的颜色值替换成页面已有的颜色变量把圆角尺寸调整成跟整站其他元素一致把标题栏字体大小和页面的层级结构对齐。这些细节看起来小但决定了访客第一眼觉得“这是个整体”还是“这是没做完的半成品”。成本控制上给分身接接口时设置几个限制是必须的回复字数上限、单次请求消息长度上限、基础频率限制。不然一个访客狂发几百条消息哪怕不是恶意攻击你的接口账单也会很难看。最省事的做法是让后端加一层阈值超过一定次数当天就拒绝服务。5. 实操中遇到过的问题与排查方法5.1 页面样式乱掉的几大原因样式崩坏是我见过新人Vibe Coding翻车率最高的环节而且崩坏方式千奇百怪。总结起来大概有三种生成组件时把某个花括号写漏了导致后面所有样式失效组件和主页使用了相同的类名互相覆盖外部资源加载失败导致图标和字体消失。定位方法永远是一样的打开浏览器开发者工具在Elements面板里选中出问题的元素看“Computed”面板里实际生效的样式到底是什么再看它被哪一条规则覆盖了。别凭记忆猜你猜不出来的。预防办法是给AI下一条明确指令“所有组件样式都使用一个独立的类前缀比如twin-不要影响页面已有的样式类。”这样即使两边有相同名称的类也不会互相撞车。花括号缺失这类问题让AI重新生成整个文件通常比手动修补更快但记得保留修改过的个人信息别复制覆盖把内容弄丢了。5.2 数字分身答非所问怎么办如果你发现数字分身回复的内容跟你的个人经历毫无关系大概率是系统提示词里的信息太模糊。解决办法不是让AI“更聪明”而是把你的资料写得更完整。我常用的做法是把个人信息整理成一份结构化的角色卡片直接放进系统提示词个人档案 姓名某开发者 技术方向前端开发、数据分析 代表项目做过一个校园二手交易平台一个个人知识管理工具 工作状态目前可接外包 联系方式通过首页邮箱联系这样AI接到消息后会优先参考档案内容回答答非所问的概率大大降低。还有一个小技巧把你可能被问到的问题预先写进系统提示词里比如“如果有人问你会不会Python你要回答我之前做过数据分析项目”。这等于给分身准备了标准答案库比临场组织语言稳定得多。5.3 部署后打不开或样式丢失本地一切正常一部署到线上就坏了这种问题也很常见。最容易犯的错是资源路径写成了绝对路径。部署到服务器后你的网站很可能挂在类似https://你的域名/子目录/这样的路径下之前写的/css/style.css这种开头带斜杠的路径会直接跑到域名根目录去自然找不到。解决办法是在提示词里注明“所有资源引用使用相对路径”或者部署前检查link和script标签里的路径有没有前缀问题。部署完以后别忘了做一次硬刷新很多样式“丢失”其实只是浏览器缓存了旧版本CSS按住CtrlShiftR强制刷新一下往往就能解决。如果是提交到某些托管平台后页面404那基本是入口文件名不对。大多数部署平台默认找index.html如果你的文件叫home.html需要在平台设置里指定或者干脆把文件名改成index.html再上传最省心。5.4 给新手的最后几条经验走到这一步你的个人主页和数字分身已经能正常跑起来了最后我分享几条踩过坑以后总结出来的经验。第一把需求切成小碎块一次只让AI做一件事。不要同时让它“生成主页、加聊天、加博客、做后台”一次一条明确指令迭代反而更快。第二每改一次就预览一次永远不要在没看到结果的情况下连续改动好几轮。你要让“改动原因”和“结果表现”之间保持一一对应否则出了问题根本不知道是哪个环节造成的。第三做好备份。AI生成代码的过程中时不时会改出一个没有保存的中间版本我的手抖经验就是每次准备大改之前把当前可用版本复制一份重命名保存比如index_v1.html这样再离谱的操作都能回退。第四提问时不要只说“改好看一点”要给出具体到可执行的描述。“把首屏标题的字号改成32px颜色改成浅蓝色按钮改成圆角”永远比“变好看”有效因为AI理解的“好看”和你的审美大概率不是一回事。我在做这个项目的过程中最深的体会是Vibe Coding的本质不是偷懒而是把精力从“怎么敲代码”转移到“怎么把需求讲清楚”。提示词写得越细AI生成的结果就越跟手你花在修改上的时间越少留给自己打磨内容的时间就越多。等你把这一课的单页主页和文本分身跑通后面想加博客、加语音、加更多交互路径其实已经完全打开了。