AI 编程代理（Agent）工具/Skills 安装指南

AI 编程代理（Agent）工具/Skills 安装指南

适用代理：OpenCode / Claude Code / Codex（OpenAI Codex CLI） 更新时间：2026-06-14

目录

• 环境准备（前置依赖）
• 统一安装工具：npx skills
• Skills 类工具
  • skill-creator（Anthropic 官方）
  • gstack（Garry Tan 工程工作流）
  • baoyu-skills（中文内容创作）
  • find-skills（自动推荐 Skill）
  • supabase-postgres-best-practices
  • Cloudflare Skills
  • Open Design（设计工作流）
  • superpowers（编码代理开发方法论）⭐228k+
• MCP 类工具
  • Playwright MCP（浏览器自动化）
  • Playwright CLI + Skills（编码代理推荐）
  • agent-browser（Vercel 浏览器 CLI）
  • Chrome DevTools MCP（前端调试）
  • Linear MCP（任务管理）
  • Jira MCP（任务管理）
  • PostgreSQL MCP（数据库查询）
  • SSH MCP Server — classfang
  • SSH MCP — tufantunc
• Python 库类工具
  • browser-use（自然语言浏览器控制）
• 各代理 MCP 配置对照表

环境准备（前置依赖）

本节涉及的工具依赖 npx/npm/node 和 uvx/uv，请先确保以下环境就绪。

Node.js + npm + npx 安装

npx 随 Node.js 自带，安装 Node.js 即可获得。

方法一：NodeSource（推荐，Linux）

# 安装 Node.js 22 LTS
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt-get install -y nodejs

# 验证
node --version    # v22.x
npm --version     # 10.x
npx --version     # 10.x

方法二：nvm（多版本管理）

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc

# 安装并使用 Node.js 22
nvm install 22
nvm use 22
nvm alias default 22

方法三：fnm（快速版本管理，Rust 实现）

# macOS/Linux
curl -fsSL https://fnm.vercel.app/install | bash
source ~/.bashrc

fnm install 22
fnm default 22
fnm use 22

方法四：直接下载二进制（Linux 通用）

# 下载 Node.js 22 LTS 预编译包
wget https://nodejs.org/dist/v22.19.0/node-v22.19.0-linux-x64.tar.xz
tar -xf node-v22.19.0-linux-x64.tar.xz
sudo mv node-v22.19.0-linux-x64 /usr/local/nodejs
sudo ln -sf /usr/local/nodejs/bin/node /usr/local/bin/node
sudo ln -sf /usr/local/nodejs/bin/npm /usr/local/bin/npm
sudo ln -sf /usr/local/nodejs/bin/npx /usr/local/bin/npx

npm 镜像源（Mirror Registry）配置

国内网络环境下建议配置 npm 镜像加速。以下为常用源：

方法一：npm config 设置（全局生效）

# 设置镜像（以阿里云 npmmirror 为例）
npm config set registry https://registry.npmmirror.com

# 验证
npm config get registry

# 恢复官方源
npm config set registry https://registry.npmjs.org

方法二：nrm（源管理工具）

npm install -g nrm

nrm ls                          # 列出所有可用源
nrm use npmmirror               # 切换到阿里云镜像
nrm test                        # 测速

方法三：单次使用（不修改全局配置）

npm install --registry=https://registry.npmmirror.com <package>
npx --registry=https://registry.npmmirror.com skills add <repo>

npm 代理配置（如需代理访问外网）

npm config set proxy http://192.168.2.100:10808
npm config set https-proxy http://192.168.2.100:10808

# 取消代理
npm config delete proxy
npm config delete https-proxy

Python + uv/uvx 安装

部分 MCP 工具（如 mcp-atlassian）使用 Python，通过 uvx 运行。

安装 uv（Python 包管理器）：

# Linux/macOS
curl -LsSf https://astral.sh/uv/install.sh | sh
source ~/.bashrc

# 或使用 pip 安装
pip install uv

uv pip 镜像配置：

# 设置 PyPI 镜像（阿里云）
export UV_INDEX_URL=https://mirrors.aliyun.com/pypi/simple/

# 或在 uv 配置文件中 ~/.config/uv/uv.toml
echo '[pip]
index-url = "https://mirrors.aliyun.com/pypi/simple/"' > ~/.config/uv/uv.toml

