---
title: "03-使用Codex安装和管理Skills"
created: 2026-05-15
aliases:
  - 使用Codex安装和管理Skills
tags:
  - 项目
---
# 使用Codex安装和管理Skills

前面几篇我们从原理层面把Agent Skills讲透了，这一篇进入实操环节——以一个真实的开源Skill为例，演示如何在Codex中完成安装和管理。

我们选用的案例是 **UI UX Pro Max**，这是目前社区里比较受欢迎的一个设计类Skill，非常适合用来演示完整的安装流程。

## UI UX Pro Max 是什么

UI UX Pro Max 是一个专注于前端界面设计的Agent Skill，它把专业的UI/UX设计知识封装成了智能体可调用的能力模块。

**它能帮你做什么：**

- **配色方案推荐**：根据产品定位和品牌调性，推荐合适的主色、辅助色、中性色组合
- **组件设计建议**：针对按钮、表单、卡片等常见组件，给出符合设计规范的样式建议
- **布局优化指导**：分析页面结构，提供栅格布局、间距、对齐等方面的改进意见
- **响应式适配方案**：为不同屏幕尺寸提供自适应设计思路
- **设计系统对接**：可以参照Tailwind、Ant Design、Material Design等主流设计系统的规范

**它的核心价值：**

对于没有专业设计背景的开发者来说，UI UX Pro Max 相当于给你配了一个"随叫随到的设计顾问"。你在写前端代码的时候，随时可以让它帮你审视界面、给出优化建议，省去了反复找设计师沟通的来回。

> 为什么选这个Skill做演示:
>
> - 它是开源的，有完整的GitHub仓库可以查看源码
> - 提供了官方的CLI安装工具，流程标准化程度高
> - 它的目录结构是典型的Skill规范，适合用来理解Skill的组成

## 官方资源

![[2-Learning/05-项目/08-企业级项目深读/01-SuperAgent/06-系统讲解AI相关技术/07-Skills详细解析/assets/lvlIQ5VpASj9XdO6EmYVlTXjl870-d9e4352a.png]]

## 安装步骤

UI UX Pro Max 提供了一个名为 `uipro-cli` 的命令行工具，可以一键完成安装。整个流程非常简单。

### 第一步：安装CLI工具

首先需要全局安装 `uipro-cli` 命令行工具：

```bash
npm install -g uipro-cli
```

安装完成后，可以运行 `uipro --help` 确认安装成功。

![[2-Learning/05-项目/08-企业级项目深读/01-SuperAgent/06-系统讲解AI相关技术/07-Skills详细解析/assets/Flg6x9Wl3zfjOFyh-5pQ7wRsZcHb-f9375a25.png]]

### 第二步：进入项目目录

切换到你想要安装Skill的项目根目录：

```bash
 cd /path/to/your/project
```

### 第三步：执行安装命令

运行初始化命令，指定目标AI工具为Codex：

```text
 uipro init --ai codex
```

这条命令会在当前项目目录下创建 `.codex/skills/ui-ux-pro-max/` 目录，并下载Skill的完整文件。

![[2-Learning/05-项目/08-企业级项目深读/01-SuperAgent/06-系统讲解AI相关技术/07-Skills详细解析/assets/FndTAlyeJGT9V3epON25Lrkmomjz-adae7664.png]]

### 第四步（可选）：全局安装

如果你希望这个Skill在所有项目中都可用，可以使用 `--global` 参数进行全局安装：

```text
uipro init --ai codex --global
```

全局安装会将Skill放置到 `~/.codex/skills/` 目录下，对当前用户的所有项目生效。

- **项目级安装**：Skill只在当前项目生效，适合项目有特定设计规范的场景
- **全局安装**：Skill对所有项目生效，适合通用型的工具类Skill

## 安装后的目录结构

安装完成后，我们来看一下实际生成的目录结构：

![[2-Learning/05-项目/08-企业级项目深读/01-SuperAgent/06-系统讲解AI相关技术/07-Skills详细解析/assets/FtakK_AqE5CINSmTGqKcR4y3D7oH-aabd8844.png]]

```text
.codex/
└── skills/
    └── ui-ux-pro-max/
        ├── SKILL.md           # 核心入口文件
        ├── data/              # 设计知识库数据
        │   ├── colors.csv     # 配色方案数据
        │   ├── typography.csv # 字体排版数据
        │   ├── icons.csv      # 图标规范数据
        │   ├── styles.csv     # 样式规范数据
        │   └── stacks/        # 各技术栈的适配文件
        │       ├── react.csv
        │       ├── vue.csv
        │       └── ...
        └── scripts/           # 辅助脚本
            ├── core.py        # 核心处理逻辑
            ├── design_system.py
            └── search.py      # 知识库检索脚本
```

**结构解读：**

| 目录/文件 | 作用说明 |
| --- | --- |
| `SKILL.md` | Skill的入口文件，包含元数据和执行指令 |
| `data/` | 相当于references目录，存放设计规范的结构化数据 |
| `data/*.csv` | 各类设计知识的数据文件，脚本会从中检索 |
| `data/stacks/` | 针对不同前端技术栈的适配配置 |
| `scripts/` | Python脚本，负责从data目录检索信息并返回给智能体 |

你会发现，这个Skill的结构完美对应了我们前几篇讲的内容：

- **SKILL.md** 是入口，包含Frontmatter和Instruction
- **data/** 就是reference的角色，存放参考数据
- **scripts/** 负责从大量数据中精准检索，避免智能体直接读取所有CSV文件

## 验证安装是否成功

安装完成后，启动Codex，在对话中尝试调用这个Skill：

```text
帮我设计一个电商产品详情页的配色方案，要求现代简约风格
```

如果Skill安装成功，Codex会自动识别到这是一个UI设计相关的任务，激活UI UX Pro Max技能，然后给出专业的配色建议。

![[2-Learning/05-项目/08-企业级项目深读/01-SuperAgent/06-系统讲解AI相关技术/07-Skills详细解析/assets/FhJ_qJ_9WTAstMBYh-UX1WqEaOr--5dbec2ee.png]]

## 其他常用命令

`uipro-cli` 还提供了一些日常管理命令：

### 查看可用版本

```text
uipro versions
```

### 更新到最新版本

```text
uipro update
```

### 离线安装（使用本地缓存）

```text
 uipro init --offline
```

### 卸载Skill

```text
# 自动检测平台并卸载
uipro uninstall

# 指定平台卸载
uipro uninstall --ai codex

# 从全局安装位置卸载
uipro uninstall --global
```

## 手动安装方式

如果你不想使用CLI工具，也可以手动安装：

- 克隆GitHub仓库到本地
- 将 `ui-ux-pro-max` 目录复制到项目的 `.codex/skills/` 目录下
- 重启Codex即可生效

手动安装适合需要对Skill进行定制化修改的场景。

## 本篇小结

这一篇我们以UI UX Pro Max为例，完整走了一遍Skill的安装流程：

- **了解Skill的能力定位** — 知道它能帮你解决什么问题
- **安装CLI工具** — 使用npm全局安装uipro-cli
- **执行安装命令** — 可选项目级或全局安装
- **查看目录结构** — 理解Skill的文件组织方式
- **验证安装效果** — 在Codex中实际调用测试

---

**企业级项目导航**：⬅️ [[02-Skills目录结构全景图|02-Skills目录结构全景图]] | 03-使用Codex安装和管理Skills | ➡️ [[04-四层渐进式加载机制揭秘|04-四层渐进式加载机制揭秘]]