用于“氛围式编码”现代应用的科技栈

📢 转载信息

原文链接：https://www.kdnuggets.com/tech-stack-for-vibe-coding-modern-applications

原文作者：Abid Ali Awan

Image by Author

我曾经讨厌“氛围式编码”（vibe coding）。我一直认为我可以凭借自己的能力写出更好的代码、设计更清晰的系统并做出更周到的架构决策。在很长一段时间里，这可能是事实。但随着时间的推移，情况发生了变化。AI代理的能力得到了显著提升。MCP服务器、Claude技能、智能体工作流、面向规划的执行以及长程编码工具，将氛围式编码从一个噱头变成了一种构建真实系统的实用方法。

在某个时刻，我屈服了。 从那时起，我一直使用Claude Code和OpenCode来构建那些我通常认为过于复杂而无法快速迭代的系统。这些系统包括支付平台、稳定币钱包、图书阅读应用以及全栈生产级Web系统。令我惊讶的不仅是速度，而且一旦拥有了正确的结构和工具，结果就具有惊人的一致性。

大多数人使用氛围式编码时遇到的真正问题不是编写代码。

而是选择合适的技术栈。

前端、后端、身份验证、数据库、存储、电子邮件、支付和部署都提供了无数的选择。如果没有明确的技术栈，即便是强大的AI编码代理也难以做出好的决策。当一个代理被赋予一个定义明确且有主见的（opinionated）技术栈时，它可以以更少的摩擦可靠地构建一个端到端的应用程序。

这正是本文的重点。

我将介绍我用于氛围式编码现代应用的“首选技术栈”。我重复使用这个栈是因为它确实有效。我们将探讨这些组件如何协同工作，每个工具的职责是什么，以及如何从零开始构建一个生产就绪的系统。我还会分享一个Claude Code的示例提示词，以及可选的工具，这些工具可以帮助将工作原型转化为可投入生产的系统。

# 我的技术栈和这个栈有效的原因

 
在本节中，我将分解我用于氛围式编码的确切技术栈，并解释为什么在构建真实应用程序时，这些工具能够如此紧密地协同工作。

这个技术栈

• Next.js (App Router) -> 前端和布局
• shadcn/ui -> UI 组件
• Server Actions + Routes -> 后端逻辑和 Webhook
• Supabase -> 数据库、身份验证、存储
• Resend -> 事务性电子邮件
• Stripe -> 支付和订阅
• Vercel -> 部署和预览

这个技术栈被有意设计得尽可能简单。您可以使用所列出的所有平台的免费套餐，这对于初学者来说非常理想。您可以免费将一个完整的应用程序部署到 Vercel，并在没有前期成本的情况下连接托管服务。

为什么这个栈可以在不变得混乱的情况下扩展

两个Next.js的原生特性在应用增长时承担了大部分繁重的工作：

1. Server Actions 处理表单提交和服务器端数据变更（mutations）。它们将数据写入操作保留在靠近UI的位置，并消除了通常在早期出现的大量样板代码。
2. Route Handlers 处理 Webhook、健康检查和自定义端点。这为外部系统与您的应用程序通信提供了一个干净的场所，而不会污染您的UI逻辑。

Supabase 为您提供了带有安全模型的数据库、身份验证和存储，其安全模型紧贴数据。如果您尽早启用行级安全（Row Level Security），随着系统的增长，授权将保持一致，并避免以后出现痛苦的数据迁移。

Resend 使事务性电子邮件保持简单且环境驱动。 

Stripe Checkout 配合 Webhook，为您提供了一种可靠的方式，将支付转化为真正的权限（entitlements），而不是零散的功能标志。

Vercel 确保预览部署和生产部署保持一致，因此从第一天起您就在真实环境中进行测试。

这个技术栈非常适合氛围式编码，因为它具有主见性（opinionated）、可预测性，并且对于AI编码代理来说易于推理。一旦边界清晰，系统几乎可以自行构建。

# 从零开始构建到付费MVP的计划

 
这个构建计划专为使用真实工具的氛围式编码而设计。目标是首先构建一个生产就绪的骨架，然后在不破坏先前决定的情况下，以小阶段添加功能。每个阶段都直接对应您正在使用的技术栈，因此AI编码代理可以端到端地遵循它。

