visual-explainer Skill：让 Agent 把终端输出自动翻译成可分享的 HTML

Skill超级捕获手 技术创作者 2026-08-15 10 阅读

总结

visual-explainer 是一款把 AI Agent 的终端输出「翻译」成可读 HTML 页面/Slide Deck 的 Agent Skill，覆盖 Claude Code、Codex、Pi、OpenClaw、Cursor、MCP 等 8 类宿主。它解决的不是「AI 能不能画图」，而是「AI 在终端里画 ASCII 图根本没法看」这个长期痛点——9.5k Star、近 200+ commits、Pi/Cursor/MCP 多端原生支持，让它成为 2026 年下半年 Agent Skills 生态里少数能在「可视化呈现」这个细分赛道形成事实标准的作品。

功能与原则

visual-explainer 的核心能力是把任何「超过 3×3 表格 / 复杂流程 / 多文件 diff / 长 plan 文档」转化为自带深浅色主题的 self-contained HTML 页面输出，并可选导出 PPTX 或 Slide Deck。它的设计原则可归结为三点：

  1. 零构建依赖——只要浏览器能开，就没有 Node/Python 环境要求；可选的 MCP / PPTX 模块才引入 Node 子依赖。
  2. 可移植优先——同一份 SKILL.md 通过不同 harness 的安装路径配置，适配 Claude Code（marketplace plugin）、Pi（package manifest + 原生 tool）、Codex CLI（~/.codex/skills/）、OpenClaw、Cursor、VS Code Copilot 等。
  3. 自动触发——Agent 在即将向终端输出 4+ 行或 3+ 列复杂表格时，会自动调用该 skill 输出 HTML，不再喷 ASCII 字符画。

认可度

  • GitHub Stars：约 9.5k（截至 2026-08-15），Forks 约 637。
  • Commit 活跃度：43 次 commit，主分支 8 月 15 日仍有 push，是近 7 天仍在迭代的活跃项目。
  • 多平台背书：Pi（一家由 Pika Labs 衍生的 AI Agent 平台）把它列为官方 skill，提供原生 visual_explainer tool（含 prepare / render / render_quick 三个 action）。
  • 中文社区曝光：腾讯新闻、QQ、微博等技术号已在 2026-02 集中报道，国内 AI Agent 圈层里算被高频引用的「可视化 Skill」。
  • 生态位：在 2026 年 8 月 GitHub 搜索 SKILL.md 关键词结果中，它的 Star 量位于「可视化呈现」细分赛道前列（仅次于 cathrynlavery/diagram-design 的同类定位）。

链接

  • GitHub 仓库：https://github.com/nicobailon/visual-explainer
  • 官方市场：Claude Code /plugin marketplace add nicobailon/visual-explainer
  • Pi 安装：pi install git:github.com/nicobailon/visual-explainer

原作者

Nico Bailon（GitHub：@nicobailon），Pika Labs 的 Senior Agent Engineer，专注 AI Agent 的工程化与跨平台 Skill 设计。同时是 131 个仓库的维护者，Twitter @nicopreme，总部在 Vancouver, BC。

介绍

visual-explainer 由 @nicobailon 在 Pika Labs 内部孵化，目标是「让 Agent 在终端里的每一次复杂输出都值得被截图分享」。它把 SKILL.md（工作流 + 设计原则）、commands/ 下的 7 个斜杠命令模板、mcp/ 的 stdio MCP server、quick/ 的 deterministic renderer、pptx/ 的 best-effort 静态 PPTX 导出器打包成单一仓库，对外暴露成「统一的可视化解释器」。

它最核心的承诺是：当你让 Agent「画一下认证流量的架构」或「把这份 diff review 给我」，它不再用 +---+ 这种 ASCII 框线糊你一脸，而是输出带 Mermaid 缩放、Chart.js 仪表盘、分层架构卡片、暗/亮主题切换器的 HTML 页面，能直接 Ctrl+L 链接分享给同事。

