一个 Agent Skill,让 AI 把复杂问题的回答生成为一页可离线查看的 HTML,含图表与表格。
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
在 Claude Code 中添加插件市场
/plugin marketplace add nicobailon/visual-explainer - 2
安装 visual-explainer 插件
/plugin install visual-explainer@visual-explainer-marketplace - 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 数据每日更新。
相关项目
一个本地代码知识图谱,通过 MCP 和 CLI 为 AI 编程工具提供精准的代码审查上下文。
面向 AI 编程 agent 的 HTML 原生设计 skill,一句话生成原型、幻灯片、动画与信息图。
让 Claude Code 等编码代理根据自然语言描述生成 Excalidraw 图表的技能包。
为 Claude 等编程智能体提供的技能,可将简短 JSON 描述转换为可交互、带动画的图表,并导出多种格式。
一款智能体技能,可将想法、计划或代码库转换为可交互的 HTML 图表,支持 Claude Code、Codex 等。