统一安装工具：npx skills

GitHub: https://github.com/vercel-labs/skills (⭐22k+)

npx skills 是 Vercel 推出的跨代理 Skills 统一安装工具，支持 OpenCode、Claude Code、Codex、Cursor 等 70+ 种代理。

# 基本用法
npx skills add <owner/repo> [-a <agent>] [--skill <name>] [--global]

# 支持的代理名称：opencode, claude-code, codex, cursor, ...

# 从 GitHub 安装
npx skills add JimLiu/baoyu-skills -a opencode

# 指定特定 skill
npx skills add anthropics/skills --skill skill-creator -a claude-code

# 全局安装（用户级别）
npx skills add vercel-labs/agent-skills -a opencode --global

# 列出可用 skills（不安装）
npx skills add garrytan/gstack -a codex --list

Skills 类工具

Skills 是 AI 代理的"插件"，通常是一个 Markdown 文件（SKILL.md）或目录，安装后代理自动加载其中的指令和工作流。

1. skill-creator（Anthropic 官方）⭐150k+

安装方法

# OpenCode
npx skills add anthropics/skills --skill skill-creator -a opencode

# Claude Code
npx skills add anthropics/skills --skill skill-creator -a claude-code
# 或通过 Claude Code 插件市场
# /plugin marketplace add anthropics/skills
# /plugin install example-skills@anthropic-agent-skills

# Codex
npx skills add anthropics/skills --skill skill-creator -a codex

2. gstack（Garry Tan 工程工作流）⭐109k+

安装方法

# OpenCode
git clone --single-branch --depth 1 https://github.com/garrytan/gstack.git ~/gstack
cd ~/gstack
./setup --host opencode

# Claude Code
git clone --single-branch --depth 1 https://github.com/garrytan/gstack.git ~/.claude/skills/gstack
cd ~/.claude/skills/gstack
./setup

# Codex
git clone --single-branch --depth 1 https://github.com/garrytan/gstack.git ~/gstack
cd ~/gstack
./setup --host codex

3. baoyu-skills（中文内容创作）⭐21k+

安装方法

# OpenCode
npx skills add JimLiu/baoyu-skills -a opencode

# Claude Code
npx skills add JimLiu/baoyu-skills -a claude-code
# 或通过 Claude Code 插件市场安装

# Codex
npx skills add JimLiu/baoyu-skills -a codex

4. find-skills（自动推荐 Skill）⭐22k+

安装方法

# OpenCode
npx skills add vercel-labs/skills --skill find-skills -a opencode

# Claude Code
npx skills add vercel-labs/skills --skill find-skills -a claude-code

# Codex
npx skills add vercel-labs/skills --skill find-skills -a codex

5. supabase-postgres-best-practices ⭐2k+

安装方法

# OpenCode
npx skills add perennia-regen/wachines-skills --skill supabase-postgres-best-practices -a opencode

# Claude Code
npx skills add perennia-regen/wachines-skills --skill supabase-postgres-best-practices -a claude-code

# Codex
npx skills add perennia-regen/wachines-skills --skill supabase-postgres-best-practices -a codex

6. Cloudflare Skills

安装方法

# OpenCode（通过 npx skills 安装特定 skill）
npx skills add jezweb/claude-skills -a opencode --skill cloudflare-worker-builder --skill cloudflare-api

# Claude Code（通过插件市场）
# /plugin marketplace add jezweb/claude-skills
# /plugin install cloudflare@jezweb-skills

# Codex
npx skills add jezweb/claude-skills -a codex --skill cloudflare-worker-builder

7. Open Design（设计工作流 + Skills 集合）⭐64k+

Open Design 是一个完整的本地优先设计工作台（原生桌面应用），同时也可以作为 Skills/Plugin 安装到编码代理中使用。

Skills 安装（仅安装技能文件，轻量）

# OpenCode
npx skills add nexu-io/open-design -a opencode

# Claude Code
npx skills add nexu-io/open-design -a claude-code

# Codex
npx skills add nexu-io/open-design -a codex

Plugin 安装（Claude Code 原生插件市场）

# Claude Code 内执行
# /plugin marketplace add nexu-io/open-design
# /plugin install open-design@nexu-io-skills