特点

  • 多宿主一码通吃：同一份 SKILL.md 通过 .claude-plugin/plugin.json、package.json 的 pi.extensions、plugins/visual-explainer/mcp/server.mjs 三种形态，分别打入 Claude Code、Pi、MCP host，真正做到了 write-once, run-anywhere。
  • 自带 11 套主题 + 字体配对：Dracula、Nord、Tokyo Night、Gruvbox Dark/Light、Catppuccin Mocha/Latte、Solarized Light、GitHub Light 等调色板与字体组合可在页面右上角实时切换，Mermaid 图颜色会跟随主题重渲染。
  • Quick Mode 走确定性渲染：带 --quick 的命令让 Agent 输出 JSON schema，由仓库自带的 render.mjs 本地校验后直接生成 HTML，跳过 LLM 生成 HTML 的不稳定环节，更适合 CI / 自动化场景。
  • 自动触发 + 显式命令双通路：除了 /generate-web-diagram、/diff-review、/plan-review、/project-recap、/fact-check、/generate-slides 这 6 条显式斜杠命令外，Agent 检测到即将喷 4 行以上 ASCII 表格时也会主动调用。
  • 可选 PPTX 导出但 HTML 是事实源：visual-explainer-pptx 工具按 HTML 里 <section class="slide"> 结构提取标题/文字/简单表格导出为 .pptx，但官方明确不保留动画、字体、JS 行为——HTML 始终是 ground truth。

使用方法

Claude Code（推荐路径）：

/plugin marketplace add nicobailon/visual-explainer
/plugin install visual-explainer@visual-explainer-marketplace

然后在对话里直接说：/generate-web-diagram authentication flow，或自然语言触发「给我画一下这个 PR 改了什么」。

Pi（原生 tool 路径）：

pi install git:github.com/nicobailon/visual-explainer

安装后 Agent 自带 visual_explainer tool，调用 action: "render_quick" + JSON spec 即可让本地 renderer 写出 ~/.agent/diagrams/xxx.html。

Codex CLI：

git clone --depth 1 https://github.com/nicobailon/visual-explainer.git /tmp/visual-explainer
mkdir -p ~/.codex/skills ~/.codex/prompts
cp -R /tmp/visual-explainer/plugins/visual-explainer ~/.codex/skills/visual-explainer
cp /tmp/visual-explainer/plugins/visual-explainer/commands/*.md ~/.codex/prompts/

调用时用 $visual-explainer 或显式提到「请用 visual-explainer skill」。

使用场景与人群

  • 架构师 / Tech Lead：在 PR 评审、设计评审里要让 Agent 把方案图、风险矩阵、迁移路径快速产出可分享 HTML。
  • 后端 / 全栈工程师：在 IDE 里 review 复杂 diff、对比两份 plan、重温 2 周前的项目时，希望 Agent 不再吐出 ASCII 框线，而是直接生成可滚动 HTML recap。
  • AI Agent 教程作者：录课程、做培训资料时需要把 Agent 跑出来的内容变成可嵌入 slide / PPTX 的素材。
  • Pi / Claude Code 重度用户：已经习惯斜杠命令、想要「一个 skill 同时在 Pi 和 Claude Code 上跑」的人。
  • 不适合：纯 CLI 极简主义者（连 HTML 都不想看）、不需要可视化产出的纯代码生成场景。

输入与输出案例

案例 1：架构图自动出图

  • Input：
/generate-web-diagram authentication request flow between web client, gateway, auth-service, and session store
  • Output：一份 self-contained HTML 文件（默认写入 ~/.agent/diagrams/），包含 Mermaid 时序图（颜色按当前主题）、分层架构卡片（4 个组件 + 数据流箭头）、Chart.js 显示每秒 QPS 的小仪表盘、深浅色切换器、字体切换器。

案例 2：Diff Review 快速产出

  • Input：
/diff-review --quick main..HEAD
  • Output（JSON schema 形式，渲染后页面）：
{
  "title": "PR #247 — Refactor session middleware",
  "sections": [
    {"type": "kpis", "items": [
      {"label": "Files changed", "value": 12},
      {"label": "Lines +/−", "value": "+384 / −201"}
    ]},
    {"type": "diff_heatmap", "rows": [
      {"file": "src/auth/middleware.ts", "add": 124, "del": 88, "risk": "high"}
    ]},
    {"type": "verdict", "text": "Net improvement. Recommend merging after security review."}
  ]
}

render.mjs 校验通过后写入 ~/.agent/diagrams/diff-review-2026-08-15.html，浏览器打开即得到一份带标题、KPI 卡、文件热力图、合并建议区块的可分享 HTML。

GitHub: https://github.com/nicobailon/visual-explainer

GitHub: https://github.com/nicobailon/visual-explainer

评论区

0 条评论

登录后可评论。

Skill超级捕获手 10 阅读