Presentation Maker

Presentation Maker — конфигуратор презентаций

Загружай этот скилл когда нужно создать презентацию из темы/промпта/контента. Он повторяет пайплайн Presenton (проверенный код — схемы и промпты взяты из presenton/presenton), но выдаёт самодостаточные результаты: Markdown-аутлайн, HTML+CSS-слайды и реальный .pptx.

Три выхода (всегда все три, если не попросили только один)

| # | Выход | Файл | Формат | |---|-------|------|--------| | 1 | Аутлайн | outline.md | структурированный план слайдов + выбор лейаутов + палитра | | 2 | HTML-слайды | slides.html | автономный HTML, CSS 16:9, открывается в браузере | | 3 | PPTX | deck.pptx | настоящий PowerPoint через python-pptx |

По умолчанию генерируются все три. Пользователь может попросить только один (только html, только pptx, только аутлайн).

---

Пайплайн генерации

Шаг 0. Собрать параметры (по умолчанию, если не указано)

| Параметр | По умолчанию | Диапазон | |---|---|---| | n_slides | auto-detect | 1–20 | | language | ru (auto-detect из контента) | ru/en/auto | | tone | «чёткий профессиональный» | варьируется | | verbosity | standard | concise≈20 слов / standard≈40 / text-heavy≈60 | | include_title_slide | true | true/false | | include_table_of_contents | false | true/false |

Эти настройки авторитетнее просьб внутри контента/инструкций. Если в теме просят «другой язык/число слайдов» — побеждают явные параметры.

Шаг 1. Сгенерировать аутлайн (структура слайдов)

Построй структуру как список слайдов, где каждый слайд — это Markdown-контент (то, что действительно увидит зритель), а не продп / команда для создания.

Контент-рулы (критично, перенесено из Presenton):

• Каждый слайд: ## Title + содержимое (буллеты / сравнение / таблица / метрики).
• Объём: ~N слов по verbosity (20/40/60). Меньше — лучше.
• Markdown, но без **bold** и __italic__.
• Первый слайд (титул): только title + имя выступающего + дата + обзор. Без лишнего.
• Без URLs, гиперссылок, цитат, ссылок, footer, списка источников.
• Данные консистентны между слайдами.
• Один слайд = одна цель. Перегруженная тема → разбить на несколько.
• Логический поток введение → заключение; без повторов и филлера.
• Если в контенте просят «slide 5: bar chart Q1 10, Q2 20» — в аутлайне пиши только таблицу Quarter | Value с числами, без слов «create a bar chart».
• Настоятельные факты, цифры, таблицы и код — включать, если есть.

Иконки (критично):

• Запрещены эмодзи в качестве иконок на слайдах (🎓🤝📊 и т.п.) — ни в контенте, ни в спеке, ни в аутлайне.
• Если слайду нужны иконки — только SVG из популярных наборов (Lucide/Feather и аналоги): файл templates/icons/.svg в папке скилла.
• В спеке/аутлайне указывай имя иконки без расширения ("icon": "graduation"), сборщик сам подставит инлайн-SVG.
• Доступные иконки: graduation, users, presentation, building, chart, family, bot, zap, briefcase, award, arrow-right. Если нужной нет — добавить SVG-файл (Lucide-стиль: stroke="currentColor", stroke-width="2", viewBox 0 0 24 24) в templates/icons/.

Формат аутлайна в presentation.md:

#   — via plain, не markdown

## Slide 1 — Title
- Титул: ...
- Имя: ...
- Дата: ...
- Обзор: ...

## Slide 2 — Problem
- Буллет 1
- Буллет 2

## Slide 3 — Data
| Quarter | Value |
|---|---|
| Q1 | 10 |
| Q2 | 20 |

Шаг 2. Выбрать лейаут для каждого слайда (маппинг контент → лейаут)

Из извлечённой логики Presenton. Для каждого слайда выбери тип лейата и укажи его в аутлайне (slide type: ...).

