Vercel 一键部署：零认证快速发布应用

学完你能做什么

一句话让 Claude 把你的项目部署到 Vercel，无需手动配置
获取可访问的预览链接和所有权转移链接
自动识别项目框架（Next.js、React、Vue、Svelte 等 40+ 种）
处理静态 HTML 网站，支持单文件重命名

你现在的困境

每次想把项目分享给别人，都需要：

手动登录 Vercel 网站
创建新项目
连接 Git 仓库
等待构建完成
记住一长串 URL 分享给他人

如果只是想快速展示一个 demo 或原型，这些步骤太繁琐了。

什么时候用这一招

适合以下场景：

🚀 快速创建项目预览分享给团队
📦 展示 demo 给客户或朋友
🔄 CI/CD 中自动生成预览部署
🌐 部署静态 HTML 页面或单页应用

核心思路

Vercel Deploy 技能的工作流程很简单：

你的说话 → Claude 检测到关键词 → 激活部署技能
    ↓
          检测框架类型（从 package.json）
    ↓
          打包项目（排除 node_modules 和 .git）
    ↓
          上传到 Vercel API
    ↓
          返回两个链接（预览 + 所有权转移）

为什么需要两个链接？

Preview URL: 立即可访问的预览地址
Claim URL: 把这个部署转到你的 Vercel 账户下管理

这样设计的好处：部署者（Agent）不需要你的账户权限，你可以在之后通过 Claim URL 获得所有权。

🎒 开始前的准备

前置检查

✅ 已完成 Agent Skills 安装
✅ 项目目录结构完整（有 package.json 或是静态 HTML 项目）
✅ Claude.ai 网络权限已配置（如使用 claude.ai）

网络权限提醒

如果你使用 claude.ai（在线版），需要允许访问 *.vercel.com 域名：

前往 https://claude.ai/settings/capabilities
在白名单中添加 *.vercel.com
保存设置后重试

如果你的部署失败并提示网络错误，请检查这个设置。

跟我做

第 1 步：切换到项目目录

bash

# 进入你的项目目录
cd /path/to/your/project

为什么 部署脚本需要找到项目的 package.json 和源文件，目录定位很重要。

第 2 步：告诉 Claude 部署

在 Claude 对话中输入：

Deploy my app to Vercel

你还可以试试这些触发词：

"Deploy this to production"
"Deploy and give me the link"
"Push this live"
"Create a preview deployment"

第 3 步：观察部署过程

你会看到类似输出：

Preparing deployment...
Detected framework: nextjs
Creating deployment package...
Deploying...
✓ Deployment successful!

Preview URL: https://skill-deploy-abc123.vercel.app
Claim URL:   https://vercel.com/claim-deployment?code=...

View your site at the Preview URL.
To transfer this deployment to your Vercel account, visit the Claim URL.

同时，Claude 还会输出 JSON 格式（方便脚本解析）：

json

{
  "previewUrl": "https://skill-deploy-abc123.vercel.app",
  "claimUrl": "https://vercel.com/claim-deployment?code=...",
  "deploymentId": "dpl_...",
  "projectId": "prj_..."
}

你应该看到：

部署成功提示 ✓
两个 URL（preview 和 claim）
如果是代码项目，还会显示检测到的框架名称

第 4 步：访问预览链接

点击 Preview URL，你就能看到网站实时上线了！

如果这是一个 demo 或临时展示，任务就完成了。

第 5 步：（可选）转移所有权

如果你想长期管理这个部署：

点击 Claim URL
登录你的 Vercel 账户
确认转移
部署现在属于你的账户，可以继续编辑和管理

你应该看到：

部署出现在你的 Vercel 账户下
可以在 Vercel Dashboard 中查看日志、重新部署等

检查点 ✅

部署完成后，确认以下内容：

[ ] Preview URL 可以在浏览器中访问
[ ] 页面显示正常（没有 404 或构建错误）
[ ] 如果是代码项目，框架检测正确（Next.js、Vite 等）
[ ] 如需长期管理，已通过 Claim URL 转移所有权

支持的框架

Vercel Deploy 技能可以自动检测 40+ 种框架：

类别	框架（部分示例）
React	Next.js, Gatsby, Create React App, Remix
Vue	Nuxt, Vitepress, Vuepress
Svelte	SvelteKit, Svelte
Angular	Angular, Ionic Angular
Node.js 后端	Express, Hono, Fastify, NestJS
构建工具	Vite, Parcel
其他	Astro, Solid Start, Ember, Astro, Hexo, Eleventy

框架检测原理

脚本会读取你的 package.json，检查 dependencies 和 devDependencies 中的包名。

如果存在多个匹配，脚本会按优先级选择最具体的框架（例如 Next.js 优先于通用的 React）。

静态 HTML 项目

如果你的项目没有 package.json（纯静态网站），部署技能会智能处理：

自动检测：识别根目录下的 .html 文件
重命名：如果只有一个 .html 文件且不是 index.html，会自动重命名为 index.html
直接部署：作为静态站点托管到 Vercel

示例场景：

bash

my-static-site/
└── demo.html  # 会自动重命名为 index.html

部署后，访问预览链接就能看到 demo.html 的内容。

踩坑提醒

问题 1：部署失败，提示网络错误

现象：

Error: Network Egress Error

原因：claude.ai 默认阻止访问外部域。

解决方法：

前往 https://claude.ai/settings/capabilities
添加 *.vercel.com 到白名单
重新部署

问题 2：框架检测不准确

现象：

Detected framework: vite
# 但你期待的是 nextjs

原因：脚本按依赖优先级匹配，可能在检测到 vite 后就停止了。

