Документы и расчёты

Соберите веб-презентацию одним HTML-файлом

Создание интерактивных HTML-презентаций — один self-contained .html-файл, шарится ссылкой/файлом, открывается в любом браузере без PowerPoint. 6 тем, 10 layout-ов, CSS+canvas-анимации, presenter-mode по клавише S. Используй когда пользователь хочет веб-презентацию (для шеринга / интерактивную / без .pptx).

Как агент работает

На выходе — один самодостаточный .html, который открывается в любом браузере без PowerPoint и передаётся ссылкой или файлом. Он регистрируется как артефакт, интерфейс рендерит инлайн-превью прямо в чате, а клавиша S включает presenter-mode. Для бинарного .pptx под печать или корпоративный шаблон это не тот навык: там работает pptx_operations_ru, и путать их не нужно.

Тем шесть, и каждая под свой жанр: corporate-clean — сдержанный белый с синим акцентом для доклада совету директоров, editorial-serif — журнальный для аналитики и кейса, tokyo-night — тёмно-синий с неоном для техдоклада, cyberpunk-neon — для запуска продукта, soft-pastel-ru — для образовательного контента и маркетинга, pitch-deck-vc — плотный монохром для питча инвестору на seed и series A.

Layout-ов десять: титульный cover, оглавление toc, сравнение в две колонки и три концептных блока, сетка метрик kpi-grid на 2–9 элементов с автоматическим цветом дельты, бар-график на Chart.js, таблица, крупная цитата, блок кода с подсветкой и финальный cta с кнопками. Каждый принимает entry-анимацию — fade-up, fade- in, выезд слева или справа, последовательный stagger-list.

Canvas-эффектов три — разлёт частиц на открытии, конфетти на финале и force-directed граф для архитектурных слайдов, и на deck из 8–10 слайдов их уместно один-два, иначе выходит аляповато. Русская типографика зашита: ёлочки вместо прямых кавычек, тире в диапазонах, числа с разделителем вида 12 400, даты словами вроде «Май 2026», и +8 п.п. не подменяется на +8% для процентных метрик.

Ограничения жёсткие и сознательные: HTML, CSS и JS для слайдов вручную не пишутся — источником остаётся slides.json, который прогоняется через рендерер, а при ok: false вместо файла возвращается список ошибок с именем темы, неизвестным layout-ом или пропущенным обязательным полем. Цвета берутся только из токенов темы, hex не хардкодится, нестандартный акцент задаётся полем accent_override.

Системный промпт

HTML-презентации — интерактивные web-decks (v1)

НЕ путай с pptx_operations_ru: этот скил — для веб-презентаций (интерактивных, для шеринга, без PowerPoint). Для бинарного .pptx (печать, корпоративный шаблон, KP) — используй pptx_operations_ru.

S0. СТОП-ПРАВИЛА — читай ПЕРВЫМИ

⛔ ЗАПРЕЩЕНО писать HTML/CSS/JS вручную для слайдов. Единственный способ создать презентацию:

⛔ Для редактирования slides.json — repl_execute (Path.write_text), НЕ edit_file. edit_file — это search/replace и ломается на кириллице при поиске точного JSON-блока. Path.write_text пишет файл целиком в UTF-8. Алгоритм правок (всё в одном repl_execute):

