我曾讨厌“氛围编码”。 我相信自己能写出更好的代码，设计出更干净的系统，并独自做出更周全的架构决策。在很长一段时间里，这可能是真的。但随着时间的推移，情况发生了变化。AI代理显著改进。MCP服务器、Claude技能、代理工作流、计划优先执行和长周期编码工具，将“氛围编码”从一个噱头转变为构建真实系统的实用方法。
在某个时刻，我让步了。从那以后，我一直使用 Claude Code 和 OpenCode 来构建那些我通常认为过于复杂而无法快速迭代的系统。这些系统包括支付平台、稳定币钱包、图书阅读应用以及生产就绪的全栈Web系统。让我惊讶的不仅是速度，更是在搭建好正确的结构和工具后，结果的一致性。
大多数人在“氛围编码”中遇到的实际问题不是编写代码本身，而是选择正确的技术栈。
前端、后端、认证、数据库、存储、电子邮件、支付和部署都有无数选择。如果没有清晰的技术栈，即使是强大的AI编码代理也难以做出好的决策。当给代理一个定义良好且意见明确的技术栈时，它可以可靠地构建端到端应用，并且摩擦要小得多。
这就是本文要讨论的内容。
我将介绍我用于“氛围编码”现代应用的首选技术栈。这是我反复使用的栈，因为它行之有效。我们将涵盖各个部分如何组合在一起，每个工具负责什么，以及如何从零开始构建一个生产就绪的系统。我还将分享一个 Claude Code 的示例提示，以及一些可选工具，它们能帮助你将一个可工作的原型转变为一个准备上线的系统。
我的技术栈及为何有效
在本节中，我将分解我在“氛围编码”中使用的确切技术栈，并解释在构建实际应用时，这些工具为何能如此良好地协同工作。
技术栈
- Next.js (App Router) -> 前端和布局
- shadcn/ui -> UI组件
- Server Actions + Routes -> 后端逻辑和Webhook
- Supabase -> 数据库、认证、存储
- Resend -> 事务性电子邮件
- Stripe -> 支付和订阅
- Vercel -> 部署和预览
这个技术栈故意设计得简单。你可以使用这里列出的每个平台的免费套餐，这对于初学者来说非常理想。你可以免费将一个完整的应用部署到 Vercel，并连接托管服务，而无需前期成本。
为何此技术栈能扩展而不混乱
随着应用的增长，两个 Next.js 原语承担了大部分繁重工作：
- Server Actions 处理表单提交和服务器端的数据变更。它们使数据写入靠近UI，并消除了早期通常会出现的许多样板代码。
- Route Handlers 处理 Webhook、健康检查和自定义端点。这为外部系统与你的应用通信提供了一个干净的位置，而不会污染你的UI逻辑。
Supabase 为你提供数据库、认证和存储，其安全模型与数据紧密相连。如果早期启用行级安全，随着系统增长，授权将保持一致，从而避免日后痛苦的迁移。
Resend 保持事务性电子邮件的简单性和环境驱动性。
Stripe Checkout 配合 Webhook，为你提供一种可靠的方式，将支付转化为真正的用户权益，而不是分散的功能标志。
Vercel 使预览环境和生产环境的部署保持一致，确保你从第一天起就在真实环境中进行测试。
这个技术栈非常适合“氛围编码”，因为它有明确的观点、可预测，并且易于AI编码代理理解。一旦边界清晰，系统几乎可以自行构建。
从零到付费MVP的构建计划
此构建计划专为使用真实工具的“氛围编码”而设计。目标是首先获得一个生产就绪的骨架，然后在小的阶段中添加功能，同时不破坏早期的决策。每个阶段都直接映射到你正在使用的技术栈，因此AI编码代理可以端到端地遵循它。
阶段 1: MVP 基础 以最小范围构建完整的产品闭环。
- 使用 Vercel 部署设置 Next.js (App Router) 项目
- 使用 shadcn/ui 创建仪表盘外壳和导航
- 使用 Supabase Auth 设置认证流程（注册、登录、密码重置）
- 在 Supabase Postgres 中创建一个核心的用户拥有表
- 由 Next.js Server Actions 驱动的 CRUD 界面
- 通过 Vercel 为每次更改提供预览部署
在这个阶段结束时，即使功能集很小，你已经有一个可用的应用在运行了。
阶段 2: 数据安全与访问控制 在添加更多功能前锁定用户数据。
- 在 Supabase 中对用户拥有的表启用行级安全
- 基于所有权定义读写策略
- 使用一致的字段模式，如
owner_id、created_at、updated_at - 通过真实的UI流程验证访问规则，而不仅仅是SQL
此阶段可以防止未来的重写，并使安全性与应用的实际工作方式保持一致。
阶段 3: 电子邮件和存储 增加信任度和文件处理能力。
- 通过 Resend 发送事务性邮件（欢迎、验证、密码重置）
- 使用 Supabase Storage 创建私有存储桶
- 上传流程遵循与数据库相同的所有权规则
- 基于用户身份的签名URL或受控访问
此时，产品开始变得完整，而非实验性质。
阶段 4: 计费和权益 将使用转化为收入。
- 创建 Stripe Checkout 会话并重定向用户
- 使用 Next.js Route Handlers 处理 Stripe Webhook
- 在 Supabase 中存储订阅或购买状态
- 基于存储的权益来控制高级功能的访问
- 使用已处理事件ID使Webhook处理具有幂等性
到这个阶段结束时，你已经拥有了一个可以扩展而无需更改核心架构的付费MVP。
Claude Code 启动提示
你可以使用相同的 Claude Code 提示，将下面的“书店+阅读器MVP”替换为你自己的想法。
使用以下技术栈构建一个“书店+阅读器MVP”：
- Next.js App Router
- shadcn/ui
- Supabase (Postgres, Auth, Storage)
- Resend
- Stripe (Checkout + webhooks)
- Vercel
目标 交付一个生产就绪的、带有付费访问权限的书店和阅读器。
构建内容
- 公共页面：落地页、定价页、书籍列表页
- 认证：注册、登录、重置密码
- 受保护的应用：阅读器仪表盘
数据
books，chapters- 行级安全，确保用户只能访问自己的数据
功能
- 通过 Server Actions 实现 CRUD
- 带有进度跟踪的阅读器视图
- 用于书籍资产的私有存储
- 欢迎邮件
- 基于 Stripe Checkout + webhook 的权益
输出
- 清晰的应用结构
- 最小化依赖
- 每个功能的手动验证清单
你所需要做的就是将 Claude Code 切换到计划模式，粘贴提示，并根据需要更改想法或调整范围。一旦开始，Claude 将首先规划系统，然后逐步无摩擦地开始构建。它还将指导你设置所需的服务、在第三方平台创建账户以及生成所需的API密钥。这使得从一个想法到工作应用的整个过程变得简单，而不会在设置或决策上卡住。
可选工具
这些工具并非交付第一个版本所必需，但它们能帮助你在应用随着真实使用而增长时进行测试、监控和加固。
| 类别 | 工具选项 | 作用 | 何时添加 |
|---|---|---|---|
| 单元测试 | Vitest | 对工具函数和服务器逻辑进行快速测试 | 核心CRUD功能完成后 |
| 组件测试 | React Testing Library | 捕获表单和状态的UI回归 | 仪表盘稳定后 |
| 端到端测试 | Playwright | 完整的用户流程：注册 → 创建 → 支付 | 添加更多功能之前 |
| 错误跟踪 | Sentry | 堆栈跟踪、发布运行状况、告警 | 一旦有真实用户访问 |
| 日志 | Axiom 或 Logtail | 可搜索的请求日志、Webhook调试 | Webhook和计费上线时 |
| 性能检查 | Lighthouse (CI) | 捕获慢页面和过大的代码包 | 市场推广之前 |
| 模式与迁移 | Drizzle Kit 或 SQL 迁移 | 可重复的数据库模式更改 | 当你拥有2个以上表时 |
| 后台任务 | Inngest 或 Trigger.dev | 异步工作：邮件、导出、清理 | 工作流超出请求范围时 |
| 速率限制 | Upstash Redis (或类似) | 保护认证端点和Webhook | 当流量变得真实时 |
| 产品分析 | PostHog (或类似) | 漏斗、激活、功能使用 | 在你明确要衡量什么之后 |
最终想法
现代开发和工程工具发展迅速。它们中的大多数在设计时就考虑到了AI集成，提供良好的文档、API和MCP风格的访问，以便AI代理可以直接与它们协作，比以往任何时候都更快地构建软件。
如果你是一位从未接触过Web开发的数据科学家，或者是一位想构建真实产品、启动初创公司的完全初学者，我强烈建议你从这套技术栈开始。它需要的设置最少，并能让你几乎立即部署一个可工作的应用。
我花了近三个月的时间来测试和比较工具，才最终确定了这个技术栈。从这里开始将为你节省那段时间。如果以后想要更大的灵活性，你可以拆分组件。例如，使用 Neon 作为数据库，Clerk 进行认证，并保持其他部分不变。将职责分散到不同的工具中，可以在系统增长时更容易地替换某个部分，而不会破坏其余部分。
从简单开始，尽早交付，只在需要时演进。FINISHED
