🚀 给 Claude 装上 27 个「外挂」后，我直接起飞了！
摘要：还在让 Claude 裸奔？兄弟，你亏大了！本文手把手教你给 Claude Code 装上 27 个专业技能插件，从"啥都会一点"变成"啥都精通"。附保姆级安装命令，复制粘贴就能用！
📌 前言：一个悲伤的故事
上周，我让 Claude 帮我写个爬虫。
Claude 说："好的，我来写一个 requests + BeautifulSoup 的爬虫..."
我：？？？兄弟，现在都 2026 年了，你还用这么原始的方式？
Claude：？？？那你想用啥？
我：Firecrawl 啊！一行命令搞定！
Claude：...我不会。
那一刻，我意识到：Claude 虽然聪明，但它缺的不是智商，是「装备」！
就像打游戏一样，你操作再好，裸装出门也是被虐的命。Claude 也一样，不装插件就是个"啥都会一点，但啥都不精通"的普通选手。
于是，我花了一天时间，给 Claude 装上了 27 个技能插件。现在？嘿嘿，直接起飞！🚀
🎯 什么是 Skills？给 Claude 装 App
专业解释（装逼版）
Skills（技能） 是 Claude Code 生态系统中的模块化知识包，用于扩展 AI Agent 的专业化能力。每个 Skill 包含：
- 🧠 领域知识：最佳实践、设计模式、API 文档
- 📋 工作流程：标准化的执行步骤
- 🔌 工具集成：外部服务的 API 接口
- 📝 代码模板：可复用的代码片段
通俗解释（人话版）
想象你有一个超级聪明的助手（Claude），它什么都会一点，但不是每个领域都精通。
Skills 就像是给这个助手装上的「专业插件」：
| 装之前 | 装之后 |
|---|---|
| "我大概知道怎么做网页" | "我精通 React、Next.js，知道 70 条性能优化规则" |
| "我可以帮你搜网页" | "我用 Firecrawl 精准抓取、解析、交互任何网页" |
| "我试试帮你设计" | "我用设计哲学创作博物馆级的艺术作品" |
生活类比：
- 📱 手机 = Claude（基础能力）
- 📦 App = Skills（专业插件）
- 🛒 应用商店 =
npx skills（装插件的地方）
就像你给手机装了「相机 App」就能拍照、装了「地图 App」就能导航一样，给 Claude 装上不同的 Skills，它就能在对应领域变得更强！
📦 27 个技能全家桶
我整理了一份 Claude Code 技能全家桶，共 27 个，分为 5 大类：
🎨 示例技能（4 个）- 艺术家模式
| 技能名 | 干啥用的 | 安装量 |
|---|---|---|
canvas-design | 创建海报、艺术品、设计稿 | 65.8K |
theme-factory | 给文档/PPT 换主题皮肤 | 51.6K |
web-artifacts-builder | 搭建复杂的 Web 组件 | 57.8K |
webapp-testing | 用 Playwright 测试网页 | 85.9K |
💡 一句话总结：装上这 4 个，Claude 就是你的私人设计师 + 测试工程师！
🔥 Firecrawl 技能（13 个）- 爬虫全家桶
| 技能名 | 干啥用的 | 安装量 |
|---|---|---|
firecrawl | 主入口，统一调用 | 65.4K |
firecrawl-search | 搜索网页，返回 markdown | 50.4K |
firecrawl-scrape | 抓取单个页面 | 50.5K |
firecrawl-crawl | 爬取整个网站 | 49.4K |
firecrawl-map | 列出网站所有 URL | 49.2K |
firecrawl-interact | 点击、填表、登录 | ~49K |
firecrawl-download | 下载整个网站离线版 | ~49K |
firecrawl-parse | 解析抓取的内容 | ~49K |
firecrawl-agent | AI 自主操作网页 | 49.5K |
firecrawl-build-scrape | 集成 /scrape API | 32.5K |
firecrawl-build-search | 集成 /search API | 32.5K |
firecrawl-build-interact | 集成 /interact API | 32.5K |
firecrawl-build-onboarding | 项目初始化引导 | 32.5K |
💡 一句话总结：装上这 13 个，Claude 就是你的爬虫专家！从此告别 requests + BeautifulSoup 的原始时代！
🎨 前端设计技能（3 个）- UI 大师
| 技能名 | 干啥用的 | 安装量 |
|---|---|---|
frontend-design | 创建生产级前端界面 | 489.4K |
shadcn | 管理 shadcn 组件 | 170.5K |
web-design-guidelines | 审查 UI 代码规范 | 359.2K |
💡 一句话总结：装上这 3 个，Claude 就是你的 UI 设计师！再也不用担心写出"AI 味"的界面了！
⚛️ React/Next.js 技能（3 个）- Vercel 官方出品
| 技能名 | 干啥用的 | 安装量 |
|---|---|---|
vercel-react-best-practices | 70 条性能优化规则 | 443.9K |
vercel-composition-patterns | React 组合模式 | 196K |
vercel-react-native-skills | React Native 最佳实践 | 131.9K |
💡 一句话总结：装上这 3 个，Claude 就是你的 React 架构师！Vercel 官方出品，必属精品！
🔧 通用工具技能（4 个）- 效率神器
| 技能名 | 干啥用的 | 安装量 |
|---|---|---|
find-skills | 技能商店，找插件用的 | 1.8M |
requesting-code-review | 代码审查 | 109.9K |
daily-report | 生成日报 | 自定义 |
find-docs | 查找技术文档 | 2.7K |
💡 一句话总结：装上这 4 个，Claude 就是你的效率助手！找文档、写日报、代码审查，一键搞定！
🚀 保姆级安装教程
方法一：一键安装（懒人必备）
如果你想一次性装完所有 27 个技能，复制下面的命令，粘贴到终端，回车，搞定！
# 一键安装所有技能（全局安装）
npx skills add anthropics/skills@canvas-design -g -y && \
npx skills add anthropics/skills@theme-factory -g -y && \
npx skills add anthropics/skills@web-artifacts-builder -g -y && \
npx skills add anthropics/skills@webapp-testing -g -y && \
npx skills add firecrawl/cli@firecrawl -g -y && \
npx skills add firecrawl/cli@firecrawl-scrape -g -y && \
npx skills add firecrawl/cli@firecrawl-search -g -y && \
npx skills add firecrawl/cli@firecrawl-agent -g -y && \
npx skills add firecrawl/cli@firecrawl-crawl -g -y && \
npx skills add firecrawl/cli@firecrawl-map -g -y && \
npx skills add firecrawl/cli@firecrawl-interact -g -y && \
npx skills add firecrawl/cli@firecrawl-download -g -y && \
npx skills add firecrawl/cli@firecrawl-parse -g -y && \
npx skills add firecrawl/skills@firecrawl-build-scrape -g -y && \
npx skills add firecrawl/skills@firecrawl-build-search -g -y && \
npx skills add firecrawl/skills@firecrawl-build-interact -g -y && \
npx skills add firecrawl/skills@firecrawl-build-onboarding -g -y && \
npx skills add anthropics/skills@frontend-design -g -y && \
npx skills add shadcn/ui@shadcn -g -y && \
npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y && \
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y && \
npx skills add vercel-labs/agent-skills@vercel-composition-patterns -g -y && \
npx skills add vercel-labs/agent-skills@vercel-react-native-skills -g -y && \
npx skills add vercel-labs/skills@find-skills -g -y && \
npx skills add obra/superpowers@requesting-code-review -g -y && \
npx skills add upstash/context7@find-docs -g -y
⚠️ 注意：
-g表示全局安装（所有项目可用），-y表示跳过确认提示。
方法二：分批安装（稳妥派）
第一批：必备技能（先装这 5 个，稳如老狗）
# 1. 技能商店 - 必须第一个装，1.8M 安装量！
npx skills add vercel-labs/skills@find-skills -g -y
# 2. 前端设计 - 489K 安装量，最常用
npx skills add anthropics/skills@frontend-design -g -y
# 3. 文档查找 - 实用工具
npx skills add upstash/context7@find-docs -g -y
# 4. 代码审查 - 提升代码质量
npx skills add obra/superpowers@requesting-code-review -g -y
# 5. Web 测试 - 测试必备
npx skills add anthropics/skills@webapp-testing -g -y
第二批：React 开发者专属（额外 4 个）
# 6. shadcn 组件管理
npx skills add shadcn/ui@shadcn -g -y
# 7. React 最佳实践（Vercel 官方，443K 安装量）
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y
# 8. React 组合模式
npx skills add vercel-labs/agent-skills@vercel-composition-patterns -g -y
# 9. Web 设计规范审查
npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y
第三批：爬虫爱好者专属（额外 5 个）
# 10. Firecrawl 主入口
npx skills add firecrawl/cli@firecrawl -g -y
# 11. 网页搜索
npx skills add firecrawl/cli@firecrawl-search -g -y
# 12. 单页抓取
npx skills add firecrawl/cli@firecrawl-scrape -g -y
# 13. 批量爬取
npx skills add firecrawl/cli@firecrawl-crawl -g -y
# 14. 站点地图
npx skills add firecrawl/cli@firecrawl-map -g -y
方法三：单个安装（按需取用）
# 格式：npx skills add <来源@技能名> -g -y
# 例如：安装 canvas-design
npx skills add anthropics/skills@canvas-design -g -y
# 例如：安装 shadcn
npx skills add shadcn/ui@shadcn -g -y
# 例如：安装 find-skills
npx skills add vercel-labs/skills@find-skills -g -y
✅ 安装后验证
检查是否安装成功
# 查看所有全局技能
npx skills list -g
# 检查特定技能
npx skills list -g | grep firecrawl
测试技能是否工作
在 Claude Code 中试试：
用户：帮我搜索 React 的最新文档
Claude：（应该调用 find-docs 技能）
用户：帮我创建一个海报
Claude：（应该调用 canvas-design 技能）
用户：帮我爬取这个网站的所有页面
Claude：（应该调用 firecrawl-crawl 技能）
🔧 进阶：自己造技能
为什么要自己造？
市面上的技能虽然多，但不一定完全符合你的需求。比如：
- 你们公司有特定的代码规范
- 你们团队有特定的工作流程
- 你有特定的业务逻辑
这时候，自己造一个技能就很有必要了！
造技能就像写说明书
第一步：起个名字
name: my-company-code-review # 技能名称
description: 我们公司的代码审查规范 # 描述
第二步：写说明书
# 代码审查规范
## When to Use
当用户要求代码审查时使用此技能
## Workflow
### Step 1: 检查代码风格
- 变量命名是否符合规范
- 注释是否充分
- 代码格式是否正确
### Step 2: 检查逻辑
- 是否有潜在的 bug
- 性能是否有优化空间
- 安全性是否有问题
### Step 3: 输出报告
- 列出问题清单
- 给出修改建议
第三步：放到正确位置
# 全局技能
~/.claude/skills/my-company-code-review/SKILL.md
# 项目技能
项目根目录/.claude/skills/my-company-code-review/SKILL.md
第四步：测试
在 Claude Code 中触发相关关键词，看看是否调用了你的技能。
快速创建技能
# 使用 CLI 初始化
npx skills init my-skill
# 这会创建 my-skill/SKILL.md 模板文件
# 编辑它，然后放到技能目录
📊 技能安装量排行榜
来看看哪些技能最受欢迎（安装量越高越靠谱）：
| 排名 | 技能名称 | 安装量 | 来源 |
|---|---|---|---|
| 🥇 | find-skills | 1.8M | vercel-labs/skills |
| 🥈 | frontend-design | 489.4K | anthropics/skills |
| 🥉 | vercel-react-best-practices | 443.9K | vercel-labs/agent-skills |
| 4 | web-design-guidelines | 359.2K | vercel-labs/agent-skills |
| 5 | vercel-composition-patterns | 196K | vercel-labs/agent-skills |
| 6 | shadcn | 170.5K | shadcn/ui |
| 7 | vercel-react-native-skills | 131.9K | vercel-labs/agent-skills |
| 8 | requesting-code-review | 109.9K | obra/superpowers |
| 9 | webapp-testing | 85.9K | anthropics/skills |
| 10 | canvas-design | 65.8K | anthropics/skills |
💡 小贴士：优先选择安装量高的技能，更稳定可靠！
❓ 常见问题
Q1: 安装失败怎么办？
# 检查网络连接
ping github.com
# 尝试使用代理
export https_proxy=http://your-proxy:port
# 重试安装
npx skills add <package> -g -y
Q2: 如何更新技能？
# 更新所有技能
npx skills update
# 更新特定技能
npx skills update <skill-name>
# 更新全局技能
npx skills update -g
Q3: 如何删除技能？
# 删除全局技能
npx skills remove <skill-name> -g
Q4: 技能安装在哪里？
- Windows:
C:\Users\<username>\.claude\skills\ - macOS/Linux:
~/.claude/skills/
Q5: 安装源有什么区别？
- 安装量高 → 更稳定、更可靠、社区支持更好
- 官方源（如
anthropics/skills、vercel-labs/agent-skills）→ 质量有保障 - 第三方源 → 功能可能不同，建议先查看安装量
Q6: 技能需要配置吗？
大部分技能不需要配置，安装后即可使用。部分技能（如 Firecrawl）可能需要 API Key：
export FIRECRAWL_API_KEY=your_api_key
💡 总结：给 Claude 装装备的正确姿势
装备清单
| 场景 | 推荐技能 |
|---|---|
| 创建海报/艺术品 | canvas-design |
| 应用主题样式 | theme-factory |
| 构建 Web 组件 | frontend-design, shadcn |
| 测试 Web 应用 | webapp-testing |
| 网页搜索/抓取 | firecrawl-search, firecrawl-scrape |
| 爬取整个网站 | firecrawl-crawl, firecrawl-download |
| React 性能优化 | vercel-react-best-practices |
| React 组件架构 | vercel-composition-patterns |
| React Native | vercel-react-native-skills |
| UI 代码审查 | web-design-guidelines |
| 查找技术文档 | find-docs |
| 发现新技能 | find-skills |
记住这几点
-g全局安装：所有项目都能用-y跳过确认：批量安装更方便- 优先选高安装量：更稳定可靠
- 定期更新：
npx skills update -g
最后
给 Claude 装技能就像给手机装 App：
- 找到技能：
npx skills find <关键词> - 安装技能：
npx skills add <来源@技能名> -g -y - 验证安装：
npx skills list -g - 开始使用：在 Claude Code 中触发相关关键词
从此，Claude 不再是"啥都会一点"的普通选手，而是"啥都精通"的专业团队！ 🚀
📚 更多资源
- 🛒 技能市场：skills.sh/
- 📖 技能文档：
npx skills --help - 💻 官方示例：
~/.claude/skills/或~/.agents/skills/
🎁 彩蛋：一键安装命令（复制即用）
# 新手推荐（5 个核心技能）
npx skills add vercel-labs/skills@find-skills -g -y && \
npx skills add anthropics/skills@frontend-design -g -y && \
npx skills add upstash/context7@find-docs -g -y && \
npx skills add obra/superpowers@requesting-code-review -g -y && \
npx skills add anthropics/skills@webapp-testing -g -y
# React 开发者推荐（额外 4 个）
npx skills add shadcn/ui@shadcn -g -y && \
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y && \
npx skills add vercel-labs/agent-skills@vercel-composition-patterns -g -y && \
npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y
# 爬虫爱好者推荐（额外 5 个）
npx skills add firecrawl/cli@firecrawl -g -y && \
npx skills add firecrawl/cli@firecrawl-search -g -y && \
npx skills add firecrawl/cli@firecrawl-scrape -g -y && \
npx skills add firecrawl/cli@firecrawl-crawl -g -y && \
npx skills add firecrawl/cli@firecrawl-map -g -y
觉得有用？点个赞👍收藏⭐关注👆，下次更新更多 Claude Code 玩法！
关于作者：一个热爱折腾的开发者，专注于 AI 工具和前端开发。
