背景

我做这个站一直和 AI 绑在一起，但它从来不像“一键生成网站”那样工作。分工每次都是一样的：我定方向，决定这个站为什么做、给谁看、什么重要、什么可以不要；AI 把方向变成草稿、代码、备选方案和更清楚的解释；我负责试、看、删、改，并为结果负责。

网站到现在经历了三次迭代：第一版让它存在，第二版让它有性格，第三版让它有世界观。下面按时间线写整个过程：我做了什么、哪里出了错、AI 帮上了什么忙，以及哪些事它仍然代替不了。

时间线总览

最早的做法

最开始，我们只做单页部署：一个页面文件，把首页、简介、作品和联系方式全部塞进去。

我的工作流很原始：把几千行代码复制给 AI，让它按需求添加内容，再把结果复制回自己的电脑。两个问题很快冒出来。每次改动都要 AI 把整份文件重读一遍，时间全花在这上面；文件也越堆越大，最后连我自己都找不到某一段在哪。

而我真正想要的是多语言网站，后面还挂着个人资料库和作品集。所以换成了现在的架构：内容、页面、样式和组件分开管理。改文字不用再在几千行里翻找；每个项目有独立文件夹放文章、封面、版本图和翻译；中文、英文、荷兰语共用同一套页面结构；作品集可以一直加下去而不会变乱，改哪个项目就去哪个文件夹。

代价是实打实的，值得说清楚。这套架构比单个 HTML 文件复杂，新增项目必须遵守目录结构和 frontmatter 格式，翻译要手动维护所以很容易漏掉某个语言，改全局样式可能牵动所有项目，入门阶段的成本也更高。但对长期维护来说这笔交易仍然划算，而且“个人资料库 + 作品集”本来就需要它。

V1：先让它存在

当时我做了什么

• 从 X:\Github\my-portfolio 开始；
• 先确定网站要有的几个基本部分：我是谁、我做过什么、怎么联系我；
• 把真实内容放进去，不做空壳；
• 让它在电脑上先能正常打开。

遇到的问题

1. 不知道从哪里开始。 网站看起来是一整件事，但拆开后其实是：内容、结构、视觉和上线。
2. 页面像拼图。 每个部分单看还行，放在一起就不像一个网站。
3. 手机上会乱。 在电脑上调好的位置，到手机上会挤在一起。
4. 不知道“上线”是什么意思。 代码放在电脑里只是一个文件，放到网上别人才能访问。
5. 写内容比写代码难。 代码可以抄、可以生成，但“我是谁”只能自己回答。
6. 第一版太“风格化”了。 当时什么都想加进去，结果元素太多、信息挤在一起，阅读起来很累。好看的东西不一定适合同时出现。

AI 做了什么

• 把“我要做个人网站”翻译成具体的页面结构；
• 给出第一版页面草稿；
• 解释什么是域名、托管、部署、响应式；
• 帮我把生硬的中文改得更自然；
• 在出现报错时，告诉我每一行大概是什么意思。

人工做了什么

• 决定网站给谁看、要留下什么印象；
• 提供真实经历、项目、图片和联系方式；
• 判断页面“顺不顺眼”；
• 在真实手机上点一遍，不能只看电脑预览；
• 决定第一版先不追求完美。

这一版学到的

第一版的任务是先让它存在。 先把“能打开、能读完、能联系”跑通，再谈风格。

V2：让它有性格

当时我做了什么

• 在第一版基础上，加入神经网络背景；
• 加入黑客终端，让页面有一点“系统启动”的感觉；
• 统一深色底、字体、颜色和动效；
• 让背景动起来，但尽量不挡住内容。

遇到的问题

1. 特效很酷，但很吃性能。 电脑风扇会转，旧手机打开会卡。
2. 背景和内容抢注意力。 用户不知道应该看终端，还是看正文。
3. AI 给的代码能跑，但我不知道为什么。 一旦失效，我不知道从哪改。
4. 对比度不够。 背景一亮，白字就看不清。
5. 不同屏幕差很多。 同一个效果，在宽屏、笔记本和手机上完全不同。
6. 神经网络背景太陈词滥调。 它确实有科技感，但已经被用得太多了，很难让人记住。
7. 黑客终端显得画面杂乱。 终端、正文和背景都在抢注意力，读者不知道应该先看哪里。

AI 做了什么

• 一次给多个视觉方向，不只给一个答案；
• 生成动态背景和终端交互的初版代码；
• 解释“为什么背景要退后、文字要前进”；
• 提供性能更好的备选方案；
• 帮我把“酷”和“能读”之间的冲突列成取舍清单。

人工做了什么

• 决定哪些效果保留，哪些删掉；
• 把动效强度调低，宁可少一点，也不要影响阅读；
• 在真实设备上测试，不能只在开发电脑上看；
• 检查每一段文字是否清楚；
• 删掉“看起来很厉害，但用户根本用不到”的部分。

这一版学到的

风格的目标是让人一眼记住，又不妨碍阅读。 第二版最大的进步，是网站开始有自己的性格。

V3：让它有世界观

当时我做了什么

• 把视觉主题从“科技感”推进到“宇宙感”；
• 在复古未来的基调上，加入 NASA punk、新拟态、拟态玻璃等现代元素；
• 加入星空背景、黑洞和引力透镜，让光在经过黑洞时发生弯曲，并把星空、黑洞与内容放进同一个画面，让它们互相呼应；
• 目标是做一种横跨时空、多个科技风格并存的“奇美拉”。

遇到的问题

