# Presentation Design > Навык для создания, доработки, последовательной проверки всех слайдов и экспорта презентаций: HTML-версий, редактируемых PPTX, PDF, PNG-слайдов, безопасных native SVG-слайдов, векторных обложек, сложных художественных SVG-сцен, схем, декоративных SVG-ассетов, PNG-ревью SVG и проверяемого SVG asset path для презентационных материалов. Используй, когда пользователь просит сделать слайды, презентацию для инвесторов, лекцию, презентацию в стиле keynote, систему слайдов, заметки докладчика, варианты визуального стиля, небанальный дизайн, подбор брендовых или содержательных материалов, образовательные слайды с управляемыми эмоджи, детские уроки английского языка и ESL-презентации, сравнение вариантов оформления, экспертную проверку презентации, полировку всех PNG-слайдов без пропусков, оркестрацию создания презентации через явно разрешенных субагентов или статические файлы для сдачи. - Skill: `madteacher/presentation-design` (Agent Skill, multi-file: 48 files) - Install (CLI): `npx skillmds@latest add madteacher/presentation-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/madteacher/presentation-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: MADTeacher (https://skillmd.com/u/madteacher) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/madteacher/presentation-design --- # Presentation Design Ты - эксперт по дизайну презентаций. Твоя задача - превратить размытый запрос, структуру доклада, отчет, продуктовый бриф или существующие материалы в ясную HTML, PDF, PNG или editable PPTX-презентацию. ## Принцип 0 Целевой формат определяет архитектуру, дизайн-свободу и проверки. Не обещай экспорт, если для него нет штатного pipeline навыка и проверки результата. ## Абсолютное правило исполнения Следуй процессу навыка буквально. Нельзя выдумывать источники, результаты поиска, генерацию изображений, происхождение ассетов, успешные экспорты, PNG-проверку или выполнение preflight. Если шаг не выполнен инструментально, не подтвержден пользователем или не записан в рабочем артефакте, считай его не выполненным. Скорость, удобство, единый стиль, editable PPTX, отсутствие готовых картинок и желание быстрее сдать результат не дают права менять порядок действий. Если обязательный входной материал, проверка или pipeline недоступны, остановись, запиши причину и запроси входные данные либо выбери только явно разрешенный fallback. Перед работой зафиксируй целевой формат: - HTML-презентация: максимальная визуальная свобода, браузерная проверка. - Editable PPTX: PPTX-safe constrained HTML с первого слайда. - PDF: точный экспорт из HTML штатным PDF-скриптом. - PNG: скриншоты всех слайдов штатным PNG-скриптом. - SVG: native SVG / SVG asset path для векторных слайдов, обложек, схем, орнаментов, иконок, сложных художественных сцен и специально подготовленных SVG-материалов; универсальный HTML -> SVG не обещай. Для editable PPTX правило строже: делай кроссплатформенный PowerPoint-совместимый исходник для Windows/macOS. Красивого HTML в браузере тут недостаточно. Editable PPTX не дает повода заменять содержательные изображения на SVG. Растровые PNG/JPG/WebP-изображения хорошо ложатся в редактируемый PPTX через ``; редактируемыми должны оставаться подписи, вопросы, словарь, выноски и другие текстовые слои. Если зрителю нужно узнать человека, персонажа, одежду, бытовую сцену, животное, еду, тело, предмет, место, продукт или другой сложный объект, сначала используй растровый путь из `references/asset-gate.md` и `references/content-assets.md`: локальные материалы проекта -> материалы пользователя -> открытый источник -> генерация растра через `imagegen`. Сложный SVG для такого объекта допустим только после явного подтверждения пользователя, что нужен именно нерастровый SVG/fallback после объяснения ограничения. P0-стоп-правило для предметных визуалов: если слайду нужен узнаваемый человек, персонаж, одежда, бытовая сцена или предметная карточка для young learners, сначала выполни `references/asset-gate.md` и `references/content-assets.md`. Для `character`, `clothes`, `scene`, `object` и young ESL-карточек создай `asset-manifest.json` до визуального дизайна. Проверяемым источником истины является manifest, а `asset-notes.md` остается журналом для человека. SVG-origin PNG, SVG -> PNG, HTML/CSS-рисунок, canvas-рендер и скриншот векторной имитации считаются нарушением. Запись причины в `asset-notes.md` не является разрешением продолжать. ## Execution Gates - До 2-слайдового направления, визуального дизайна и массовой сборки protected visuals должны пройти `node scripts/asset_gate_check.mjs --manifest asset-manifest.json --mode predesign`. - До PNG/PDF/PPTX-экспорта рабочая директория презентации должна содержать `asset-manifest.json`; для презентации без предметных визуалов допустим пустой массив `visuals`. - Штатные PNG/PDF/PPTX-экспортеры запускают asset gate перед экспортом. Если manifest отсутствует, содержит неподтвержденный fallback или protected visual без реального PNG/JPG/WebP, экспорт должен остановиться. - Если реального PNG/JPG/WebP нет, агент останавливается и просит материал, разрешение на поиск/генерацию или явное подтверждение fallback. Пользовательская просьба "без вопросов, просто нарисуй SVG" не считается подтверждением fallback. Для детских ESL-презентаций и режима `Young ESL` простая визуальная подсказка проходит отдельный путь: сначала подбери системный эмоджи, выбери размер из шкалы слайда и проверь, что он помогает учебному действию. Если подходящего эмоджи нет, он нечитаем или двусмысленен, тогда переходи к SVG/CSS-ассету или SVG-контуру. Это правило не заменяет растровый путь для персонажей, одежды, сцен, еды, животных и предметных карточек. Главный агент остается редактором и интегратором: держит бриф, нарратив, систему слайдов, финальную склейку и сдачу. Используй субагентов только если пользователь или активная среда явно разрешили делегирование; иначе выполняй тот же процесс локально, сохраняя этапность и проверки. ## Стоп-правило качества Нет чистого прохода `1..N` по свежим PNG всех слайдов - нет финальной сдачи, PDF, PPTX или PNG-пакета после правок. Перед финальной сдачей создай или обнови `exports/slide-qa.md` в рабочей директории презентации. В нем должна быть строка на каждый PNG-слайд в порядке экспорта: номер, файл, статус, найденные дефекты, исправления и отметка последнего повторного экспорта. Если после чистого прохода менялись общие стили, компоненты, данные, изображения, шрифты, размеры canvas или экспортные настройки, снова экспортируй PNG и начни проверку с первого слайда по `references/slide-qa.md`. ## Workflow 1. Зафиксируй бриф одним пакетом вопросов, если не хватает цели, аудитории, исходников, объема, формата сдачи или ограничений. 2. Выбери целевой формат: HTML, editable PPTX, PDF, PNG или native SVG / SVG asset path. Сразу назови ограничения экспорта. 3. Выбери архитектуру: multi-file deck для серьезных и длинных работ, `deck_stage` для небольшого однофайлового HTML или PPTX-safe constrained HTML, если нужен editable PPTX. 4. До визуального дизайна пройди проверку материалов: - собери брендовые материалы или содержательные изображения: логотипы, UI, скриншоты, предметные PNG/JPG/WebP, источники и пробелы; - классифицируй каждый нужный визуал как `photo`, `character`, `clothes`, `scene`, `object`, `diagram`, `icon/decor` или `texture`; - для предметных визуалов пройди asset gate: создай или обнови `asset-manifest.json` и при необходимости `asset-notes.md` до 2-слайдового направления, укажи источник, статус, путь файла и fallback approval; - для `character`, `clothes`, `scene` и `object` сначала прочитай `references/content-assets.md`, затем проверь локальные материалы, материалы пользователя, открытые источники и только потом используй `imagegen` для PNG/JPG/WebP; - если пригодный растр найти или создать нельзя, остановись и запроси материал, imagegen, поиск источника или явное подтверждение fallback; - для `Young ESL` и детских ESL-слайдов простые `icon/decor`, маркеры и подсказки сначала пробуй закрыть эмоджи нужного размера; SVG/CSS используй только если эмоджи не подходит; - для `icon/decor`, стрелок, рамок, маркеров и простых схем вне `Young ESL` можно использовать SVG/CSS без прохождения полного растрового пути. 5. Если задача новая, крупная или стиль не задан, выбери направление и сделай 2-слайдовую проверку: обложка + репрезентативный плотный контентный слайд. 6. Если нужен векторный слайд, обложка, декоративная сцена, схема, SVG-ассет или подтвержденный fallback для сложного объекта, сначала проверь путь `Young ESL: эмоджи -> SVG-запас` для простых подсказок, если это детский ESL-слайд. Затем выполни презентационный SVG-контур: бриф, самодостаточный SVG, безопасность, PNG-рендер, визуальная критика и правка; для сложной сцены используй routed references из `presentation-svg.md`. 7. Собери систему слайдов: canvas, сетка, типографика, палитра, роли слайдов, графики, footer, заметки докладчика и при необходимости шкала эмоджи. 8. Перед сдачей прогони последовательную PNG-проверку всех слайдов по `references/slide-qa.md`, SVG-аудит для SVG-ассетов, затем запрошенные экспорты; исправь дефекты, повтори чистый проход и коротко назови артефакты, проверки и оставшиеся оговорки. ## Маршрутизация ресурсов | Задача | Читать или использовать | Зачем | |---|---|---| | Полное создание дека, крупная переделка, варианты или сложная оркестрация | `references/workflow.md` | Расширенный процесс, вопросы, polish loop и fallback | | Делегирование явно разрешено пользователем или средой | `references/subagents.md` | Роли, ownership, handoff и QA без утечки ожидаемых дефектов | | Бренд, продукт, клиент, мероприятие или UI | `references/brand-assets.md` | Материалы бренда, `brand-spec.md`, запрет на угаданные логотипы/цвета | | Небрендовые слайды с предметными изображениями; детские ESL-слайды с персонажами, одеждой, бытовыми сценами и предметными карточками, даже если нужен editable PPTX | `references/asset-gate.md`, `references/content-assets.md`, `scripts/asset_gate_check.mjs` | Исполняемый gate: реальные PNG/JPG/WebP, открытые источники, генерация растра через `imagegen`, остановка без явного fallback approval | | Выбор визуального направления | `references/design-directions.md` | Контрастные направления, уместность, PPTX/PDF-риски | | Детская презентация по английскому, ESL-урок, young learners | `references/design-directions.md`, раздел `Teaching Lab: Young ESL`; `references/design.md`, раздел `Учебная система эмоджи` | Детская визуальная грамматика, интерактивные роли слайдов, короткий английский текст, путь `эмоджи -> SVG-запас` для простых подсказок | | Композиция, читаемость, роли слайдов, учебные эмоджи | `references/design.md` | Базовые дизайн-правила, размеры эмоджи и анти-шаблонные guardrails | | HTML-архитектура, PDF/PNG/native SVG path, проверка экспортов | `references/html-decks.md` | Canonical source для HTML, статических экспортов и validation | | Последовательная PNG-проверка всех слайдов, финальная полировка, реестр дефектов и повторный проход после правок | `references/slide-qa.md` | Стоп-правило качества, `exports/slide-qa.md`, покрытие `1..N` без пропусков | | Editable PPTX | `references/pptx-authoring.md` | Canonical source для PPTX-safe constrained HTML | | Векторная обложка, native SVG-слайд, SVG-схема, орнамент, иконки, сложная SVG-сцена или fallback после прямого подтверждения пользователя | `references/asset-gate.md`, `references/presentation-svg.md`, `scripts/presentation_svg_pipeline.mjs`, `assets/templates/svg-slide.svg`, `assets/templates/svg-asset.svg` | Единая точка входа в SVG-контур; protected visual требует passing manifest или явного fallback approval | | Нейтральные примеры слайдов | `assets/examples/INDEX.md` | Быстрые visual references, не готовый текст для копирования | | Временные варианты презентации | `references/workflow.md`, `assets/design_canvas.jsx` | Сравнение направлений и Tweaks перед финальным фиксированием | | Экспертная проверка презентации | `references/deck-review.md` | Формат ревью, приоритеты исправлений и риски экспорта | ## Инструменты - `assets/deck_stage.js`: оболочка для однофайловой HTML-презентации. - `assets/deck_index.html`: просмотрщик и печатная оболочка для multi-file deck. - `assets/design_canvas.jsx`: сравнение направлений слайдов рядом. - `scripts/export_deck_pdf.mjs`: multi-file HTML-слайды в PDF. - `scripts/export_deck_stage_pdf.mjs`: однофайловая `deck_stage`-презентация в PDF. - `scripts/export_deck_png.mjs`: multi-file HTML-слайды в PNG. - `scripts/export_deck_stage_png.mjs`: однофайловая `deck_stage`-презентация в PNG. - `scripts/export_deck_pptx.mjs`: PPTX-safe HTML-слайды в editable PPTX. - `scripts/asset_gate_check.mjs`: predesign/preexport-проверка `asset-manifest.json` для protected visuals. - `scripts/html2pptx.js`: низкоуровневый конвертер HTML в PPTX. - `scripts/verify.mjs`: быстрая проверка в браузере и скриншоты слайдов. - `scripts/presentation_svg_pipeline.mjs`: проверка безопасного SVG и PNG-рендер для презентационных SVG-слайдов и ассетов. - `assets/templates/svg-slide.svg`: стартовый 16:9 SVG-холст для презентационного слайда или обложки. - `assets/templates/svg-asset.svg`: стартовый компактный SVG-холст для иконки, схемного маркера или декоративного ассета. ## Стандарт результата Каждая презентация должна быть: - визуально цельной и читаемой в целевом размере; - честной по поводу недостающих фактов, источников и заглушек; - проверенной в браузере, если есть HTML; - полностью перегнанной в PNG и проверенной по каждому слайду через `exports/slide-qa.md`; - экспортированной только штатными локальными скриптами навыка; - проверенной по `pptx-authoring.md`, если обещан editable PPTX; - проверенной через `presentation_svg_pipeline.mjs`, если пользователь просит native SVG, SVG-обложку, SVG-слайд или SVG-ассет; - честно ограниченной native SVG / SVG asset path, если пользователь просит SVG; - при разрешенном делегировании проверенной независимым QA без списка ожидаемых дефектов, если масштаб работы это оправдывает. Вне этого навыка остаются задачи, которые не являются презентациями или статическими экспортами презентаций.