Cursor 整合指南

在 Cursor AI 中使用 Agent Skills 的詳細教學。

Cursor AI 整合

Cursor 是目前最受歡迎的 AI 程式碼編輯器之一。它完全支援 Agent Skills 標準,讓你可以即時擴展其能力。

前置條件

  • 已安裝 Cursor AI
  • 安裝了 Node.js 18+ 和 npm/pnpm 的終端機

安裝方式

方式一:使用 CLI 命令(推薦)

最簡單的方法是透過 npx 命令添加技能:

npx agent-skills install vercel-labs/agent-skills/web-design-guidelines

此命令會:

  1. 從 GitHub 下載技能
  2. 提取 SKILL.md 設定檔
  3. 自動設定 Cursor 使用該技能

方式二:手動設定

如果你更喜歡手動設置:

  1. 複製 Manifest URL

    https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/web-design-guidelines/SKILL.md
  2. 開啟 Cursor 設定

    • Cmd + ,(Mac)或 Ctrl + ,(Windows/Linux)
    • 導航到 Features → Agent
  3. 添加自訂技能

    • 在 "Custom Skills" 區域貼上 manifest URL
    • 點擊 "Add Skill"
  4. 重新啟動 Cursor 使變更生效。

在對話中使用技能

安裝完成後,你可以在聊天中透過 @ 提及來調用技能:

@skill-name 幫我設計一個響應式落地頁

Cursor 會自動載入技能上下文,提供針對性的幫助。

Cursor 熱門技能推薦

技能描述安裝命令
React 最佳實踐Vercel 的 React 規範npx agent-skills install vercel-labs/agent-skills/vercel-react-best-practices
網頁設計指南現代 UI/UX 原則npx agent-skills install vercel-labs/agent-skills/web-design-guidelines
前端設計Anthropic 的設計模式npx agent-skills install anthropics/skills/frontend-design

常見問題

技能無法使用?

  1. 檢查 Cursor 版本:確保執行的是 Cursor 0.35+ 版本,才能完整支援技能功能。
  2. 驗證安裝:執行 npx agent-skills list 查看已安裝的技能。
  3. 清除快取:嘗試 npx agent-skills clear-cache 後重新安裝。

權限問題

如果遇到權限錯誤:

# 修復 npm 權限(推薦)
npm config set prefix ~/.npm-global

# 或使用 sudo(不推薦)
sudo npx agent-skills install <skill-name>

下一步