在 Cursor / Trae / Qoder 中使用 Claude Skills：完整指南（含心得）

之前分享紫色渐变 UI 让人看吐的那篇之后，我收到了不少留言 —— 大家最关心的问题是：

Cursor、Trae、Qoder 能不能用 Claude Skills？怎么用？

答案：能，而且很简单。

核心是借助 OpenSkills 开源项目。

GitHub 项目地址： 🔗 https://github.com/numman-ali/openskills

整个流程只有 四步，5 分钟即可完成。

📌 步骤一：全局安装 OpenSkills

打开终端，输入：

npm i -g openskills

执行一次即可，全局安装。

📌 步骤二：安装 Anthropic 官方 Skills

你可以选择安装到：

  • 当前项目
  • 全局

安装到当前项目：

openskills install anthropics/skills

安装到全局：

openskills install anthropics/skills --global

安装时会自动克隆官方 Skills 仓库，默认全选，也可以 使用空格键选择部分 Skills。

老马这里选择了全部选择：

PS D:\aicode\ai-skills-demo> openskills install anthropics/skills
Installing from: anthropics/skills
Location: project (.claude/skills)

✔ Repository cloned
Found 17 skill(s)

✔ Select skills to install algorithmic-art           59.8KB, brand-guidelines          13.5KB, canvas-design             5.3MB, doc-coauthoring
15.8KB, docx                      1.2MB, frontend-design           14.5KB, internal-comms            22.3KB, mcp-builder               122.4KB, pdf
              64.6KB, pptx                      1.2MB, skill-creator             49.5KB, slack-gif-creator         43.9KB, theme-factory
141.2KB, web-artifacts-builder     45.4KB, webapp-testing            22.4KB, xlsx                      18.6KB, template                  146B
✅ Installed: algorithmic-art
✅ Installed: brand-guidelines
✅ Installed: canvas-design
✅ Installed: doc-coauthoring
✅ Installed: docx
✅ Installed: frontend-design
✅ Installed: internal-comms
✅ Installed: mcp-builder
✅ Installed: pdf
✅ Installed: pptx
✅ Installed: skill-creator
✅ Installed: slack-gif-creator
✅ Installed: theme-factory
✅ Installed: web-artifacts-builder
✅ Installed: webapp-testing
✅ Installed: xlsx
✅ Installed: template

✅ Installation complete: 17 skill(s) installed

Read skill: openskills read <skill-name>
Sync to AGENTS.md: openskills sync

安装成功后，你会在 Cursor、Trae 的项目文件树中看到：

.claude/skills/

如果你想安装非官方 Skills，只需换仓库地址：

openskills install your-org/custom-skills

📌 步骤三：创建 AGENTS.md 并写入 Skills

前两步只是把 Skills 下载到本地，并不能让 Coding Agents 知道如何调用。

要让 Cursor、Trae、Qoder 能发现这些 Skills，必须执行这一部分。

① 在项目根目录创建文件：

AGENTS.md

② 然后运行：

openskills sync

你会再次选择要写入 AGENTS.md 的 Skills。

确认后，系统会把选择的 Skills 写入文档，作为 Coding Agents 的 技能说明清单（等同于能力宣言）。

📌 步骤四：在 Cursor / Trae 中调用 Skills

大部分时候，Skills 会被自动调用。

你也可以手动在 Prompt 中指定：

示例一：

调用 frontend-design skills，用 HTML 开发一个视频剪辑软件的 SaaS 介绍页。

示例二：

调用 frontend-design skills，用 HTML 创建一个现代化个人博客原型（首页 / 文章详情页 / 关于页）。

其它使用方式和 Claude Code 中一致。

技能说明

下面是 17 个 Claude Skills 的简单说明（精炼版），可直接作为技能备注、AGENTS.md 描述或团队文档使用👇

Claude 官方 Skills 简单说明（17 个）

1. algorithmic-art

生成算法艺术、程序化图形、可视化图像等创意内容的技能（偏代码生成图形）。

2. brand-guidelines

生成品牌规范，如品牌手册、色板、字体系统、Logo 使用规范等。

3. canvas-design

在 HTML <canvas> 中绘制图形、动画、交互组件的技能。

4. doc-coauthoring

协作撰写文档的技能，用于结构化写作、长文协同编辑、内容增补。

5. docx

