Khan Explainer — скилл
Скилл для видеообъяснялок в стиле Khan Academy: перо рисует на доске, пока идет голос, один сценарий дает готовый MP4
- 156 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Установка скачивает npm-пакеты и браузер Chromium, а рендер запускает локальные скрипты
- Режим с реальной речью обрабатывает ваши аудио- и видеофайлы и запрашивает разрешения macOS
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/khan-explainerОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Установка скачивает npm-пакеты и браузер Chromium, а рендер запускает локальные скрипты
- Режим с реальной речью обрабатывает ваши аудио- и видеофайлы и запрашивает разрешения macOS
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Khan Explainer — скилл Claude Code, который делает обучающие видео в стиле Khan Academy: рука рисует, пока звучит голос. Вы описываете ролик, Claude пишет файл сцены, а одна команда рендерит MP4. Все работает на вашем Mac на HTML-холсте, Playwright, ffmpeg и встроенном голосе `say`, без ключей API, аккаунтов и редактора. Режимов три. Урок на доске рисует схему штрих за штрихом по ходу объяснения. Туториал поверх интерфейса дорисовывает стрелки, кружки и нумерацию шагов на ваших скриншотах. Режим с реальной речью берет ролик YouTube или подкаст и выдает вертикальные шорты, где доска рисуется под слова говорящего, а сам говорящий при желании вырезается и ставится перед доской. Все режимы выглядят как мел на классной доске или маркер на белой, в горизонтальном или вертикальном формате. Сценарий состоит из битов, то есть одной произносимой фразы с рисунком. Рендерер сначала озвучивает бит, измеряет длительность и подгоняет рисунок под нее, поэтому перо идет вровень со словами и временные метки вручную не вводятся.
Для кого. Преподавателям, авторам курсов и продуктовым командам, которым нужны короткие объясняющие ролики и туториалы без студии записи и платных сервисов.
Подходит, если
- Надо за полчаса объяснить термин вроде AI-агента роликом с рисунками на доске
- К релизу нужен туториал, в котором стрелки и кружки нарисованы поверх скриншотов интерфейса
- Из длинного подкаста нужны вертикальные шорты, где доска рисуется под слова спикера
- Нужны ролики без ключей API и подписок, полностью локально на Mac
Не подходит, если
- Нужна Windows или Linux: скилл рассчитан на macOS и использует голос `say`
- Нужен живой монтаж с видеорядом и переходами: здесь только доска и рисунки
- Нужен профессиональный голос диктора: по умолчанию читает системный голос macOS
Пример запроса к агенту
Сделай ролик в стиле Khan Academy за 30 секунд про то, что такое AI-агент, мелом на доске, вертикальный форматОграничения
Нужны macOS, Node.js 20 или новее и ffmpeg (`brew install ffmpeg`). После клонирования в `~/.claude/skills/khan-explainer` выполните в папке `scripts` команды `npm install` и `npx playwright install chromium`, это скачивает браузер для рендера. Скрипт `kokoro_tts.py` дает альтернативный голос, но его зависимости ставятся отдельно.
Рендер зависит от скорости компьютера и размера сцены. Системный голос macOS звучит заметно синтетически, а для арабского и других языков в репозитории есть примеры, качество зависит от установленных голосов. Реальная речь вырезается и накладывается с помощью `cutout.swift`, и этот режим требует Swift и разрешений macOS.
Как отключить. Удалите папку `~/.claude/skills/khan-explainer`. Скачанный Chromium для Playwright лежит в кэше Playwright, его можно удалить командой из документации Playwright.
Частые вопросы
Как поставить скилл?
Клонируйте репозиторий в `~/.claude/skills/khan-explainer`, затем в папке `scripts` выполните `npm install` и `npx playwright install chromium`.
Нужны ли ключи API?
Нет, все работает локально: HTML-холст, Playwright, ffmpeg и встроенный голос `say` macOS. Аккаунты и редактор тоже не нужны.
Как перо не обгоняет голос?
Рендерер сначала озвучивает каждый бит, измеряет его длительность и растягивает рисунок под нее. Метки времени вручную вводить не надо.
Какие форматы поддерживаются?
Мел на доске или маркер на белой доске, горизонтальное и вертикальное видео. Режим можно переключить флагом или даже в середине ролика.
Можно ли делать ролики на других языках?
В `examples/` лежат образцы для арабского и нескольких языков. Качество зависит от голосов, установленных в macOS.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл делает из сценария видео, где схемы и подписи рисуются штрихами в момент реплики диктора, а кадры считаются локально.
Скилл превращает закадровый текст в 20-секундный пиксельный ролик 1920×1080 с озвучкой и проектом для правок.
Скилл Claude Code: ролик с говорящим мультяшным ведущим, губы по вашему голосу, позы по словам, бренд и проверка синхронизации
Скилл превращает текст объяснения в видео: рисунки чертятся от руки, текст пишется по буквам, генераторы картинок не нужны.
Скилл для Claude Code и Codex, который превращает тему в озвученный анимационный ролик-объяснение на Remotion с субтитрами и главами
Скилл делает 20–60-секундный ролик из вашей озвучки и реальных материалов в выбранном стиле, MP4 собирается локально.
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Khan Explainer (эта карточка) | нет | 156 | |
| whiteboard-teacher-video | нет | 543 | делает ролики для учителей, а режимов с реальной речью спикера и рисования поверх скриншотов нет |
| vox-explainer | нет | 220 | видеообъяснялки в стиле Vox, доски и пера тут нет |
Коротко о README
Автор описывает навык как способ делать видео в стиле Khan Academy бесплатно: сцена пишется в JavaScript, рендерер подгоняет рисунки под озвучку. В репозитории лежат примеры (ИИ-агенты, арабский, несколько языков, туториал по интерфейсу), скрипты рендеринга и тесты шрифтов.
Бейдж для README
Исходный SKILL.md
---
name: khan-explainer
description: Use when the user wants a Khan Academy style explainer video, a blackboard or whiteboard lesson, a hand-drawn chalk-talk animation, a short narrated video that teaches a concept ("explain X in a video", "explainer video", "teach X in 30 seconds"), or a tutorial that draws hand-written arrows, circles and captions over product screenshots ("draw over the UI", "annotated walkthrough"), or clips cut from a YouTube video or podcast where the speaker's real audio plays under a blackboard drawn to it ("khanify this video", "clip this with the Khan visual"), especially when it must be free, local, and use no paid APIs or keys. macOS only.
---
# Khan Explainer
A pen draws while a voice explains. Three modes, one renderer:
- **Blackboard lesson.** A diagram drawn on a black board, Khan Academy style.
- **Draw-over-UI tutorial.** Arrows, circles and numbered captions drawn over product screenshots.
- **Real-audio clip.** A real person's voice, cut from a video, with the board drawn to their words. See "Real-audio clips".
One scene file in, one MP4 out, in seconds. Free and local: HTML canvas, Playwright, macOS `say`, ffmpeg. No keys.
Every mode renders as chalk on a blackboard or marker on a whiteboard, landscape or vertical.
Made by Haider Farooq ([github.com/haiderfarooq3](https://github.com/haiderfarooq3/khan-explainer)). Free for anyone to use and change (MIT).
**Core principle: the voice drives the clock.** A scene is a list of beats. A beat is one spoken clause plus the drawing that happens while it is said. The renderer speaks each beat first, measures it, and fits that beat's drawing to it. Never hardcode seconds or guess when a word lands.
## Workflow
1. **Script the beats.** One idea per beat, split at commas and full stops. Check the length formula below.
2. **Plan the picture.** Lesson: lay out the whole board. Tutorial: capture the stills and their rectangles. Each has a section below.
3. **Write `scene.js`** in a scratch folder. Copy `examples/ai-agents.js` for a lesson or `examples/ui-tutorial.js` for a tutorial.
4. **Render:** `node ~/.claude/skills/khan-explainer/scripts/render.js scene.js out.mp4`
5. **Read the `sheet` image it prints.** It shows the board at the end of every beat. The same folder holds every beat full-size as `b000.jpg`, `b001.jpg` and so on. Open those to check that a ring really sits on a small button. Fix every `WARN` (text off the board, or one label on another), overlap and spill,