昨天上 Karen 老師的 Vibe coding 實作課, 需註冊 Vercel 帳號, 安裝 Vercel CLI 與 Vercel 部署技能包, 這樣在 Claude Code 裡就能用提示詞例如「幫我把網站部署到 Vercel」自動執行 vercel 指令直接把檔案打包上傳到 Vercel 雲端平台.
1. 安裝 Vercel CLI :
到 Vercel 官網 :
按右上角的 SIGN UP 鈕 :
可以用 Google 或 GitHub 等帳號快速註冊, 但我習慣用 Email :
輸入 Email 按 Continue with Email :
這時要去收信, 取得驗證碼 :
填入驗證碼 :
勾選 I'm working on personal projects, 隨便填一個 Team name 按 Continue :
註冊完成後按右上角頭像就可以看到帳戶名稱 (username) :
帳戶名稱會出現在網址中, 可以按名稱右邊的齒輪鈕進入設定頁面修改, 我將後面的 -5388 去掉以減少網址長度 (只要沒被別人用走即可) :
接下來在 PS 視窗輸入 vercel login 指令來登入, 它會開啟瀏覽器, 選擇登入方式, 我使用 Email, 輸入後按 Continue with Email :
這時要去信箱收驗證信, 將驗證碼輸入到網頁 :
這時會顯示授權此裝置存取 Vercel 的頁面, 按底下 Allow Access 鈕 :
授權成功即可關掉頁面 :
回到 PS 視窗會顯示登入成功 :
PS C:\Users\tony1> vercel login
Vercel CLI 64.2.0 (Node.js 25.2.1)
>
Visit https://vercel.com/oauth/device?user_code=PSGC-KMFK
Congratulations! You are now signed in.
To deploy something, run `vercel`.
To set up the Vercel plugin and connect your coding agents to the AI Gateway, run `vercel setup`.
💡 To deploy every commit automatically,
connect a Git Repository (vercel.link/git (https://vercel.link/git)).
這要就讓本機的命令列環境與 Claude Code 跟我們的雲端 Vercel 帳號完成免密碼安全授權綁定, Vercel CLI 已經在我們的電腦裡產生並儲存了一組專屬的登入憑證 (token), 之後不需要再打開瀏覽器輸入驗證碼, 電腦就能直接與我們的 Vercel 帳號溝通.
2. 安裝 Vercel CLI :
這是 Claude Code 與 Vercel 溝通的管道, 是實際執行部署的命令列工具, 全域安裝指令如下 :
PS C:\Users\tony1> npm install -g vercel
npm warn EBADENGINE Unsupported engine {
npm warn EBADENGINE package: '@renovatebot/pep440@4.2.1',
npm warn EBADENGINE required: { node: '^20.9.0 || ^22.11.0 || ^24', pnpm: '^10.0.0' },
npm warn EBADENGINE current: { node: 'v25.2.1', npm: '11.13.0' }
npm warn EBADENGINE }
added 285 packages in 2m
可見 Vercel CLI 已安裝成功 (那些 npm warn EBADENGINE 警告與功能無關, 可以直接忽略). 開啟一個新的 PS 視窗, 檢視版本 :
PS C:\Users\tony1> vercel --version
Vercel CLI 64.2.0
64.2.0
3. 安裝 Claude Code 的 Vercel 技能包 :
此 agent-skills 技能包是給 Claude Code 看的 Vercel 部署武功秘笈, 用來教它如何將網站部署到 Vercel 平台, 安裝指令如下 :
npx skills add vercel-labs/agent-skills --all -a claude-code
PS C:\Users\tony1> npx skills add vercel-labs/agent-skills --all -a claude-code
Need to install the following packages:
skills@1.7.2
Ok to proceed? (y) y
███████╗██╗ ██╗██╗██╗ ██╗ ███████╗
██╔════╝██║ ██╔╝██║██║ ██║ ██╔════╝
███████╗█████╔╝ ██║██║ ██║ ███████╗
╚════██║██╔═██╗ ██║██║ ██║ ╚════██║
███████║██║ ██╗██║███████╗███████╗███████║
╚══════╝╚═╝ ╚═╝╚═╝╚══════╝╚══════╝╚══════╝
T skills
|
o Source: https://github.com/vercel-labs/agent-skills.git
|
o Repository cloned
|
o Found 9 skills
|
• Installing all 9 skills
|
• Installing to all 79 agents
|
o Installation Summary ---------------------------------------------------------+
| |
| ~\.agents\skills\vercel-composition-patterns |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlink → AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +51 more |
| |
| ~\.agents\skills\deploy-to-vercel |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlink → AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +51 more |
| |
| ~\.agents\skills\vercel-react-best-practices |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlink → AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +51 more |
| |
| ~\.agents\skills\vercel-react-native-skills |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlink → AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +51 more |
| |
| ~\.agents\skills\vercel-react-view-transitions |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlink → AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +51 more |
| |
| ~\.agents\skills\vercel-cli-with-tokens |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlink → AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +51 more |
| |
| ~\.agents\skills\vercel-optimize |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlink → AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +51 more |
| |
| ~\.agents\skills\web-design-guidelines |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlink → AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +51 more |
| |
| ~\.agents\skills\writing-guidelines |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlink → AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +51 more |
| |
+--------------------------------------------------------------------------------+
|
o Security Risk Assessments ---------------------------------------------------+
| |
| Gen Socket Snyk |
| vercel-composition-patterns Safe 0 alerts Low Risk |
| deploy-to-vercel Safe 0 alerts Med Risk |
| vercel-react-best-practices Safe 0 alerts Low Risk |
| vercel-react-native-skills Safe 0 alerts Low Risk |
| vercel-react-view-transitions Safe 0 alerts Low Risk |
| vercel-cli-with-tokens Safe 0 alerts Med Risk |
| vercel-optimize Safe 0 alerts Low Risk |
| web-design-guidelines Safe 0 alerts Low Risk |
| writing-guidelines Safe 0 alerts Med Risk |
| |
| Details: https://skills.sh/vercel-labs/agent-skills |
| |
+-------------------------------------------------------------------------------+
|
o Installation complete
|
o Installed 9 skills ----------------------------------------------------------------------------------------+
| |
| ✓ ~\.agents\skills\vercel-composition-patterns |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlinked: Claude Code, Eve, Kiro CLI |
| skipped: AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +48 more (project directory not found) |
| ✓ ~\.agents\skills\deploy-to-vercel |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlinked: Claude Code, Eve, Kiro CLI |
| skipped: AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +48 more (project directory not found) |
| ✓ ~\.agents\skills\vercel-react-best-practices |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlinked: Claude Code, Eve, Kiro CLI |
| skipped: AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +48 more (project directory not found) |
| ✓ ~\.agents\skills\vercel-react-native-skills |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlinked: Claude Code, Eve, Kiro CLI |
| skipped: AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +48 more (project directory not found) |
| ✓ ~\.agents\skills\vercel-react-view-transitions |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlinked: Claude Code, Eve, Kiro CLI |
| skipped: AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +48 more (project directory not found) |
| ✓ ~\.agents\skills\vercel-cli-with-tokens |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlinked: Claude Code, Eve, Kiro CLI |
| skipped: AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +48 more (project directory not found) |
| ✓ ~\.agents\skills\vercel-optimize |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlinked: Claude Code, Eve, Kiro CLI |
| skipped: AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +48 more (project directory not found) |
| ✓ ~\.agents\skills\web-design-guidelines |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlinked: Claude Code, Eve, Kiro CLI |
| skipped: AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +48 more (project directory not found) |
| ✓ ~\.agents\skills\writing-guidelines |
| universal: Amp, Antigravity, Antigravity CLI, Cline, Codex +18 more |
| symlinked: Claude Code, Eve, Kiro CLI |
| skipped: AiderDesk, AstrBot, Autohand Code CLI, Augment, IBM Bob +48 more (project directory not found) |
| |
+-------------------------------------------------------------------------------------------------------------+
|
— Done! Review skills before use; they run with full agent permissions.
npm notice
npm notice New minor version of npm available! 11.13.0 -> 11.21.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.21.0
npm notice To update run: npm install -g npm@11.21.0
npm notice
可見此技能包裡面的 9 個 skills 都安裝好了 (下方都有顯示 symlinked: Claude Code), 同時也自動幫 Antigravity CLI 與 Codex 等全域環境的連結都做好了.
4. 把網站佈署到 Vercel 雲端 :
以上把 Vercel CLI 與佈署技能包 agent-skills 安裝好後, 就可以在 Claude Code 內開發網站專案, 完成後只要用下列提示詞 Claude Code 就會將專案佈署到 Vercel 雲端 :
請把目前的網站直接部署到 Vercel 正式環境 (Production) 並給我公開網址
請用 deploy-to-vercel 技能幫我把專案部署到 Vercel 正式環境
也可以在 PS 視窗的專案目錄下, 用下列指令佈署專案 :
PS D:\claude_code\project_1>vercel --prod --yes
注意, 以上所安裝的佈署技能包 (agent-skills) 是安裝在共用目錄 (~\.agents\skills\) 下, Vercel CLI 為全域安裝, 且登入狀態為作業系統層級, 所以不管是 Claude Code 或 Antigravity CLI, Codex 等 AI 代理都能透過它們一鍵佈署專案.
沒有留言 :
張貼留言