生成 .docx 文档（Word 文件），适合导出报告、合同、方案。

6. frontend-design

用于生成前端 UI 页面结构、HTML/CSS/JS 原型，偏设计驱动前端开发。

7. internal-comms

生成团队内部沟通内容，如周报、公告、变更通知、内部邮件等。

8. mcp-builder

快速创建 MCP（Model Context Protocol）服务或客户端的技能。

9. pdf

生成 PDF 文件，包括排版、导出、文档自动格式化。

10. pptx

生成 PowerPoint 演示文稿，支持自动排版、风格化主题。

11. skill-creator

用于创建新的 Claude Skills 的核心 Meta-Skill，能够自动生成 SKILL.md 和目录结构。

12. slack-gif-creator

创建可用于 Slack 的表情、GIF 动图、趣味图片等。

13. theme-factory

生成主题（Theme），包括 UI 主题、色彩系统、Design Tokens 等。

14. web-artifacts-builder

生成网页制品，如 HTML 片段、组件、静态页面、嵌入式内容。

15. webapp-testing

自动化 Web 应用测试，包括测试用例、脚本、流程验证等。

16. xlsx

生成 Excel（.xlsx）文件，用于数据报表、表格内容导出。

17. template

一个基础模板 Skill，用于创建可复用的结构化内容骨架。

是什么？

下面我用深入但通俗的方式，给你一个“真正能看懂、能用、能解释给别人”的 Claude Skills（简称 Skills）详解 + 原理分析。

什么是 Claude Skills？

一句话概括：

Claude Skills 是 Anthropic 推出的“可编排 AI 助手技能体系”，让模型能像调用插件一样执行预定义的能力。

它的目标类似：

  • GPT 的 GPTs
  • OpenAI 的 Assistants Tools
  • 阿里的 通义插件
  • 字节的 豆包Plugins
  • VSCode 的 Copilot Skills

但 Claude Skills 更轻量、文本化、声明式，不需要复杂的编程，也不依赖部署 API 服务。

Skills 用来做什么？

它用来：

  • 给 AI “安装技能”
  • 扩展 AI 的知识范围

  • 帮 AI 进行特定任务如：

    • 写文档模板
    • 生成 PPT / PDF
    • 格式化设计文档
    • 画图 / 生成 Markdown
    • 内部规范自动执行业务流程
  • 把复杂工作流程“固化”为可复用的技能

它本质上是：

Claude Skills 的本质

一个让大模型“加载额外上下文 + 指令”的系统级增强能力。

也就是说：

  • AI 本身什么都能做
  • Skills 只是告诉 AI 怎么做、按什么规范做、不能做什么

你可以理解为：

“把你希望 AI 遵守的一套长指令文本化并保存，本质就是一个长期激活的 system prompt 模块化机制。”

🧩 Skills 的结构（核心非常简单）

一个 Skill 一般包含：

✔ Skill 名称

比如：

  • algorithmic-art
  • doc-coauthoring
  • slack-gif-creator
  • theme-factory
  • frontend-design
  • web-art
  • mcp-builder
  • canvas-design

✔ Skill 的说明（Text Prompt 模块）

例如：

You are a professional PPT designer. When user asks
for slides, always generate with a 4-step outline...

✔（可选）指令模板和格式模板

例如模板：

Slide Title:
Bullet 1:
Bullet 2:
Design Notes:

✔（可选）约束规则

例如：

Never output code comments.
Always return pure JSON.

✔（可选）子技能（类似插件内部模块）

Skills 与 GPTs 或 Tools 有什么区别？

功能 Claude Skills OpenAI GPTs Tools/Functions
存储形式 纯文本 prompt 模块 自定义GPT，结构复杂 代码函数/插件
执行 模型自动遵循 模型遵循 模型主动调用函数
AI 调用外部系统 ❌ 不行（目前） ⚠️ 限制 ✔ 完全可行
复杂操作流程 ✔ 擅长 ✔ ⚠️ 要写函数
适配 IDE/编辑器 强 中 函数必须写代码

Skills 更像：

“给大模型装一套人格模板 + 工作流模板”。

Skills 的底层实现原理（核心原理讲透）

Claude Skills 并非特殊 API，它的实现原理是：

1. 系统级 Prompt 注入（System Prompt Injection）

每个 Skill 会作为 System Prompt 的一个片段 并在对话开始前由系统自动插入 LLM 的上下文。

