SaaS Scaffolder 是一个用于生成完整、可投入生产的 SaaS 项目样板代码的技能,层级为 POWERFUL,类别为产品团队,领域为全栈开发与项目引导。
用途 该技能面向需要快速搭建 SaaS 项目骨架的场景。用户提供产品名称、1-3 句描述、认证方式、数据库、支付方式以及逗号分隔的功能列表,即可获得一套包含认证、数据库模式、计费集成、API 路由和可用界面的项目结构。
输入格式 Product: [name] Description: [1-3 sentences] Auth: nextauth | clerk | supabase Database: neondb | supabase | planetscale Payments: stripe | lemonsqueezy | none Features: [comma-separated list]
主要能力 生成的文件树以 Next.js App Router 为基础,包含 app 目录下的 (auth)、(dashboard)、(marketing) 路由组以及 api 路由(auth、webhooks/stripe、billing/checkout、billing/portal);components 目录包含 ui、auth、dashboard、marketing、billing 组件;lib 目录包含 auth、db、stripe、validations、utils;db 目录包含 schema 与 migrations;hooks 目录包含 use-subscription 与 use-user;此外还有 types、middleware.ts、.env.example、drizzle.config.ts 和 next.config.ts。
关键组件模式 资料提供了 NextAuth 认证配置示例(lib/auth.ts),使用 DrizzleAdapter 与 GoogleProvider,并在 session 回调中注入用户 ID 和订阅状态;数据库模式示例(db/schema.ts)使用 Drizzle ORM 与 pgTable 定义 users 和 accounts 表,包含 stripeCustomerId、stripeSubscriptionId、stripePriceId、stripeCurrentPeriodEnd 等字段;Stripe 结账路由示例(app/api/billing/checkout/route.ts)演示创建客户、创建订阅模式结账会话并返回 URL;中间件示例(middleware.ts)使用 withAuth 保护 /dashboard、/settings、/billing 路径。
环境变量模板 .env.example 包含 NEXT_PUBLIC_APP_URL、DATABASE_URL、NEXTAUTH_SECRET、NEXTAUTH_URL、GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET、STRIPE_SECRET_KEY、STRIPE_WEBHOOK_SECRET、NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY、STRIPE_PRO_PRICE_ID。
脚手架检查清单 分五个阶段,必须按顺序完成并在每阶段结束时验证: 阶段 1 基础:初始化 Next.js(TypeScript + App Router)、配置 Tailwind CSS 自定义主题令牌、安装配置 shadcn/ui、配置 ESLint + Prettier、创建 .env.example。验证方式为运行 npm run build 无 TypeScript 或 lint 错误。 阶段 2 数据库:安装配置 Drizzle ORM、编写 schema(users、accounts、sessions、verification_tokens)、生成并应用初始迁移、从 lib/db.ts 导出数据库客户端单例、在本地测试数据库连接。验证方式为在测试脚本中运行 db.select().from(users) 应返回空数组且不抛错。 阶段 3 认证:安装认证提供方、配置 OAuth 提供方(Google / GitHub)、创建认证 API 路由、session 回调添加用户 ID 与订阅状态、中间件保护 dashboard 路由、构建带错误状态的登录与注册页面。验证方式为通过 OAuth 登录并确认 session 用户包含 id 与 subscriptionStatus,未登录访问 /dashboard 应重定向到 /login。 阶段 4 支付:初始化带 TypeScript 类型的 Stripe 客户端、创建结账会话路由、创建客户门户路由、实现带签名验证的 Stripe Webhook 处理器、Webhook 幂等地更新数据库中的用户订阅状态。验证方式为使用 4242 4242 4242 4242 测试卡完成结账,确认 stripeSubscriptionId 写入数据库,并重放 checkout.session.completed 事件确认幂等性。 阶段 5 界面:构建包含 hero、features、pricing 的落地页、带侧边栏与响应式头部的 dashboard 布局、显示当前计划与升级选项的计费页面、带资料更新表单与成功状态的设置页面。验证方式为运行 npm run build 做最终生产构建检查,并手动导航所有路由确认无布局损坏、会话数据缺失或水合错误。
参考文件 资料建议在脚手架旁生成以下配套参考文件:CUSTOMIZATION.md(认证提供方、数据库选项、ORM 替代方案、支付提供方、UI 主题与计费模型)、PITFALLS.md(常见失败模式:缺少 NEXTAUTH_SECRET、Webhook 密钥不匹配、Drizzle 与 Edge 运行时冲突、未扩展的 session 类型、开发与生产迁移策略差异)、BEST_PRACTICES.md(Stripe 单例模式、表单变更使用 server actions、幂等 Webhook 处理器、异步 dashboard 数据的 Suspense 边界、通过 stripeCurrentPeriodEnd 进行服务端功能门控、使用 Upstash Redis 与 @upstash/ratelimit 对认证路由限流)。
适用场景与限制 该技能适用于需要快速生成 SaaS 项目骨架的全栈开发场景,支持 Next.js、Drizzle ORM、NextAuth、Stripe 等技术栈。资料未提供关于收费、价格、平台兼容性、实际效果或具体使用步骤的更多信息。