Frontend Slides: HTML-презентации с киношным эффектом

10.03.2026обновлено 2 дней назад

Забудьте про PowerPoint. Frontend Slides от Zara Zhang создаёт потрясающие HTML-презентации с анимациями, которые работают в любом браузере без всяких зависимостей.

Что это за чудо

Frontend Slides — скилл, который превращает Claude Code в дизайнера презентаций. Результат: single HTML file с встроенным CSS/JS, который открывается в браузере и выглядит как презентация от Apple.

Ключевые принципы:

  • Zero Dependencies** — никаких npm, сборщиков, CDN
  • Show, Don't Tell** — генерирует визуальные превью, а не абстрактные варианты
  • Distinctive Design** — никакого "AI-slop", только уникальные дизайны
  • Viewport Fitting** — каждый слайд точно помещается в экран

Установка и возможности

Скилл находится в /skills/frontend-slides/

Режимы работы:

  • Mode A:** Создать презентацию с нуля
  • Mode B:** Конвертировать .pptx файл в HTML
  • Mode C:** Улучшить существующую HTML-презентацию

Файловая структура:

frontend-slides/
├── SKILL.md              # Главная документация
├── STYLE_PRESETS.md      # 12 визуальных пресетов
├── viewport-base.css     # Обязательный CSS для адаптивности
├── html-template.md      # Шаблоны HTML архитектуры
├── animation-patterns.md # Паттерны анимаций
└── scripts/
    └── extract-pptx.py   # Конвертер PowerPoint

Workflow создания презентации

Phase 0: Режим детекции

"Create a presentation about AI trends"  # → Mode A
"Convert this PowerPoint file to web"    # → Mode B 
"Enhance this existing HTML presentation" # → Mode C

Phase 1: Content Discovery

Скилл задаёт все вопросы одновременно:

  • Purpose:** Pitch deck / Teaching / Conference talk / Internal
  • Length:** Short 5-10 / Medium 10-20 / Long 20+
  • Content:** All ready / Rough notes / Topic only
  • Inline Editing:** Yes (edit in browser) / No (only viewing)

Если есть изображения: скилл их сканирует, оценивает полезность, строит outline с учётом визуалов.

Phase 2: Style Discovery

Это фишка скилла — "show, don't tell". Большинство людей не может описать дизайн словами.

Step 2.1: Mood Selection

Выберите настроение (до 2 вариантов):

  • Impressed/Confident** — профессионально, солидно
  • Excited/Energized** — инновационно, смело
  • Calm/Focused** — чисто, вдумчиво
  • Inspired/Moved** — эмоционально, запоминающе

Step 2.2: Генерация 3 превью

Основываясь на выбранном настроении, скилл генерирует 3 разных single-slide HTML превью:

Mood: Impressed/Confident → Suggested Presets: Bold Signal, Electric Studio, Dark Botanical

Mood: Excited/Energized → Suggested Presets: Creative Voltage, Neon Cyber, Split Pastel

Mood: Calm/Focused → Suggested Presets: Notebook Tabs, Paper & Ink, Swiss Modern

Mood: Inspired/Moved → Suggested Presets: Dark Botanical, Vintage Editorial, Pastel Geometry

Каждый превью — self-contained HTML файл ~50-100 строк с анимированным title slide. Открываются автоматически в браузере.

Step 2.3: Выбор стиля

Пользователь видит 3 живых примера и выбирает понравившийся.

Viewport Fitting: святая корова

Non-negotiable rule: каждый слайд ДОЛЖЕН помещаться в 100vh. Никакой прокрутки внутри слайдов.

Инварианты для каждого .slide:

.slide {
  height: 100vh; 
  height: 100dvh; 
  overflow: hidden;
}

Адаптивность через clamp():

/* Никогда не используйте фиксированные размеры */
font-size: clamp(1.2rem, 4vw, 2.5rem);
margin: clamp(20px, 5vh, 60px);

Лимиты контента на слайд:

