跳转到主要内容
这一篇带你从 git clone 走到「真实用户付了我 $X」，预计一小时左右——前提是 Stripe 和 Resend 账号都已经申请好了。

​
前置

你已经完成了安装——pnpm dev 跑起来了， 能在 /register 注册账户。

​
1. 改你的品牌

打开 src/config/site.ts，改： 
export const siteConfig = {
  name: 'YourProduct',
  description: '...',
  shortDescription: '...',
  url: 'https://your-domain.com',
  links: {
    twitter: 'https://x.com/yourhandle',
    github: 'https://github.com/yourorg/yourrepo',
    discord: 'https://discord.gg/yourchannel',
  },
  // ...
};
这个文件是买家「要改的东西」的集中地。保持在 ~150 行内——provider 特定的配置 放到各自的模块里（见配置）。

​
2. 接入 Stripe

# .env.local
STRIPE_SECRET_KEY=sk_test_…
STRIPE_WEBHOOK_SECRET=whsec_…
STRIPE_PRICE_VIBESTRAP_PROMO=price_…
然后在 src/config/site.ts 设 payment.provider = 'stripe'（默认就是）。 四个 provider 的完整走查见支付总览。 本地测 webhook 用 Stripe CLI： 
stripe listen --forward-to localhost:3000/api/webhooks/stripe
把它打印出来的 webhook signing secret 填到 STRIPE_WEBHOOK_SECRET。

​
3. 接入 Resend

# .env.local
RESEND_API_KEY=re_…
RESEND_FROM_EMAIL=[email protected]
验证 / 忘记密码 / 欢迎模板在 src/mail/templates/。它们是 React Email 组件—— 想可视化调样式的话用 pnpm dlx react-email dev。

​
4. 走一遍流程

  1. 在 /register 注册。验证邮件出现在 Resend 的 logs 里。
  2. 点验证链接。
  3. 访问 /pricing，点「$49 立即获取」，完成 Stripe Checkout。
  4. webhook 触发 → payment 表插一行 → credit_transaction 发放积分 → license 表签发授权（在 /settings/licenses 可见）。
任何一步失败都看 dev server log——每个模块都用 [stripe]、[mail]、[license] 等前缀打日志。

​
5. 定制产品

  • Hero 文案 → messages/en.json 和 messages/zh.json（Home.hero.*）
  • 定价卡 → siteConfig.product.*
  • 功能列表 → messages/{en,zh}.json（Features.items.*）+ src/components/features/items.ts
  • 主题色 → src/app/globals.css（Tailwind v4 @theme 指令）
完整可改面见定制。

​
6. 部署

准备好上线时： 
git push                    # 推到你的 GitHub
# 然后在 Vercel：Import → 设环境变量 → 部署。
完整走查：部署到 Vercel。

​
7. 接入 AI 功能

如果你的产品用 AI：
  1. 选 provider —— 设 AI_PROVIDER=openrouter（或 openai / anthropic）和对应 API key。
  2. 在任意 client 组件里用 useGeneration() 做流式对话；或在 server action 里调 @/ai/manager 的 chat() 做非流式。
  3. 成本账本和可观测自动发生——见 AI 总览。