Agent Skill 推出以来，各个 AI 编程工具都已增加对它的支持，这里以 Trea 为示例，了解如何使用已有的成熟 Skill ，以及自己按实际的需求创建 Skill 。

Skill 概念

在 AI 编程工具中，Skill（技能）是一种可复用、模块化的 AI 能力增强包。它通常由以下内容组成：

• 领域规则（Best Practices）
• 结构化指令（约束 AI 的行为）
• 示例与模板
• 设计 / 编码 / 业务知识库
• 有时还包含脚本或 CLI 工具

可以把 Skill 理解为：“为 AI 预先安装的一套专业能力插件”，通过 Skill 可避免重复写复杂 Prompt ，增加项目的一致性和专业性。

Claude Code skills

https://github.com/anthropics/skills

Claude Code 中自带的 skills 已开源，可以安装到 Trae 中使用。

ui-ux-pro-max-skill 使用

ui-ux-pro-max-skill 提供设计智能，用于构建跨多个平台和框架的专业 UI/UX。

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

它让 AI 在 UI / UX 相关任务中，表现得像一个专业设计师。其内置了：

• 50+ UI 设计风格（SaaS、Dashboard、Landing Page 等）
• 90+ 套配色方案
• 字体搭配建议
• UX 可用性与可访问性规则
• 不同技术栈（Web / Flutter / React Native 等）的 UI 适配建议

如果启用了这个 Skill，AI 不再是“凭感觉生成”，而是在自带的专业数据库与规则中自动选择合适的 UI 风格，给出合理的布局结构，推荐成熟的配色方案，输出更可落地的方案。

安装，以 Trea 为例：

• 自动安装，可通过全局 npm install -g uipro-cli 后，在项目目录使用 uipro init --ai trae 安装
• 将 .trae/skills/ui-ux-pro-max/ 和 .shared/ui-ux-pro-max/ 的内容安装到项目中

Trae 中需要使用 SOLO 模式才可以使用 Skill，使用场景示例：

• 输入 “为我的 SaaS 登录页生成 UI 设计草案”，AI 会使用 Skill 内置的 UI 模式、色彩方案
• 输入 “生成 Flutter 风格的主页布局”，Skill 会返回针对该栈优化的建议
• 在设计评审阶段自动输出配色对比、布局替代方案等

可以更具体一点，列出需要的具体页面，主色、整体配色等需求，不断完善提示词，获得一个更好的生成效果。

创建 Skill

最小 Skill 只需要 1 个文件。

my-skill/
└── skill.md

Skill.md 的最小结构：

# Skill: XXX

## 目标（Goal）
你在什么情况下使用这个 Skill？
AI 需要帮你解决什么问题？

## 适用范围（When to Use）
什么时候用它，什么时候不要用。

## 核心规则（Rules）
AI 必须遵守的硬性规则（越具体越好）。

## 工作步骤（Steps）
AI 应该如何一步一步思考和输出。

## 输出格式（Output Format）
你希望 AI 用什么结构返回结果。

## 示例（Examples）
1～2 个示例就够。

Skill 中，应该写约束，不要写愿望，限定技术栈、限定输出结构、限定可用方案。

如一个创建前端组件的 Skill：

# Skill: Frontend Component Builder

## 目标（Goal）
帮助我生成可直接使用的 React 组件。

## 适用范围（When to Use）
- 创建新组件
- 重构 UI
- 不用于业务逻辑或后端代码

## 核心规则（Rules）
- 使用 React Function Component
- 使用 TypeScript
- 不使用 class component
- 样式使用 CSS Module 或 Tailwind（二选一）
- 不引入不必要的第三方库

## 工作步骤（Steps）
1. 理解组件用途
2. 设计 props 类型
3. 编写组件代码
4. 给出使用示例

## 输出格式（Output Format）
- 组件代码
- Props 类型说明
- 使用示例

## 示例（Examples）
输入：一个按钮组件  
输出：Button.tsx + 示例用法