昨天上 Karen 老師的 Vibe coding 實作課, 需註冊 Vercel 帳號, 安裝 Vercel CLI 與 Vercel 部署技能包, 這樣在 Claude Code 裡就能用提示詞例如「幫我把網站部署到 Vercel」自動執行 vercel 指令直接把檔案打包上傳到 Vercel 雲端平台.
接下來在 PS 視窗輸入 vercel login 指令來登入, 它會開啟瀏覽器, 選擇登入方式, 我使用 Email, 輸入後按 Continue with Email :
這要就讓本機的命令列環境與 Claude Code 跟我們的雲端 Vercel 帳號完成免密碼安全授權綁定, Vercel CLI 已經在我們的電腦裡產生並儲存了一組專屬的登入憑證 (token), 之後不需要再打開瀏覽器輸入驗證碼, 電腦就能直接與我們的 Vercel 帳號溝通.
可見 Vercel CLI 已安裝成功 (那些 npm warn EBADENGINE 警告與功能無關, 可以直接忽略). 開啟一個新的 PS 視窗, 檢視版本 :
此 agent-skills 技能包是給 Claude Code 看的 Vercel 部署武功秘笈, 用來教它如何將網站部署到 Vercel 平台, 安裝指令如下 :
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 等全域環境的連結都做好了.
以上把 Vercel CLI 與佈署技能包 agent-skills 安裝好後, 就可以在 Claude Code 內開發網站專案, 完成後只要用下列提示詞 Claude Code 就會將專案佈署到 Vercel 雲端 :
注意, 以上所安裝的佈署技能包 (agent-skills) 是安裝在共用目錄 (~\.agents\skills\) 下, Vercel CLI 為全域安裝, 且登入狀態為作業系統層級, 所以不管是 Claude Code 或 Antigravity CLI, Codex 等 AI 代理都能透過它們一鍵佈署專案.