也就是说：

当你执行：

Enable doc-coauthoring

系统会做：

[system]
<doc-coauthoring directives>

[user]
请给我写一篇设计文档

这就像：

  • 给 LLM 装插件
  • 但插件内容是纯文本规范

2. 多技能合并（Prompt Overlay Composition）

如果你装了多个技能：

algorithmic-art
doc-coauthoring
frontend-design

系统会生成一个融合 prompt：

[system]
<<<Skill: algorithmic-art>>>
... 内容

<<<Skill: doc-coauthoring>>>
... 内容

<<<Skill: frontend-design>>>
... 内容

大模型得到“所有技能合并后的指令集合”。 这是 技能可叠加 的核心原因。

3. 上下文优先级控制（Skill Prompt Precedence）

Claude 会在内部做优先级处理：

  • 技能指令 > 用户指令
  • 用户显式 override > 技能指令
  • 冲突技能 → 自动调和处理（LLM 生成式解析）

比如你安装了：

  • PPT 设计
  • Markdown 文档生成

模型会根据你输入内容自动选择对应技能的行为。

4. 语义路由（Semantic Routing）

Claude 会自动判断：

  • 用户需求属于哪种技能
  • 是否需要激活技能内部的某个 section

类似 IDE 的 Copilot context routing。

例如：

你输入：

帮我生成一个登录页的 UI 草图

模型会自动倾向：

  • frontend-design
  • canvas-design

而不是：

  • algorithmic-art
  • doc-coauthoring

5. 非代码插件，而是 Prompt 插件

Claude Skills 的设计理念：

“不让用户写代码，只需声明文本规范。”

这比 GPT plugins / OpenAI function calling 更轻量，也更灵活。

Skills 能做什么强大的事情？（真实能力）

✔ 将复杂任务固化为“模板能力”

例如：

  • 公司内部的 PRD 模板
  • 架构设计文档模板
  • 报告内容模板
  • 运维 SOP 流程模板
  • DevOps 流程脚本自动生成

你给技能写好“标准流程指令”，模型永远会按要求执行。

帮助 IDE / 编辑器实现 AI 智能化

这是 Skills 在 VSCode、Trae、Qoder 里的真正价值：

  • 给 AI 装“前端设计规范”
  • 给 AI 装“团队编码规范”
  • 给 AI 装“代码生成风格模板”
  • 给 AI 装“项目 CLI 检查流程”

你在 Trae/Qoder 中安装了 Skills，就是让 AI：

→ 始终按照你的技术规范写代码 → 始终遵守你的 UI/UX 风格 → 始终遵循你的架构约束

Claude Skills 的秘密武器：Prompt 分层（Prompt Layering）

Claude Skills 实际是一个三层 Prompt 系统：

Layer 内容 来源
System Layer 固定技能指令 各个 Skills
Assistant Layer 模型内部行为策略 Claude 内建
User Layer 你的输入 用户内容

这就是为什么 Skills 这么稳定：

  • 不会被“骗”
  • 不会忽略规范
  • 不会偏离模板
  • 多技能组合不会失控

因为每一层都有明确的职责。

为什么现在所有 IDE 都开始集成 Skills？

因为它让 AI：

  • 可控
  • 可复用
  • 可规范化
  • 可继承团队知识

比如你：

“希望前端、后端、测试、文档全都能被 AI 自动遵循既定规范”

Skills 是最适合这个场景的。

总结一句话

Claude Skills = 模块化系统级提示词（系统 Prompt 模块），用于扩展大模型的专业能力和规范性，本质是可组合、可复用的 Prompt 插件系统。

与直接可以复用的模块的区别

你这个问题非常关键，也非常典型，本质上是在问：

“我已经写了一段能复用的登录代码（或逻辑模块），那再写一个登录 Skill 有什么意义？Skill 到底解决什么问题？”

我直接给你讲透：

✅ 先分清两件事：

1. 可复用的“登录代码”

→ 这是程序层面的复用 → 它解决的是 系统运行时 的登录逻辑 → 由你的系统、前端代码、后端服务来执行

例如：

  • login(username, password) 函数
  • 一个可复用的 LoginForm.vue
  • 一个后端 JWT 登录接口

这是程序执行的逻辑。

2. Claude 的“登录 Skill”