1. 性能与美观的拉锯。 越接近真实，计算越多；越流畅，细节越少。
2. 参数非常敏感。 黑洞的位置、大小、亮度和旋转速度差一点，就会从“震撼”变成“奇怪”。
3. 黑洞太抢眼。 背景一旦成为主角，正文就会变成配角。
4. 不同屏幕需要重新构图。 电脑、手机、竖屏、横屏，黑洞不能都放在同一个位置。
5. “好看”和“能读”经常打架。 有些画面非常漂亮，但文字放上去就消失。
6. Credit 必须认真处理。 参考了别人的视觉和实现思路，就要保留来源、链接和署名。
7. 分辨率不同，构图完全不一样。 2K 和 1080p 下黑洞的位置、大小和留白都要重新调整；手机端还要判断哪些特效应该隐藏或简化。

AI 做了什么

• 用简单的话解释引力透镜是什么；
• 给出参数范围和调试方向；
• 帮我优化效果的性能；
• 提供低性能设备的降级方案；
• 整理 Credit 的写法，确认哪些内容需要标注来源；
• 帮我翻译、整理和润色说明文字。

人工做了什么

• 决定黑洞放在哪里、占多大、什么感觉；
• 在好看与好读之间做最终取舍；
• 确认每一个参考来源，并保留作者署名和链接；
• 在低端设备、手机、不同浏览器上看实际效果；
• 给动画留“减速/关闭”的余地，尊重用户的设备和使用习惯；
• 对网站的内容真实性负责。

这一版学到的

技术效果是画笔，网站内容才是画。 AI 能帮我画出星空和黑洞，但“为什么要画、画给谁看”必须由我决定。

现在：继续迭代

第三版不是终点。现在我在做的是让网站在更多设备上稳定打开，让正文更清楚、少为效果牺牲阅读，把制作过程记录完整好让这个项目也能当教程用，让中文、英文和荷兰语的内容保持同步，继续收集反馈看访客真正想看什么，以及在性能、审美和内容之间继续找平衡。

下一阶段的目标说起来容易，做起来难：

更好读、更好用、更容易维护。

踩过的坑

网站兼容性

分辨率是这个项目里最容易被低估的麻烦之一。

同一个黑洞，在 2K 屏幕上可能刚刚好，在 1080p 屏幕上就会显得太大；在手机上，它甚至可能挡住正文，或者让页面掉帧。

所以我给 2K 和 1080p 分别调黑洞的大小、位置和亮度，在手机端判断哪些特效值得保留、哪些该隐藏或降低强度，还给它做了一个调试窗口，可以手动调 2K 和 1080p 下的表现。要点是别再想把同一个效果硬塞给所有设备。

效果要在设备上判断。 2K 上成立的一套构图，跟手机上成立的那套不是同一套。

AI 和人工的工作内容

AI 让活干得更快，但它不做任何决定。 它比我快，但它说不出这是什么、为什么做、由谁负责。

小白攻略

1. 先写内容，再做设计。
   网站是容器，内容才是水。先想清楚要说什么，再决定长什么样。

2. 第一版只求上线，不求惊艳。
   能打开、能读完、能联系，就已经超过很多“永远在改”的网站。

3. 把 AI 当实习生，不要当老板。
   它很会出草稿，但你要负责判断、取舍和最终结果。

4. 加特效时要考虑可读性和艺术性。
   它会不会抢镜头？和主题风格统一吗？在 dark / light mode 下都好看吗？多语言场景下布局会不会乱？

5. 一定在真手机和旧设备上试。
   你的电脑不代表访客的设备。能打开、能看清、不卡，比酷更重要。

6. 参考可以，照搬不行。
   用到别人的代码、视觉或灵感，保留 Credit，并确认授权。公开作品尤其要注意。

7. 一次只改局部细节，重大改动记得备份。
   网站迭代最怕“一次性大改”，最后不知道是哪一步出了问题。

Credit / 参考

这个项目的视觉效果不是凭空出现的。以下来源给了我非常重要的参考和启发：

• 星空视觉参考：OpenAI GPT-6 Astra 页面
• 黑洞实现参考：Shadertoy (lstSRS)
• 引力透镜参考：BH+disk
• 磁带盒动效参考：《绝区零》「代理人秘闻」的选带界面（官方网站）。现在成品的视觉已经和原作差得很远，磁带盒的动作结构仍然来自这里。
• 开场动画参考：《明日方舟：终末地》官网的开场动画（官方网站）。配色、版式和读数式的进场节奏取自这里，元素和文案全部重写过。

说明：以上为灵感、视觉与实现思路的参考来源。不同 Shadertoy 作品的授权方式可能不同，务必以原作者说明为准。

灵感网站整理

参考网站很多，直接乱逛很容易信息过载。我把它们按用途分成四类。

先定风格：看别人怎么做网站

再找动效：让页面“动”得自然

最后找实现与组件

最后润色文字

我的使用顺序

1. 先看 Land-book / Siteinspire：确定整体风格；
2. 再看 Motionsites / Landing.love：确定动效节奏；
3. 然后看 Shadertoy / 21st.dev：找具体效果和组件；
4. 最后用 lieflat-less-ai-tone 润色：让文字去掉 AI 味；
5. Awwwards / One Page Love / Lapa Ninja 用来补灵感：只存 2–3 张参考图，不要边看边做。

一个小提醒：灵感库是菜单，不是任务清单。
每个网站挑 2–3 个真正适合自己的参考就够了，否则会陷入“越看越不会做”。

学到的东西

这个网站从一个简单的个人主页，变成神经网络与黑客终端，再变成星空、黑洞和引力透镜。

视觉只是看得见的那部分。这个过程真正让我明白的是：AI 能把我带过“不会写代码”那道门槛；而过了门槛之后，审美、判断、内容和责任仍然是我的。网站原来是一段持续迭代的记录。

AI 让执行变便宜，这正是判断变得更值钱的原因。

AI 负责把想法变快，我负责让想法变得值得。