第 1 阶段：MVP 基础

以最小的范围构建完整的产品循环。

• 使用Vercel部署设置Next.js (App Router)项目
• 使用shadcn/ui构建Dashboard外壳和导航
• 使用Supabase Auth处理身份验证流程（注册、登录、重置）
• 在Supabase Postgres中创建一项核心的用户所有数据表
• 由Next.js Server Actions驱动的CRUD界面
• 通过Vercel在每次更改时生成预览部署

在此阶段结束时，您已经拥有一个在生产环境中可用的应用程序，即使功能集很小。
 

第 2 阶段：数据安全和访问控制

在添加更多功能之前锁定用户数据。

• 在Supabase中为用户拥有的表启用行级安全（Row Level Security）
• 根据所有权定义读取和写入策略
• 使用一致的模式，如owner_id、created_at、updated_at
• 通过真实UI流程验证访问规则，而不仅仅是SQL

此阶段可防止未来的重写，并确保安全性与应用程序的实际工作方式保持一致。

第 3 阶段：电子邮件和存储

添加信任和文件处理。

• 通过Resend发送事务性电子邮件（欢迎、验证、重置）
• 使用Supabase Storage创建私有存储桶
• 符合与数据库相同的、所有权规则的文件上传流程
• 基于用户身份的签名URL或受控访问

至此，产品开始感觉完整，而不是实验性的。

第 4 阶段：计费和权限

将使用转化为收入。

• 创建Stripe Checkout会话并重定向用户
• 使用Next.js Route Handlers处理Stripe Webhook
• 将订阅或购买状态存储在Supabase中
• 根据存储的权限限制高级功能（Gate premium features）
• 使用已处理的事件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的权限控制 ## 输出 - 清晰的应用结构 - 最少依赖 - 包含设置、环境变量、迁移、Stripe和Vercel步骤的README文件 - 每个功能的动手验证清单

您所需要做的就是将Claude Code切换到规划模式（Plan Mode），粘贴提示词，并根据您的需求更改想法或调整范围。

一旦开始，Claude将首先规划系统，然后逐步开始构建，不会有摩擦。它还将指导您完成设置所需服务、在第三方平台创建账户以及在需要时生成API密钥等步骤。

这使得您可以轻松地从一个想法转变为一个可运行的应用程序，而不会在设置或决策上卡住。

# 可选工具

 
这些工具并非是发布第一个版本所必需的，但它们可以在应用程序随着真实使用量增长时，帮助您进行测试、监控和加固。

# 最后的思考

 
现代开发和工程工具正在快速发展。它们中的大多数现在都设计为与AI集成，提供良好的文档、API和MCP式访问，以便AI代理可以直接与之协作，以前所未有的速度构建软件。

如果您是一位从未接触过Web开发的数据科学家，或者是一位想构建真实事物或创办初创公司的绝对初学者，我强烈建议从这个技术栈开始。它只需要最少的设置，并允许您几乎立即部署一个可运行的应用程序。

我花了近三个月的时间来测试和比较工具，最终确定了这个栈。从这里开始将为您节省这些时间。

如果您以后需要更大的灵活性，可以进行拆分。例如，使用Neon作为数据库，使用Clerk进行身份验证，同时保持其他一切不变。将职责分散到不同的工具中，可以在系统增长时，更容易地替换其中一个部分，而不会破坏其余部分。

保持简单，尽早发布，只在需要时才演进。
 
 

Abid Ali Awan (@1abidaliawan) 是一位热衷于构建机器学习模型的认证数据科学家专业人士。目前，他专注于内容创作和撰写有关机器学习和数据科学技术的技术博客。Abid拥有技术管理硕士学位和电信工程学士学位。他的愿景是构建一个使用图神经网络的AI产品，以帮助与心理健康问题作斗争的学生。

🚀 想要体验更好更全面的AI调用？

欢迎使用青云聚合API，约为官网价格的十分之一，支持300+全球最新模型，以及全球各种生图生视频模型，无需翻墙高速稳定，文档丰富，小白也可以简单操作。