Repolode
Предложить
nicobailon

nicobailon/visual-explainer

Навык для AI-агентов, который оформляет диаграммы, обзоры diff, планы и таблицы в виде HTML-страниц вместо ASCII-графики.

Открыть на GitHub
Звёзды
10,550
Форки
677
Открытые issues
0
Последний коммит
вчера

Что это?

visual-explainer — это навык для помощников по программированию, таких как Claude Code, Codex CLI, Cursor и Pi. Когда агента просят объяснить архитектуру, проверить diff или сопоставить требования с планом, он создаёт автономную HTML-страницу и открывает её в браузере вместо того, чтобы выводить ASCII-диаграммы или широкие таблицы в терминале, которые плохо переносятся.

В навык входят slash-команды для типовых задач: создания веб-диаграмм, наглядных планов реализации, слайд-деков и озвученных видео в формате MP4, проверки diff, сверки плана с кодовой базой, обзоров проекта, сравнения вариантов и проверки фактов в документах. Для страниц доступны несколько вариантов оформления и одиннадцать переключаемых цветовых палитр, а диаграммы в виде нарисованных от руки встроенных SVG позволяют пошагово показывать процесс.

Для основного навыка не нужна сборка — достаточно браузера. Дополнительно доступны локальный MCP-сервер с интерфейсом stdio, инструмент-расширение для Pi и экспортёр PPTX, который использует небольшие зависимости Node.js и работает по принципу «как получится».

Ключевые возможности

  • 01Создаёт автономные HTML-страницы с диаграммами, таблицами и обзорами вместо ASCII-графики.
  • 02Предлагает slash-команды для проверки diff и планов, обзора проекта, сравнений и создания слайд-деков.
  • 03Предоставляет одиннадцать переключаемых цветовых палитр и несколько вариантов оформления страниц.
  • 04Создаёт нарисованные от руки встроенные SVG-диаграммы с возможностью пошагово показывать процесс.
  • 05Включает дополнительные MCP-сервер, инструмент для Pi и утилиты экспорта в PPTX.

Сценарии использования

  • Объяснять коллегам архитектуру системы или процесс аутентификации.
  • Проверять большой diff или сопоставлять требования с планом реализации.
  • Превращать сложную сравнительную таблицу от агента в наглядную страницу.
  • Создавать слайд-дек или короткое озвученное видео на основе кодовой базы или функции.

Быстрый старт

  1. 1

    Добавьте marketplace в 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 по-прежнему остается основным источником.

Темы

#agent-skill#html#diagrams#code-review#claude-code#visualization#mcp

Частые вопросы

Что такое visual-explainer?
Навык для AI-агентов, который оформляет диаграммы, обзоры diff, планы и таблицы в виде HTML-страниц вместо ASCII-графики. visual-explainer — это навык для помощников по программированию, таких как Claude Code, Codex CLI, Cursor и Pi. Когда агента просят объяснить архитектуру, проверить diff или сопоставить требования с планом, он создаёт автономную HTML-страницу и открывает её в браузере вместо того, чтобы выводить ASCII-диаграммы или широкие таблицы в терминале, которые плохо переносятся.
visual-explainer можно использовать бесплатно? Какая у него лицензия?
visual-explainer распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
visual-explainer всё ещё поддерживается?
Активно поддерживается. Последний коммит в visual-explainer — 20 окт. 2026 г..
Для чего можно использовать visual-explainer?
Объяснять коллегам архитектуру системы или процесс аутентификации. Проверять большой diff или сопоставлять требования с планом реализации. Превращать сложную сравнительную таблицу от агента в наглядную страницу. Создавать слайд-дек или короткое озвученное видео на основе кодовой базы или функции.
Как установить visual-explainer?
Добавьте marketplace в 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

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты