---
title: "Agent 工具"
canonical_url: "https://wwlight.vercel.app/ai/agent-tools"
---
# Agent 工具

## Skills

<note>

[Skills](https://skills.sh/) 是面向智能体的开放技能生态：skill 是模块化包，为 agent 扩展专业知识、工作流和工具。安装/搜索/更新用 CLI 区的 `npx skills`。本页整理了推荐的 skills。

</note>

### archify

<note>

从一份小型类型化 JSON 规范生成自包含、可交互的 HTML 架构图（内联 SVG），支持明暗主题、可选 trace 动画，可导出 PNG/JPEG/WebP/SVG/WebM。接收自然语言需求或粘贴的 Mermaid（flowchart / sequenceDiagram / stateDiagram）。基于 Cocoon-AI/architecture-diagram-generator。

</note>

<tip to="https://github.com/tt-a1i/archify">

来源 tt-a1i/archify

</tip>

**安装**

```sh
$ npx skills add tt-a1i/archify -g -y
```

**功能**

- 5 种图类型：`architecture`（组件/服务/云边界）、`workflow`（流程/审批门）、`sequence`（API 调用链）、`dataflow`（管道/ETL/血缘）、`lifecycle`（状态机）。
- 完整校验链路：`validate`（诊断修复）→ `deliver`（原子提交 + SHA-256 回执）→ `visual-check`（多分辨率截图与包含度检测）。
- Mermaid 输入路由：`flowchart/graph`→workflow 或 architecture，`sequenceDiagram`→sequence，`stateDiagram`→lifecycle。
- 生成物自带明暗切换、缩放平移、搜索、聚焦、关系追踪、语义视图、演示模式与导出。
- 品牌标识：内置品牌 ID 或 `brands capture "<url>"` 从官方站点捕获。

**使用场景**

```text
帮我画一个微服务架构图（architecture），节点：API 网关、订单/支付/库存服务、Kafka、MySQL，质量 profile 用 showcase，导出 HTML
```

```text
把这段 Mermaid 转成 sequence 时序图，明暗主题都要，加 trace 动画：
sequenceDiagram
  Client->>API: POST /login
  API->>DB: 校验用户
```

```text
画一个订单状态机（lifecycle）：待支付 / 已支付 / 已发货 / 已完成 / 已取消，支付失败可回退到待支付，visual preset 用 blueprint
```

### diagram-design

<note>

生成品牌化的架构图、IT 现状图、流程图、时序图等 28 种视觉类型，作为自包含 HTML / SVG / PNG，遵循一套偏编辑向的设计系统。可重绘 `.drawio` 或 Mermaid `.mmd` 源文件，从网站提取品牌 token，加入语义模式、标注、可访问动效或手绘风格。

</note>

<tip to="https://github.com/cathrynlavery/diagram-design">

来源 cathrynlavery/diagram-design

</tip>

**安装**

```sh
$ npx skills add cathrynlavery/diagram-design -g -y
```

**功能**

- 28 种视觉类型：架构、IT 现状、流程图、时序、状态机、ER/数据模型、时间线、泳道、象限、雷达、循环/飞轮、嵌套、树、组织架构、层叠、韦恩、金字塔/漏斗、treemap、柱状、折线、甘特、散点、高层、流程、Medallion、数据流、DP 集成、DP 安全矩阵。
- 设计系统可换肤：颜色/排版/token 集中在 `style-guide.md`，可从网站 URL 或本地目录抽取品牌 token。
- 语义模式描述行为，类型参考描述布局；动画可选（reveal/step/loop），默认静态。
- 导入 `.drawio` / Mermaid：抽取结构 → 重绘（非机械转换）→ 输出保真清单。
- 输出参数四档：格式 / 尺寸 / 细节度 / 受众。

**使用场景**

```text
画一张泳道图，展示「下单 → 发货」跨部门流程，从 https://example.com 提取我们品牌的配色和字体
```

```text
把这个 .drawio 重绘成简洁版（≤7 节点），输出 HTML + PNG，尺寸用 slide-16x9
```

```text
画一个组织架构图，CEO → 3 个部门 → 各组组长，用手绘风格
```

### find-skills

<note>

帮助发现并安装 skills，当用户问「怎么做 X」「找 X 的 skill」「有没有能做 X 的 skill」或想扩展 agent 能力时使用。

</note>

<tip to="https://github.com/vercel-labs/skills">

来源 vercel-labs/skills

</tip>

**安装**

```sh
$ npx skills add vercel-labs/skills@find-skills -g -y
```

**功能**

- 检索 skills.sh 生态（`npx skills find`），可限定 owner。
- 质量把关：安装数（优先 1K+）、来源声誉（vercel-labs / anthropics / microsoft 等官方源）、GitHub star。
- 按分类检索：Web 开发、测试、DevOps、文档、代码质量、设计、效率。
- 找不到时引导直接用通用能力，或 `npx skills init` 自建。

**使用场景**

```text
有没有能做 PR 审查的 skill？优先 1K+ 安装、官方源，找到后给出 npx skills add 安装命令
```

```text
帮我找一个写测试的 skill，限定 vercel-labs / anthropics 官方源
```

### frontend-design

<note>

构建新 UI 或重塑现有 UI 时，提供独特、有意图的视觉设计指导——审美方向、排版，以及避免模板化默认的选择。

</note>

<tip to="https://github.com/anthropics/skills">

来源 anthropics/skills

</tip>

**安装**

```sh
$ npx skills add anthropics/skills@frontend-design -g -y
```

**功能**

- 以「小型工作室设计主管」视角做决策：配色、字体、布局都要贴合具体 brief，并承担一处可辩护的审美风险。
- 两遍流程：先产出 token 系统（4–6 个命名色、2+ 字体角色、布局概念、signature 记忆点），对照 brief 批判后再写代码。
- 规避三类 AI 模板脸：奶油底衬线体、近黑底单亮色、报纸式细线分栏。
- 文案即设计材料：主动语态、句首大小写、空状态/失败态给出方向而非情绪。

**使用场景**

```text
帮我设计一个开发者工具 SaaS 落地页：先产出 token（4-6 个命名色、2 套字体、布局概念、记忆点），避开奶油底/近黑底模板脸，评审通过后再写代码
```

```text
给这个后台界面做视觉改版：定配色 + 字体 + 布局 token，保证移动端适配、键盘焦点可见、尊重 reduced-motion
```

### grill-me

<note>

通过结构化追问对尚未定稿的计划或设计做压力测试：将方案建模为决策树，按依赖逐一消解分支，直至双方对目标、边界与取舍达成一致。会话无状态——不落地文件、不创建 workspace，产出是澄清后的决策共识，而非文档产物。

</note>

<tip to="https://github.com/mattpocock/skills">

来源 mattpocock/skills

</tip>

**安装**

```sh
$ npx skills add mattpocock/skills@grill-me -g -y
```

**功能**

- 入口转交底层 `grilling` 原语：把计划映射成设计树，按依赖解分支。
- 按 round 推进：每轮问完整个 frontier（所有前置已决的问题），每题附推荐答案；答完再重算 frontier。
- 主题不限代码：产品方向、业务决策、写作等半成型想法都可；无需 repo。
- 与同系列区分：要对齐代码库并落 `CONTEXT.md` / ADR 用 `grill-with-docs`；单会话装不下用 `wayfinder`。

**使用场景**

```text
/grill-me 我想做一个本地优先的笔记 App，先别写方案，把设计树问清楚
```

```text
Grill me：这个「用户导入 CSV 后自动映射字段」的方案，按 round 把依赖决策推到 frontier 为空
```

### hyperframes

<note>

[HyperFrames](https://hyperframes.heygen.com/) 是 HeyGen 开源的 HTML→视频框架：用 HTML/CSS + 可 seek 动画写合成，再渲染成确定性 MP4。配套一组 agent skills，让编码 agent 按「规划 → 写 HTML → lint/preview → render」生产视频。

</note>

<tip to="https://github.com/heygen-com/hyperframes">

来源 heygen-com/hyperframes

</tip>

<tip to="https://skills.sh/heygen-com/hyperframes">

skills.sh 上的 skill 包（含 `/hyperframes` 路由与多套创作 workflow）

</tip>

**安装**

```sh
# 交互安装（推荐只装 Core Skills；picker 默认不预选）
$ npx skills add heygen-com/hyperframes

# 非交互 / agent：装 core 集（路由器 + 领域 skill，按需再拉 workflow）
$ npx hyperframes skills update

# 明确装全部已发布 skill
$ npx skills add heygen-com/hyperframes --all
```

前提：Node.js 22+、FFmpeg。

**功能**

- `/hyperframes` 路由器：先读它；按意图路由到产品发布片、无脸讲解、PR→视频、字幕嵌入、口播二次包装、动效、音乐卡点、幻灯片、通用视频、Remotion 迁移等 workflow。
- 领域 skill：`hyperframes-core`（合成契约）、`animation` / `keyframes`、`creative`、`media-use`、`cli`、`audio`、`registry`、`figma` 等按需加载。
- CLI 闭环：`init` → `lint` / `check` → `preview` → `render`（也支持云端 / AWS Lambda）。
- 作者模型是纯 HTML + `data-*` 时间轴（非 React）；动画可用 GSAP / CSS / Lottie / Three.js 等 seekable adapter。

**手动 CLI（不经 agent）**

```sh
$ npx hyperframes init my-video
$ cd my-video
$ npx hyperframes preview
$ npx hyperframes render
```

**使用场景**

```text
Using /hyperframes，做一段 10 秒产品介绍：标题淡入、背景视频、轻音乐，写完 lint 再 preview，确认后 render
```

```text
用 /pr-to-video 把这个 GitHub PR 做成 changelog 解说视频，带代码 diff 动画和字幕
```

```text
用 /faceless-explainer 把这段概念说明做成无脸讲解片（排版 / 抽象图 / 数据可视化）
```

### teach

<note>

教用户学习某个新技能或概念，是有状态的多会话学习流程。

</note>

<tip to="https://github.com/mattpocock/skills">

来源 mattpocock/skills

</tip>

**安装**

```sh
$ npx skills add mattpocock/skills@teach -g -y
```

**功能**

- 教学工作区：`MISSION.md`（学习动机）、`RESOURCES.md`（可信资源）、`learning-records/`（学习记录）、`lessons/`（HTML 课程）、`reference/`（参考文档）、`assets/`（可复用组件）。
- 基于最近发展区设计课程；区分 fluency（即时提取）与 storage（长期留存）强度。
- 用检索练习、间隔、交错等「合意困难」强化长期记忆。
- 知识从高信任资源获取，不轻信参数化记忆；课程附带引用与外部源。

**使用场景**

```text
教我 Rust：先问清学习目标写进 MISSION.md，按最近发展区设计第一课，生成 HTML lesson 和 reference 文档
```

```text
我想系统学习 Kubernetes，帮我建教学 workspace（MISSION + RESOURCES + lessons），每课附带高信任来源引用
```

---

## MCP

<tip to="https://modelcontextprotocol.io/">

MCP（Model Context Protocol）是智能体与外部数据源、工具之间互连的开放协议：agent 通过统一的 MCP 服务器暴露的能力访问文件系统、数据库、外部 API、代码检索与编辑等。

</tip>

### chrome-devtools

<tip to="https://github.com/ChromeDevTools/chrome-devtools-mcp">

Chrome DevTools MCP：通过 Chrome DevTools Protocol（CDP）让 agent 操作 Chrome 浏览器——打开/导航页面、抓取 DOM、读取控制台日志与网络请求、截图、跑 Lighthouse 与性能 trace 等。

</tip>

<note>

带 `--autoConnect` 可直接接管正在使用的 Chrome 会话（复用登录态），需 Chrome ≥ 144，并先开启远程调试，连接时浏览器会弹窗请求 Allow。

</note>

```text
chrome://inspect/#remote-debugging
```

**安装配置**

<tabs sync="mcp-client">
<tabs-item label="OpenCode">

```jsonc [~/.config/opencode/opencode.jsonc]
"mcp": {
  "chrome-devtools": {
    "type": "local",
    "command": ["pnpm", "dlx", "chrome-devtools-mcp@latest", "--autoConnect"],
    "enabled": true
  }
}
```

</tabs-item>

<tabs-item label="Cursor">

```json [~/.cursor/mcp.json]
"mcpServers": {
  "chrome-devtools": {
    "command": "npx",
    "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
  }
}
```

</tabs-item>
</tabs>

**使用场景**

```text
用 chrome-devtools 打开 https://example.com，把首页 DOM 结构发给我，并截一张图
```

```text
接管我当前的浏览器，检查刚才那个 Network 面板里失败的请求为什么报错
```

### mdn

<tip to="https://mcp.mdn.mozilla.net/">

MDN MCP 官方远程 MCP：检索 MDN Web API、CSS/HTML/JS 参考与跨浏览器兼容性数据（BCD），获取最新且带版本号的文档。适合在选择 API、判断浏览器支持时查阅。

</tip>

**安装配置**

<tabs sync="mcp-client">
<tabs-item label="OpenCode">

```jsonc [~/.config/opencode/opencode.jsonc]
"mcp": {
  "mdn": {
    "type": "remote",
    "url": "https://mcp.mdn.mozilla.net/",
    "enabled": true
  }
}
```

</tabs-item>

<tabs-item label="Cursor">

```json [~/.cursor/mcp.json]
"mcpServers": {
  "mdn": {
    "type": "http",
    "url": "https://mcp.mdn.mozilla.net/",
    "headers": {
      "X-Moz-1st-Party-Data-Opt-Out": "1"
    }
  }
}
```

</tabs-item>
</tabs>

**使用场景**

```text
查一下 fetch 在 Safari 与 Firefox 中的浏览器兼容性
```

```text
用 mdn 查 CSS subgrid 属性的语法与支持情况
```

### shadcn

<tip to="https://ui.shadcn.com/docs/registry/mcp">

shadcn MCP 通过 `pnpm dlx shadcn@latest mcp` 本地拉起：搜索组件、查看源码、直接向项目添加 shadcn/ui 组件。

</tip>

**安装配置**

<tabs sync="mcp-client">
<tabs-item label="OpenCode">

```sh
pnpm dlx shadcn@latest mcp init --client opencode
```

```jsonc [~/.config/opencode/opencode.jsonc]
"mcp": {
  "shadcn": {
    "type": "local",
    "command": ["pnpm", "dlx", "shadcn@latest", "mcp"],
    "enabled": true
  }
}
```

</tabs-item>

<tabs-item label="Cursor">

```sh
pnpm dlx shadcn@latest mcp init --client cursor
```

```json [~/.cursor/mcp.json]
"mcpServers": {
  "shadcn": {
    "command": "npx",
    "args": ["shadcn@latest", "mcp"]
  }
}
```

</tabs-item>
</tabs>

**使用场景**

```text
用 shadcn 往项目里加一个 Dialog 组件
```

```text
搜一下 shadcn 有没有可用的表格组件并查看其源码
```

### headroom

<tip to="https://wwlight.vercel.app/ai/headroom-setup">

Headroom 本地上下文压缩层：在工具输出、日志、文件到达 LLM 前压缩，节省 60-95% token。以 docker 容器运行，经 MCP 暴露压缩能力。详细安装与配置见「Headroom 使用」。

</tip>

### serena

<tip to="https://wwlight.vercel.app/ai/serena-setup">

Serena 语义检索与编辑的 MCP 编程工具包：提供符号级检索（定义 / 引用 / 实现）、编辑（替换符号体 / 插入代码）、重构（跨文件重命名）与跨会话记忆。详细工具清单与用法见「Serena 使用」。

</tip>

---

## CLI

### `npx skills`

<tip to="https://skills.sh/">

`npx skills` 是 skills 生态的包管理器：搜索、安装、更新 agent skill，无需全局安装，直接用 `npx` 拉起。也可在 skills.sh 浏览库与排行榜。

</tip>

<tip to="https://github.com/vercel-labs/skills/">

GitHub：vercel-labs/skills

</tip>

```sh
# 查看帮助
$ npx skills help

# 列出已安装 skill
$ npx skills list

# 搜索 skill：交互式 / 按关键词，可限定 GitHub owner
$ npx skills find
$ npx skills find react performance
$ npx skills find pr review --owner vercel-labs

# 安装 skill：直接装仓库，或指定仓库内某个 skill
$ npx skills add <package>
$ npx skills add <owner/repo@skill>

# 全局安装（-g 用户级）+ 跳过交互确认（-y）
$ npx skills add vercel-labs/skills@find-skills -g -y

# 更新所有已安装 skill
$ npx skills update

# 卸载 skill
$ npx skills rm <name>

# 创建自己的 skill
$ npx skills init <name>
```

- 全局安装位置：`~/.agents/skills/`。

### agent-browser

<tip to="https://agent-browser.dev/">

面向 AI agent 的浏览器自动化 **CLI**（100% 原生 Rust）：紧凑文本输出省 token，用 accessibility snapshot 的 `@ref` 做确定性点击/填表。任意能跑 shell 的 agent（Cursor、Claude Code、Codex、Gemini 等）直接调用即可，核心能力不依赖 skill / MCP。与本页 `chrome-devtools` MCP 对比：那边是 MCP 工具调用，这边是 shell CLI。

</tip>

<tip to="https://github.com/vercel-labs/agent-browser">

GitHub：vercel-labs/agent-browser

</tip>

**安装**

```sh
$ npm install -g agent-browser   # 或 brew install agent-browser
$ agent-browser install          # 首次下载 Chrome for Testing
$ agent-browser doctor           # 出问题时诊断
```

**核心工作流**

```sh
$ agent-browser open example.com
$ agent-browser snapshot -i
# - heading "Example Domain" [ref=e1]
# - link "More information..." [ref=e2]
$ agent-browser click @e2
$ agent-browser screenshot page.png
$ agent-browser close
```

**功能**

- 50+ 命令：导航、表单、截图、网络、存储、文件、标签页、frame、调试。
- Ref 模型：`snapshot` 返回紧凑 a11y 树（约 200–400 token），用 `@e1` 定点操作，避免整页 DOM。
- Client–daemon：Rust CLI + 持久 CDP daemon，命令间复用会话。
- 可观测：录像、streaming、diff、profiler、React / Web Vitals。
- 会话态：profile、登录态、cookie、proxy、安全策略；也可接 Browserbase / Browserless 等云浏览器。

**使用场景**

```text
用 agent-browser 打开 https://example.com，snapshot 后点「More information」，再截图
```

```text
用 agent-browser 对本地 http://localhost:3000 走一遍登录表单并截关键失败态
```

**可选：discovery skill**

Skill 只是薄引导层（触发词 + 指向 CLI），**不是**核心功能；手册由 CLI 按当前版本输出：

```sh
$ npx skills add vercel-labs/agent-browser -g -y
$ agent-browser skills get core --full
```

### officecli

<tip to="https://officecli.ai/">

为 AI agent 设计的 Office **CLI**：单二进制读写创建 Word / Excel / PowerPoint（`.docx` / `.xlsx` / `.pptx`），**不需要安装 Microsoft Office**。内置高保真 HTML 渲染，让 agent 能 `view` / `screenshot` / `watch` 看结果，走「渲染 → 检查 → 修正」闭环。核心是 shell 命令，不依赖 skill / MCP。

</tip>

<tip to="https://github.com/iOfficeAI/OfficeCLI">

GitHub：iOfficeAI/OfficeCLI（Apache-2.0）

</tip>

**安装**

```sh
# macOS / Linux
$ curl -fsSL https://raw.githubusercontent.com/iOfficeAI/OfficeCLI/main/install.sh | bash

# 或包管理器
$ brew install officecli
$ npm install -g @officecli/officecli
```

`officecli install` 会把二进制放进 PATH，并尝试给已检测到的 coding agent 装上引导 skill。

**核心工作流**

```sh
$ officecli create deck.pptx
$ officecli add deck.pptx / --type slide --prop title="Q4 Report" --prop background=1A1A2E
$ officecli add deck.pptx '/slide[1]' --type shape \
    --prop text="Revenue grew 25%" --prop x=2cm --prop y=5cm \
    --prop font=Arial --prop size=24 --prop color=FFFFFF
$ officecli view deck.pptx outline
$ officecli view deck.pptx html          # 浏览器预览
$ officecli watch deck.pptx              # 实时预览 http://localhost:26315
$ officecli get deck.pptx '/slide[1]/shape[1]' --json
$ officecli close deck.pptx
```

路径用类似 XPath 的选择器（如 `/slide[1]/shape[1]`、`/body/p[1]`、`/Sheet1`）。

**功能**

- 三种格式全覆盖：创建 / 读 / 改 Word、Excel、PowerPoint。
- 内置渲染：`view html` / `view screenshot` / `watch`；无 Office、无显示环境也能在 CI / Docker 里跑闭环。
- Excel 内置公式与透视：350+ 函数写后可直接算出值；可写原生 pivot OOXML。
- `merge`：模板 `{{key}}` + JSON 批量灌数；`dump` / `batch`：文档或子树 ↔ 可回放 JSON。
- Resident 模式：`open` 后多步 `set`/`add`/`remove`，`close` 落盘；也支持一次性 `batch`。

**使用场景**

```text
用 officecli 从零做一份 Q4 汇报 PPT：深色背景、标题 + 要点，watch 预览确认后再 close
```

```text
用 officecli dump 这份现有.docx 的表格子树，改数据后 batch 回放到新文件
```

```text
用 officecli merge 把 invoice-template.docx 和客户 JSON 合成正式发票
```

**可选：skill**

Skill 只教 agent 如何安装/调用 CLI，**不是**核心能力：

```text
curl -fsSL https://officecli.ai/SKILL.md
```

或由上面的 `officecli install` 自动写入各 agent 的 skill 目录。


## Sitemap

See the full [sitemap](https://wwlight.vercel.app/sitemap.md) for all pages.