一、全文速览图
在上一篇文章《AI 个人网站实战：从设计构思到部署上线全流程！》中，我详细介绍了如何从 0 开始设计个人网站，并完成部署上线，重点讲的是整个工作流。
这次，我又更新了一版网站，让 IP 形象、内容和交互更好地结合起来。
今天按模块讲讲，我怎样准备设计素材、让 AI 实现页面，再逐步调整交互细节。除了 AI 的使用方法，也会分享我的设计构思。
二、首屏：鼠标晕染画布
我认为，个人网站的首屏需要做到这几点：简明地传递个人信息，建立个人 IP 形象，让用户快速到达联系区，同时有吸引人的亮点。
首先，我确定了网站想传递的感觉，也就是设计语言。我用蓝、粉、紫三种颜色，营造神秘、梦幻、未知的感觉。这也呼应了网站的定位：主要用来展示在 AI 方面的成果。
基于这个定位，我设计了一个有反差感的 IP 形象：emoji 风格的头像，搭配一身略显正经的穿搭。鼠标晕染效果既能模拟画笔的感觉，也能用特别的交互形式吸引用户。
按这个思路，我把首屏分成四层：信息展示层、IP 形象层、联系按钮层和动效层。
那鼠标晕染画布动效是如何实现的呢？我调用了已有的动效组件。
网址：[https://reactbits.dev/animations/splash-cursor]
提示词参考
在当前网页首屏接入 React Bits 的 [https://reactbits.dev/animations/splash-cursor]，直接使用官方源码，实现鼠标移动时的彩色流体拖尾效果。背景透明，动效放在文字、人物和按钮后方，仅在首屏范围内显示，不影响点击和滚动。保留现有布局，替换已有的同类动效，避免重复叠加。
有两个要注意的点：
首先要确定动效的显示范围，并把动效层放在信息、IP 形象和联系按钮后方，避免晕染效果遮挡内容。
另外，晕染颜色可以根据网站色板确定。所以要先定好色彩体系，再制作动效，避免颜色与网站想传递的感觉不匹配。
三、经历区：滚动穿梭的纵深空间
用户通过首屏对我有了初步印象，接下来，我希望用自己的经历打动他们。我想采用一种更有趣的形式来呈现，而不是照搬简历的样式。
我把自己的经历拆成几个关键阶段，每个阶段对应一个图层，配上有代表性的 IP 形象和贴纸风格的标签。
在交互形式上，上下滑动可以在不同阶段之间切换，看起来就像一个纵深空间，这种形式也贴合了个人成长的过程。
提示词参考
用现有图片和文字实现一个随上下滚动分阶段推进的纵深展示区：场景固定在视口内，向下滚动时前一阶段靠近并淡出，下一阶段从远处接入，向上滚动时反向还原。用透视、缩放和轻微错位营造三维感，鼠标移动带动前景小幅平滑旋转，背景保持静止。初始只显示第一阶段，转场连续、不留空白，避免人物和文字交叠。
四、文章区：三维灵感补给站
在这个模块，我要展示的内容是我在学习 AI 中沉淀的一些方法和经验，我把它设定成了 “AI 灵感补给站”。
“补给站” 的概念呼应了我希望用户来这里学习 AI 的想法。视觉上，我参考便利店货架，把这个区域做成了三维空间。
难点在于，如何搭建三维空间呢？
我用 image2 生成了两张图片，一张正视图，一张侧视图，再让 AI 根据图片用代码建模。
通过 Three.js 制作的三维模型，没有 Blender 这种专业建模软件精度高，如果希望材质还原的效果更好，应当选用 Blender。Three.js 就是通过代码建模，能够实现在有限的角度里面旋转，网页设计里面一般足够啦。
提示词参考
根据提供的正面图和侧面图，使用 Three.js 制作可交互的三维场景，通过 WebGL 渲染。还原参考图的结构比例、厚度、配色、材质与灯光，使用真实三维模型，不用整张图片模拟立体效果。已有图片直接作为贴图，不额外生成。支持有限角度拖动查看，并提供可复用的 GLB 模型。
你会发现，正视图、侧视图与最终效果有些差异。比如，我没有在三维建模阶段加入装饰贴纸。因为贴纸是二维的，等模型确认后，再确定它们的位置就可以了。
我最初把文章分成三类，分别对应三个货架，货架上的每件物品代表一篇文章。但问题是：用户怎么知道每件物品对应哪篇文章呢？
于是，我设计了文章标题贴纸，鼠标悬停在物品上时，就会显示对应的标题。
问题又来了：这么多篇文章，难道要逐一生成标题贴纸吗？以后新增文章，也要重新设计吗？
后来，我找到了这个 GitHub 仓库。现在只需提供文章的飞书链接，就能自动抓取标题，生成贴纸效果。
提示词参考：
鼠标 hover 三维物品时，在上方显示对应文章标题贴纸，移开后隐藏。参考 [https://github.com/CatsJuice/sticker-forge]，使用黑色粗体、圆润白边和柔和阴影。贴纸随镜头移动，支持长标题换行，用 GSAP 实现缩放淡入淡出，不阻挡物品点击。
五、课程区：打字机出纸动效
这个区域要展示一门已经做好的 AI＋设计课程。我想了想：怎样让课程信息更突出？
我就想到运用打字机的形式，随着一个一个按钮按下，打字的纸会慢慢延伸，直到展示出所有的课程信息。
提示词参考
用提供的打字机图片制作网页动画：纸张从滚轴后逐行向上送出，文字逐字打印，按键同步下压。纸张使用可编辑的 HTML，处理好与机身的前后遮挡。进入视野后自动播放，不显示控制栏，适配不同屏幕并保持打字机完整可见。
除此之外，你还需要给 AI 提供一张打字机图片（如下图），以及一段要打印的文字，内容不宜过长。
六、联系区：可撕拉的名片贴纸
在联系区，我把联系方式制作成了可撕拉的贴纸名片，用户只需要点击对应的贴纸，就可以跳转对应的链接。
贴纸可以用前面提到的代码仓库制作，因为这个信息是相对固定，不经常修改，所以我直接用下面这个网站生成了贴纸的图片，再交给 AI。
生成的贴纸是静态图片。我想让它在鼠标悬停时产生撕拉效果，于是用了下面这个动效组件。
提示词参考
使用 [https://reactbits.dev/animations/sticker-peel]实现贴纸效果：悬停卷边，点击撕下后替换下一张。
为了增加趣味性，我设计了四张不同表情的个人 IP 贴纸。每撕下一张，就会自动贴上下一张，四种表情循环出现。
七、总结
我现在把我的网站开源给大家： [https://www.vibedesignlab.xyz]
如果你想复刻其中某个模块，只需把网站链接和该模块的截图发给你的 Agent，就能做出一样的效果啦！
希望大家发挥自己的创意，参考这些思路，做出自己的个人网站。