三天，一个终端，和几个 AI 伙伴：Vibe Coding 我的新作品集
用 OpenCode 编排多模型 agent 协同作战，借朋友的审美做设计，三天从空文件夹到上线——一段很疯但很高效的建站记录。
7 min · 阅读全文 →
[ 0.000000] mirahikari-os 1.0.0-release (gcc 14.2.0) #1 SMP PREEMPT x86_64
[ 0.003814] BIOS-e820: [mem 0x0000000000000000-0x000000007fffffff] usable
[ 0.008217] ACPI: RSDP 0x00000000000F0490 000024 (v02 MIRA)
[ 0.014903] smpboot: Bringing up 12 CPUs / 24 threads
[ 0.022518] Memory: 16384496K/33554432K available (16384K kernel code)
[ 0.031264] pci 0000:01:00.0: [10de:2684] type 00 BAR 0 [mem 0xfe000000-0xffffffff]
[ 0.039817] drm: framebuffer [0x0] initialized at 0xfe000000
[ 0.048290] init[1]: reached target — system ready
关于工程、设计与创造的过程记录。这里写下思考的副产品——那些值得回头再看的技术与想法。
用 OpenCode 编排多模型 agent 协同作战，借朋友的审美做设计，三天从空文件夹到上线——一段很疯但很高效的建站记录。
把这个地址填进你的阅读器，新文章会自动推送。不弹窗、不追踪、不邮件——只读。 当前已收录 1 篇。
影像与记录，看看我生活的一部分。
南昌夕阳
江西南昌 · 2024
哈基米
生活日常 · 2024
确实如此
生活日常 · 2024
AI 太好用了你知道吗
生活日常 · 2024
风雨南中
影集素材 · 2026
琉璃
影集素材 · 2026
说实话，上一版个人网站长什么样子我已经记不太清了。只记得它是一个 Hexo 博客，改了一些别人写好的主题，然后就没怎么管过。直到前阵子朋友 Baesory 丢过来他的新站——gbclstudio.cn。
打开的那一瞬间，我愣住了。
"[ 0.048290 ] init[1]: reached target — system ready"
—— Baesory 的网站用一个伪造的 Linux 启动序列作为开场。黑底白字，逐行打印。我当时就在想：操，这也太帅了。
他的站有一种很特殊的质感——像是一台刚启动的开发机，终端光标还在一闪一闪。深色底色、命令行式的标题、贯穿全站的青色侧边栏、底部不断滚动的名字横幅。每一个 section 都像系统的一个子系统，整齐、克制，又藏着小细节。
“我也想要一个这样的。”
于是有了接下来三天。
我做的第一件事不是写代码，而是打开 OpenCode。
如果你还没用过 OpenCode，简单说它是一个可以编排多个 AI agent 协同工作的终端工具。我给它配了三个模型：GLM 5.2 负责中文语境下的内容生成和文案润色，DeepSeek V4 Pro 做重逻辑的工程设计和架构规划，GPT 5.5 处理需要广博知识面的技术调研和选型对比。
跟 agent 一起干活的方式和传统开发完全不同。第一天上午我做的事情大概是这样的：
到第一天结束的时候，整个站的结构已经跑起来了：七个页面，统一的 SectionShell，导航栏能切换，上下滚动也通了。虽然里面全是占位内容，但骨架的完成给了第二天很大的信心。
如果说第一天是搭骨架，第二天就是填血肉——而且是那种需要反复试错的精细活。
Baesory 的站用的是 Astro 的 View Transitions 来做页面切换，效果已经很好了。但我有一个更偏执的想法：能不能让全站像一个原生 app 一样，所有页面永远在同一个容器里，切换只是上下的滑入滑出？
这个想法让我跟 DeepSeek V4 Pro 来回折腾了好几个小时。核心难点有两个：
最后拿到的那版方案我看着都心惊——useFullpageNavigation 这个 hook 快 300 行，里面有 ref 锁、异步队列、滚动方向检测、历史状态同步。但它是 work 的。
鼠标滚轮向下 → 切换到下一 section
鼠标滚轮向上 → 回到上一 section
Ctrl+K → 打开命令面板，搜索并跳转
浏览器前进/后退 → 完美还原导航状态
右下角水印文字 → 每次切换做打字机动画
直接访问 /about → 定位到对应 section，不闪屏
说“借”可能有点轻了。更准确的说法是——我看到了一个我非常认同的设计方向，然后在上面生长出了自己的版本。
Baesory 的设计有一个极高的起点：终端美学。不是那种塞几个 $ 符号和绿色文字就了事的表面功夫，而是把整个网站的浏览体验设计成了一套系统的启动和运行过程。色带、侧栏、水印、命令式标题——这些元素构成了一套完整的视觉语言。
我在他的基础上做了这些变化：
加了 BGM 和 FFT 频谱可视化——导航栏里那个会随音乐跳动的图标，打开音乐和不打开是这个站两种完全不同的气质。
Hero 区换成了 WebGL 动态背景（Dark Veil 着色器）和一条用物理引擎驱动的 3D 挂绳——3D 不做成炫技，只做氛围渲染。
加了命令面板和模糊搜索（fuse.js）——Ctrl+K 弹出一个迷你 VS Code palette，能搜 section、搜文章、搜项目。
把所有毛玻璃效果从 CSS backdrop-filter 换成了 SVG feDisplacementMap——有红蓝色散偏移的那种光学玻璃质感。
到了第二天晚上，这个站已经从一个空骨架变成了一个你可以真的在里面“逛一圈、不想走”的体验。
第三天做的事情其实更接近传统开发——修 bug、调细节、准备部署。
说实话，三天里最让我意外的是 OpenCode 的多模型 agent 编排。之前我总觉得 AI 辅助编程就是“问一句，得一段代码，粘过来改一改”。但这三天的体验完全不同：
不是我让 AI 干活，而是我指挥一个 AI 小组干活。DeepSeek 做架构，GLM 出文案，GPT 做方案评审。我变成了一个在中间调配资源、做最终拍板的人。
这种感觉很奇妙。有点像从一个 solo developer 突然变成了 tech lead——虽然你的“团队”是三个不可见的语言模型。起名字的时候我甚至给 agent 分配了不同的人设：严谨的架构师、话多的创意文案、温和但固执的 code reviewer。
没遇到什么幺蛾子。Astro 的静态构建 + EdgeOne 的边缘网络分发，国内访问速度很快。
最近有个词很火——“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 或者类似的方式做自己的项目，欢迎交流。
构建命令：pnpm build
部署平台：EdgeOne Pages
Agent 组合：OpenCode · GLM 5.2 · DeepSeek V4 Pro · GPT 5.5
字体：JetBrains Mono · Roboto Flex · Caveat · Playfair Display
3D 引擎：Three.js via React Three Fiber + Rapier · OGL
动效：Motion · Lenis · SVG feDisplacementMap
组件库：react bits