为什么选 Next.js
做这个宣传站之前，我评估过几个方案：
- 纯 HTML/CSS：可控，但交互和动画写起来太费时间
- Next.js + Tailwind：框架成熟、组件化、部署简单，而且 AI 辅助代码生成的效果最好
- 组件结构设计和基础样式（Tailwind 类名几乎不用改）
- 动画逻辑（Framer Motion 的 variants 写法）
- 响应式布局的断点处理
- 重复性页面（案例页、服务页的卡片循环）
- 品牌调性的把握（颜色、字体、间距的「感觉」）
- 文案的「人味」（AI 写的太像说明书，必须自己改）
- 业务逻辑的准确性（比如经营看板的数据口径，AI 会瞎编）
- 性能优化（图片懒加载、代码分割需要自己盯）
- 框架: Next.js 16 (App Router)
- 样式: Tailwind CSS
- 动画: Framer Motion
- 图标: Lucide React
- 部署: 静态导出 + GitHub Pages / Vercel
- AI 辅助: Kimi / Claude（代码生成 + 文案润色）
最后选了 Next.js 16 + Tailwind CSS + Framer Motion。理由是：这套组合在 AI 代码生成时的「可预测性」最高——模型对 React 组件结构、Tailwind 类名的理解已经非常成熟，生成的代码基本能直接跑。
三天时间怎么分配的
总代码量约 1200 行，其中 70% 是 AI 生成初稿，30% 是手动调整。
AI 辅助的边界在哪里
AI 擅长的：
AI 不擅长的：
一个具体例子：我让 AI 写「经营 Agent」的产品介绍，它写的是「帮助企业实现数字化转型，提升运营效率」。太泛泛了。我改后是「自动抓取美团、拼多多数据，按 SKU 算清真实利润，亏损品自动标红」。后者才是客户能听懂、能打动人的。
静态导出踩的坑
Next.js 16 默认是 Server Components，但静态导出（output: 'export'）有一些限制：
1. 不能用 API Routes — 所以表单提交直接跳转到微信二维码
2. Image 组件需要配置 — 必须指定 width 和 height，或者用 fill
3. 动态路由需要 generateStaticParams — 文章详情页必须预先生成所有 slug
最坑的是第三个。我一开始忘了加 generateStaticParams，构建时报错 Page is missing \"generateStaticParams()\" so it cannot be used with \"output: export\".，查了半天文档才发现。
一个意外收获
做网站的过程中，我把自己的服务流程重新梳理了一遍。写「方法论」那部分时，原本脑子里是散的：认知普及 → 效率工具 → Workflow → 工作台 → 多 Agent。写成文字后，发现第五步「多 Agent」其实还太远，大多数客户卡在第二步「效率工具」和第三步「Workflow」之间。
这个洞察直接改了我跟客户沟通的话术。现在先聊的是「你们现在哪些重复工作可以先用 AI 提效 30%」，而不是上来就谈「我们要搭建一个 Agent 工作台」。
技术栈清单
给同样想 Vibe Coding 的人一个建议
不要追求完美。这个站第一版上线时，案例页的截图还是糊的、服务页的问卷还没调通、手机端还有几个排版问题。但先上线，再迭代。客户不会因为你的网站不够完美而流失，但会因为「找不到你」而流失。
如果你也在用 AI 辅助做项目，欢迎交流。扫码加微信，备注「Vibe Coding」。