Воркфлоу из 5 агентов для вёрстки лекционных презентаций курса «Системный SMM». Принимает текст слайдов, предлагает выбор из 6 стилей (Минимализм, Катин стиль, Энергия и драйв, Игра и азарт, Бунт и провокация, Система и контроль), генерирует HTML-мокап с арт-критикой до балла 8/10, конвертирует в SVG для Figma со встроенными шрифтами и QA-сверкой. Использовать когда пользователь упоминает: слайды, презентация, вёрстка слайдов, лекция, мокап, SVG для Figma, распределить текст по слайдам.
Resources
1Install
npx skillscat add denisagasarov-sketch/preza-5-stiley Install via the SkillsCat registry.
Преза — Пять стилей
⛔ ГЛОБАЛЬНОЕ ПРАВИЛО — ДЕЙСТВУЕТ ДЛЯ ВСЕХ АГЕНТОВ БЕЗ ИСКЛЮЧЕНИЯ
ТЕКСТ СЛАЙДОВ НЕ МЕНЯТЬ.
Пользователь предоставляет текст каждый раз. Этот текст — финальный.
Запрещено абсолютно всем агентам цепочки:
- добавлять слова, фразы, пояснения
- убирать слова, сокращать, сжимать
- перефразировать, улучшать, редактировать
- менять порядок слов
Разрешено только:
- разбивать на строки и абзацы
- менять регистр (caps для заголовков)
- выделять жирностью или курсивом
- структурировать в список при явном перечислении
Нарушение этого правила — критическая ошибка.
Она отменяет любые другие достижения итерации.
Агент 5 (QA) проверяет соответствие текста оригиналу на финальном этапе.
Воркфлоу из пяти агентов для превращения сырого текста в готовый SVG-файл для Figma.
Сырой текст слайдов
↓
[АГЕНТ 1: БРИФ]
Стиль → приоритеты → ТЗ
↓
Контроль 1: согласование ТЗ с пользователем
↓
[АГЕНТ 2: ВЕРСТАЛЬЩИК]
Иерархия, структура, HTML-мокап
↓
[АГЕНТ 3: АРТ-ДИРЕКТОР]
Итерация 1 → Контроль 1.5 → итерации 2–3 до 8/10
↓
Контроль 2: согласование HTML с пользователем
↓
[АГЕНТ 4: SVG-ИНЖЕНЕР] ← отдельный диалог
Конвертация HTML → SVG
↓
[АГЕНТ 5: QA]
Цикл проверки и исправления
↓
Финальный SVG + бриф для дизайнера → FigmaКонтекст по умолчанию
Если пользователь не указал иное:
- Формат: 16:9, 960×540px на слайд
- Стиль: минимализм, белый фон, монохром (если палитра не передана)
- Шрифты: system-ui (дизайнер заменит в Figma)
Шаг 1 — Агент 1: Бриф
→ Читай инструкцию: references/agent-brief.md
Уточнить стиль и приоритетные слайды — контекст проекта (аудитория, формат, цель) уже зашит.
Собрать ТЗ. Показать пользователю. Получить одобрение перед переходом к шагу 2.
Входной формат текста слайдов:
Слайд 1: [текст]
Слайд 2: [текст]
...Если формат другой — переспроси. Не начинай без номеров слайдов.
Шаг 2 — Агент 2: Верстальщик
→ Читай инструкцию: references/agent-layout.md
Контекст: ТЗ от агента 1 + сырой текст слайдов.
Результат: HTML-мокап → передаётся агенту 3.
Шаг 3 — Агент 3: Арт-директор
→ Читай инструкцию: references/agent-artdir.md
Контекст: HTML-мокап + ТЗ (стиль, аудитория, цель).
Результат: оценка по рубрике + итерация 1 → Контроль 1.5 → итерации 2–3 + бриф для дизайнера.
Показать пользователю итерацию 1 и получить одобрение перед итерацией 2.
Получить финальное одобрение перед переходом к шагу 4.
Шаг 4 — Агент 4: SVG-инженер
→ Читай инструкцию: references/agent-svg.md
Результат: SVG-файл на основе согласованного HTML.
Запускать в отдельном диалоге — экономия ~120к токенов.
Шаг 5 — Агент 5: QA
→ Читай инструкцию: references/agent-qa.md
Цикл:
- ШАГ 0 (шрифты) — извлечь шрифты из HTML, найти/скачать, встроить base64 в SVG
- Итерационный цикл — анализ → отчёт → исправление → повтор до PASS (макс. 5 итераций)
- Проверка границ слайда обязательна: ни один элемент не должен выходить за рабочую область x:[90…870], y:[90…510]
Результат: финальный SVG со встроенными шрифтами + отчёт.
Финальный вывод
После PASS выдать:
- SVG-файл (скачиваемый)
- Краткий отчёт: сколько итераций, что исправлено
- Бриф для дизайнера (из агента 3) — что доделать руками в Figma