解决方法：

检查 package.json 中的依赖顺序
如果不影响部署，可以忽略（Vercel 会自动构建）
项目仍能正常部署，只是可能使用默认的 Vite 配置

问题 3：静态网站 404

现象：单个 .html 文件部署后访问 404。

解决方法：确保 HTML 文件在项目根目录。如果文件在子目录，Vercel 默认不会将其路由到根路径。

正确结构：

project/
└── my-site.html  # 根目录下的单个文件，会自动重命名为 index.html

错误结构：

project/
└── dist/
    └── my-site.html  # 不会自动重命名，访问会 404

问题 4：部署成功但页面报错

现象：部署成功，但访问页面时显示构建错误或运行时错误。

解决方法：

在本地运行 npm run build 检查是否通过
查看部署日志（如果已转移到自己的 Vercel 账户）
检查环境变量（如果项目依赖 .env）

自动排除文件

部署脚本会自动排除：

node_modules/（避免上传依赖）
.git/（避免上传版本历史）

如果你的项目需要排除其他文件（如 .env），建议在手动打包时处理。

高级用法

指定部署路径

你也可以指定其他目录的部署：

Deploy the project at ./my-app

Claude 会使用该路径进行部署。

从已有 tarball 部署

如果你已经有打包好的 .tgz 文件：

Deploy /path/to/project.tgz to Vercel

脚本会直接上传已有的压缩包，跳过打包步骤。

本课小结

Vercel Deploy 技能让部署变得前所未有的简单：

核心价值：

✅ 一句话完成部署，无需手动配置
✅ 自动检测框架，支持 40+ 种技术栈
✅ 零认证部署，安全性高
✅ 返回预览链接 + 所有权转移链接

适用场景：

🚀 快速分享 demo 或原型
📦 团队内部预览
🔄 自动化 CI/CD 流程
🌐 静态网站托管

下一步：如果你想深入探究技能的工作原理，可以查看 React 性能优化最佳实践或学习如何开发自定义技能。

下一课预告

下一课我们学习 React/Next.js 性能优化最佳实践。
你会学到：
57 条 React 性能优化规则
如何消除瀑布流、优化打包大小
Agent 如何自动检查代码并给出修复建议

附录：源码参考

点击展开查看源码位置

更新时间：2026-01-25

功能	文件路径	行号
部署脚本入口	`skills/claude.ai/vercel-deploy-claimable/scripts/deploy.sh`	1-250
框架检测逻辑	`deploy.sh`	12-156
打包并上传到 API	`deploy.sh`	208-222
静态 HTML 重命名	`deploy.sh`	192-205
技能定义文档	`skills/claude.ai/vercel-deploy-claimable/SKILL.md`	1-113
网络错误排查	`SKILL.md`	102-112

关键常量：

DEPLOY_ENDPOINT = "https://claude-skills-deploy.vercel.com/api/deploy"：Vercel 部署 API 端点

关键函数：

detect_framework()：从 package.json 检测 40+ 种框架

支持的框架检测（按优先级排序）：

React 类：Next.js, Gatsby, Remix, React Router
Vue 类：Nuxt, Vitepress, Vuepress
Svelte 类：SvelteKit, Svelte
其他：Astro, Angular, Express, Hono, Vite, Parcel 等

5 分钟跑起来

掌握内置技能包

写自定义技能

遇到问题怎么办

技术细节全解析

看看新功能

Vercel 一键部署：零认证快速发布应用

学完你能做什么

你现在的困境

什么时候用这一招

核心思路

🎒 开始前的准备

跟我做

第 1 步：切换到项目目录

第 2 步：告诉 Claude 部署

第 3 步：观察部署过程

第 4 步：访问预览链接

第 5 步：（可选）转移所有权

检查点 ✅

支持的框架

静态 HTML 项目

踩坑提醒

问题 1：部署失败，提示网络错误

问题 2：框架检测不准确

问题 3：静态网站 404

问题 4：部署成功但页面报错

高级用法

指定部署路径

从已有 tarball 部署

本课小结

下一课预告

附录：源码参考

Vercel 一键部署：零认证快速发布应用 ​

学完你能做什么 ​

你现在的困境 ​

什么时候用这一招 ​

核心思路 ​

🎒 开始前的准备 ​

跟我做 ​

第 1 步：切换到项目目录 ​

第 2 步：告诉 Claude 部署 ​

第 3 步：观察部署过程 ​

第 4 步：访问预览链接 ​

第 5 步：（可选）转移所有权 ​

检查点 ✅ ​

支持的框架 ​

静态 HTML 项目 ​

踩坑提醒 ​

问题 1：部署失败，提示网络错误 ​

问题 2：框架检测不准确 ​

问题 3：静态网站 404 ​

问题 4：部署成功但页面报错 ​

高级用法 ​

指定部署路径 ​

从已有 tarball 部署 ​

本课小结 ​

下一课预告 ​

附录：源码参考 ​

Vercel 一键部署：零认证快速发布应用

学完你能做什么

你现在的困境

什么时候用这一招

核心思路

🎒 开始前的准备

跟我做

第 1 步：切换到项目目录

第 2 步：告诉 Claude 部署

第 3 步：观察部署过程

第 4 步：访问预览链接

第 5 步：（可选）转移所有权

检查点 ✅

支持的框架

静态 HTML 项目

踩坑提醒

问题 1：部署失败，提示网络错误

问题 2：框架检测不准确

问题 3：静态网站 404

问题 4：部署成功但页面报错

高级用法

指定部署路径

从已有 tarball 部署

本课小结

下一课预告

附录：源码参考