AI 编程进入＂插件时代＂:Vercel Skills 让 Claude Code 无限进化

在使用 AI 编码助手（如 Claude Code、Cursor、OpenCode）时，你是否曾想过：

“如果我的 AI 助手能具备专业的 React 组件设计能力该多好？” “要是它能像资深前端一样处理复杂的样式问题就好了…”

Vercel Labs 推出的 skills 工具正是为了解决这个问题而生——它就像是 AI 编码代理的”应用商店”，让你能够轻松发现、安装、管理和创建各种专业技能。

什么是 Skills？

Skills 是一个命令行工具（CLI），用于管理 AI 编码代理的技能生态系统。它借鉴了 npm 等包管理器的设计理念，让为 AI 代理添加新能力变得像安装 npm 包一样简单。

核心功能一览

应用场景

1️⃣ 前端开发者

让 AI 助手掌握专业的前端设计能力：

npx skills add vercel-labs/agent-skills --skill frontend-design

安装后，你的 AI 助手就能：

• 创建精美的 React 组件
• 设计高质量的 UI 界面
• 处理复杂的 CSS 样式问题

2️⃣ 文档编写者

加速技术文档的创建流程：

npx skills add vercel-labs/agent-skills --skill doc-coauthoring

AI 将能够帮你：

• 结构化技术文档
• 编写 API 说明
• 创建决策文档

3️⃣ 团队协作

通过项目级安装，让团队成员共享相同的 AI 技能集，保证输出风格的一致性。

如何使用

第一步：搜索技能

npx skills find

这将打开一个交互式搜索界面，类似 fzf 的体验：

? 选择一个技能 (Use arrow keys)❯ frontend-design     精美的前端界面设计能力  doc-coauthoring      技术文档协作编写  pdf-tools            PDF 处理工具集  ...

第二步：安装技能

交互式安装（推荐新手）

npx skills add vercel-labs/agent-skills

CLI 会引导你完成：

1. 选择要安装的技能
2. 选择目标代理（Claude Code、Cursor 等）
3. 选择安装范围（项目级 / 全局）
4. 选择安装模式（符号链接 / 复制）

非交互式安装（适合脚本/自动化）

# 全局安装到 Claude Codenpx skills add vercel-labs/agent-skills \  --skill frontend-design \  --agent claude-code \  --global \  --yes

第三步：管理技能

# 查看已安装技能npx skills list# 检查更新npx skills check# 更新所有技能npx skills update# 移除技能npx skills remove frontend-design

安装范围说明

项目级安装（默认）

./<agent>/skills/

• 适合团队共享
• 可提交到版本控制
• 项目特定技能

全局安装（-g 参数）

~/<agent>/skills/

• 跨项目共享
• 个人常用技能
• 统一管理

创建自己的技能

# 在当前目录创建技能模板npx skills init# 在子目录创建npx skills init my-awesome-skill

这将生成一个 SKILL.md 模板：

---name: my-awesome-skilldescription: 这个技能的简短描述---# 技能名称详细说明这个技能做什么，以及如何使用...

支持的代理

• Claude Code ✅
• Cursor ✅
• OpenCode ✅
• 以及更多主流 AI 编码代理

环境变量配置

# 显示内部技能INSTALL_INTERNAL_SKILLS=1# 禁用匿名遥测DISABLE_TELEMETRY=1

总结

Vercel Skills 通过简单直观的 CLI 界面，让 AI 编码代理的能力扩展变得前所未有的简单。无论你是个人开发者还是团队协作，都能从中受益。

立即开始：npx skills find

扩展阅读

• GitHub: https://github.com/vercel-labs/skills