Repolode
nicobailon

nicobailon/visual-explainer

一个智能体技能,让编程助手把图表、代码对比审阅、计划和表格生成为样式精美的 HTML 页面,替代终端里的 ASCII 字符图。

Star
10,550
Fork
677
未关闭 Issue
0
最近提交
4小时前

这是什么?

visual-explainer 是一个面向 Claude Code、Codex CLI、Cursor、Pi 等编程助手的智能体技能。当需要解释架构、审阅代码差异或对照计划检查需求时,助手会生成一个独立的 HTML 页面并在浏览器中打开,而不是在终端输出 ASCII 图或容易换行错乱的宽表格。

该技能提供了一组斜杠命令,涵盖网页图示、可视化实施计划、幻灯片、带旁白的 MP4 视频、代码差异审阅、基于代码库的计划检查、项目回顾、方案对比和文档事实核查。页面有多种版式,并内置十一种可切换的配色方案;图示为内联 SVG 手绘风格,可逐步演示流程。

核心技能无需构建步骤,只依赖浏览器。可选组件包括本地 stdio MCP 服务、Pi 扩展工具,以及依赖少量 Node 包的best-effort PPTX 导出工具。

核心功能

  • 01为图表、表格和审阅内容生成独立的 HTML 页面,替代 ASCII 输出。
  • 02提供代码差异审阅、计划检查、项目回顾、方案对比和幻灯片等斜杠命令。
  • 03内置十一种可切换配色方案及多种页面版式。
  • 04使用内联 SVG 绘制手绘风格图示,并可逐步演示流程。
  • 05包含可选的 MCP 服务、Pi 工具和 PPTX 导出工具。

适用场景

  • 向团队成员讲解系统架构或登录认证流程。
  • 审阅较大的代码差异,或对照实施计划检查需求。
  • 把智能体输出的复杂对比表格转为易读的页面。
  • 基于代码库或某个功能制作幻灯片或简短的配音视频。

快速上手

  1. 1

    在 Claude Code 中添加插件市场

    /plugin marketplace add nicobailon/visual-explainer
  2. 2

    安装 visual-explainer 插件

    /plugin install visual-explainer@visual-explainer-marketplace
  3. 3

    向智能体请求图表或审查,它会在浏览器中打开 HTML 页面

使用前须知

  • 视频导出需要另外安装 ffmpeg、Chrome 和 playwright-core。
  • PPTX 导出是尽力而为的工具,HTML 仍是源文件。

标签

常见问题

visual-explainer 是什么?
一个智能体技能,让编程助手把图表、代码对比审阅、计划和表格生成为样式精美的 HTML 页面,替代终端里的 ASCII 字符图。 visual-explainer 是一个面向 Claude Code、Codex CLI、Cursor、Pi 等编程助手的智能体技能。当需要解释架构、审阅代码差异或对照计划检查需求时,助手会生成一个独立的 HTML 页面并在浏览器中打开,而不是在终端输出 ASCII 图或容易换行错乱的宽表格。
visual-explainer 可以免费使用吗?用的什么许可证?
visual-explainer 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
visual-explainer 还在维护吗?
活跃维护中。visual-explainer 最近一次提交是在 2026年10月20日。
visual-explainer 适合用来做什么?
向团队成员讲解系统架构或登录认证流程。 审阅较大的代码差异,或对照实施计划检查需求。 把智能体输出的复杂对比表格转为易读的页面。 基于代码库或某个功能制作幻灯片或简短的配音视频。
visual-explainer 怎么安装和运行?
在 Claude Code 中添加插件市场: /plugin marketplace add nicobailon/visual-explainer 安装 visual-explainer 插件: /plugin install visual-explainer@visual-explainer-marketplace 向智能体请求图表或审查,它会在浏览器中打开 HTML 页面
在哪里获取 visual-explainer?
源代码和安装说明在 GitHub 上:https://github.com/nicobailon/visual-explainer

概要由 AI 根据项目 README 生成;GitHub 数据每日更新。

相关项目