在开始第二课之前先想明白一个问题第一课里我们已经把个人主页的静态页面搭出来了——能展示照片、项目、联系方式像一张精心设计的名片。但名片是单向的别人看完了不会跟你发生对话。而“数字分身”的加入就是为了把这扇单向展示的窗口变成一扇能应答的门。第二课的目标很明确在一个静态个人主页的基础上加一个能聊天的数字分身让访客可以输入问题、得到基于你个人设定的回答。操作方式延续第一课的Vibe Coding路线——不手写大段代码而是靠描述需求、审查结果、修复问题三步循环推进。这一课你不需要任何编程基础但需要你学会一件事把需求说清楚。只要这个能力到位代码部分基本是AI替你完成的。这一课做完你将拥有一个可以公开访问的链接别人打开你的主页就能跟你的数字分身聊上几句。它知道你是谁、你做过什么项目、你擅长什么方向甚至能替你在忙的时候接待访客。下面直接开始。1. 先想清楚个人主页加数字分身到底在解决什么问题1.1 Vibe Coding的“氛围编程”是一种什么体验Vibe Coding这个词字面直译是“氛围编程”或“状态编程”。听起来玄乎但实际体验可以用一句话概括只负责说需求和验收结果把具体代码实现丢给AI。第一课的读者应该已经体验过这种节奏你说“帮我做一个简洁风格的个人主页头部放名字和一句话简介下面分三块展示项目”AI就会生成全套HTML和CSS。你打开预览觉得颜色不对就直接说“背景改成米白色、卡片改成圆角”它马上调整。整个流程里你不需要知道CSS优先级、Flex布局规则只需要知道看起来对不对。第二课的数字分身本质上也是同一套工作流只是从“静态页面”跨到了“动态交互”。从技术难度上看它确实比纯展示页高一层涉及接口调用、数据请求、状态管理、后端代理。但在Vibe Coding的模式下这些概念不需要你全部掌握。你需要做的是理解每个环节的大致职责然后像带实习生一样把需求精确地下达给AI再把AI给的代码拿回来测试、反馈、修正。这个模式的基础认知很重要AI写代码不是魔法它是理解人话了但不是读心术。你描述得越具体它生成的东西就越接近你想要的。这一点在数字分身这种多组件协作的功能上尤其明显。1.2 为什么选择静态主页加轻量AI组件而不是上一套完整后端有一种做法是把个人主页做成一个完整应用前端框架、后端服务器、数据库这种想法很容易冒出来但对个人主页来说完全是杀鸡用牛刀还会把维护成本拉到自己扛不住的程度。先说数字分身的运行机制访客在页面上输入文字这段文字被发送到一个AI服务接口接口返回一段回答页面再把回答显示出来。整个链路不长关键在于谁去调用AI接口。方案A是前端直接调用逻辑最简单但有一个致命问题调用接口需要的密钥会被公开展示在网页源码里。任何人打开开发者工具就能看到拿到之后就能替你消耗额度。对个人主页这种公开页面来说这是不能接受的风险。方案B是加一层后端代理——浏览器把消息发给自己的服务器服务器带着密钥去请求AI接口拿到结果再返回给浏览器。密钥一直留在服务器端用户看不到。多了一个环节但安全性靠谱得多。这一课选的正是方案B而且用极简方式实现一个算上注释不到几十行的轻量后端服务再加一个前端聊天组件。这样选择的核心原因是个人主页的定位决定了技术路线页面要保持简洁部署要尽量便宜维护要几乎为零。静态页面托管基本免费轻量后端可以用云函数或者小服务跑着个人使用场景远远够用。不用数据库是因为这个功能根本不需要持久化数据——聊完即走唯一要保存的只是你的个人设定文本那不过是一个配置文件而已。1.3 数字分身的边界它不是真的“另一个你”先给数字分身泼一盆冷水再厉害的大模型也不可能完全复刻你的思维方式。所谓数字分身实际上是一个基于你提供的个人资料、经历、兴趣领域设定出来的角色化聊天机器人。它的知识边界取决于你喂给它的资料范围它的语言风格取决于你在人设提示词里怎么写。我自己的体会是把期望值放在“一个很了解我的助理”而不是“另一个我”上整个体验会舒服很多。访客来聊天问的问题无非是这四类你做过什么项目、你目前的主业是什么、怎么联系你、对这个方向有什么看法。这些信息只要在设定里写清楚分身就能答得八九不离十。所以在动手之前先花十分钟整理一份自己的资料卡一两句话说明你是谁列举两三个项目经历写明目前的关注方向和想强调的个人标签。这张资料卡就是数字分身的“人格种子”。它的质量直接决定了访客跟它聊起来的体验。2. 准备环境十分钟把工具箱备齐2.1 这一课需要装哪些东西分别用来干什么第一课如果已经跑通过那你的电脑上应该已经有了代码编辑器、浏览器和Git。这一课多一个运行时环境装好即可不用深究原理。代码编辑器继续用第一课的工具就行。如果还没装选一款免费的现代编辑器打开命令行终端就能操作这是最基本的体验要求。Node.js运行时数字分身的代理服务需要用它来启动。装完在终端输入node -v能显示版本号就说明成功了。Git版本管理用来给项目做存档。Vibe Coding模式下AI经常会改出意外问题有了Git随时可以退回上一个可用版本。大模型API的访问凭证到任意一个大模型开放平台注册账号创建一个API密钥。选择标准是看它是否提供标准接口调用方式以及免费额度是否够个人测试。个人使用场景下免费额度一般足够撑过整个开发联调阶段。这套工具箱准备起来十分钟以内。唯一需要等待的是API密钥申请有些平台会做身份验证。建议先把账号注册好、密钥创建好再开始后面步骤免得做到一半卡住。2.2 让AI高效工作一个不太一样的提问思路Vibe Coding有个隐藏门槛很多人以为“自然语言编程”就是随口说话结果AI生成的东西完全不是自己想要的。问题不在AI而在提问方式。一个简单有效的策略叫“增量式推进”。举个例子你一次性对AI说“帮我做一个个人主页包含数字分身支持聊天”它大概率会给你一个逻辑混乱的结果——功能太复杂一次生成太多东西出错的概率就大。而如果你分三步走“先做一个单页主页”“再在页面底部加聊天窗口”“最后接上后端接口”每步生成的内容都足够简单、容易检查问题一出现就能定位到是哪个环节出的。第二个技巧是给AI“角色任务设定”。开头加一句“你是一名前端开发工程师请根据我的需求生成一个可直接运行的页面”AI输出的代码结构会明显更规范。本质上是利用语言模型的能力提示词给出的角色越具体它的行为模式越贴合。第三个经验是尽量少用“很酷”“好看”这类主观词换成可量化的描述。把“让它好看点”改成“标题用加粗大号字卡片圆角12像素色彩用同一色调的低饱和配色”AI这一次改出来的东西基本能直接过关。2.3 开工前的项目结构规划先规划目录不然后面改起来会乱。本项目整个结构分为三层展示端、代理端、配置端personal-homepage/ ├── public/ # 展示端HTML、CSS、JavaScript │ └── index.html ├── server/ # 代理端负责转发请求到AI接口 │ └── index.js ├── config/ # 配置端放置分身人设设定 │ └── persona.md └── .env # 环境变量存储API密钥不提交到Git前几步先把public/index.html做出来再填代理服务最后用环境变量管理密钥。这个顺序保证你随时可以看到阶段性成果避免到最后一步才发现问题。3. 搭建个人主页基础版升级为“能装分身”的容器3.1 第一课基础回顾从零到一的主页骨架如果你已经完成了第一课可以直接跳过这一小节但建议扫一眼因为第二课的主页比第一课多了一个明确的“聊天窗口挂载点”。如果还没看过第一课也没关系下面这段路径就是完整的最小步骤。打开编辑器新建一个index.html把下面的骨架需求发给AI请生成一个个人主页的HTML文件包含以下区块顶部导航包含姓名和导航链接关于我区域放头像和一段个人简介项目展示区使用卡片网格展示三个项目底部联系区域放置邮箱和社交链接。要求是单页面、响应式设计、无外部框架依赖样式写在style标签里。等AI生成后直接在浏览器打开预览然后按顺序微调头像换成你自己的、项目名称和描述改成真实的、联系方式替换成可用的。这一步的核心不是写代码而是把模板变成属于你的东西。与第一课的区别在于这次我们要给数字分身留好位置。我会在页面底部联系区域上方的位置加一个div idchat-root/div。AI随时可能会改动页面结构这个占位元素我们要重点关注别让AI在后续调整中把它删掉。3.2 让主页真正适合自己样式语言的三个维度主页做出来后通常的问题不是“能不能用”而是“不像自己的”。字体、配色、语言风格是三个立竿见影的调节维度。字体选择遵循一个原则标题和正文各配一种即可。标题用稍微有力量感的字体正文用阅读感强的相同字体变体。如果你以后打算展示英文内容优先选中英文都完整支持的字体族。配色是整体风格的重头戏。自己把握不准就选单色风规定一个主色调比如深蓝、墨绿或者灰黑背景用这个颜色的极浅变体卡片用纯白文字用深灰主按钮用主色调。这样天然统一很难翻车。要避免的是随意堆砌彩虹色那会让主页显得像一个玩具。语言风格体现在文案上。更新自我介绍时口语化一点用“我在做过什么”代替“本人曾任职于”项目描述写清楚“做了什么、用什么做的、带来什么结果”而不是空泛的“参与了某项目”。文案质量其实比视觉更容易决定访客对主页的印象。3.3 响应式与调试检查清单移动端访问是个人主页的常态这个不能忽略。在浏览器开发者工具里切换到手机尺寸快速检查三件事导航栏是否挤成一团、卡片是否按单列排列、聊天窗口的输入框是否会被键盘顶出屏幕。如果发现问题直接复制现场截图描述发给AI“在手机宽度下导航栏的链接换行混乱请改成单行、溢出时隐藏多余链接”。比你自己动手改CSS高效得多。最后做一次基础检查三个不同浏览器的预览、所有外链都能打开、图片加载路径不报404。这些做完主页基础就稳了。4. 数字分身从“静态展示”到“能对话”4.1 数字分身的技术路径前端组件加后端代理的组合再次强调方案选型前端聊天窗口负责展示和交互后端代理服务负责保护密钥并转发请求。二者职责清晰出了问题也好定位。前端聊天窗口的基本构成是一个浮动按钮点击展开聊天面板、消息列表滚动显示对话记录、输入框和发送按钮、一个“正在输入”的状态提示。这些你不需要理解前端框架的高深概念HTML加原生JavaScript完全可以实现而且AI生成起来特别快。后端代理服务的逻辑更简单接收前端POST过来的用户消息、把消息和分身的人设设定拼到一起、带密钥请求大模型接口、拿到回复返回给前端。整条链路只有一个后端文件没有数据库、没有用户体系、没有消息记录存储个人主页根本用不到那些。4.2 实现一个最小可用的聊天组件先从前端聊天窗口开始。在index.html的div idchat-root位置让AI生成以下组件在id为chat-root的div中生成一个聊天窗口组件。要求右下角有一个圆形按钮点击展开聊天面板面板宽360px、高500px顶部显示“数字分身”标题和一个关闭按钮中间区域是消息列表背景浅灰底部是文本输入框和发送按钮用户消息在右侧显示分身回复在左侧显示用不同背景色区分。发送后输入框清空自动滚动到最新消息。使用原生HTML、CSS、JavaScript实现不要依赖外部框架。生成之后测试一次点击展开、输入、发送的基础流程。这时候消息列表还不会收到回复因为后端还没接上。先确认前端UI和交互没问题再往下一步走。4.3 让分身说人话系统提示词的设计方法后端代理的关键在于“系统提示词”怎么写——它是数字分身的人设模板决定分身用什么口径说话。我的建议是采用三段式结构身份定义、内容指南、风格限制。把下面这个模板填上你自己的信息存成一个文本文件备用你是一个名为“XX”的数字分身代表某开发者本人。 你了解他的背景、技能、项目经历和兴趣爱好回答访客问题时一律基于这些信息。 回答规则 1. 不知道的问题不要编造直接回答“这个我暂时不确定建议联系本人确认”。 2. 用口语化、简洁的中文回复避免说教腔。 3. 被问及联系方式和合作需求时引导访客通过主页底部的邮箱联系。 4. 不讨论任何政治、历史类话题遇到这类问题一律回避。 个人档案 姓名XX 当前身份XX方向开发者重点关注XX领域。 代表性项目项目A这是一个XX项目B这是一个XX。 个人标签XXXXXX。这段设定写好后在后面的步骤里把它通过代码注入到大模型请求的“系统消息”中。你不需要理解系统消息在技术上的全部细节只需要知道它决定了这个AI扮演的角色和说话的边界。想改分区性格改这个文件就行不必动代码。4.4 后端代理几行代码背后的安全与稳定后端代理用Node.js加极简依赖实现。先在你装好Node的机器上让AI生成一个基本的HTTP服务用Node.js和Express框架生成一个后端服务提供POST /api/chat接口。请求体包含{ message: 用户输入 }。服务内部读取环境变量中的API密钥将系统提示词从persona文件中读取和用户消息组合后发送到大模型接口接口地址和请求格式见下面链接再把模型的回复返回给前端。AI生成后你还需要做一件事让AI补上错误处理。常见的错误包括用户消息为空、API请求超时、密钥无效。这些事不用自己写同样是描述需求“为接口增加错误处理用户消息为空时返回400API调用失败时返回500并带上错误提示。”做完这一步联调一次完整链路打开页面发送消息“你好请问你做过什么项目”看能不能收到基于你个人资料的回答。能收到数字分身的核心功能就成立了。5. 安全加固与发布上线5.1 密钥保护为什么前端直连是绝对禁区打开浏览器的网络面板和源码前端请求的所有域名、头部信息、参数都是可见的。如果把API密钥直接写在前端代码里等于把家门钥匙挂在门口公开。访客随时可以把密钥拿走成年人甚至可以在命令行里直接调用你的接口消耗你的额度然后留下账单。所以密钥必须放在后端。上一步的代理服务已经完成了隔离前端永远只跟自己的后端通信后端才持有密钥。除此之外还有一个容易忽略的点config/persona.md这个文件里虽然只有你的公开资料但也不要跟前端目录混在一起万一以后配置文件里加了其他敏感内容放错位置就麻烦了。5.2 把主页部署到公网静态文件和代理服务分别处理发布上线在个人主页场景里可以拆成两步。静态文件这步最简单把public文件夹推送到任意一个静态托管平台即可。这些平台通常支持直接关联你的仓库保存后自动发布几分钟内就会生成一个公网地址。代理服务这步选择多一些你可以用它继续跑完整Node服务也可以拆成云函数部署。选择标准就一条——它是否方便你后续维护。个人体验是云函数更省事它有自动休眠特性长期零访问的情况下不会产生费用有访客来的时候又能自动唤醒。部署完代理服务后把返回给你的公网地址填入前端代码中请求的地址。这里需要在index.html里找到调用接口的那一行把http://localhost:3000/api/chat替换为真实的公网地址。改完重新推送静态文件就可以把链接发给朋友体验了。部署完成后记得自己完整测试一遍在浏览器隐身模式下打开链接模拟一个全新访客从点击聊天气泡到发出第一条消息、收到答复全流程走一遍。很多时候“本地没问题、上线就出错”都是因为前端里还残留着本机地址。5.3 绑定域名让分身有一个正经的“门牌号”使用平台默认分配的域名并不是不可以但那个域名又长又难记更适合临时测试。如果想让主页和数字分身看起来更正式可以买一个自己的域名然后在托管平台的后台完成绑定。静态托管那边通常做两步操作DNS解析加上一个CNAME记录指向平台分配的地址平台后台把域名填入自定义域名设置。代理服务那边同理把你自己域名的某个子域名指向后端服务地址。之后访问https://你的名字.com就能看到主页分身的接口也跑在同一个域名体系下对访客来说整体感强很多。6. 常见问题与排查技巧实录6.1 分身在页面点不开、控制台一片红怎么办最典型的原因是页面上的JavaScript报错了。打开浏览器开发者工具切到控制台面板把报错信息直接复制发给AI这是一个修复效率极高的方法。控制台报错大致分两类一类提示“XX is not defined”也就是某个变量或函数不存在通常是调整页面结构时AI把原来的脚本删掉或改坏了另一类是“Failed to fetch”说明请求没发出去或者被拦截了。第二种情况要继续往下检查网络面板看一下请求的状态码是404说明接口地址不对是500说明后端逻辑有问题是CORS错误说明后端没有正确配置跨域。6.2 分身回复慢甚至超过十秒没反应大模型接口本身就比普通网页请求慢很多个人使用场景下等待三五秒是正常的。但如果超过十秒还没有任何反馈问题多半不在AI而在链路某个环节阻塞。优先排查是否因为没有给前端加“正在输入”状态——访客点击发送后如果界面毫无变化会让体验显得极差其次确认后端代理有没有设置超时时间很多大模型服务商处理长文本时可能超过默认的三十秒代理设置里要留够冗余最后检查是不是免费额度用完了很多平台会在额度耗尽后静默返回错误。6.3 本地运行没问题部署后样式全乱了这类问题一查一个准基本都是静态资源的相对路径和绝对路径问题。本地打开时页面默认从当前目录找文件部署之后页面地址可能带子路径原来的./style.css说法就失效了。把代码里的所有静态资源引用都改成绝对路径以/开头或者交给AI处理“把所有资源引用路径改成绝对路径确保部署在子目录下也能正常加载。”改完重新推送刷新两次看效果即可。6.4 常见问题速查表现象最可能原因处理办法聊天面板点不开JavaScript报错复制控制台报错给AI修复发送消息后无响应前端请求地址错误检查网络面板确认接口地址返回401或403API密钥无效或权限不足检查环境变量是否正确平台权限有没有开返回CORS错误后端未配置跨域让AI在后端加上跨域请求设置分身乱答、答非所问系统提示词写得太简略把个人资料和人设模板补完整手机端聊天框错位响应式样式缺失用开发者工具模拟手机屏让AI调整部署后样式全崩资源路径错误改为绝对路径重新推送部署6.5 我的两个私藏技巧第一个每次让AI改动代码之前先看一眼当前页面是否正常运行。Vibe Coding的本质是增量修改你不知道哪一步会把之前稳定的功能改坏。每确认一个阶段正常就提交一次版本这样出了问题你很确定回滚到哪个点而不是只能从头再来。第二个把你个人资料和分身人设的完整内容用一个独立文件保存。我发现很多时候分身“性格不稳定”不是AI不行而是我之前在聊天里让AI改语法时它顺便把提示词也改了。把人格设定独立存放后端始终读取这个文件这样改外观、改前端代码时分身的人设不会跟着漂移。7. 我想给你留的一组建议先澄清一个误区数字分身不是做完就一劳永逸的。它的人设会随着你个人经历更新而过时你做了新项目、换了新方向都值得把它更新到资料卡里。实际体验下来更新一次人设的成本就是打开配置文件改几行字收益却是访客每次来都能看到新鲜准确的你这是一笔性价比很高的维护。频率上我的建议是一个季度更新一次翻一遍个人档案看一下最近做过的事把人设模板里冷门的项目换掉把新做的方向加上去。这样做既不会让它过时也不需要高频率去碰维护压力很低。最后这个项目往后还有两条不错的扩展路线一条是给分身加上“查看我的作品集”的能力让它不止聊天还能主动推荐访客去看你主页里的某个项目页面另一条是给分身接入语音输入访客直接用说的方式提问生成的回复也能语音朗读出来——这一步在视觉上其实只是加一个按钮和一段配套代码但在提升主页的“未来感”上效果非常明显。先把第二课的链路跑通后续想怎么玩方向都在你手里。