Visual Explainer

关于这个 Skill

Visual Explainer 帮助 Agent 用图为主的 HTML 展示架构、代码变更和决策背后的机制。共用工具支持动画步骤和可视化审阅，还提供演示文稿、方案比较、项目回顾及配音视频命令。

为什么推荐

开源 Skill，包含共用渲染器和任务命令模板；请安装完整的上游 Skill 目录。

适合用来做什么

• 用带注释的图解说明认证流程或系统架构。
• 可视化审阅代码变更，或对照代码库检查实施计划。
• 比较方案、回顾项目，或把技术主题制作成 HTML 演示文稿。

输出与限制

默认交付独立 HTML 页面及其可编辑源文件，也可按需制作 HTML 幻灯片。PPTX 导出不保留 HTML 幻灯片的动画和交互；视频导出为可选功能。

仓库与安装说明

尝试一个请求

1. 绘制系统图

   安装 Skill 后，向 Agent 提问：

   使用 visual-explainer 绘制我们的认证流程，包含令牌刷新和失败路径。

使用前需要了解

• 需要兼容的编程 Agent、运行共用渲染器的 Node.js，以及查看 HTML 的浏览器。Chrome 和 playwright-core 可用于可选的浏览器检查。
• 导出 MP4 还需要 ffmpeg、Chrome 和 playwright-core；配音需要语音 API 密钥。PPTX 导出为尽力转换的静态文件。

支持的 Agent