用 Vercel Agent Skills 自动化部署

vercel-labs/agent-skills 让 AI Agent 深入理解 Vercel 部署平台。不必死记 CLI 参数与控制台路径，描述部署目标即可由 Agent 执行工作流。

本教程场景：为 PR 部署 Next.js 预览，再提升到生产。

Skill 覆盖范围

• 项目关联与初始化 — 本地项目连到 Vercel
• 预览部署 — 自动部署分支与 PR
• 生产提升 — 将预览部署推到生产
• 环境变量 — 跨环境管理密钥
• 域名配置 — 为项目绑定自定义域名

安装

claude skill add --from-github vercel-labs/agent-skills

启动会话后询问已加载的 Skill 以确认。

前置条件

1. 已有 Vercel 账号与项目
2. 已安装 Vercel CLI（npm i -g vercel）
3. 项目已 vercel link

未完成时 Skill 指令会引导你完成。

实战：部署功能分支

步骤 1：创建分支

git checkout -b feature/user-profiles
# 修改代码
git add . && git commit -m "feat: add user profile page"

步骤 2：部署预览

在项目目录的 Claude Code 中：

Deploy this branch as a preview deployment on Vercel

Skill 会：

1. 运行 vercel 创建预览部署
2. 输出预览 URL
3. 检查构建错误与警告

无需打开 Vercel 控制台即可获得 live 预览链接。

步骤 3：分享预览

URL 类似 user-profiles-git-feature-user-profiles-yourproject.vercel.app，发给团队评审。

失败时 Skill 会解析错误并建议修复，常见：

• 缺少环境变量（会列出所需项）
• 构建命令失败（会标出相关日志行）
• 框架检测问题（会核对框架配置）

步骤 4：提升到生产

预览确认无误后：

Promote the latest preview deployment to production

Skill 运行 vercel --prod 并确认生产 URL，部署成功前会核对状态。

实战：管理环境变量

问题

开发、预览、生产使用不同 API Key，手工管理易错。

使用 Skill

Add the API key NEXT_PUBLIC_API_URL with value https://api.example.com
to the production environment on Vercel

Skill 会执行正确的 vercel env add 及作用域；同名变量已存在时会警告。

列出变量：

Show me all environment variables for this Vercel project

技巧

• 始终在项目根目录部署 — Skill 依赖本地 vercel.json 与项目配置。
• 每个 PR 都开预览 — Skill 让预览部署足够便宜，可养成习惯。
• 失败时看部署日志 — Skill 会摘关键行，自己读一遍能建立直觉。
• 密钥不要进 git — Skill 通过 Vercel 加密存储环境变量，而非提交 .env。

何时可跳过

• 部署在 AWS、GCP 等（本 Skill 仅 Vercel）
• 已有 CI/CD（GitHub Actions、GitLab CI）全自动部署
• 很少手工部署，更习惯用控制台

客观评价

本 Skill 减少在终端与 Vercel 控制台之间切换。团队若每天多次部署，省下的时间会累积。若一周只部署一次，控制台可能更快。

真正价值在一致性：每次按相同步骤部署，降低推错分支或漏设环境变量的概率。

其他平台部署类 Skill 见 SkillMap 排行榜。