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>

下一步