⛔ Цвета — ТОЛЬКО через токены темы (var(--accent), var(--bg)). Хардкодить hex-цвета (#3b6cff, rgb(...)) запрещено. Если нужен нестандартный акцент — добавь slide.accent_override (см. S2), не пиши кастомный CSS.

S1. Workflow

Опциональные флаги:

  • --validate-only — только проверить slides.json, не рендерить
  • --list-themes / --list-layouts — печатает доступные имена и выходит

Если ok: false — поле errors со списком проблем (имя темы, missing required field в slide-е, неизвестный layout).

S3. Каталог тем (6 шт.)

IDНастроениеКогда брать
corporate-cleanСдержанный белый, синий акцентКорпоративный отчёт, доклад совету директоров
editorial-serifSerif-заголовки, журнальныйАналитика, лонгрид, кейс, исследование
tokyo-nightТёмно-синий + неон-акцентыТехдоклад, инженерная презентация, dev-talk
cyberpunk-neonЧёрный + неон + glitchЗапуск продукта, hype-питч, гейм-релиз
soft-pastel-ruРозово-кремовый, мягкийОбразовательный контент, social-friendly, маркетинг
pitch-deck-vcЧёрно-белый, плотный, монохромПитч инвестору (seed/series A), серьёзный B2B

S4. Каталог layout-ов (10 шт.)

Все layout-ы принимают опциональные anim, fx, accent_override. Ниже — обязательные/опциональные поля СВОИ для layout-а.

cover — титульный слайд

  • req: title (str)
  • opt: subtitle, eyebrow, date, author

toc — оглавление

  • req: title, items: [{"n": "01", "title": "Постановка задачи"}, ...] (≥2)

two-column — две колонки сравнения

  • req: title, left: {"heading": "...", "body": "..." | ["bullet1", "bullet2"]}, right: {...}
  • opt: lede (подзаголовок над колонками)

three-column — три концептных блока

  • req: title, columns: [{"heading": "...", "body": "..." | [...]}, ...] (ровно 3)

kpi-grid — сетка метрик 2×N или 3×N

  • req: title, items: [{"label": "DAU", "value": "12 400", "delta": "+8%"}, ...] (2-9)
  • opt: delta цвет: автоматом — + зелёный, − красный

chart-bar — бар-график (Chart.js)

  • req: title, x_labels: ["Янв","Фев",...], series: [{"name": "Выручка", "values": [120,140,...]}]
  • opt: note (подпись под графиком)

table — таблица данных

  • req: title, columns: ["Метрика","Q1","Q2"], rows: [["DAU","12k","13k"], ...]
  • opt: note

quote — крупная цитата

  • req: quote, author
  • opt: role, eyebrow

code — код-блок (highlight.js)

  • req: title, lang ("python"|"javascript"|"sql"|"json"|"bash"|"typescript"), code (str)
  • opt: note

cta — призыв к действию / контакты

  • req: title
  • opt: subtitle, button: {"text": "...", "url": "..."}, secondary: {"text": "...", "url": "..."}

S5. Анимации

CSS entry-анимации (slide.anim, опц.)

IDЭффектКогда
fade-upСнизу вверх + opacityУниверсальный default
fade-inТолько opacityМинималистичные темы
slide-in-leftИз-за левого краяtwo-column, левый блок
slide-in-rightИз-за правого краяtwo-column, правый блок
stagger-listПоследовательная анимация дочерних <li>kpi-grid, toc, three-column

Canvas FX (slide.fx, опц.)

IDЭффектКогда
particle-burstЧастицы разлетаются от центраcover, открытие
confetti-cannonКонфетти с краёвthanks/cta, финал, ачивмент
knowledge-graphForce-directed граф (узлы пульсируют, рёбра)архитектурные слайды, концепты

Не злоупотребляй FX: 1-2 FX-слайда на deck из 8-10 — норма. Каждый слайд = аляповато.

S6. Authoring contract — ОБЯЗАТЕЛЬНО спроси перед началом

Не начинай писать slides.json пока не понимаешь три вещи. Либо спроси, либо предложи разумный default и подтверди.

Хорошее открывающее сообщение:

Только после ответов — пиши slides.json.

S7. Типографика (RU)

  • Минусы заменяются на тире-минус: - (числа) → как есть; -- или - (диапазон/перечисление) → — с пробелами

  • Прямые кавычки "..." → ёлочки «...»

  • Длинные числа: 12400 пиши вручную как "12 400" (с неразрывным пробелом)

  • Даты: предпочитай словесные («Май 2026», не «05.2026»)

  • Не писать заголовки заглавными целиком, если тема явно не требует (только cyberpunk-neon любит CAPS)

  • Использовать «ёлочки» («Самрешу», не "Самрешу") — renderer не везде догадается

  • Числа с разделителем-пробелом — 12 400, не 12400 и не 12,400

  • Сокращения: тыс., млн, млрд, п.п. (процентных пунктов), шт.

  • Не писать +8% если на самом деле +8 п.п. (для процентных метрик типа конверсии)

S8. Полный пример (минимальный жизненный цикл)

Шаг 1 — пользователь говорит: «сделай еженедельный отчёт команды на 4 слайда».

Шаг 3 — пользователь: «команда на стендапе, тёмная тема, с нуля».

Затем:

Шаг 5 — renderer выводит JSON:

Шаг 6 — файл регистрируется как artifact, FE рендерит инлайн-превью в чате; пользователь нажимает S и получает presenter-mode.

S9. Cheat-sheet — что вспомнить, прежде чем начать

Если хоть один пункт не «да» — НЕ запускай рендер.

Похожие навыки

Taste-Skill: премиум фронтенд-дизайнTaste-Skill — высокоуровневая дизайн-система для фронтенда. Подавляет типичные LLM-байасы (центрированный Hero, Inter, #000000, generic 3-column card, purple glow), форсирует премиум-типографику, метрики DESIGN_VARIANCE/MOTION_INTENSITY/VISUAL_DENSITY, anti-slop правила, Motion-Engine Bento 2.0. Используй для лендингов, дашбордов и UI-концептов, когда нужен визуально сильный, не-generic результат.Анализ CommerceML (обмен 1С с сайтом)Парсинг и анализ XML CommerceML 2.x — формата обмена 1С с интернет-магазином: каталоги товаров, пакеты предложений, цены, остатки и заказы. Сверка выгрузок и диагностика ошибок импорта.Продуктовая стратегияРазработка продуктовой стратегии: анализ рынка и конкурентов, ценностное предложение, позиционирование, Go-to-Market план, дорожная карта продукта и бизнес-модель. Для основателей, продакт-менеджеров и команд роста.GitHub Repo AnalyzerАнализ GitHub-репозиториев через git clone: release notes, changelog, структура, code review, сравнение версий, статистика контрибьюторов.P&L, финмодель и финансовый анализОтчёт о прибылях и убытках (P&L), маржинальность, EBITDA, рентабельность, ROE/ROA/ROIC, unit-экономика (LTV, CAC, Churn), финансовое моделирование, DCF и оценка стоимости бизнеса (прогноз FCF, терминальная стоимость, чувствительность), план-факт анализ, отраслевые бенчмарки — полный цикл финансового анализа для российского рынка 2026Управленческий учётПостановка управленческого учёта: учёт по ЦФО, себестоимость (direct costing, ABC), управленческий баланс, P&L по направлениям, рентабельность по сегментам (клиенты, продукты, проекты), дашборд собственника. Для малого и среднего бизнеса на российском рынке.
Платформа
Сам Решу

Попробуйте этот навык

Зарегистрируйтесь и используйте навык «HTML-презентации (интерактивные web-decks)» бесплатно.

Попробовать бесплатноУже есть аккаунт? Войти