Тип слайда: Title slide → Максимум контента: 1 заголовок + 1 подзаголовок + tagline

Тип слайда: Content slide → Максимум контента: 1 заголовок + 4-6 пунктов ИЛИ 2 абзаца

Тип слайда: Feature grid → Максимум контента: 1 заголовок + 6 карточек max

Тип слайда: Code slide → Максимум контента: 1 заголовок + 8-10 строк кода

Тип слайда: Quote slide → Максимум контента: 1 цитата (max 3 строки) + attribution

Тип слайда: Image slide → Максимум контента: 1 заголовок + 1 изображение (max 60vh)

Превышает лимиты? Разбиваем на несколько слайдов.

Distinctive Design: борьба с AI-slop

Скилл специально борется с generic "AI-slop" эстетикой:

Запрещённое:

  • Overused шрифты (Inter, Roboto, Arial, system fonts)
  • Клишированные цветовые схемы (purple gradients на белом)
  • Предсказуемые layouts
  • Cookie-cutter дизайн без характера

Поощряется:

  • Уникальные шрифты (Fontshare, Google Fonts)
  • Cohesive эстетика с CSS variables
  • Доминантные цвета с sharp акцентами
  • Animations с impact (стaggered reveals с animation-delay)
  • Атмосферные backgrounds (gradients, patterns, effects)

Пример CSS переменных:

:root {
  --primary: #2D5BFF;
  --secondary: #FF6B47;
  --bg-primary: #0A0A0A;
  --text-primary: #FFFFFF;
  --accent-glow: rgba(45, 91, 255, 0.3);
}

Phase 3: Generation

Финальная генерация — single self-contained HTML файл:

Обязательные требования:

  • Включает полный viewport-base.css
  • Inline CSS/JS (no external deps)
  • Шрифты от Fontshare или Google Fonts
  • Детальные комментарии с /* === SECTION === */ блоками
  • Support для keyboard navigation (arrow keys, Space)
  • Responsive breakpoints: 700px, 600px, 500px
  • prefers-reduced-motion support

