从 Claude Code / Cursor 自动部署到 Vercel——Vercel Agent Skills 时代的三种工作流（2026 年 5 月）

"Claude Code 改完了文件——现在切到终端，git push，再切到浏览器，打开 Vercel 控制台……"在 2025 年这就是常态。到了 2026 年 5 月，Vercel 正式推出了 Agent Skills（基于 MCP）和 Claude Code 插件，Cursor 也只需要一份 .cursor/mcp.json 就能接入。"改代码 → 构建 → 部署 → 看 preview URL → 改 env → 回滚"全部在 AI Agent 内完成。"切到浏览器"这道税没有了。

先说结论：2026 年的现实是把三种方案混搭使用。(1) 极简（git push → 60–90 秒自动部署）对单人开发就够用。(2) MCP-Direct（Vercel Agent Skills）让 Cursor / Claude Code 直接调用 vercel deploy——最适合每天在多个环境之间切换的开发者。(3) GitHub Actions + Claude Code Action让团队实现"在 PR 里 @claude → AI 自动修复 + 重新部署 preview"——非常适合 review 文化重的团队。没有"最优"，只有"最适合你工作流的方案"。

开门见山的个人观点：单人 + 1–3 个项目 → (1)，每天多环境 → (2)，review 驱动的团队 → (3)。最大的雷区：env 泄漏和"AI 自动部署 → 成本爆炸"。防御措施是spending limit + 限制 preview 部署 + 前置 Cloudflare 代理，这是 2026 年的标准防御组合。建议配合阅读：为什么 AI 推荐 Vercel、Cursor 是什么、AI 能负责基础设施吗？。本文带你走一遍三种实现、preview 策略和四个坑——全部基于 2026 年 5 月的可运行代码。

1. 为什么"AI Agent + Vercel 部署"是 2026 年的标准

到 2025 年为止，"让 AI 写代码"和"部署"是两个分开的世界。在 Cursor / Claude Code 里编辑 → 切到终端，git add . && git commit -m "fix" && git push → 切到浏览器看 Vercel 控制台 → 复制 preview URL → 粘到 Slack。这种上下文切换一天发生几十次，慢慢蚕食着开发体验。

2026 年发生了两件大事。(1) Vercel 发布了 Agent Skills（Model Context Protocol = MCP）——这套机制让 AI Agent "作为工具直接调用" Vercel API。(2) Anthropic 发布了 Claude Code GitHub Actions v1.0——在 PR 评论里写 @claude fix this bug，AI 就会自动跑修复、preview 部署和回复评论。Vercel 自己发布 vercel/vercel-deploy-claude-code-plugin也是同一波势能。

2026 年 5 月的标准流程现在变成了："在 Cursor 里说'加一下这个功能、部署、把 preview URL 给我' → 30 秒后 preview URL 出现在聊天里。"正如 MCP 是什么和 Claude Agent SDK所述，MCP 已经变成"把 AI Agent 接入业务系统的 USB-C"——而这次 Vercel 的集成，是最显眼、最实用的范例。

2. 5 分钟看懂三种方案

用"搭建成本 x 自动化深度"对比三种方案。

选型指南："一个月开 Vercel 控制台 10 次以上？"那 (2) 的搭建值得做。"PR review 是日常？"(3) 会大幅减负。"个人博客规模？"(1) 就够了——过度工程的维护成本会比节省的还多。

3. 方案 1：极简（git push 自动部署）

使用最广的基线方案。把 Vercel 和 GitHub 关联一次，之后每次 git push 都会触发部署，60–90 秒就能上线。AI 只需"写代码、写 commit message、跑 git push"。

# One-time setup
1. Vercel dashboard → Add New Project
2. Pick the GitHub repo → Import
3. Framework Preset: Next.js (auto-detected)
4. Environment Variables: add as needed
5. Deploy → done

# Daily flow (inside Cursor/Claude Code)
> Make this button red. When done, git push to deploy.

# What the AI runs
git add app/components/Button.tsx
git commit -m "feat: change primary button to red"
git push origin main

# Vercel auto-deploys → live in 90 seconds

这套方案的真正价值在于："每个分支都会自动生成 preview URL。"推一个 feature/red-button，Vercel 就会自动起一个 https://your-app-git-feature-red-button-yourname.vercel.app。告诉 AI "建分支 feature/redesign，更新设计，把 preview URL 贴到 Slack"——整个闭环就能不动手地完成。

注意：Hobby 计划禁止商业用途。请重读 "为什么 AI 推荐 Vercel" §5里的价格陷阱。如果 AI 开始批量产 preview，build 分钟数会烧得很快。

4. 方案 2：MCP-Direct（Cursor + Vercel Agent Skills）

2026 年的旗舰方案。Vercel 官方的 Agent Skills（MCP server）直接接到 Cursor 或 Claude Code，让 AI Agent 直接调用 Vercel API。"切到浏览器"这步彻底消失。

# Setup (10 min)
1. Get a Vercel token: vercel.com/account/tokens
2. In Cursor, create .cursor/mcp.json:

{
  "mcpServers": {
    "vercel": {
      "url": "https://mcp.vercel.com/<team-slug>",
      "headers": {
        "Authorization": "Bearer <VERCEL_TOKEN>"
      }
    }
  }
}

3. Restart Cursor → confirm MCP server connection

这样就能在 Cursor 内直接用以下斜杠命令：

# Practical slash commands
/deploy           # preview-deploy the current branch
/deploy --prod    # production deploy
/status           # latest deployment status
/logs             # fetch build logs
/env list         # list environment variables
/env add KEY VALUE # add env var (preview/production scoped)
/rollback         # roll back to the previous deployment

真正的胜利是"一切都在对话内完成。"说一句"加这个 API，部署到 preview，如果有错就读日志再修"，AI 就会自主跑完改代码 → /deploy → /logs → 找到错 → 修 → 再 /deploy。在 "AI 能负责基础设施吗？"的红绿灯框架里，这是"黄灯"区——人类专注于"最终审批和成本监控。"

Claude Code 用户有 Vercel 官方的 vercel-deploy-claude-code-plugin。装上即可获得同等能力。

5. 方案 3：GitHub Actions（PR 全自动驱动）

团队场景的顶级方案。配合 Claude Code GitHub Actions v1.0，只要在 PR 评论里提一下 @claude，AI 就会自动跑代码修改 + 测试 + preview 部署 + PR 评论回复。

# Setup (30 min)
1. In Claude Code, run /install-github-app
2. Install on the repo → secrets auto-configured
3. .github/workflows/claude.yml is auto-generated

name: Claude Code
on:
  issue_comment: { types: [created] }
  pull_request_review_comment: { types: [created] }
jobs:
  claude:
    if: contains(github.event.comment.body, '@claude')
    runs-on: ubuntu-latest
    steps:
      - uses: anthropics/claude-code-action@v1
        with:
          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}

# 4. Add preview deploy via .github/workflows/vercel.yml
name: Vercel Preview
on: pull_request
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm i -g vercel
      - run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
      - run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
      - run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

这会重写运维方式。一个 PR 的典型流程：

# Developer opens a PR → preview auto-deploys
[Bot] Vercel Preview: https://your-app-pr-42.vercel.app

# Reviewer adds a PR comment
@claude also change the hover state on this button

# 5 minutes later Claude commits the fix
[Bot Claude] commit pushed: 'feat: add hover state to button'
[Bot] Vercel Preview updated: https://your-app-pr-42.vercel.app

# Reviewer checks → approve → merge → production auto-deploy

真正的威力："PR 完成之前人类不碰代码"这种场景变得现实。正如 "资深 vs 初级"和 "AI 会消灭白领工作吗"所讨论的那样，"AI 吸收初级工作"在这里得到了最具体的实现。团队专注 review，AI 负责实现——这就是新的分工。

6. Preview 策略——Branch → URL → A/B

三种方案共通的杠杆是"战略性地使用 preview 环境。"Vercel 会给每一条非生产分支自动签发独立 URL，所以"同一个改动用三种方式做并比较"几乎是免费的。

7. 四个坑——env 泄漏、成本、冲突、回滚

把自动部署交给 AI Agent，一定会踩到四个坑。提前布好防御，能避开 80% 的事故。

另一项注意："把生产部署完全交给 AI"并不推荐。即使采用 (2) 和 (3)，生产部署也要求人类审批——这是 2026 年 5 月的现实。正如 "给 AI 输入时的注意事项"所述，AI 可能因为完全无心的失误把生产搞挂。自动化止于 preview / staging；生产用两段式审批把关。

总结

"从 Claude Code / Cursor 部署到 Vercel"——到 2026 年 5 月，"切到浏览器"的时代已经结束。Vercel Agent Skills (MCP) 与 Claude Code GitHub Actions v1.0 把"代码 → 构建 → 部署 → preview URL → env 管理 → 回滚"压缩成了一条 Agent 内的流。

按你自己的工作流选：(1) 单人开发 → git push（5 分钟搭建，60–90 秒部署）、(2) 一个月开 Vercel 控制台 10 次以上的中坚开发 → MCP-Direct（Cursor + .cursor/mcp.json）、(3) review 驱动的团队 → GitHub Actions（@claude → 自动修复 + preview 部署）。Preview 用法：A/B 对比、永久 staging、客户验收。用Spending Limit + Cloudflare 代理 + Sentry + 生产人审批抵御四个坑（env 泄漏、成本爆炸、PR 冲突、漏回滚）。

相关：为什么 AI 推荐 Vercel、Vercel AI SDK、v0 vs Bolt vs Lovable、Cursor 是什么、AI 能负责基础设施吗？

FAQ

Q. 这套在 Cloudflare Pages 或 Netlify 上也行得通吗？
A. 类似的能做，但生态更弱。Cloudflare 和 Netlify 都有官方 CLI 和 GitHub 集成，但截至 2026 年 5 月，它们都还没有对应 Vercel Agent Skills (MCP) 的一方代理集成。在 AI 集成上，Vercel 领先 6–12 个月。选型标准见 "为什么 AI 推荐 Vercel"。

Q. 用 Claude Code 还是 Cursor 部署 Vercel 更好？
A. 两者都支持 MCP，能力几乎对等。Claude Code 以终端为中心，自带官方 GitHub Actions 集成；Cursor 以 IDE 为中心，斜杠命令 UI 直观。VS Code 派偏向 Cursor，终端派偏向 Claude Code。很多人两者都用。

Q. 生产部署该让 AI 完全自动化吗？
A. 不要。Preview / staging 完全自动化没问题。生产必须始终经过人类审批。原因：AI 可能因无心失误把生产搞挂，"事故后谁负责"会变得模糊。用 GitHub Branch Protection 禁止直接推 main，并要求审批规则。

Q. .cursor/mcp.json 里的 token 该进 git 吗？
A. 绝对不要。要么把整个 .cursor/ 目录加进 .gitignore，要么从环境变量读 .cursor/mcp.json。Vercel token 一旦泄露，第三方就能随意往你的项目里部署——这是严重事故。

Q. 担心 GitHub Actions 跑出来的 Claude API 成本。
A. 视代码体量大约每个 PR 几美分到几十美分，一般每月几美元。为防止"AI 死循环"，请在 Anthropic API 上设月度 spending limit。Claude Code Action v1.0 默认也有步数上限。