这是个怎样的项目

Vibe Coding Site(本站)是一个由 4 个 AI Agent 协作搭建的全栈个人技术展示站。不是"我写了一个网站",而是"我让 4 个 AI 互相派活、互相审,搭出了这个网站"—— 协作过程本身就是产品,这也是它能作为 vibe-coding 实习岗位简历附件的核心理由。

整站的代码、文案、设计决策都由 AI 完成,我的角色是提需求、拍板、验收。真实可验证的依据全部写在仓库里:协作/ 文件夹的工作流文档, 进度/ 文件夹的阶段交接记录,以及 git log 中每条以任务编号开头的 commit。

为什么是 4 个 Agent,不是 1 个

单人 vibe-coding 早就被证明可行 —— 你跟 Claude / GPT 聊两小时,它能输出一个能跑的脚手架。但真实软件团队的瓶颈从来不是写代码,而是任务编排、审核、知识同步、不被打断地推进。所以把这 4 件事拆给 4 个角色看会发生什么:

PM(主 Claude):选题 / 拆任务 / 派活 / 审核 / 合并 / 维护进度文档
Claude1 前端:写 apps/web 的所有前端,自测自查
Claude2 后端 Tech Lead:拆后端微任务 + 审 Codex 的产出
Codex 后端编码工:按 Claude2 的指令实现后端

权限红线是用 MD 文件强约束的:通过 / 完成 / 合并 / STOP_NOW 只能由 PM 写, 其它角色越权写入会在下一次巡检时被撤销。这条规则让"AI 协作"从 prompt 调优题变成了协议设计题。

不停止机制

Agent 启动后进入工作循环 —— 没活干就 sleep 60s,10 次后切到 300s。 用户感知是"3 个 Agent 始终在线",实际上 PM 在每个 invocation 的 token 上限触发时用 Agent 工具续命一个新的同角色 invocation,带"接力 prompt"。

这条让协作从"我喊一次它干一段"升级为可后台运行的小型软件团队。具体协议见仓库 协作/协作总览.md §4。

技术栈速览

层	选型
前端	Next.js 16.2.6 (App Router) + React 19 + TS strict + Tailwind v4 + shadcn/ui
内容	`@next/mdx` + `remark-gfm` + `rehype-pretty-code` + Shiki 双主题
后端	Fastify 5 + Zod + helmet + rate-limit + pino
ORM	Prisma 6,SQLite 起步,后期可切 Postgres
Monorepo	pnpm workspace
部署	前端 Vercel / 后端美国服务器 + Nginx + PM2

设计 token 用 oklch 调色板,自定一组 --brand(青绿,h≈196),亮暗主题同色相, 切换平滑且不需要写两套 token。

你能在这里看到什么

/blog 7 篇博客,每一篇都是真实搭建过程的工程实录
/works/markdown-poster 一个纯前端 demo(无 LLM 依赖)
/works/csv-charts 一个 BYOK LLM demo(数据可视化推荐)
/about 项目动机 + 4-Agent 架构图 + 数据流图
仓库里的 协作/ 与 进度/ 文件夹,直接可读

如果你也想用同样的方法

整套协议都是文本协议 —— 不需要新框架,不需要复杂工具。你只要:

写 协作/协作总览.md 定角色 + 状态机 + 不停止机制
写 协作/任务板.md 作为唯一的进度真源
给每个 Agent 一张私域角色卡(STOP_NOW + 私域笔记)
PM 用 Agent 工具拉起后台 Agent,自己保留派活 / 审核权限

然后你会得到一支能并行、能复盘、能在 token 上限处自动续命的 AI 团队。具体怎么落地,去读 /blog 里的几篇实录,从 Hero 卡片到 MDX 管线到 SEO 一路写下来。