一行代码没写,纯 Vibe Coding 重构 AITDK 官网,体感还不错
过去我比较抗拒 Vibe Coding,总觉得完全交给 AI 会脱离掌控,会变成一堆屎山,风险比较大。所以我一直更倾向于人机协作:Claude Code 主写,我和 Codex 负责 review 和辅助修改。
最近重构
aitdk.com 官网,想换一种方式,体验下纯 Vibe Coding,也简单记录下重构过程。
旧版 AITDK 官网使用 SaaSBold 搭建,网站功能和 UI 基本都是手搓,加载速度和体验不太理想,部署也绑定在 Vercel 上,重构也是希望解决这些痛点。
一、选型过程
我不想被平台绑定,核心诉求是一套代码能顺滑部署到 Cloudflare Workers / Vercel / Railway / Dokploy 等平台。
1. Next.js:过去一直在用,就算搭配 OpenNext 部署到 Cloudflare Workers 效果也不是特别好。
2. Vinext:Cloudflare 基于 Vite 重新实现 Next.js API 的兼容方案,试了一把速度很快,版本一直是 v0.0.x(前两天发布了 v0.1.x 版本),公开可参考的生产案例还不多,稍微有点慌。
3. TanStack:最近很火,全平台部署,很轻量,速度也很快,前几天看到 Lovable 也切到了 TanStack,看着很不错。
整体对比下来 TanStack 最符合,于是开搞,模板选的是
@艾逗笔 新上线的 shipany-tanstack。功能很多,我最钟意的是下面两点:
1. 多平台部署:Cloudflare Workers / Vercel / Railway / Dokploy 等。
2. 多数据库支持:PostgreSQL / MySQL / SQLite / D1 / Turso 等。
二、重构过程
1. 使用 /clone-website skill 逐一复刻 aitdk.com 生产环境的各个页面。
2. 让 Claude Code 对照源码检查是否有遗漏并进行补齐。这里没有跳过第 1 步直接对照源码重构,主要是因为我担心 AI 偷懒,会沿用旧的代码和结构。
3. 让 Claude Code 重新设计各个页面。先首页,效果满意后再内页,可以给一些案例网站供 AI 参考,自由发挥也可以,有时也会有惊喜。
整个重构耗时大约一天,主要是第 3 步占用时间比较多,让 Claude Code 设计了很多个版本,从里面选了一个看着最顺眼的。
新版官网周一就上线了,观察了两天,整体体验和速度还是比较满意的,后面打算把长期维护的项目都用 TanStack 重构了。
另外如果有需要 shipany-tanstack 的,可以使用优惠码 BLANK 减 $80,相当于 $169 到手 shipany-next/vinext/tanstack 多套模板。