桌面应用安装（完整工作台，macOS/Windows）

# 下载桌面应用：https://github.com/nexu-io/open-design/releases
# 环境要求：Node.js 24+、pnpm 10.33+

# 从源码运行（Docker）
git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
# 编辑 .env 设置 OD_API_TOKEN
docker compose up -d

8. superpowers（编码代理开发方法论）⭐228k+

安装方法

# Claude Code（通过官方插件市场，推荐）
/plugin install superpowers@claude-plugins-official

# 或通过 Superpowers 自有市场
/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace

# OpenCode
# 在 OpenCode 中输入以下指令：
Fetch and follow instructions from https://raw.githubusercontent.com/obra/superpowers/refs/heads/main/.opencode/INSTALL.md

# Codex CLI（通过官方插件市场）
# 在 Codex 中输入 /plugins，搜索 superpowers，选择 Install Plugin

# Codex App
# 在 Codex App 侧边栏点击 Plugins，找到 Superpowers，点击 + 安装

# Cursor
/add-plugin superpowers

# Gemini CLI
gemini extensions install https://github.com/obra/superpowers
# 更新
gemini extensions update superpowers

# GitHub Copilot CLI
copilot plugin marketplace add obra/superpowers-marketplace
copilot plugin install superpowers@superpowers-marketplace

# Factory Droid
droid plugin marketplace add https://github.com/obra/superpowers
droid plugin install superpowers@superpowers

核心工作流

1. brainstorming — 编码前激活，Socratic 式需求澄清，分段输出设计文档供确认
2. using-git-worktrees — 设计确认后创建隔离工作空间，检查测试基线
3. writing-plans — 将工作拆分为 2-5 分钟的 bite-sized 任务，含精确文件路径和验证步骤
4. subagent-driven-development — 每个任务派遣独立子代理，两阶段审查（规格合规 + 代码质量）
5. test-driven-development — 强制执行 RED-GREEN-REFACTOR 循环，先写失败测试再写最小实现
6. requesting-code-review — 任务间自动触发审查，严重问题阻塞进展
7. finishing-a-development-branch — 任务完成后验证测试、清理 worktree、提供 merge/PR 选项

代理在执行任何任务前会自动检查并加载相关 Skill，非建议性工作流，而是强制执行。

MCP 类工具

MCP（Model Context Protocol）服务器以独立进程运行，通过标准 I/O 或 HTTP 与代理通信，提供工具调用能力。

9. Playwright MCP（浏览器自动化）⭐34k

安装方法

# OpenCode
opencode mcp add playwright -- npx @playwright/mcp@latest

# Claude Code
claude mcp add playwright npx @playwright/mcp@latest

# Codex
codex mcp add playwright npx "@playwright/mcp@latest"

提示：对于编码代理，微软还提供了 Playwright CLI + Skills（见下方），更节省 token。

Playwright CLI + Skills（编码代理推荐）⭐

安装方法

# 全局安装 CLI
npm install -g @playwright/cli@latest

# 验证
playwright-cli --help

安装 Skills

# 为代理安装 Playwright Skills（代理将自动发现本地 Skills）
playwright-cli install --skills

# 或通过 npx skills（OpenCode / Codex）
npx skills add microsoft/playwright-cli -a opencode
npx skills add microsoft/playwright-cli -a codex

基本命令：

playwright-cli open "https://example.com"          # 打开页面
playwright-cli open "https://example.com" --headed  # 有头模式（可见浏览器）
playwright-cli type "input text"                    # 输入文本
playwright-cli press Enter                          # 按键
playwright-cli click "按钮文本"                     # 点击
playwright-cli check e21                            # 勾选复选框
playwright-cli screenshot                           # 截图
playwright-cli snapshot                             # 页面快照
playwright-cli close                                # 关闭浏览器

MCP vs CLI 选择建议：编码代理（Claude Code / OpenCode / Codex）推荐使用 CLI，MCP 更适合需要持久浏览器状态的自愈测试、长时间探索性自动化等场景。

10. agent-browser（Vercel 浏览器 CLI）⭐35k+

安装方法

# 全局安装（推荐）
npm install -g agent-browser
agent-browser install          # 首次自动下载 Chrome for Testing

# macOS
brew install agent-browser
agent-browser install

