Hermes多Agent技能管理面板开发实战

m0_37592900

490人浏览 · 2026-06-10 17:11:36

m0_37592900 · 2026-06-10 17:11:36 发布

前言

众所周知Hermes Agent有一个多Agent机制，即Profile隔离模式，这套模式适合长期独立运行不同角色的Agent, 每个Agent可以拥有独立的大模型、记忆库、技能包等，而且互不干扰。

为了给每个Agent定制能力，我装了一堆技能包，有时还对技能包做一些修改和扩展。用的越多，装的越多，问题就越明显：

明明记得装过一个技能包，可是忘了装在哪个Agent了，只能一个一个翻找
明明给这个技能包做了扩展，可以用了之后达不到效果，只有拉出其它Agent中同名Skills一个一个比对版本

要是有一个管理面板，可以对所有Agent的Skills进行管理，问题就解决了。可惜Hermes官方的CLi、Dashboard、Desktop都没有提供这种管理面板。没办法，自己手搓吧！

动手：搓 Skills 管理面板

我其实就想要6样东西：

一个导航栏 — 列出Skills的所有分类，点击分类拉出该分类下所有的Skills
一个搜索框 — 按名称、描述、标签对Skills进行过滤，从而实现快速定位
一个列表区 — 按分类或搜索条件列出所有的Skills
一个详情面板 — 点开一个 Skill，直接告诉我它的一些基本信息，并列出哪些Profile已部署，哪些Profile未部署
一键部署 — 勾选未部署的 Profile，点一下按钮快速部署Skills
版本对齐功能 — 可以比对各Profile相同Skills的版本，以达到一键同步的目的

选型：Electron 跨平台桌面应用开发框架

Electron — 因为要访问本地文件系统（扫描目录、复制文件夹），这是 Web 做不到的。加上之前写过 Electron 应用，轻车熟路。

React 19 + TypeScript 6 — TypeScript 6 是刚出的候选版本，既然是新项目，直接用最新的。

Tailwind CSS v4 — Tailwind v4 改成了 CSS-first 配置，不再是传统的 tailwind.config.js。用 @import "tailwindcss" 就能引入，配合 @theme inline 自定义设计 token，用起来更接近原生 CSS 的感觉。

Radix UI — 无头 UI 组件库，提供无障碍的 Checkbox、Dialog、ScrollArea。Tailwind 管样式，Radix 管行为，分工明确。

核心设计：三层视图

整个应用就一页，设计成左中右三栏：

在这里插入图片描述

左侧：分类列表，显示每个分类下的 Skill 数量, 点击筛选。

中间：搜索框 + 自适应卡片网格。卡片显示名称、描述（最多两行）、标签（前3个）、版本号。每个卡片可以点选进入详情。

右侧：点击卡片后展开详情面板，显示完整的描述、版本、分类、标签，以及部署状态列表——每个 Profile 一行，已部署的标记绿色、未部署的灰色，勾选后点「部署」按钮一键安装。

这个布局的逻辑是：浏览在中间，细节在右边。你不用来回跳页面，视线从左到右自然流动。

核心逻辑：扫描、部署、同步

所有后端逻辑都在 skillManager.ts 里，本质上是三个操作：

扫描

1. 遍历主仓库 skills/{分类}/{skill}/
   解析每个 SKILL.md 的 frontmatter → 获取 name/version/tags
   
2. 遍历每个 Profile 的 skills/ 目录
   只添加主仓库中不存在的 Skill（标记来源）
   
3. 合并为一个列表返回渲染进程

部署

部署本质上就是递归复制目录：

async function copyDir(src: string, dest: string): Promise<void> {
  await fs.mkdir(dest, { recursive: true });
  const entries = await fs.readdir(src, { withFileTypes: true });
  for (const entry of entries) {
    const srcPath = path.join(src, entry.name);
    const destPath = path.join(dest, entry.name);
    if (entry.isDirectory()) {
      await copyDir(srcPath, destPath);
    } else {
      await fs.copyFile(srcPath, destPath);
    }
  }
}

版本同步

版本同步面板用表格展示每个 Skill 在主仓库的版本与各 Profile 部署版本的对比：

Skill       |  主仓库  |  default  |  developer
------------|---------|-----------|-----------
Create PR   |  v1.2   |  v1.2 ✅  |  v1.0 ❌ [同步]
Code Review |  v2.0   |  v1.5 ❌  |  未部署 —

版本不一致的行会高亮琥珀色背景，每行有「同步」按钮一键覆盖。