→ 这是 AI 层面的能力 → 它解决的是 AI 怎么写登录代码、解释登录流程、生成登录页面、做登录文档 → Skill 的本质是 “指导 AI 用统一规范帮你生产内容”

例如：

  • 自动生成登录 API 文档
  • 自动生成你的前端 Login 页
  • 自动生成你的业务流程图
  • 自动生成你的测试用例
  • 指导 AI 按某种你规定的安全规范写登录逻辑
  • 按你公司统一方式生成登录模块的代码结构、接口说明、mock数据等等

Skill 是让 AI “按你的标准”去生成与登录相关的一切内容。 不是执行登录本身。

🔥 用最简单的比喻讲透

🔧 登录代码

是“真正的螺丝刀”。 系统执行它。

🧠 登录 Skill

是“告诉别人如何正确使用螺丝刀的说明书”。 AI 执行它。

🔍 🔥 它们的核心区别（用一句话对比）

项目 登录代码 登录 Skill
目的 实际执行登录逻辑 让 AI 按规范去写/生成/审查登录相关的东西
使用者 系统 / 浏览器 / 服务器 Claude / AI
本质 可运行代码 系统级 Prompt（文本规范）
复用方式 import / 调用 AI 自动加载长期规范
改变什么 你的程序行为 AI 的思考方式、输出风格与内容
解决问题 “系统如何登录” “AI 如何帮助我写关于登录的一切内容”

✨ 具体例子：你实现了登录代码 vs 写了一个登录 Skill

假设你已经有一套登录模块：

  • 登录 API ：POST /api/login
  • 前端组件：LoginForm.vue
  • 密码加密方式：SHA-256 + salt
  • 响应结构：统一格式 {code, message, data}
  • 登录失败 3 次锁定用户 10 分钟
  • 特定的错误码规范

你希望 AI 在写登录代码或文档时：

  • 必须使用你的接口格式
  • 必须引用你的字段
  • 必须使用你的密码加密规则
  • 必须使用你的 UI 组件风格
  • 不能乱写错误码
  • 不能生成与业务不一致的逻辑
  • 必须自动生成单测、接口文档、mock 数据

这时“登录 Skill”就派上用场。

🌟 登录 Skill 能做的，是普通代码做不到的

✔ 1. 强制 AI 永远按你公司的登录规则写代码

比如 AI 不会随便写个：

axios.post('/login')

而是会按你 Skill 的规范自动写：

await api.post('/api/login', {
  username,
  password: sha256(password + SALT)
})

✔ 2. 强制 AI 使用你的 UI 规范

比如自动生成你的统一 UI：

  • 统一按钮组件
  • 统一响应结构
  • 统一错误提示结构
  • 统一登录页布局

✔ 3. 自动生成你的业务文档模板

Skill 可以规定生成登录模块的：

  • PRD 模板
  • API 文档模板
  • 流程图模板
  • 时序图模板
  • ERD 结构
  • 前后端联调文档

这些都是代码本身做不到的。

✔ 4. 自动生成测试用例

Skill 可规定：

  • 所有接口必须包含正反例
  • 必须包含异常流测试
  • 必须符合你自动化平台的 DSL

代码永远不会自动生成这些，但 AI 会因为 Skill 而按规范输出。

✔ 5. 未来你换语言/框架时，Skill 让 AI 自动迁移

例如：

登录模块 Java → Go → Node 登录页面 Vue → React → Svelte

AI 完全可以按 Skill 生成任何语言的实现，而“代码复用”无法做到这一点。

🧨 最终总结（最关键一句话）

✔ 登录代码 = 系统执行的登录逻辑 ✔ 登录 Skill = 让 AI 按你的统一规范生成“关于登录的所有产出物”（代码、文档、测试、架构说明）

参考资料

https://mp.weixin.qq.com/s?__biz=MzIyMzk3MTEwNQ==&mid=2247487688&idx=1&sn=a28f87c485546b471687d1a57ab7641e&chksm=e99f542c87074d5b182b2dccc099d4b4b1cb2dfacad4a7533735f17755a193954ca400464b1d&mpshare=1&scene=1&srcid=1210OEq5wqOfJyAvs284AImB&sharer_shareinfo=8291fc81216a4acc39aed8d28e78c235&sharer_shareinfo_first=8291fc81216a4acc39aed8d28e78c235#rd