1. 什么是 AI Skills？
1.1 基本概念
“Skills” 这个概念最早由 Anthropic 公司提出，作为其大模型 Claude 的一种能力扩展机制。简单来说，它允许用户为 Claude 添加自定义的功能和工具。随着这套做法越来越成熟，并被社区广泛接受，Skills 如今已成为大多数 Agent 开发工具和 IDE 都支持的一种标准扩展规范。
1.2 核心特点
专业化：每个技能专注于特定领域的任务
模块化：技能可以独立开发和使用
可扩展性：可以根据需要添加新的技能
智能匹配：AI系统会根据用户需求自动选择合适的技能
1.3 与其他AI能力的区别
Agent： 是面向目标的执行者。你给它一个目标（比如“我要买商品”），它就会自主规划流程、选择工具去完成，不再受限于传统的模块化开发思维。
MCP ： 是 AI 用来调用外部能力的通讯器。它就像传统项目中的第三方 API，让 Agent 能够接入并使用支付、识别等外部服务。
Skills： 是可供重复使用的能力包。无论是“发送邮件”还是“文件上传”，这些成熟的功能都可以被封装成 Skill，让 Agent 和 MCP 能像使用工具一样直接调用，避免重复造轮子。
2. 如何创建 AI Skills？
2.1 skills的文件结构
your-skill/
├── SKILL.md # 必需：智能体的核心指令
├── examples/ # 可选：输入/输出示例
│ ├── input.md # 示例输入
│ └── output.md # 示例输出
├── templates/ # 可选：可复用的模板
│ └── component.tsx # 模板文件示例
└── resources/ # 可选：参考文件、运行脚本或素材
└── style-guide.md # 样式指南示例
目录和文件说明
1. 必需文件
SKILL.md ：技能的核心指令文件，包含技能的定义、功能描述、使用场景和详细说明。这是每个技能必须具备的文件，智能体通过它来理解和执行技能。
2. 可选目录
examples/ ：存放输入/输出示例，帮助理解技能的使用方法和预期效果
- input.md ：示例输入内容
- output.md ：对应示例输入的预期输出内容
templates/ ：存放可复用的模板文件，如组件代码、文档模板等
- component.vue ：vue组件模板示例（具体文件根据技能类型而定）
resources/ ：存放参考文件、运行脚本或其他素材
- style-guide.md ：样式指南示例（具体文件根据技能需求而定）
2.2 创建Skills
2.2.1 手动创建
- 创建目录结构
# TRAE
.trae/skills/<skills-name>
# Cursor
.cursor/skills/<skills-name>
2. 编写 SKILL.md 文件
---
name: "<skill-name>"
description: "<技能描述，包含功能和调用时机，200字符以内>"
---
# <技能标题>
## 技能简介
<详细介绍技能的功能和用途>
## 使用场景
<列出适用的场景>
## 功能特点
<列出技能的核心功能>
## 使用指南
<提供使用方法和步骤>
## 示例
<提供使用示例>
2.2.2 快捷创建
Trae为例
cursor为例
2.2.3 AI自动创建
直接把你的要求告诉AI，让AI帮你创建，如下图以Trae为例
2.2.4 使用第三方开源Skills
1. Anthropic官方Skills市场
2. GitHub社区生态市场
3. ObraSuperpowers社区市场
4、awesome-claude-skills 社区市场
3. 如何使用 AI Skills？
3.1 点名使用
可以明确告诉AI你要用哪个skills，以/ + skills的名字的方式，如下图
3.2 AI自动识别
正常给AI提问，AI会根据提问的内容自动识别调用某些skills，如下图
当我提问帮我检查代码时，AI自动调用刚刚创建的code-checker skills
4. 前端方向如何学习和运用 AI Skills？
4.1 前端相关的 AI Skills
1. 代码开发技能
功能：编写、调试和优化前端代码，支持HTML、CSS、JavaScript等前端技术
用途：
-
创建响应式网页布局
-
开发交互式前端组件
-
实现前端动画效果
-
调试和修复代码问题
2. UI/UX设计技能
功能：提供专业的UI/UX设计建议和界面设计方案
用途：
-
设计美观实用的用户界面
-
优化用户体验和交互流程
-
创建响应式设计方案
-
提供设计系统和组件库建议
3. 前端框架技能
功能：提供特定前端框架的专业支持
用途：
-
开发React/Vue/Angular等框架应用
-
创建和优化框架组件
-
解决框架特定的问题
-
实现框架的最佳实践
4. 前端性能优化技能
功能：分析和优化前端应用性能
用途：
-
优化页面加载速度
-
减少JavaScript执行时间
-
优化CSS和图片资源
-
提高前端应用的响应速度
5. 文档生成技能
功能：自动生成前端相关的文档和教程
用途：
-
创建前端技术文档
-
编写API使用指南
-
生成组件库文档
-
整理前端学习资料和教程
4.2 前端开发中的实际应用
应用1：快速原型
-
使用技能：代码开发技能 + UI/UX设计技能
-
应用场景：为客户创建产品原型、测试设计概念
-
优势：大幅减少原型开发时间，快速验证设计方案
应用2：组件库开发
-
使用技能：前端框架技能 + 代码开发技能
-
应用场景：创建可复用的前端组件库
-
优势：标准化组件设计，提高开发效率和代码质量
应用3：代码审查和优化
-
使用技能：代码开发技能
-
应用场景：审查现有代码、识别潜在问题、优化代码质量
-
优势：发现开发者可能忽略的问题，提供专业的优化建议
应用4：学习和知识获取
-
使用技能：文档生成技能
-
应用场景：学习新的前端技术、整理学习笔记
-
优势：快速获取结构化的知识内容，加速学习过程
5. 使用ui-ux-pro-max Skills示例
全局安装
npm i -g uipro-cli
安装对应IDE的Skills，trae为例
uipro init --ai trae
# Install for your AI assistant
uipro init --ai claude # Claude Code
uipro init --ai cursor # Cursor
uipro init --ai windsurf # Windsurf
uipro init --ai antigravity # Antigravity
uipro init --ai copilot # GitHub Copilot
uipro init --ai kiro # Kiro
uipro init --ai codex # Codex CLI
uipro init --ai qoder # Qoder
uipro init --ai roocode # Roo Code
uipro init --ai gemini # Gemini CLI
uipro init --ai trae # Trae
uipro init --ai opencode # OpenCode
uipro init --ai continue # Continue
uipro init --ai codebuddy # CodeBuddy
uipro init --ai all # All assistants
调用 ui-ux-pro-max Skills
效果展示
如果我们不用skills， 直接让AI开发一个上图的页面，我们需要很多的提示词描述，比如布局、比如配色等等，甚至还得多次描述多次修正才能达到一个比较好看的效果。
6. 总结
AI Skills 正在改变我们开发的方式，为开发者提供了强大的智能辅助工具。
作为开发者，我们应该：
了解AI Skills的基本概念和使用方法
掌握创建自定义技能的能力
合理使用AI Skills提高开发效率
持续学习，适应技术发展趋势
在AI技术不断发展的今天，AI Skills 不仅是一种工具，更是开发者的合作伙伴。通过与AI Skills的协作，我们可以不限于前端or后端，我们就是全栈，再配合更多的AI 能力，甚至一个人就能完成一个项目。
