AI 辅助开发

LaunchSaaS 针对 AI 辅助开发进行了优化。本指南介绍如何配置和有效使用流行的 AI 编码工具。

支持的 AI 工具

快速设置

Claude Code

Claude Code 会自动读取 CLAUDE.md 和 AGENTS.md。要获得增强功能，请安装插件和技能：

安装插件

插件可以增强 Claude Code 的能力。安装步骤：

1. 在终端中打开 Claude Code
2. 运行 /plugins 命令打开插件管理器
3. 启用下方推荐的插件

详情请参阅 Claude Code 插件文档。

推荐插件：

启用后，你的 .claude/settings.json 应该如下所示：

{
  "plugins": {
    "context7@claude-plugins-official": true,
    "feature-dev@claude-plugins-official": true,
    "typescript-lsp@claude-plugins-official": true,
    "code-simplifier@claude-plugins-official": true
  }
}

安装技能

技能是可复用的提示词模板。从 vercel-labs/agent-skills 安装：

npx add-skill vercel-labs/agent-skills

这会提示你选择要安装的技能。本项目推荐技能：

Cursor / VS Code

Cursor 会自动读取项目根目录的 AGENTS.md，无需额外配置。

最佳实践：

1. 打开项目根目录
2. Cursor 会索引 AGENTS.md 并理解项目模式
3. 在提示词中引用具体文件以获得更好的上下文

GitHub Copilot

GitHub Copilot 会读取 AGENTS.md 获取项目上下文。如需额外自定义，可创建 .github/copilot-instructions.md。

配置文件

AGENTS.md

所有 AI 工具的核心配置文件。包含：

• 项目架构和模式
• 技术栈概览
• 编码规范
• 数据库 Schema 模式
• Server Actions 模式
• 支付集成模式
• 自动更新规则：修改架构文件时更新 AGENTS.md
• 自动更新规则：修改用户相关功能时更新用户文档

CLAUDE.md

Claude Code 专属配置。包含：

• 遵循 AGENTS.md 指南的引用
• Claude 专属的探索策略（Task 工具、Explore agent）
• 工具使用偏好（Glob、Grep、Read）

.claude/settings.json

Claude Code 插件配置。

AI 常见任务

创建 Server Action

提示词：

创建一个更新用户资料的 server action，包含 email 和 name 字段。
使用 userActionClient，因为需要认证。
参考 src/actions/user.ts 中的模式。

预期行为： AI 将：

1. 在 src/schemas/ 创建 Zod schema
2. 在 src/actions/ 使用 userActionClient 创建 action
3. 遵循代码库中的现有模式

创建受保护页面

提示词：

在 /dashboard/settings 创建一个新的受保护页面，允许用户更新偏好设置。
参考 src/app/[locale]/(protected)/ 中的模式。

添加支付提供商

提示词：

添加 Polar 作为新的支付提供商。
遵循 src/lib/features/payment/ 中的工厂模式。
参考现有的 Stripe 提供商实现。

创建邮件模板

提示词：

创建一个订单确认邮件模板。
参考 src/components/email/ 中的模式。
使用 React Email 组件。

数据库迁移

提示词：

在 users 表中添加一个新的 "preferences" 列。
使用 Drizzle 创建正确的迁移。
注意：不要手动编辑 auth.ts —— 它是自动生成的。

最佳实践

提供充足的上下文

• 引用具体的文件路径
• 说明期望的行为
• 包含相关约束

好的提示词：

在 src/actions/billing.ts 中使用 userActionClient 创建一个 checkout action。
它应该创建订单记录并重定向到支付提供商。
参考现有的 createCheckoutSession action 的模式。

差的提示词：

添加结账功能

遵循项目模式

LaunchSaaS 使用一致的模式。始终提醒 AI：

• 新提供商（支付、邮件、存储）使用工厂模式
• Server Actions 使用 next-safe-action 和 Zod 验证
• UI 使用 shadcn/ui 组件
• 遵循 App Router 约定（默认使用 Server Components）

验证 AI 输出

AI 生成代码后：

1. 检查类型安全 - 运行 pnpm run build 捕获类型错误
2. 检查模式 - 确保代码遵循 AGENTS.md 规范
3. 运行 lint - 执行 pnpm run lint 检查代码风格
4. 手动测试 - 验证功能按预期工作

故障排除

context7 插件问题

如果 context7 无法获取文档：

1. 检查库 ID 是否正确（先使用 resolve-library-id）
2. 常用库 ID：
   • Better Auth: /better-auth/better-auth
   • Drizzle ORM: /drizzle-team/drizzle-orm
   • Next.js: /vercel/next.js
   • Stripe: /stripe/stripe-node

AI 不遵循项目模式

如果 AI 生成的代码不符合项目规范：

1. 在提示词中明确引用 AGENTS.md
2. 指向现有的类似代码作为示例
3. 具体说明要遵循哪个模式

示例：

遵循 AGENTS.md 中记录的 Server Actions 模式。
像 src/actions/user.ts 那样使用 userActionClient。

TypeScript 错误

使用 typescript-lsp 插件进行实时类型检查：

1. 确保在 .claude/settings.json 中启用了该插件
2. AI 会在生成代码前捕获类型错误
3. 如果错误持续存在，运行 pnpm run build 获取详细输出

可选：额外的插件和技能

额外插件

这些插件是可选的，但对特定任务有用：

额外技能

用于创建自定义项目专属技能：

详情请参阅 Agent Skills 规范。

资源

• Claude Code 文档
• Claude Code 插件
• Agent Skills 规范
• Cursor 文档
• GitHub Copilot 文档