# Linux（需要系统依赖）
npm install -g agent-browser
agent-browser install --with-deps

# 升级
agent-browser upgrade

基本命令：

agent-browser open "https://example.com"   # 打开页面
agent-browser snapshot                      # 获取页面快照
agent-browser click "按钮文本"              # 点击元素
agent-browser type "input" "内容"           # 输入文本
agent-browser close                         # 关闭浏览器

社区提供了 MCP 封装（如 minhlucvan/agent-browser-mcp），可将其作为 MCP Server 在代理中使用。

11. Chrome DevTools MCP（前端调试）⭐44k

安装方法

# OpenCode
opencode mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

# Claude Code
# 方式一：MCP 安装
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
# 方式二：插件市场（推荐，支持 Skills）
# /plugin marketplace add ChromeDevTools/chrome-devtools-mcp
# /plugin install chrome-devtools-mcp@chrome-devtools-plugins

# Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

12. Linear MCP（任务管理）

安装方法

# OpenCode（命令行）
opencode mcp add linear --url "https://mcp.linear.app/sse"

# OpenCode（手动编辑 ~/.config/opencode/opencode.json）：
# 在 "mcpServers" 中添加：
{
  "mcpServers": {
    "linear": {
      "url": "https://mcp.linear.app/sse"
    }
  }
}

# Claude Code
claude mcp add linear --url "https://mcp.linear.app/sse"

# Codex
codex mcp add --url "https://mcp.linear.app/sse" linear

13. Jira MCP（任务管理）

前置准备

1. 获取 API Token：https://id.atlassian.com/manage-profile/security/api-tokens
2. 确认 Jira URL（如 https://your-company.atlassian.net）

安装方法

# OpenCode（命令行）
opencode mcp add mcp-atlassian -- uvx mcp-atlassian
# 然后设置环境变量（见下方配置文件方式中的 env 字段）

# OpenCode（手动编辑 ~/.config/opencode/opencode.json）：
{
  "mcpServers": {
    "mcp-atlassian": {
      "command": "uvx",
      "args": ["mcp-atlassian"],
      "env": {
        "JIRA_URL": "https://your-company.atlassian.net",
        "JIRA_USERNAME": "your.email@company.com",
        "JIRA_API_TOKEN": "your_api_token",
        "CONFLUENCE_URL": "https://your-company.atlassian.net/wiki",
        "CONFLUENCE_USERNAME": "your.email@company.com",
        "CONFLUENCE_API_TOKEN": "your_api_token"
      }
    }
  }
}

# Claude Code
claude mcp add jira -- uvx mcp-atlassian
# 然后设置环境变量

# Codex
codex mcp add jira -- uvx mcp-atlassian

14. PostgreSQL MCP（数据库查询）

有两个主流方案：

方案 A：DBHub（多数据库，推荐）

安装方法

# OpenCode
opencode mcp add dbhub -- npx @bytebase/dbhub@latest --transport stdio --dsn "postgres://user:pass@host:5432/db"

# Claude Code
claude mcp add dbhub npx @bytebase/dbhub@latest -- --dsn "postgres://user:pass@host:5432/db"

# Codex
codex mcp add dbhub -- npx @bytebase/dbhub@latest --transport stdio --dsn "postgres://user:pass@host:5432/db"

方案 B：pg-aiguide（知识 + MCP）

安装方法

# OpenCode（Skills 方式）
npx skills add timescale/pg-aiguide -a opencode

# Claude Code
claude plugin marketplace add timescale/pg-aiguide
claude plugin install pg@aiguide

# Codex（MCP 方式）
codex mcp add --url "https://mcp.tigerdata.com/docs" pg-aiguide

15. SSH MCP Server — classfang/ssh-mcp-server

安装方法

# OpenCode（命令行）
opencode mcp add ssh-mcp-server -- npx -y @fangjunjie/ssh-mcp-server -- --host 192.168.1.1 --username root --password your_password

# OpenCode（手动编辑 ~/.config/opencode/opencode.json）：
{
  "mcpServers": {
    "ssh-mcp-server": {
      "command": "npx",
      "args": [
        "-y", "@fangjunjie/ssh-mcp-server",
        "--host", "192.168.1.1",
        "--port", "22",
        "--username", "root",
        "--password", "your_password"
      ]
    }
  }
}

