企业官网建设流程全解析

第二课了。如果你已经跟着第一课把开发环境折腾明白，也体验过用自然语言指挥AI生成代码的感觉，那这一课我们来做点实实在在能拿出手的东西：搭一个属于你自己的个人主页，再给这个主页配一个能陪访客聊天的数字分身。项目本身不算难，但它非常典型，几乎能把Vibe Coding生成页面、联调接口、修样式、防翻车这几个关键环节全部覆盖一遍。

这个教程是给零基础同学准备的，默认你已经能打开AI编程助手、知道怎么在本地启动一个网页预览。第二课我们不做花里胡哨的3D特效，也不去碰复杂的后端框架，只讲怎么用好自然语言，把需求一步一步说清楚，让AI替你把页面和交互都搭出来。后面每一段我都会给出可以直接复制的提示词、代码和检查步骤，你照着做就能得到一套完整能运行的个人站点。

1. 第二课的项目目标拆解：个人主页和数字分身为什么放在一起

1.1 先明确“数字分身”在这一课指的到底是什么

“数字分身”这个词现在被用得很玄乎，有人做成全息影像，有人做成3D建模角色，还有人做成动作捕捉的虚拟主播。但对一个零基础、想快速搭建个人展示页的人来说，那些东西都需要专门的图形能力和动捕设备，明显超纲。

这一课里的数字分身，我把它定义为一个挂在主页上的交互式对话助手。访客点开你主页右下角的按钮，会弹出一个聊天窗口，里面的“你”会主动打招呼，回答“你会哪些技术”“做过什么项目”“怎么联系你”这类问题。本质上，它就是一个被设定成你风格的AI聊天角色，但带上了你的个人信息和说话语气。

这个定义有三个好处。第一，实现门槛低，它只依赖HTML、CSS和一次对话接口请求，不需要建模软件；第二，它比单纯的简历页面更直观，访客不用自己翻找信息，直接开口问就行；第三，它足够好玩，给页面增加了一种“活人感”，这也是我觉得个人主页最值得投入的地方。

我在实际做的时候，尽量让这个分身保持“话不多但准确”的状态，因为用户来找你的主页，通常带着明确目的，要么看项目，要么找联系方式。数字分身的核心价值不是话痨聊天，而是快速给出有效信息。

1.2 项目最终交付物的功能清单

在动手之前，先把目标拆成一张功能清单，我会在整篇教程里围绕这四件事反复检查，避免做着做着就跑偏。

第一，单页式个人主页。页面包含顶部导航、首屏欢迎区、关于我、项目展示、联系方式这五个主要区块，整页通过滚动浏览，手机和电脑上都能正常观看。

第二，数字分身组件。主页右下角有一个可折叠的聊天气泡，点击后展开聊天区域，支持发送消息、显示回复，和基本的状态提示。

第三，AI问答能力。聊天组件能请求对话接口，并且按预设的角色设定回答和“我”相关的问题。

第四，无障碍的基础体验。加载状态、报错提示、输入为空时的判断，这些交互细节也要做进去，不然访客会以为页面坏了。

我建议把这个清单写在一张纸上，生成完代码后对照着逐项验收。很多新手Vibe Coding翻车，就是因为需求只有一个模糊的“做个主页”，结果AI生成出来的东西偏了十万八千里。

1.3 为什么这个项目最适合用来练 Vibe Coding

Vibe 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人物光模型布线、动画状态、表情驱动就把我逼疯了，最后连个人主页都没跑起来。文本分身做好以后，以后再想升级，继续加语音、加形象，都是在现有功能基础上的增量，不是推翻重来。

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，按住Ctrl+Shift+R强制刷新一下往往就能解决。

如果是提交到某些托管平台后页面404，那基本是入口文件名不对。大多数部署平台默认找index.html，如果你的文件叫home.html，需要在平台设置里指定，或者干脆把文件名改成index.html再上传，最省心。

5.4 给新手的最后几条经验

走到这一步，你的个人主页和数字分身已经能正常跑起来了，最后我分享几条踩过坑以后总结出来的经验。

第一，把需求切成小碎块，一次只让AI做一件事。不要同时让它“生成主页、加聊天、加博客、做后台”，一次一条明确指令，迭代反而更快。

第二，每改一次就预览一次，永远不要在没看到结果的情况下连续改动好几轮。你要让“改动原因”和“结果表现”之间保持一一对应，否则出了问题根本不知道是哪个环节造成的。

第三，做好备份。AI生成代码的过程中，时不时会改出一个没有保存的中间版本，我的手抖经验就是，每次准备大改之前，把当前可用版本复制一份重命名保存，比如index_v1.html，这样再离谱的操作都能回退。

第四，提问时不要只说“改好看一点”，要给出具体到可执行的描述。“把首屏标题的字号改成32px，颜色改成浅蓝色，按钮改成圆角”永远比“变好看”有效，因为AI理解的“好看”和你的审美大概率不是一回事。

我在做这个项目的过程中，最深的体会是Vibe Coding的本质不是偷懒，而是把精力从“怎么敲代码”转移到“怎么把需求讲清楚”。提示词写得越细，AI生成的结果就越跟手；你花在修改上的时间越少，留给自己打磨内容的时间就越多。等你把这一课的单页主页和文本分身跑通，后面想加博客、加语音、加更多交互，路径其实已经完全打开了。