我从 2021 年开始写代码，这周想认真试一次 vibe coding。自从 Theo 用它来建没时间做的应用、Peter Steinberger 开始大量做项目甚至创立 Open Claw 以来，我就一直想试。
这次实验我决定只用 AI 重建作品集，不碰任何代码。原站用 Next.js 加 Next-Intl 做国际化。我想完全迁到 Astro，因为并没用到 Next.js 那些更重的功能。
值得一提的是，所有个人资料内容都在各语言对应的 .json 文件里做翻译。用的工具有 Cursor、Open Code 和 Claude Code。
起步
我先建了一个新分支，跑了 Open Code 和 Claude Code 的 /init，并把 Claude 的前端设计技能加到项目里。
打开 Claude Code，运行 /frontend-design 技能，让 AI 用 Astro 和现有翻译重建并重新设计项目，保持专业、简洁（并开启思考模式）。
等了几分钟后检查站点。能跑，但有些区块文字没像标题那样居中，还有几块内容缺失，尽管翻译文件里有。我开了五个不同分支，用同一提示词做了小幅变体对比：
- 「做成开发者审美」
- 「对招聘方和商业机会有吸引力」
- 「先展示技能，再展示经历」
也试了 Open Code 默认的 AI。整体上 Claude Code 表现更好。要开发者风格时，它给了一个终端式的 hero 区带闪烁光标。其他分支有 Mac 风格窗口展示页面内容，或把我的资料做成地球，周围绕着手提电脑、代码等开发者 emoji。每次跑的主色都不一样：蓝、绿、橙、红、金。
修复问题与润色
各次运行的共性问题是不完整的翻译以及部分区块文字未居中。
我选了最合我口味的一版，也就是你现在看到的。之后用 DevTools 跑了 Lighthouse，分数多在 90 多，有的满分（如 SEO）。主要扣分在无障碍，因为主色是金色、背景是白，部分文字对比度不足。把这些问题交给 AI 后很快修好了。
接下来是博客部分：vibe coding 一次搞定，版式干净。我又要了阅读时间、标签、作者等，并说「……新增任何功能前请先问我。」AI 提议了分享按钮、相关文章、按分类或系列分组等。除了分组我都加了，目前用不到，以后一句话就能加。
搭建博客板块
最后一步是构建。构建失败，两个错误：无效目录读取和路径未找到。Cursor 帮忙修好了。
最后合并到 main 并部署到 Cloudflare Pages，全程大约三小时。
对作品集的结果很满意，感觉和 AI 的协作才刚开始。