首页视觉并不是先写出一套完整规范，再按规范实施。它更接近一次连续的取舍：AI 先给出可供判断的第一版，我在实际预览中指出问题，AI 再据此生成新的实现。几次尝试之间甚至出现过方向性的回退，最后留下来的并不是元素最多的一版，而是最能让四个栏目处在同一套视觉秩序中的一版。
AI 第一版先确定三栏视觉基调
AI 最初并不是直接生成现在的四栏目首页，而是先给出“折页作品集”“编辑式索引”和“几何展厅”三个可比较的方向。我选择了其中的“折页作品集”。它已经确定了这个首页后来一直保留的基础气质：低饱和的米白底色，偏灰的栏目色，宋体大标题，细线、小号英文和编号，以及接近编辑页面或纸质档案的视觉语言。
当时网站只有实践、观察和创作三个内容方向，还没有把技术学习单独列为栏目。首屏右侧叠放的也是三张纸页，分别对应跨境电商实践、产品观察和《卡瑞斯》；下方是三张横向排列的内容卡片，实践栏目略宽，另外两栏等宽。也就是说，第一版并不是后来出现的四张等大卡片，更不存在完整的四色四栏结构。
这套方案不像常见的产品落地页，也没有使用大图、渐变和强调转化的按钮。它更接近编辑页面或纸质档案：色彩负责区分内容，文字和细线负责建立秩序。因此，后续修改没有推翻第一版的配色和字体关系，而是在它的基础上解决空间层次与交互问题。
增加技术栏目后，首页才变成四栏
网站结构继续梳理以后，技术学习被确定为第四个长期栏目。原来的三栏折页方案也随之扩展：首屏的三张叠纸增加为四张，下方内容区改成两列两行，实践项目、观察与判断、我的技术栈和长篇创作各占一张等大的色块卡片。蓝色也在这个阶段加入，组成后来使用的绿、黄、蓝、紫四色。
这张截图记录的是加入技术栏目后的四栏目视觉原型，不是未经修改的第一次 AI 输出。它保留了第一版的字体、配色倾向和叠纸意象，但页面结构已经发生变化。下方四张卡片的标题、摘要和入口依次排列，信息很清楚；问题在于，它们只是整齐地铺在页面上，内部也主要依靠文字和分隔线组织内容。我的判断不是某个栏目权重过高，而是这组元素过于规整、死板和单调。
从大小不一的四块改回统一尺寸
为了打破等分网格，最先尝试的是改变四个栏目的面积和排列，让卡片使用不同的宽度与高度，希望通过错落关系增加节奏。这一版确实不再整齐，却随之产生了新的问题：面积会被理解为内容权重，较大的栏目天然显得更重要，阅读顺序也不如原来的两列网格稳定。
这种不对称并没有让页面更丰富，只是用层级差异替代了原来的单调。因此，四张卡片最后恢复为统一尺寸，标题位置、边框、留白和入口方式也重新对齐。先保持栏目平等，再寻找不会改变信息权重的层次手段。
在统一卡片上加入浮动设计
尺寸恢复统一以后，下一步才是在卡片上增加浮动感。卡片通过轻微错位、投影和位移离开背景，鼠标经过时产生幅度很小的抬升。它不再完全像贴在页面上的四块色纸，同时又没有改变四个栏目的并列关系。
不过，浮动只改变了卡片与背景的关系，卡片内部仍然缺少层次。继续增加阴影或位移，只会让它更像一个普通的网页组件，并不能继续强化第一版已经建立的纸页语言。
从第一版已有的叠页元素继续推演
重新查看最初的“折页作品集”时，我注意到首屏右侧从一开始就有相互叠放的纸页：最初是对应三个方向的三张纸，栏目扩展后才变成四张。这个元素起初只是内容方向的缩略提示，却提供了下一步的线索：如果首页已经把“纸”作为主要视觉单位，是否可以把叠放关系从首屏装饰发展成每个栏目的共同结构？
中间版本因此把每张栏目卡片拆成三层纸页，并尝试把不同内容转成各自的图形。
实践项目使用问题、行动路径和阶段复盘表示项目推进；观察与判断放入手机、吹风机和台灯等产品对象；技术栏目尝试嵌入式芯片、Django 请求链路和三维线框；长篇创作则使用世界地图、手稿和设定资料。桌面端悬停时，几层纸会从重叠状态展开，触控设备则默认露出一部分边缘。
从单张截图看，这些卡片比最初的色块丰富，也确实建立了更明显的前后关系。但当四张卡片同时出现时，问题变成了另一种形式：它们共享了叠纸外形，却没有共享同一种视觉语言。
叠纸形式为什么没有形成统一
四个栏目需要表达的信息不同，内部图形的复杂度也随之失衡。产品对象依赖具象轮廓，技术结构需要更多线条和节点，项目流程偏向信息图，创作资料又更接近插画。自绘 SVG 的线宽、细节和透视难以保持一致；替换为第三方图标后，材质与造型来源的差异反而更明显。
叠放设计还放大了这种差异。每个图形都拥有自己的纸页、位置和展开动画，四张入口卡片逐渐变成四组互不相关的小组件。移动端空间缩窄以后，纸页之间的位移也更容易造成拥挤和遮挡。
这次回退确认了一条后来一直保留的规则：视觉统一不能只依靠相同的外框。元素密度、线条复杂度、留白比例和动画方式同样需要受同一套规则约束。纸页可以继续使用，但不再要求每一项内容都拥有一张独立的纸。
最终收敛为一栏一张纸
最终版本为每个栏目保留一张固定的白色纸页视窗，外层继续使用四色低饱和背景。四张卡片共享尺寸、边框、留白、标题层级和轻微浮动，栏目差异则被限制在纸页内部。
实践项目用“问题—判断—行动—复盘”构成一条工作路径；观察与判断用 PRODUCT、MARKET、CAREER 三个标签说明内容范围；技术栏目使用命令行窗口；长篇创作使用文件夹和露出的稿纸。它们仍然能够说明各自的内容性质，但不再为每一栏重新建立一种图形风格。
这个结果并不是回到最初的平面卡片。纸页仍然与背景保持距离，内部元素也会在触发后产生简单动画。变化只发生在有限区域内，因此访客先识别到四张属于同一系统的入口，再看到各栏目的差别。
技术卡片里的命令行动画
技术卡片里的命令行窗口最能说明这套动画的处理方式。静止状态只显示一段已经完成的测试结果，停在 2 tests passed；卡片被激活后，窗口继续逐行输出命令和状态，并随着新内容向下滚动。动画完成后停留在最终画面，指针离开或卡片失活时再恢复初始状态，下一次可以重新播放。
这里的动画不是持续循环的背景装饰，而是一段由交互启动、具有开始与结束状态的说明。它把“实现—排错—验证”的过程压缩进一个很小的窗口，也为其他三张卡片确定了边界：动画可以帮助解释栏目，但不能不断争夺注意力。
悬停触发和滚动触发两套逻辑
同一套动画不能只依赖鼠标悬停。支持精细指针和悬停的设备使用 hover 与键盘焦点触发；触控设备则根据卡片与视窗中心的距离决定当前激活项。当下一张卡片进入中心区域时，上一张恢复初始状态，四个栏目遵循相同的切换规则。
实现中同时检查 (hover: hover) 和 (pointer: fine)，而不是只根据屏幕宽度判断设备。这样，缩窄浏览器窗口的电脑仍然使用鼠标逻辑，手机和平板则使用滚动逻辑。滚动位置的计算通过 requestAnimationFrame 合并更新；系统启用“减少动态效果”时，页面直接呈现稳定状态。
主结构确定后还做了几项小范围校准：整张卡片都可以进入栏目，命令行窗口的浮动幅度与外层纸页保持一致，导航栏固定在页面顶部，卡片间距和标题到分隔线的距离也统一到同一组基准。这些修改没有再改变视觉方向，只负责消除使用过程中的不连贯。
决策和实现的分工
这个项目采用纯 Vibe Coding，没有手写代码。视觉方向的选择、问题判断、纸页参考的引入、方案回退和最终验收由本人完成；页面变体、Django 模板、CSS、JavaScript 与测试代码由 AI 生成和修改。
这套协作方式并不是让 AI 包办一切，而是在 AI 给出的第一版上不断修改，达到我想要的视觉效果。第一版的作用是把抽象偏好变成可以比较的页面，后续每次修改再针对一个已经看得见的问题作出决定。首页最终形成的统一感，主要来自对方案不断删减和收口，而不是一次生成出完整答案。