| Контент / цель | Лейаут | |---|---|---| | Цель всей презентации или темы → Title/Opening, Closing → Title | title | | Таблица с текстовыми данными | table | | Таблица с числовыми данными | chart (n столбцов → n-1 графиков) или metrics | | Сравнение/контраст двух+ вещей | comparison (side-by-side) | | Процесс/workflow/этапы | process (визуальная пошаговая) | | Понятие/идея (не данные) | image / image+text | | Метрики/ключевые показатели | metrics | | Оглавление (только если контент — оглавление) | table_of_contents | | Открытие главы/раздела | divider | | Вывод/заключение | title или emphasis | | Ключевая мысль / вывод одним утверждением | quote | | Один hero-показатель (гигантское число) | big_number | | Набор возможностей (иконка+заголовок+описание) | feature (сетка фич) | | Партнёры/бренды/заказчики списком | logos (сетка) | | План/повестка в начале | table_of_contents |

Выбор лучшего лейаута для следующего слайда

Сборщик умеет выбирать лейаут сам (pick_layout в build_html.py), если в спеке указать "type": "auto" или не указывать тип. Алгоритм идёт по приоритету контента:

1. Явный type в спеке — всегда побеждает.
2. quote → quote; logos → logos; toc/table_of_contents → tableofcontents; features → feature; steps → process.
3. items с title/desc → timeline.
4. columns → comparison; metrics → metrics.
5. value (hero-число) → big_number.
6. table: числовые столбцы (2+) → chart, текстовые → table.
7. bullets: если предыдущий слайд тоже bullets и буллеты метрико-подобные (содержат :, %, млн, млрд, ₽) → kpi_row (разнообразие), иначе — bullets.

Правила разнообразия: автовыбор учитывает тип предыдущего слайда и избегает двух одинаковых подряд, когда есть лучшая визуальная альтернатива (bullets→kpi_row). При этом «лучший под смысл» важнее «разнообразия ради» — не искажай контент под лейаут.

Правила выбора (критично):

• Контент с таблицей → обязан выбрать table или chart-лейаут.
• Таблица с текстом → только table, не chart (chart только для чисел).
• Числовая таблица → chart, не metrics (метрики — для отдельных показателей, не для таблиц).
• Лейаут с картинкой — только если контент содержит картинку или пользователь явно просит изображение.
• Соседние слайды должны быть разными (кроме титульного повтора).
• Разнообразить: текст+визул, инфодензит.
• Допустимо использовать один лейаут несколько раз, если так лучше по смыслу.

Шаг 3. Выбрать тему и сгенерировать палитру

Темы (каждая = набор лейаутов + шрифтовая система):

| Тема | Характер | |---|---| | general | минимальный, чистый, много воздуха | | modern | современный, ровные карточки, большие скругления | | executive | строгая, деловая, тёмная | | momentum | динамичная, акценты | | swift | Apple-style, воздух, бирюзовый | | standard | базовый, универсальный |

Если тема явно не указана — general или modern.

Извлечение палитры (аналог ThemeData из Presenton): Для каждой темы сформируй такие ключи:

primary / background / card / stroke /
background_text / primary_text /
graph_0..graph_4   (до 5 серий графов)

Рекомендация для светлой темы: background: #FFFFFF, primary: #007AFF-синий (или акцент по теме), тёмный текст primary_text: #1C1C1E. Для тёмной: background: #1C1C1E, текст светлый.

В аутлане обязательно выпиши выбранную палитру, чтобы HTML и PPTX использовали одну и ту же палитру.

---

Дизайн-система (обязательно к соблюдению)

Дизайн-система: см. references/design-system.md и, когда оформляешь слайды, следуй ей.

Продакт-дизайнер — расширенные требования к презентации

Читай references/product-designer.md, когда нужна проверка структуры и визуальная иерархия слайдов.

---

Сборка выхода

Выход 2 — slides.html

• Автономный файл: вся CSS внутри ``, zero внешних ссылок.
• За основу брать templates/slides.html из папки скилла: там уже готовы все лейауты (title, divider, bullets, metrics, comparison, table, chart, process, closing), CSS-переменные палитры в :root и навигация (стрелки/клик/колесо/touch).
• Генератор: копирует шаблон и заменяет слайды на реальные, заполняя :root-переменные выбранной палитрой. Удаляет неиспользуемые лейауты из разметки.
• Каждый слайд — ` внутри .deck`.
• Палитра — из выбранной темы (CSS-переменные).
• Русский текст ок, кросс-браузерно.

Шаг 3: deck.pptx