# Claude Code
claude mcp add ssh-mcp-server -- npx -y @fangjunjie/ssh-mcp-server -- --host 192.168.1.1 --username root --password your_password

# Codex
codex mcp add ssh-mcp-server -- npx -y @fangjunjie/ssh-mcp-server -- --host 192.168.1.1 --username root --password your_password

私钥认证

// 将 --password 替换为：
"--privateKey", "~/.ssh/id_rsa"
// 如有 passphrase 添加：
"--passphrase", "your_passphrase"

内置 AI Skill 辅助配置（推荐）

# 安装 Skill 后让 AI 助手引导配置
npx skills add classfang/ssh-mcp-server -a opencode
# 然后告诉 AI："Help me set up ssh-mcp-server"

16. SSH MCP — tufantunc/ssh-mcp

# OpenCode（命令行）
opencode mcp add ssh-mcp -- npx -y ssh-mcp -- --host=1.2.3.4 --user=root --password=pass --timeout=30000

# OpenCode（手动编辑 ~/.config/opencode/opencode.json）：
{
  "mcpServers": {
    "ssh-mcp": {
      "command": "npx",
      "args": [
        "ssh-mcp", "-y", "--",
        "--host=1.2.3.4",
        "--port=22",
        "--user=root",
        "--password=pass",
        "--timeout=30000"
      ]
    }
  }
}

# Claude Code
claude mcp add --transport stdio ssh-mcp -- npx -y ssh-mcp -- --host=YOUR_HOST --user=YOUR_USER --password=YOUR_PASSWORD

# Codex
codex mcp add ssh-mcp -- npx -y ssh-mcp -- --host=YOUR_HOST --user=YOUR_USER --password=YOUR_PASSWORD

私钥认证 / sudo 提权

# 私钥认证
--key=/path/to/private/key

# sudo 提权
--sudoPassword=your_sudo_pass

# 禁用 sudo 功能
--disableSudo

# 自定义超时（默认 60000ms）
--timeout=120000

# 取消命令长度限制
--maxChars=none

两个 SSH MCP 对比

Python 库类工具

通过 Python API 直接调用，不依赖 MCP 或 Skills 协议。

17. browser-use（自然语言浏览器控制）⭐99k

安装方法

pip install "browser-use[core]"
# 或
uv add "browser-use[core]"

基本用法：

from browser_use.beta import Agent
from langchain_openai import ChatOpenAI

agent = Agent(
    task="打开百度并搜索'AI编程助手'",
    llm=ChatOpenAI(model="gpt-4o"),
)
result = await agent.run()

各代理 MCP 配置对照表

OpenCode

配置文件：~/.config/opencode/opencode.json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    },
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    },
    "linear": {
      "url": "https://mcp.linear.app/sse"
    },
    "mcp-atlassian": {
      "command": "uvx",
      "args": ["mcp-atlassian"],
      "env": {
        "JIRA_URL": "https://your-company.atlassian.net",
        "JIRA_USERNAME": "your.email@company.com",
        "JIRA_API_TOKEN": "your_token"
      }
    },
    "dbhub": {
      "command": "npx",
      "args": ["@bytebase/dbhub@latest", "--transport", "stdio", "--dsn", "postgres://user:pass@host:5432/db"]
    }
  }
}

或使用命令行：

opencode mcp add <name> -- <command> [args...]

Claude Code

# 本地 MCP
claude mcp add <name> <command> [args...]

# 远程 MCP（SSE/HTTP）
claude mcp add <name> --url "<url>"

# 示例
claude mcp add playwright npx @playwright/mcp@latest
claude mcp add linear --url "https://mcp.linear.app/sse"

# Skills / 插件
/plugin marketplace add <owner/repo>
/plugin install <name>@<namespace>

Codex（OpenAI Codex CLI）

# 本地 MCP
codex mcp add <name> -- <command> [args...]

# 远程 MCP
codex mcp add --url "<url>" <name>

# 示例
codex mcp add playwright npx "@playwright/mcp@latest"
codex mcp add --url "https://mcp.linear.app/sse" linear

附录

工具分类速查

参考链接

• Vercel Skills 生态：https://skills.sh
• Anthropic Skills 仓库：https://github.com/anthropics/skills
• MCP 协议规范：https://modelcontextprotocol.io