HTML PPT Skill — скилл для презентаций в HTML с окном докладчика

lewislulu/html-ppt-skill· Проверено 13.11.2026· 9,1 тыс.на GitHub

HTML PPT Studio: агент собирает презентацию статичным HTML из 36 тем, 36 макетов и 15 готовых колод, с анимациями и окном докладчика с заметками и таймером.

Как выглядит результат

Обложка проекта с живыми превью колод, собранных скиллом источник

Один слайд годового отчёта в 8 темах из 36 источник

Шаблоны готовых колод: тёмные технические и светлые журнальные источник

Режим докладчика: текущий и следующий слайд, заметки и таймер источник

Снимки и анимации из репозитория и с сайта автора скилла.

Как установить HTML PPT Skill

Личные скиллы лежат в ~/.claude/skills/, проектные — в .claude/skills/ репозитория. Проверка: команда /skills в сессии, вызов по имени — /html-ppt.

git clone --depth 1 https://github.com/lewislulu/html-ppt-skill.git /tmp/html-ppt-skill
mkdir -p ~/.claude/skills/html-ppt
cp -r /tmp/html-ppt-skill/. ~/.claude/skills/html-ppt/

Общая папка ~/.agents/skills/ (в проекте — .agents/skills/) читают Codex, Cursor, VS Code Copilot, Gemini CLI, Antigravity, OpenCode, Kilo Code, Goose, Qwen Code.

git clone --depth 1 https://github.com/lewislulu/html-ppt-skill.git /tmp/html-ppt-skill
mkdir -p ~/.agents/skills/html-ppt
cp -r /tmp/html-ppt-skill/. ~/.agents/skills/html-ppt/

Установщик скиллов от Vercel, нужен Node.js 22.20 или новее. Без -g скилл ставится в текущий проект; флаг -a выбирает агента.

npx skills add lewislulu/html-ppt-skill --skill html-ppt -a claude-code

# для всех проектов
npx skills add lewislulu/html-ppt-skill --skill html-ppt -g

Свои скиллы загружают на любом тарифе, от Free до Enterprise; нужно включённое выполнение кода.

Скачайте папку скилла с GitHub и упакуйте её в ZIP.
claude.ai → Customize → Skills → + → Create skill → Upload a skill
Загрузите ZIP и включите скилл переключателем.

Gemini CLI ставит скиллы из git-репозитория и хранит их в ~/.gemini/skills/.

gemini skills install https://github.com/lewislulu/html-ppt-skill.git --consent

# проверка
gemini skills list

Что умеет

Сделать HTML-презентацию из текста или плана: питч, запуск продукта, техдоклад, недельный отчёт, учебный модуль

Подобрать одну из 36 тем: tokyo-night, swiss-grid, corporate-clean, academic-paper, neo-brutalism и другие

Добавить 27 CSS-анимаций и 20 эффектов на canvas: частицы, конфетти, граф знаний

Написать текст для докладчика по 150–300 слов на слайд и открыть его в окне докладчика клавишей S

Поставить логотип компании на все слайды одним атрибутом

Снять слайды в PNG через headless Chrome

Перед вёрсткой агент уточняет содержание и аудиторию, тему и стартовый шаблон, затем создаёт колоду скриптом scripts/new-deck.sh.

Слайды собираются из готовых блоков templates/single-page/, цвета и отступы берутся из токенов assets/base.css, тема — один CSS-файл в assets/themes/.

assets/runtime.js добавляет навигацию с клавиатуры и свайпом, обзор слайдов, смену темы и окно докладчика с текущим и следующим слайдом, текстом и таймером.

Сборки нет: колода — статичные HTML, CSS и JS, из сети грузятся только веб-шрифты.

Что нужноБраузер для показа колоды; Google Chrome для scripts/render.sh (путь в скрипте прописан под macOS)

АгентыСтавится через npx skills; для ручной установки автор даёт папки Claude Code, Codex, Cursor, OpenCode, Gemini CLI и Windsurf.

Что попросить агента

Сделай техдоклад на 8 слайдов про <тему> в теме tokyo-nightСоздаст колоду из шаблона tech-sharing или с нуля, подставит тему и раскладки и добавит заметки

Преврати <план> в питч-дек для инвесторовПредложит шаблон pitch-deck и темы pitch-deck-vc или corporate-clean, затем сверстает слайды

Мне выступать перед командой, нужен текст для каждого слайдаВозьмёт шаблон presenter-mode-reveal и напишет на каждый слайд 150–300 слов для окна докладчика

Поставь <logo.svg> в правый нижний угол всех слайдов, кроме обложкиПропишет data-logo на body и data-no-logo на обложке

Ограничения

Результат — HTML-страница: файла PPTX скилл не делает, PDF получается печатью из браузера.

scripts/render.sh вызывает Chrome по пути macOS; на Linux и Windows путь придётся поправить.

Образцы реплик и правила текста докладчика в SKILL.md написаны по-китайски, часть шаблонов сделана под формат Xiaohongshu.

Лицензия MIT.

Описание из SKILL.md

HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "幻灯片", "演讲稿", "做一份 PPT", "做一份 slides", a reveal-style HTML deck, a 小红书图文, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal", "slideshow", "幻灯片", "演讲稿", "分享稿", "小红书图文", "talk slides", "pitch deck", "tech sharing", "technical presentation".

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

Какой скилл для презентаций подходит для выступления?

html-ppt: в каждой колоде есть окно докладчика с текстом, таймером и превью следующего слайда, а шаблон presenter-mode-reveal заточен под доклад.

Как установить скилл для создания презентаций html-ppt?

Командой npx skills add https://github.com/lewislulu/html-ppt-skill или копированием папки в ~/.claude/skills/html-ppt/.

Работает ли этот claude presentation skill с PowerPoint?

Нет, колода остаётся HTML-страницей. Для файла .pptx возьмите скилл pptx.

Можно ли открыть такую презентацию без интернета?

Да. Колода работает офлайн, пропадают только веб-шрифты: браузер подставит системные. Чтобы шрифты не менялись, assets/fonts.css заменяют на локальные @font-face.

Как показывать презентацию с заметками?

Откройте колоду в браузере и нажмите S: откроется окно докладчика с текущим и следующим слайдом, текстом выступления и таймером. Окна листаются синхронно.

Как поставить без npx?

Скопируйте папку репозитория в ~/.claude/skills/html-ppt/ для Claude Code или в .agents/skills/html-ppt/ проекта для Codex, Cursor, OpenCode и Gemini CLI. Рядом должен лежать SKILL.md.

Шаблоны можно использовать без агента?

Да, это обычные статичные файлы: колоду можно собрать руками из templates/.