Скрипт scripts/build_pptx.py собирает .pptx из JSON-спека (аутлайн). Запуска:

python3 scripts/build_pptx.py outline.json deck.pptx

Читает из JSON: slide list с типами и контентом + палитру. Рисует лейаты через python-pptx: textbox для заголовков/буллетов, таблицы TrueTable, charts (CategoryChartData) для данных, цветные фоны по палитре.

---

Верификация — ОБЯЗАТЕЛЬНЫЙ гейт перед сдачей

Слайды должны быть собраны качественно, эстетично и лаконично. Это не пожелание, а обязательный шаг: презентация не считается готовой, пока не пройдёт проверку.

Шаг 1. Автоматическая проверка verify_slides.py (обязательно)

После сборки slides.html обязательно прогнать скрипт верификации в реальном браузере:

# из venv проекта, где установлен playwright:
.venv/bin/python scripts/verify_slides.py slides.html --spec deck.json

Скрипт открывает Chromium и для каждого слайда проверяет:

• заголовок и непустой контент;
• нет горизонтального переполнения самого слайда;
• текст не вылезает за границы карточек (metric/step/col/tl/kpi/bullet/table-row/badge);
• нет обрезанного текста (scrollWidth > clientWidth);
• навигация (стрелки) переключает слайды;
• число слайдов совпадает со спекой (--spec).

Exit code 0 = PASS, 1 = FAIL. Если FAIL — исправить и пересобрать. Сдавать презентацию с FAIL запрещено.

> Если playwright не установлен: .venv/bin/pip install playwright && .venv/bin/playwright install chromium

Шаг 2. Визуальный контроль (обязательно)

Даже при PASS скрипта — открыть slides.html в браузере и глазами проверить эстетику:

• воздух и отступы: ничего не прилипает к краям слайда, заголовки не вплотную к карточкам;
• крупный шрифт в метриках/числах, минимум текста на слайде (лаконичность);
• единая палитра: карточки/акценты/прогресс-бар в цветах выбранной темы;
• длинные слова переносятся или ужимаются, а не вылезают из карточек;
• на соседних слайдах разные лейауты, нет визуального повтора.

Любая проблема — исправить в шаблоне/спеке и пересобрать, потом снова прогнать шаг 1.

Шаг 3. Продакт-дизайн-ревью (обязательно)

Пройти сводный чек-лист «Продакт-дизайнер» (см. references/product-designer.md). Прогони его как ревьюер: для каждого из 17 пунктов проверь на реальных слайдах (заголовки, структура, таблицы/графики, контраст, отступы). Если хотя бы 1 пункт не проходит — исправить (контент/шаблон/спек) и пересобрать, затем повторить шаги 1–2. Презентация с непройденным чек-листом не сдаётся.

---

Smoke-тест скилла (проверить после создания)

Когда скилл готов, прогнать 3 выхода с мини-темой, например «Презентация о сервисе UniverID», на 3-4 слайде. Удостовериться:

1. presentation.md — корректная структура, контент-рулы соблюдаются.
2. slides.html — открывается, слайды перелистываются, палитра применена.
3. verify_slides.py — PASS на готовой презентации (и FAIL на намеренно битой — проверить, что скрипт ловит переполнения).
4. deck.pptx — открывается в Presentёре без глюков.

---

Куда класть скрипты/зависимости

• scripts/build_html.py, scripts/build_pptx.py, scripts/verify_slides.py и templates/slides.html — идут вместе со скиллом.
• Python-зависимость python-pptx — если нет, установить через venv проекта:

``bash python3 -m venv .venv && .venv/bin/pip install python-pptx # генерация : .venv/bin/python scripts/build_pptx.py outline.json deck.pptx ``

• Python-зависимость playwright (для verify_slides.py) — если нет:

``bash .venv/bin/pip install playwright && .venv/bin/playwright install chromium # проверка : .venv/bin/python scripts/verify_slides.py slides.html --spec deck.json ``

• Всё генерируется в CWD проекта, в подпапке presentation/ по умолчанию (или туда, куда просит юзер).

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: bestdeejay-design
• Source: bestdeejay-design/agent-skills
• License: MIT
• Homepage: https://bestdeejay-design.github.io/agent-skills/

Install and usage instructions live in the source repository linked above.