83.3K+Скачать
Перейти к руководству
frontend-slidesавтор Zara Zhang

Frontend Slides Skill.

Скилл Claude Code и Codex для PPT и слайд-деков: HTML-презентации с богатой анимацией с нуля или конвертированные из PowerPoint-файлов.

  • Presentations
  • HTML-слайды
Скачать OpenDesignИнструкция по использованию
zarazhangrui/frontend-slides · SKILL.mdSKILL.md
--- name: frontend-slides description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. --- ## Core Principles ## Design Aesthetics ## Fixed Stage Rules ## Phase 0: Detect Mode ## Phase 1: Content Discovery (New Presentations) ## Phase 2: Style Discovery
Преамбула и заголовки разделов, считанные из исходного файла 2026-09-14 · 28 057 символов полностью

01 Что делает

Что делает Skill frontend-slides в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Frontend Slides создаёт HTML-презентации без зависимостей, насыщенные анимацией, которые полностью работают в браузере — созданные с нуля или конвертированные из файла .pptx. Он написан для не-дизайнеров, которые находят свою эстетику, глядя на варианты, а не выбирая из абстрактных описаний: скилл генерирует три превью стиля на одном слайде (безопасный вариант, минимум один смелый шаблон и вариант-«дикая карта») и даёт пользователю визуально отреагировать на них.

Объём текста в презентации задаётся выбором плотности — между низкой плотностью с ведущим-докладчиком и высокой плотностью, ориентированной на чтение. Каждая презентация создаётся в фиксированной сцене 1920x1080, равномерно масштабируемой под область просмотра, а результат может завершаться живым URL на Vercel или экспортом в PDF.

Что он выдаёт

  • Одна самодостаточная HTML-презентация со всеми стилями и скриптами, встроенными inline.
  • Три временных файла превью стиля (style-a.html, style-b.html, style-c.html), которые удаляются на этапе сдачи.
  • Опционально — живой URL на Vercel для отправки презентации по SMS, Slack или email, доступной для просмотра на любом устройстве.
  • Опционально — PDF для email, Slack или печати, создаваемый путём скриншотинга каждого слайда и их объединения.
Смотрите пример запроса ↗

Как это работает

  1. 01
    Определение режима

    Сначала скилл определяет, идёт ли речь о новой презентации, создаваемой с нуля, конвертации .pptx или улучшении существующей HTML-презентации, и применяет соответствующий путь по фазам.

  2. 02
    Задайте вопросы для сбора информации за один проход

    Вопросы о цели, длине, готовности контента и плотности задаются вместе, с использованием нативного UI структурированных вопросов там, где среда его поддерживает, чтобы пользователь заполнил всё сразу.

  3. 03
    Сгенерируйте три превью стиля

    Вместо того чтобы просить пользователя назвать стиль, скилл отображает три превью титульного слайда, автоматически открывает их и спрашивает, какой из них предпочтительнее (или предлагает смешать элементы).

  4. 04
    Сгенерируйте презентацию в виде одного файла

    Полная презентация записывается как один HTML-файл, который включает inline весь обязательный viewport-base.css плюс комментарии по каждой секции, используя выбранную плотность и выбранный рецепт стиля.

  5. 05
    Конвертация файла PowerPoint

    Для источника .pptx встроенный Python-скрипт извлекает содержимое, пользователь подтверждает заголовки, резюме и количество изображений, и только после этого происходит подбор стиля и генерация HTML.

  6. 06
    Сначала доставка, потом предложение поделиться

    Файлы предпросмотра удаляются, презентация открывается в браузере, и пользователю рассказывают о навигации, CSS-переменных, шрифтах, классе .reveal и встроенном редактировании, прежде чем предложить деплой или экспорт в PDF.

02 Определите своё применение

Когда использовать skill frontend-slides

Используйте skill frontend-slides в Claude Code или Codex, когда задача касается PPT и слайдов такого типа. Область применения и ограничения ниже взяты из собственного файла skill.