Архитектура HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Presentation Title</title>
  <link href="https://api.fontshare.com/v2/css?f[]=font-name" rel="stylesheet">
  <style>
    /* === VIEWPORT BASE CSS === */
    /* Full viewport-base.css contents here */
    
    /* === THEME VARIABLES === */
    :root { --primary: #color; }
    
    /* === LAYOUT STYLES === */
    /* === ANIMATION STYLES === */
    /* === COMPONENT STYLES === */
  </style>
</head>
<body>
  <!-- Navigation dots -->
  <nav class="slide-nav">
    <div class="nav-dot active" data-slide="0"></div>
    <div class="nav-dot" data-slide="1"></div>
  </nav>

  <!-- Slides -->
  <div class="slide active" id="slide-0">
    <div class="slide-content">
      <h1 class="reveal">Amazing Title</h1>
      <p class="reveal">Subtitle text</p>
    </div>
  </div>

  <script>
    /* === NAVIGATION === */
    /* === ANIMATIONS === */
    /* === UTILITIES === */
  </script>
</body>
</html>

PowerPoint конвертация

Phase 4: PPT → HTML

Скилл может конвертировать .pptx файлы:

# Извлечение контента
python scripts/extract-pptx.py input.pptx output_dir

# Результат:
# - Все текстовое содержимое
# - Изображения в assets/ папке  
# - Порядок слайдов
# - Speaker notes (как HTML комментарии)

Workflow:

  1. Экстракция контента → подтверждение пользователем
  2. Style discovery (Phase 2)
  3. Генерация HTML с сохранением всего контента

Интерактивность и навигация

Встроенная навигация:

  • Arrow keys (←/→)
  • Space / Page Down
  • Scroll/swipe на мобильных
  • Click по navigation dots
  • Touch swipe gestures

Inline редактирование (опционально):

  • Hover левый верхний угол или Press E
  • Click на любой текст для редактирования
  • Ctrl+S для сохранения в localStorage
  • Export кнопка для скачивания файла

Keyboard shortcuts:

// F — fullscreen mode
// ESC — exit edit mode  
// Ctrl+S — save to localStorage
// R — reset to original

12 Style Presets

Скилл включает curated коллекцию стилей:

Preset: Bold Signal → Описание: Corporate confidence → Шрифты: Satoshi → Цвета: Blue/White

Preset: Electric Studio → Описание: Creative energy → Шрифты: Space Grotesk → Цвета: Neon/Dark

Preset: Dark Botanical → Описание: Elegant nature → Шрифты: Crimson Pro → Цвета: Green/Black

Preset: Creative Voltage → Описание: High-energy innovation → Шрифты: Inter Display → Цвета: Electric/Bold

Preset: Neon Cyber → Описание: Futuristic tech → Шрифты: JetBrains Mono → Цвета: Cyan/Purple

Preset: Notebook Tabs → Описание: Organized clarity → Шрифты: Source Sans → Цвета: Tab colors

Preset: Paper & Ink → Описание: Classic typography → Шрифты: Crimson Text → Цвета: Paper/Ink

Preset: Swiss Modern → Описание: Minimalist precision → Шрифты: Inter → Цвета: Clean/Precise

Preset: Vintage Editorial → Описание: Timeless class → Шрифты: Playfair → Цвета: Vintage tones

Preset: Pastel Geometry → Описание: Soft sophistication → Шрифты: Plus Jakarta → Цвета: Pastels

Preset: Split Pastel → Описание: Dual-tone design → Шрифты: Outfit → Цвета: Split colors

Preset: Monospace Grid → Описание: Code-inspired → Шрифты: JetBrains Mono → Цвета: Grid/Mono

Каждый preset включает:

  • Цветовую палитру (CSS variables)
  • Typography scale
  • Animation patterns
  • Signature design elements

Animation Patterns

Скилл использует sophisticated анимации для emotional impact:

Staggered reveals:

.reveal {
  opacity: 0;
  transform: translateY(30px);
  animation: slideInUp 0.6s ease-out forwards;
}

.reveal:nth-child(1) { animation-delay: 0.1s; }
.reveal:nth-child(2) { animation-delay: 0.2s; }
.reveal:nth-child(3) { animation-delay: 0.3s; }

Page transitions:

.slide {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.slide.prev { transform: translateX(-100%); }
.slide.active { transform: translateX(0); }
.slide.next { transform: translateX(100%); }

Micro-interactions:

.nav-dot:hover {
  transform: scale(1.2);
  box-shadow: 0 0 20px var(--primary);
}

Best Practices

Content density:

  • Один concept per slide
  • Maximum 6 bullets per slide
  • Split long content across multiple slides
  • Use visual hierarchy (size, color, spacing)

Performance:

  • CSS-only animations когда возможно
  • Preload fonts and critical assets
  • Optimize images (WebP format)
  • Minimal JavaScript footprint

Accessibility:

  • High contrast ratios
  • Keyboard navigation support
  • Screen reader friendly structure
  • prefers-reduced-motion respect

Responsive design:

  • Viewport relative units (vh, vw, vmin, vmax)
  • Clamp() для fluid typography
  • Breakpoints для critical heights
  • Touch-friendly navigation

Заключение

Frontend Slides — это революция в создании презентаций. Вместо борьбы с PowerPoint templates вы получаете:

  • Unlimited creativity** — полный контроль над дизайном
  • Zero lock-in** — простой HTML файл, работает везде
  • Professional quality** — анимации уровня Apple Keynote
  • Rapid iteration** — от идеи до готовой презентации за минуты

GitHub: https://github.com/zarazhangrui/frontend-slides

Скилл превращает Claude Code в персонального дизайнера, который создаёт презентации, от которых у аудитории челюсть отваливается.

Результат: self-contained HTML файл, который открывается в любом браузере и выглядит как продукт топовой дизайн-студии.

*HTML презентации: когда код становится искусством.* 🧪

TG

> Пока нет комментариев