AI

Agent 工具

MCP

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

chrome-devtools

Chrome DevTools MCP：通过 Chrome DevTools Protocol（CDP）让 agent 操作 Chrome 浏览器——打开/导航页面、抓取 DOM、读取控制台日志与网络请求、截图、跑 Lighthouse 与性能 trace 等。
带 --autoConnect 可直接接管正在使用的 Chrome 会话（复用登录态），需 Chrome ≥ 144，并先开启远程调试，连接时浏览器会弹窗请求 Allow。
chrome://inspect/#remote-debugging

安装配置

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

使用场景

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

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

mdn

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

安装配置

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

使用场景

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

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

shadcn

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

安装配置

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

使用场景

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

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

headroom

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

serena

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

Skills

Skills 是面向智能体的开放技能生态：skill 是模块化包，为 agent 扩展专业知识、工作流和工具。用 npx skills 这个「包管理器」完成搜索、安装、更新。本页整理了推荐的 skills。

npx skills CLI

npx skills 是 skills 生态的包管理器，无需全局安装，直接用 npx 拉起。
浏览 skills 库与排行榜，发现更多技能。
# 查看帮助
$ 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/。

archify

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

安装

$ 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>" 从官方站点捕获。

使用场景

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

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

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

diagram-design

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

安装

$ 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：抽取结构 → 重绘（非机械转换）→ 输出保真清单。
  • 输出参数四档：格式 / 尺寸 / 细节度 / 受众。

使用场景

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

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

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

find-skills

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

安装

$ 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 自建。

使用场景

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

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

frontend-design

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

安装

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

功能

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

使用场景

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

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

grill-me

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

安装

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

功能

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

使用场景

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

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

teach

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

安装

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

功能

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

使用场景

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

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

其它

OmniRoute 使用

Copyright © 2026