Хорошо подходит

  • Любому, кто хочет получить слайды для выступления или питча, или превратить существующий PPT/PPTX в веб-слайды.
  • Не-дизайнерам, которые не могут сформулировать визуальное предпочтение, но могут реагировать на два-три отрендеренных варианта.
  • Тому, кто начинает с файла PowerPoint, который нужно переоформить, а не пересоздать заново.
  • Улучшению уже существующей HTML-презентации, где добавление контента рискует нарушить подгонку фиксированной сцены.
  • Презентациям, которые будут просматриваться на телефонах, где приемлема сцена 16:9 с полосами, но не нужна отдельная раскладка для телефона.

Знайте границы

  • Презентациям, чья раскладка должна адаптироваться к устройству просмотра; содержимое слайда никогда не перестраивается под размер экрана.
  • Ожиданию, что экспорт в PDF передаст анимацию или интерактивность; это статичный снимок.
  • Экспорту стороннего HTML, чьи слайды используют класс, отличный от .slide, из-за чего скрипт экспорта ничего не находит.

Что предоставить

  • НазначениеПовод определяет подбор пресета и wildcard-дизайн; предлагаемые варианты — питч-презентация, обучающий тьюториал, доклад на конференции или внутренняя презентация.
  • ДлинаПриблизительное количество слайдов, разделённое на короткое, среднее или длинное, определяет, сколько слайдов разделов и содержимого может нести презентация.
  • Существующий контентПользователь сообщает, готов ли весь контент, есть ли только черновые заметки или лишь тема, и делится материалом, из которого строится презентация.
  • Режим плотностиЕдиный предварительный выбор между низкой плотностью с ведущим докладчиком и высокой плотностью, ориентированной на чтение, запоминается и применяется к количеству слайдов, шкале типографики и раскладке на всём протяжении.
  • Папка с изображениями (опционально)Изображения оцениваются по одному на пригодность и доминирующие цвета, а план строится вокруг них совместно, а не заранее.

03 Внутри скилла

Правила, которые skill frontend-slides даёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

  1. Ноль зависимостей, один файл

    Презентации — это отдельные HTML-файлы со встроенными CSS и JS, поэтому skill не должен обращаться к npm, бандлеру или любым инструментам сборки.

  2. Никогда не перестраивать под устройство

    Сцена 1920x1080 масштабируется как единое целое и может показываться с полосами на телефонах; адаптивные breakpoint'ы не должны использоваться для перестройки содержимого слайда.

  3. Переключать слайды через visibility, а не display

    Переключение слайдов использует .active / .visible с visibility, opacity и pointer-events; display: none и display: block запрещены, потому что более поздние классы раскладки могут их перекрыть и показать все слайды одновременно.

  4. Инвертировать CSS-функции с помощью calc

    Прямая инверсия clamp(), min() или max() тихо игнорируется, поэтому skill должен оборачивать её как calc(-1 * clamp(...)).

  5. Шрифты из Fontshare или Google Fonts

    Системные шрифты никогда не используются, а раздел эстетики называет Inter, Roboto и Arial как переиспользуемые семейства, которых нужно избегать.

  6. Названия шаблонов не отображаются на слайде

    Названия шаблонов и slug живут только в сообщении пользователю, но никогда не отображаются в превью или на самом слайде, наряду с прочим внутренним служебным текстом.

  7. Разделение вместо сжатия

    Скроллинг, overflow, перекрывающиеся панели и текст ниже комфортного размера для чтения — базовые нарушения; контент, превышающий лимит плотности, превращается в дополнительные слайды.

  8. Читайте preview.md перед design.md

    Смелые шаблоны отбираются из индекса выбора и читаются на уровне preview.md; полный design.md шаблона загружается только на Этапе 3, после того как пользователь выбрал его.

04 Применение

Установите frontend-slides в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте frontend-slides в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides

Общая форма CLI-команды skills для SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу с PPT и слайд-деками

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt
It's [a 20-minute conference talk] and all I have is rough notes in [talk-notes.md]. Build me a new HTML presentation, about 12 slides, low density and speaker-led so it's one idea per slide. Show me some style previews before you generate the deck.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • После любой модификации убедитесь, что сцена по-прежнему 16:9, текст не выходит за пределы карточки, панели не перекрываются, а скриншоты выглядят корректно на 1280x720 и на одном мобильном разрешении.
  • Оценивайте overflow и перекрытие по скриншотам из браузера, а не по коду, так как панели сетки могут визуально перекрывать друг друга.
  • Перед открытием каждого превью читайте видимый текст и пересматривайте его, если на слайд просочились какие-либо внутренние метаданные.
  • После деплоя откройте живой URL и убедитесь, что каждое упомянутое изображение действительно загружается.

В OpenDesign frontend-slides уже встроен: Plugins → Skills, выберите его в верхней панели.

Скачать OpenDesignЧитать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
Zara Zhang
Repository
github.com/zarazhangrui/frontend-slides Ветка main
Файл skill
SKILL.md Контрольная сумма содержимого записана при проверке; коммит 9906a34
License
MIT Из LICENSE.
Звёзды репозитория
29 255 Снимок GitHub сделан 2026-09-14 для всего репозитория zarazhangrui/frontend-slides. Это не рейтинг и не счётчик использования frontend-slides.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звёзд проверены. Включён в основной OpenDesign (проверено 2026-08-28); запись живого запуска на этой странице отсутствует.

Внутри SKILL.md

  1. Основные принципыНулевые зависимости, превью «показывай, а не рассказывай», отличительный дизайн, прогрессивное раскрытие и неоспоримая фиксированная сцена 16:9.
  2. Эстетика дизайнаРекомендации по типографике, цвету, движению и фону, направленные на избегание типичной для AI-слоп-стиля типографики и палитр.
  3. Правила фиксированной сценыИнварианты CSS: холст 1920x1080, переключение .active/.visible, clamp только за пределами сцены, поддержка reduced-motion.
  4. Этап 0: определение режимаКлассифицирует запрос как новую презентацию, конвертацию PPT или улучшение, с правилами модификации для существующих файлов.
  5. Этап 1: поиск контента (новые презентации)Одновременно спрашивает о цели, длине, готовности контента и плотности, затем оценивает предоставленную папку с изображениями, если она есть.
  6. Этап 2: поиск стиляГенерирует три превью — из безопасного пресета, смелого шаблона и произвольного варианта — по строгим правилам достоверности превью.
  7. Этап 3: генерация презентацииПрименяет выбранную плотность и выбранный рецепт стиля, читает вспомогательные файлы, выдаёт один HTML-файл с фиксированной сценой.
  8. Этап 4: конвертация PPTИзвлекает содержимое .pptx с помощью Python-скрипта, подтверждает его с пользователем, затем конвертирует в выбранный стиль.
  9. Этап 5: доставкаУдаляет превью, открывает презентацию и подытоживает сведения о файле, навигацию, точки настройки и встроенное редактирование.
  10. Этап 6: поделиться и экспорт (опция
Собственное описание skill
«Создавайте потрясающие HTML-презентации с богатой анимацией с нуля или конвертируя файлы PowerPoint. Используйте, когда пользователь хочет создать презентацию, конвертировать PPT/PPTX в веб или создать слайды для выступления или питча. Помогает недизайнерам открыть свою эстетику через визуальное исследование, а не абстрактный выбор.»

Описание из заголовка SKILL.md. Полный файл составляет примерно 28 057 символов. Прочитайте полный файл на GitHub.

Frontend Slides

Запустите frontend-slides на реальной задаче с PPT и слайдами.

Skill frontend-slides входит в состав OpenDesign. Скачайте приложение, выберите skill в Plugins → Skills, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides