先说结论

这个项目不是“AI 一键生成网站”的爽文。

它更像是我和 AI 一起做的一场长期实验：

• 我负责决定“为什么做、给谁看、什么重要、什么不要”；
• AI 负责把想法变成草稿、代码、备选方案和更容易理解的解释；
• 我继续负责试、看、删、改和承担结果。

到现在为止，网站经历了三次明显的迭代：

1. 第一版：先让它存在；
2. 第二版：让它有性格；
3. 第三版：让它有世界观。

下面我把整个过程按时间线写下来。包含我遇到的问题、AI 帮上的忙、以及哪些事 AI 代替不了人。

时间线总览

最早的做法

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

我的工作流很原始：每次把几千行代码复制给 AI，让 AI 按我的需求添加新内容，再把结果复制回自己的电脑。

很快发现两个问题：

1. 复制粘贴太费时间。 每次都要等 AI 重新理解整份代码，改完还要再复制回来。
2. 文件会变得非常臃肿。 内容越加越多，代码越堆越长，最后连我自己都很难找到某一段在哪里。

而我真正想要的不是“一个越来越长的单页”，而是多语言 + 个人资料库 + 作品集。

所以后来换成了目前的架构：内容、页面、样式、组件分开管理。

简单说，目前架构的优点是：

• 内容、样式和页面结构分开，改文字不用在几千行代码里翻找；
• 每个项目有独立文件夹，方便放文章、封面、版本图和翻译；
• 支持中文、英文、荷兰语等语言，共用同一套页面结构；
• 作品集和个人资料库可以持续扩展，不会越加越乱；
• 维护路径更清楚：改哪个项目，就去哪个文件夹。

缺点是：

• 比“一个单页文件”复杂，新增项目要遵守目录结构和 frontmatter 格式；
• 多语言需要手动维护翻译，容易漏掉某个版本；
• 改全局样式时可能影响所有项目，要更小心；
• 刚开始理解成本更高，不像复制粘贴那么直观。

但对我来说，它更适合长期维护，也更符合“个人资料库 + 作品集”的目标。

V1：先让它存在

当时我做了什么

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

遇到的问题

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 下的视觉表现；
• 不做“所有设备都一样”的效果，而是让不同设备都有适合自己的版本。

好的视觉不是把同一个效果硬塞给所有屏幕，而是让每个屏幕都看起来刚刚好。

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 负责把想法变快，我负责让想法变得值得。