说实话，上一版个人网站长什么样子我已经记不太清了。只记得它是一个 Hexo 博客，改了一些别人写好的主题，然后就没怎么管过。直到前阵子朋友 Baesory 丢过来他的新站——gbclstudio.cn。

打开的那一瞬间，我愣住了。

他的站有一种很特殊的质感——像是一台刚启动的开发机，终端光标还在一闪一闪。深色底色、命令行式的标题、贯穿全站的青色侧边栏、底部不断滚动的名字横幅。每一个 section 都像系统的一个子系统，整齐、克制，又藏着小细节。

“我也想要一个这样的。”

于是有了接下来三天。

第一天：把架子立起来

我做的第一件事不是写代码，而是打开 OpenCode。

如果你还没用过 OpenCode，简单说它是一个可以编排多个 AI agent 协同工作的终端工具。我给它配了三个模型：GLM 5.2 负责中文语境下的内容生成和文案润色，DeepSeek V4 Pro 做重逻辑的工程设计和架构规划，GPT 5.5 处理需要广博知识面的技术调研和选型对比。

搭积木式的开局

跟 agent 一起干活的方式和传统开发完全不同。第一天上午我做的事情大概是这样的：

1. "帮我把这个站拆成七个 section，用 Astro 搭壳子。"
   DeepSeek V4 Pro 吐出了一套文件结构，包括路由设计、section 注册表、和一个初版的 React 组件骨架。
2. "每个 section 要一个统一的壳，左边一条青色侧栏，右边是内容。"
   GPT 5.5 给出了 SectionShell 组件的方案，还顺手推荐了 react bits 这个轻量 React 组件库来做底层的 UI 原语（button、card、badge 这些）。
3. "设计系统写进 DESIGN.md，以后 agent 都要读这个文件。"
   下午的时候，我把配色、字体、间距、动效规范全部写进了一个 DESIGN.md，之后每次让 agent 生成组件，都会让它先读取这个文件。这一步省了我无数后续的反复调整。

到第一天结束的时候，整个站的结构已经跑起来了：七个页面，统一的 SectionShell，导航栏能切换，上下滚动也通了。虽然里面全是占位内容，但骨架的完成给了第二天很大的信心。

第二天：注入灵魂

如果说第一天是搭骨架，第二天就是填血肉——而且是那种需要反复试错的精细活。

全屏导航的执念

Baesory 的站用的是 Astro 的 View Transitions 来做页面切换，效果已经很好了。但我有一个更偏执的想法：能不能让全站像一个原生 app 一样，所有页面永远在同一个容器里，切换只是上下的滑入滑出？

这个想法让我跟 DeepSeek V4 Pro 来回折腾了好几个小时。核心难点有两个：

1. 滚动容器的嵌套——每个 section 内部有自己的内容滚动（用 Lenis 做了平滑处理），但 section 之间的切换是整体平移动画。两层滚动不能互相打架。
2. 浏览器前进后退的同步——如果用 pushState 来更新 URL，那用户点了浏览器的后退按钮怎么办？文章阅读模式进出了怎么办？

最后拿到的那版方案我看着都心惊——useFullpageNavigation 这个 hook 快 300 行，里面有 ref 锁、异步队列、滚动方向检测、历史状态同步。但它是 work 的。

从 Baesory 那里“借”来的审美

说“借”可能有点轻了。更准确的说法是——我看到了一个我非常认同的设计方向，然后在上面生长出了自己的版本。

Baesory 的设计有一个极高的起点：终端美学。不是那种塞几个 $ 符号和绿色文字就了事的表面功夫，而是把整个网站的浏览体验设计成了一套系统的启动和运行过程。色带、侧栏、水印、命令式标题——这些元素构成了一套完整的视觉语言。

我在他的基础上做了这些变化：

到了第二天晚上，这个站已经从一个空骨架变成了一个你可以真的在里面“逛一圈、不想走”的体验。

第三天：收尾、部署、和一点感慨

第三天做的事情其实更接近传统开发——修 bug、调细节、准备部署。

Agent 编排的实际体验

说实话，三天里最让我意外的是 OpenCode 的多模型 agent 编排。之前我总觉得 AI 辅助编程就是“问一句，得一段代码，粘过来改一改”。但这三天的体验完全不同：

不是我让 AI 干活，而是我指挥一个 AI 小组干活。DeepSeek 做架构，GLM 出文案，GPT 做方案评审。我变成了一个在中间调配资源、做最终拍板的人。

这种感觉很奇妙。有点像从一个 solo developer 突然变成了 tech lead——虽然你的“团队”是三个不可见的语言模型。起名字的时候我甚至给 agent 分配了不同的人设：严谨的架构师、话多的创意文案、温和但固执的 code reviewer。

部署

1. 1. 把 repo 推到 GitHub
2. 2. 连上 EdgeOne Pages，选好分支
3. 3. 点一下 Deploy，等 40 秒
4. 4. 打开浏览器，看到自己的站真的能跑

没遇到什么幺蛾子。Astro 的静态构建 + EdgeOne 的边缘网络分发，国内访问速度很快。

关于 Vibe Coding

最近有个词很火——“Vibe Coding”。大概意思是：不纠结于每一行代码的完美，而是顺着灵感和直觉写，让整体氛围对的优先于细节对。

这三天的建站过程大概就是一次很纯粹的 vibe coding 体验。我没有画线框图，没有写详细的技术方案文档，甚至连组件树都没画——就是打开 OpenCode，说“我想要一个怎么怎么样的东西”，然后看 agent 生成的东西对不对味。对味就留着继续迭代，不对味就打回去重来。

当然，vibe coding 不是“瞎写”。我的秘密武器是那个 DESIGN.md——它承载了所有的“氛围锚点”：色号、字体字号、间距系统、动效曲线。每个 agent 在被派活之前都会被要求读这个文件。这保证了不管几轮迭代、换了几种表达形式，最终产出的东西都像是一个人做的。

所以这个站是什么样的

如果你还没看过的话——

这是一个终端感很强的个人作品集。黑白色为底色，深蓝做 accent。全屏分 section 滚动，每个 section 之间有打字机式的过渡动画。右上角导航栏是一块长了色散效果的玻璃面板。角落里有水印，头顶有 BGM，左下角有“返回顶部”的按钮。

它有 3D，但不是那种一打开就飞出屏幕的 3D。它有一条安静的挂绳在 Hero 区轻轻荡着，背景是一幅永不停歇的着色器画布。

技术上是 Astro + React + Tailwind，底层的 3D 和动画用了 R3F、Rapier、OGL、Motion、Lenis 这一套。

但这不是一篇技术选型文，所以到此为止。

最后的最后

谢谢 Baesory 愿意让我“借鉴”他的设计。一个好的朋友圈，有时候比一个好用的库更重要。

三天的 vibe coding 结束了，但折腾不会结束。接下来可能会给博客加一些更有趣的内容形式，或者把移动端的体验再打磨一版——这次可能换个 agent 组合试试。

如果你也在用 OpenCode 或者类似的方式做自己的项目，欢迎交流。