过程证据

我问 AI：

我是编程小白，正在制作我的个人作品集网站。这个网站会作为我的期末考核作业……请推荐一套最适合我这种小白、且方便以后「持续迭代」的技术栈（比如 Next.js + Tailwind CSS？），用大白话告诉我为什么选它。

AI 回答的要点：

推荐 Next.js + Tailwind CSS，并给出理由：页面零件可以复用（导航栏只写一次，所有页面共用）；样式直接写在标签上，不用在多个文件之间来回跳；做手机/电脑自适应最顺手；网上教程多、能免费部署上线。另外建议先用 JavaScript 而不是 TypeScript，避免多出一类类型报错。

我自己做了什么：

我接受了这个推荐。我原本以为要自己一页一页复制导航栏，看完解释才知道可以让所有页面共用一套外壳。

我问 AI：

我已经在 src/data/site.js 里把名字和邮箱改成我自己的了，并且浏览器里已经看到了变化。现在请帮我做两件事：在 README.md 里更新第 1 次迭代记录（包含：改了什么、为什么、效果、下一步四要素）；帮我把这次改动提交到 Git，备注写上「第 1 次迭代：修改个人信息，完成初步展示」。我是新手，请一步一步告诉我在终端里输入什么命令。

AI 回答的要点：

先检查 Git 状态，发现 Git 还没有配置过身份信息（不配置的话提交会直接报错），于是给出完整顺序：设置身份 → 初始化仓库 → 暂存文件 → 检查 → 提交 → 查看记录。同时指出提交备注和 README 里的编号对不上，建议微调。

我自己做了什么：

我照着命令一步步做了，第一次提交成功。这件事让我知道：Git 要先设置身份才能提交，而且提交记录里的邮箱是公开可见的。

我问 AI：

停一下，我意识到我之前没有把最核心的课程作业评分标准告诉你，导致你现在只是在做普通的个人主页，这不符合作业要求。请仔细阅读并记录以下我的作业硬性要求：【3.1 必须包含的内容】【3.2 合格状态（四条底线）】……请你检查目前 src/app 下的所有页面结构，告诉我哪些符合要求、哪些完全缺失，并重新规划网站的路由结构和数据占位。先不要写具体页面的细节代码，请先给我一份网站架构规划。

AI 回答的要点：

逐条对照后指出：7 项要求里只有 1 项做了一半，其余大多是占位牌；并且发现一个更严重的问题——迭代记录只写在本机的 README 文件里，老师在网站上看不到。随后为每个模块建了对应的数据文件，把评分标准里的要素做成数据字段，并在 README 里建了一张任务清单。

我自己做了什么：

这次让我明白：光有「7 个板块」不够，每一页必须包含哪些要素才是得分点。我确认了 AI 提的三条建议（新增声明页、把迭代记录搬到网站、暂不做详情页）。

我问 AI：

之前的修改计划作废。我们现在专注做最核心的「3D 翻书外壳动画」，绝对不要写任何文字标题（如 My Portfolio 等），也不要填充任何模块内容。我已经在 public/images/ 准备了素材：cover-bg.jpg（牛皮纸封面）、wax-seal.png（火漆印章）、paper-bg.jpg（褶皱纸内页）、decor.png（复古装饰拼图）。请把首页重写成一本书：封面居中、自适应尺寸，火漆印章贴在封面中间偏右（用 mix-blend-multiply 去掉白底）；点击印章触发 CSS 3D 翻页动画（perspective + transform-origin: left center，约 0.8 秒），封面像门一样向左翻开，露出 paper-bg.jpg 褶皱纸内页，用 decor.png 截取干花、旧邮票等装饰散落在边角，中间留白。

AI 回答的要点：

AI 用 CSS 3D 变换做出了第一版「书」：书本容器居中，封面铺满牛皮纸底图、右上贴火漆印章；外层容器设置 perspective，点击印章后封面绕左边缘旋转翻开，露出褶皱纸内页和装饰贴图。

我自己做了什么：

我在浏览器里点开试了翻页，方向对了，但细节太粗糙：封面四周有一圈死板的框、照片是斜的、火漆印章位置突兀，整体不像一本真书。我决定再提一轮细节重构。

我问 AI：

我需要你对封面进行一次全面的细节重构，请一次性完成以下所有修改：一、视觉与外观优化：彻底删掉包裹封面的浅色背景容器（保留 box-shadow 立体阴影），摆正并放大封面图（background-size 用 cover 或 120%、background-position: center）；在封面右侧加一个约 4–8px 的米黄色垂直条模拟书页厚度；删除火漆印章。二、交互与翻页功能（修复重点）：整个封面绑定 onClick 切换状态，父容器要有 perspective，翻开时 transform-origin: left center + rotateY(-180deg)，持续约 0.8 秒，翻过去露出内页 paper-bg.jpg。三、背景颜色：把黄棕色木纹背景换成深灰哑光色（如 #2a2a2a 或深灰带噪点），衬托牛皮纸的书。

AI 回答的要点：

AI 按清单逐项处理：去掉边框容器、摆正放大封面、右侧加书页厚度条、移除火漆印章、背景换成深灰噪点桌面，并让点击翻页动画更顺滑。

我自己做了什么：

效果比第一版更像一本放在桌面上的书了，但我还是觉得「封面是一张平铺图片」的感觉太强，不像实物。正好我拍了一张新照片，决定换成真实照片来做封面。

我问 AI：

我刚刚覆盖更新了全新的封面底图 cover-bg.jpg。新图是一张端正的平视照片，左边是金属活页圈，右边是牛皮纸。请彻底重写封面的视觉和交互，一次性完成以下所有修改：一、整体外观清理：彻底删除之前所有的拉大、裁剪和歪斜代码，封面端正居中，背景换深灰调（如 #2a2a2a）；删除假厚度白边、火漆印章和多余的容器边框。二、核心翻书交互（极其重要）：利用 CSS 切图做视觉魔术——左侧固定层（活页圈，宽约 15%，background-position: left center，绝对不旋转，z-index 最高）+ 右侧翻转层（牛皮纸，占剩余 85%，background-position: right center，cursor: pointer，点击触发 rotateY(-180deg)、transform-origin: left center、backface-visibility: hidden）。三、翻开后的内页：右侧翻转层下方放 paper-bg.jpg 内页，用 decor.png 点缀胶带或邮票。我要看到：一本端正的、带着金属环的牛皮纸本子放在深色桌面上，点击右侧纸页，纸向左翻开，金属环纹丝不动，底下露出内页！

AI 回答的要点：

AI 先把照片逐像素分析了一遍（构图比较复杂：活页圈、纸页、树枝互相咬合，直接按 15%/85% 切图接缝处会露馅），重新裁剪出封面图并把接缝定在恰好 12.5% 的位置；然后用「background-position 无缝拼接」把一张照片切成左右两层：固定层显示照片左侧 12.5%（活页圈），翻转层显示右侧 87.5%（牛皮纸），两层按相同比例绘制同一张图，接缝完全看不出来。翻页用 CSS 3D 翻转实现，固定层不参与旋转、放在最上层。

我自己做了什么：

我在浏览器里反复点击测试：纸页向左翻开、金属环纹丝不动、内页露出来——就是我想要的效果！不过后来觉得它和课程要求的「7 个板块入口一目了然」有冲突，决定先回退到卡片版首页，翻书版代码存在 Git stash 里没有丢。

我问 AI：

你现在回到上次 git 存的那个版本

AI 回答的要点：

AI 把书封面相关的改动打包进 Git stash（不是删除，而是暂存起来，随时可以取回），然后把首页、导航栏、页脚三个文件恢复到上一次提交时的状态，网站回到卡片版首页。

我自己做了什么：

确认网站恢复到了提交时的版本，翻书版代码没有丢失。我也弄懂了 git stash 是干什么的：像把文件暂时收进抽屉，工作区恢复干净，抽屉里的东西随时能拿回来。

我问 AI：

首页不要普通卡片了，想要一整片黑色背景上的流体墨迹，中间是巨大的 ZHANG HAIYAN。鼠标经过字体时字母要像被水搅开、融进墨里，不要粒子或烟；左边保留七个模块入口。

AI 回答的要点：

把首页标题改成 GPU 流体场里的染料文字：速度场负责流动，染料负责字形和墨色，鼠标只改变局部流场；左边用玻璃卡片做七个模块入口。

我自己做了什么：

我确认不要粒子后，删掉了粒子方案。流体标题一开始边缘会撕裂，后来通过高分辨率字形、限制 UV 位移和局部采样解决；模块页也沿用了同一套墨迹语言。

我问 AI：

往下滑页面时，大标题不要固定在背景上，要逐渐缩小、往上滑到看不见。鼠标在下半部分移动时，墨迹应该留在鼠标附近，只有墨漂到字母旁边才影响字母，不要平白多出一层。

AI 回答的要点：

模块页把标题、背景和鼠标墨合并到一张固定视口的全屏流体画布。滚动时不销毁 canvas，而是把标题的采样坐标按进度缩放、上移和淡出；鼠标墨只在指针附近生成，标题是否被影响由墨的实际流动决定。

我自己做了什么：

一开始标题和背景是两张画布，鼠标在下方只能推动背景，推不到标题；强行映射指针又会在字母旁多出一团墨。合并成单画布后才自然。标题缩小后高光还停在原尺寸，后来把 dye、gradient、rim、specular、caustic 和 shadow 都统一到 titleUV。

我问 AI：

项目成果页不要木板和图钉了。项目截图要直接浮在深色背景上，像在水里漂着，被水流推动；鼠标靠近图片时，推动幅度要更明显。下面的项目索引改成一个框，只显示一个项目的信息，左右用 < 和 > 切换。

AI 回答的要点：

项目截图改成独立漂浮层：每张图有不同周期和相位的漂移；鼠标进入范围后按距离和指针速度施加推力，停下后回到漂浮轨迹。下方改成单项详情框，左右按钮和键盘方向键切换项目。

我自己做了什么：

我试过木板、图钉、照片堆叠和圆形水墨，最后都觉得和网站整体气质不搭，才改成直接漂浮的截图。详情框后来又把缩略图放到左上，项目名放右侧，并放大介绍文字。

我问 AI：

引用声明和页脚里的 AI 辅助说明写错了：前期用的是 Claude Code，后期才是 DeepSeek Harness，请改准确。

AI 回答的要点：

把关于我、引用声明和页脚三处统一改成：前期 Claude Code，后期主要使用 DeepSeek Harness；只写真实用过的工具，不把后期工具写成全程。

我自己做了什么：

我核对了实际开发顺序，按前期和后期的真实使用情况改写，没有把两个工具混在一起。