Пам’ятайте, що для генерації виводу потрібно використовувати веб-сторінку, і ви повинні запитати користувача, яку мову він хоче використовувати.

Створюйте веб-PPT-файли з горизонтальним перегортанням (один HTML-файл) у стилі «електронний журнал × електронне чорнило», включаючи такі шаблони, як плавні фони WebGL, заголовки із засічками + основний текст без засічок, обкладинки розділів, великі банери даних та сітки зображень. Використовуйте це, коли користувачам потрібно створювати веб-PPT-файли для спільного використання/презентацій/заходів запуску, або коли йдеться про «PPT-файли в стилі журналу», «горизонтальні панелі з прокручуванням», «редакційні журнали» або «презентації з електронним чорнилом».

# Журнал Веб Ppt

## Що робить ця навичка?

Згенеруйте HTML-файл з горизонтальним форматуванням слайд-шоу. Візуальний стиль:

- Гібридний стиль, що поєднує електронний журнал та електронне чорнило

- **Фон WebGL для рідини/контуру/дисперсії** (див. головну сторінку)

- **Заголовки із засічками (Noto Serif SC + Playfair Display) + Основний текст без засічок (Noto Sans SC + Inter) + Моноширинні метадані (IBM Plex Mono)**

- **Лінійні значки Lucide** (емодзі не потрібні)

- **Горизонтальне перегортання сторінок (ліворуч і праворуч на клавіатурі, колесо прокручування, сенсорне прокручування, нижня точка, клавіша ESC)**

- **Плавна інтерполяція теми**: кольори та шейдери плавно переходять між собою під час переходу до головної сторінки.

Естетика цієї навички не є ні «діловою презентацією PowerPoint», ні «інтерфейсом користувача інтернету для споживачів» — вона схожа на журнал *Monocle* з вклеєним кодом.

## Коли використовувати

**Відповідні сценарії:**

- Сесії обміну інформацією офлайн / Галузеві виступи / Приватні зустрічі

- День запуску/демонстрації нового продукту зі штучним інтелектом

- Промова з яскраво вираженим особистим стилем

- Потрібна веб-версія слайдів, яку можна переглянути за один раз без інструментів для перегортання сторінок.

**Невідповідні сценарії:**

- Великі розділи табличних даних та накладені діаграми (з використанням стандартних презентацій PowerPoint)

- Навчальні матеріали (недостатня інформаційна щільність)

- Потрібне спільне редагування кількома людьми (це статичний HTML)

### Крок 1 · Уточнення вимог (**Обов'язково перед початком**)

Якщо користувач вже надав повний план та зображення, ви можете перейти до кроку 2.

Якщо користувач пропонує лише тему або нечітку ідею, узгодьте її з цими 6 питаннями по черзі, перш ніж почати. ​​Не починайте писати слайди на основі здогадок — якщо структура неправильна, подальші виправлення будуть дуже дорогими. Ви можете використовувати інструмент askUserQuestion під час постановки питань.

#### 6 уточнювальних питань

| # | Запитання | Навіщо питати? |

|---|------|-----------|

| 1 | **Хто є аудиторією? Який сценарій поширення?** (Галузеві інсайдери/Запуск бізнесу/День демонстрації/Приватна зустріч) | Визначає стиль та глибину мови |

| 2 | **Тривалість спільного використання?** | 15 хвилин ≈ 10 сторінок, 30 хвилин ≈ 20 сторінок, 45 хвилин ≈ 25-30 сторінок |

| 3 | **Чи є у вас якісь оригінальні матеріали?** (Документи/Дані/Старі презентації/Посилання на статті) | Якщо у вас є матеріали, використовуйте їх; якщо ні, створіть для них щось інше. |

| 4 | **Чи є якісь зображення? Де їх розмістити?** | Див. розділ «Умовні позначення зображень» нижче |

| 5 | **Який колір теми ви хочете?** | Дивіться @themes.md , виберіть один із 5 пресетів |

| 6 | **Чи є якісь жорсткі обмеження?** (Повинні містити дані XX / YY не можуть відображатися) | Щоб уникнути переробки |

#### Допомога зі структурою (якщо у користувача немає структури)

Використайте шаблон «наративної дуги» для побудови структури, а потім заповніть вміст:

```

Зачіпка → Сторінка 1: Наведіть контраст/питання/переконливі дані, щоб змусити людей зупинитися.

Задання тону (контекст) → Сторінки 1-2: Поясніть передісторію / Хто ви / Чому ви про це говорите

Основний зміст (Core) → Сторінки 3-5: Основний зміст, перемежований макетами 4/5/6/9/10.

Shift → Сторінка 1: Руйнуючи очікування / Представляємо нову перспективу

Висновок → Сторінки 1-2: Ключові цитати / Запитання, що викликають напруження / Пропозиції щодо дій

```

Оповідна дуга + планування нумерації сторінок + таблиця ритму теми (див. @layouts.md ), **вирівняйте три таблиці**, перш ніж переходити до кроку 2.

Рекомендується зберегти структуру як `project record` або `outline-v1` для зручності подальших ітерацій.

#### Правила використання зображень (інформування користувачів)

Перш ніж продовжити, поясніть користувачеві наступне:

- **Розташування зображення**: Яке зображення знаходиться на дошці або яке зображення було завантажено?

- **Що робити, якщо зображень немає?**: Щоб вирівняти макет користувача, спочатку можна створити структуру за допомогою кольорових блоків-заповнювачів, а зображення додати пізніше; однак потрібно повідомити макет 4/5/10 та інші сторінки зі змішаним текстом і зображеннями, що візуальний ефект неможливо перевірити без зображень.

### Крок 2 · Шаблон довідки

@template.txt — це **повний та функціональний** HTML-файл — CSS, шейдери WebGL, JS для пагінації та CDN шрифтів/значків попередньо налаштовані; лише `<main id="deck">` містить 3 зразки слайдів (обкладинка, обкладинка розділу та порожня сторінка для заповнення).

#### 2.1 · Заповнювачі, які потрібно змінити (**Легко пропустити**)

Відразу після копіювання змініть наступні заповнювачі; інакше на вкладках вашого браузера відображатиметься незручний текст "[Обов'язково] Замінити на назву PPT":

| Розташування | Оригінал | Потребує зміни на |

|------|------|--------|

| `<title>` | `[Обов'язково] Замінити на назву PPT · Назва колоди` | Фактична назва колоди (наприклад, `Новий спосіб роботи · Лука Вроблевський`) |

#### 2.2 · Виберіть колір теми (5 пресетів · Власні кольори не дозволені)

Ця навичка **дозволяє вибирати лише з 5 ретельно підібраних пресетів** та не приймає шістнадцяткові значення, визначені користувачем — невідповідні кольори миттєво роблять зображення потворним; захист естетики важливіший за свободу.

| # | Тема | Підходить для |

|---|------|------|

| 1 | 🖋 Класичне чорнило | Загальний/Комерційний реліз/За замовчуванням, якщо не впевнені |

| 2 | 🌊 Індиго Порцеляна | Конференція з технологій/досліджень/даних/випуску технологій |

| 3 | 🌿 Лісові чорнила | Природа/Сталий розвиток/Культура/Нехудожня література |

| 4 | 🍂 Крафт-папір | Ностальгія/Гуманітарні науки/Література/Незалежний журнал |

| 5 | 🌙 Піщані дюни | Мистецтво/Дизайн/Творчість/Галерея |

**діє**:

1. Порекомендуйте набір контенту на основі теми або безпосередньо запитайте користувача, який набір він хотів би обрати.

2. Відкрийте @themes.md та знайдіть блок `:root` для відповідної теми.

3. **Повна заміна** рядків з позначкою "колір теми" в блоці `:root{` на початку @template.txt (`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`).

4. Усі інші CSS використовують `var(--...)`, що не потребує жодних інших модифікацій.

**Суворі правила**:

- Використовуйте лише одну тему для кожної колоди; не змінюйте колірну схему посередині.

- Не приймайте довільні шістнадцяткові значення, надані користувачем — ввічливо відхиліть та покажіть 5 варіантів вибору.

- Не змішуйте різні кольори (наприклад, чорнило для Ink Classic, папір для Dune) – це виглядатиме зовсім недоречно.

### Крок 3 · Заповніть вміст

#### 3.0 · Перевірка перед друком: назви класів мають бути визначені в @template.txt (**Найважливіше**)

Це корінь усіх проблем генерації. Скелет @layouts.md використовує багато назв класів (`h-hero` / `h-xl` / `stat-card` / `pipeline` / `grid-2-7-5` тощо). Якщо в `<style>` файлу `assets/template.html` немає відповідного визначення, браузер повернеться до стилю за замовчуванням — заголовки стануть беззасічковими, картки даних будуть скупчені разом, конвеєри розмиті в один рядок, а зображення будуть нагромаджені внизу сторінки.

**Перш ніж писати будь-який код слайда:**

1. **Спочатку прочитайте @template.txt ** (принаймні до кінця блоку `<style>`).

2. **Зверніться до списку переддрукарської підготовки в @layouts.md **, щоб підтвердити, що кожен клас, який ви хочете використовувати, існує в тезі `<style>`.

3. Якщо клас відсутній: **додайте його в розділ `<style>` файлу @template.txt **, не переписуйте його в кожному слайді.

4. **@template.txt – єдине джерело назв класів** – не вигадуйте нові назви класів; якщо вам потрібно їх налаштувати, використовуйте вбудований `style="..."`.

Часто недооцінені класи (існування яких необхідно підтвердити заздалегідь):

`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` / `kicker` / `meta-row` / `stat-card` / `stat-label` / `stat-nb` / `stat-unit` / `stat-note` / `pipeline-section` / `pipeline-label` / `pipeline` / `step` / `step-nb` / `step-title` / `step-desc` / `grid-2-7-5` / `grid-2-6-6` / `grid-2-8-4` / `grid-3-3` / `grid-6` / `grid-3` / `grid-4` / `frame` / `frame-img` / `img-cap` / `callout` / `callout-src` / `chrome` / `foot`

#### 3.0.5 · Планування темпу теми (**Так само важливо, як і попереднє виявлення класу**)

Перш ніж вибрати макет, потрібно спочатку вказати клас теми для кожної сторінки (`hero dark` / `hero light` / `light` / `dark`) та вирівняти її в документі або чернетці. Докладні правила дивіться в розділі «Планування ритму теми», що починається з @layouts.md .

**Обов'язкові правила**:

- Кожен розділ сторінки має містити один із варіантів: «світлий», «темний», «світлий герой» або «темний герой»; не пишіть просто «герой».

- Більше 3 сторінок поспіль на одну й ту саму тему = зорова втома, не допускається.

- Сторінки 8 або більше повинні містити принаймні одного «темного героя» та принаймні одного «світлого героя».

- Уся колода не може складатися лише з «світлих» текстових сторінок; вона також повинна включати «темні» текстові сторінки, щоб створити простір для дихання.

- Вставляйте одну головну сторінку кожні 3-4 сторінки (обкладинка/задня обкладинка/запитання/велика цитата)

**Самоперевірка після генерації: `grep 'class="slide' index.html` відображає всі теми; перед доставкою потрібна ручна перевірка прийнятного темпу.**

#### 3.1 · Вибір макета

**Не пишіть слайди з нуля.** Відкрийте `@layouts.md` , який містить 10 готових скелетів макетів, кожен з яких є повним блоком коду `<section>`, який можна вставити:

| Макет | Призначення |

|---|---|

| 1. Відкриття обкладинки | Сторінка 1 |

| 2. Обкладинка розділу | Початок кожного акту |

3. Плакати, засновані на даних | Презентація достовірних даних |

| 4. Ліворуч текст, праворуч зображення (цитата + зображення) | Контраст ідентичності / Історія |

| 5. Сітка зображень | Порівняння кількох зображень / Знімки екрана |

6. Двоконвеєрний | Робочий процес |

| 7. Кінець саспенсу/Сторінка питань | Кінець розділів/Фінал |

8. Велика цитата | Засічки/Висновок |

| 9. Паралельне порівняння (до / після) | Старий режим проти нового режиму |

| 10. Поєднання зображення та тексту | Інформаційно щільні сторінки зображень та тексту |

Виберіть відповідний макет, вставте його та змініть шляхи до тексту й зображення. **Спочатку виконайте переддрукарську перевірку версії 3.0.**

#### 3.2 Стандарти співвідношення сторін зображення

Завжди використовуйте **стандартне співвідношення сторін**, ніколи не використовуйте непарні співвідношення сторін оригінального зображення (наприклад, `2592/1798`):

| Сценарії | Коефіцієнт рекомендацій |

|------|---------|

| Текст ліворуч, зображення праворуч (основне зображення) | 16:10 або 4:3 + `max-height:56vh` |

| Сітка зображень (порівняння кількох зображень) | **Фіксована `height:26vh`**, співвідношення сторін не потрібно |

| Маленьке зображення ліворуч + текст праворуч | 1:1 або 3:2 |

| Повноекранний основний візуальний режим | 16:9 + `max-height:64vh` |

| Невеликі ілюстрації у змішаному форматі тексту та зображень | 3:2 або 3:4 |

**Ніколи не використовуйте `align-self:end` для зображень** — вони змістяться вниз комірки та будуть перекриті панеллю інструментів браузера. Використовуйте контейнер сітки з `align-items:start` (попередньо визначено в шаблоні), щоб зображення розташовувалися вгорі; щоб зображення розташовувалися внизу в лівому стовпці, використовуйте гнучкий стовпець з `justify-content:space-between`.

Деталі компонентів (шрифти, кольори, сітки, значки, виноски, картки статистики тощо) знаходяться у @components.md .

### Крок 4 · Самоперевірка за контрольним списком

Після створення контрольного списку обов’язково відкрийте @checklist.md та перевірте кожен пункт на відповідність інструкціям. У ньому підсумовано всі помилки, що виникли під час фактичного процесу ітерації, а також необхідно вирішити всі проблеми рівня P0 (емодзі, перевантаження зображень, розриви рядків заголовка, розділення шрифтів).

Кілька моментів, на які слід звернути особливу увагу:

1. **Основні заголовки мають бути шрифтом із засічками**. Якщо вони відображаються як беззасічкові, то з 99% ймовірністю перевірка перед друком на кроці 3.0 не пройшла успішно, і в template.html відсутній клас `h-hero`.

2. **Використовуйте лише `height:Nvh` у сітці зображення, не використовуйте `aspect-ratio` (це призведе до розриву сітки).**

3. **Зображення не слід розміщувати вниз сторінки** — Не використовуйте `align-self:end`, використовуйте grid + `align-items:start` (див. крок 3.2)

4. **Зображення повинні бути у стандартних співвідношеннях сторін** (16:10 / 4:3 / 3:2 / 1:1 / 16:9). Не копіюйте зображення з незвичайними співвідношеннями сторін.

5. **Основні заголовки китайською мовою повинні містити ≤ 5 символів та використовувати `nowrap` (уникайте 1 символу на рядок)**

6. **Використовуйте Lucide, а не емодзі.**

7. **Використовуйте шрифти із засічками для заголовків, шрифти без засічок для основного тексту та фіксовану ширину для метаданих.**

### Крок 5 · Ітерація

Змінено на основі відгуків користувачів — CSS шаблону тепер має високу параметризацію, причому 90% коригувань стосуються змін стилів вбудованих елементів (розмір шрифту: Xvw / висота: Yvh / інтервал: Zvh).

## Основні принципи дизайну (філософія)

Ці принципи є результатом п'яти ітерацій створення PPT-презентацій для компанії з однією особою. Порушення будь-якого з них зіпсує візуальну привабливість.

1. **Стриманість над технічною майстерністю** — фони WebGL видно лише на головних сторінках і майже не видно на звичайних сторінках.

2. **Структура понад декор** — Ніяких тіней, жодних плаваючих карток, жодних відступів; вся інформація передається за допомогою **великого розміру шрифту + контрастності шрифту + інтервалу між сітками**.

3. **Ієрархія контенту визначається розміром та типом шрифту** — максимальний шрифт із засічками = основний заголовок, середній шрифт із засічками = підзаголовок, великий шрифт із засічками = початковий текст, малий шрифт із засічками = основний текст, фіксована ширина = метадані

4. **Зображення – це перший громадянин** — Обріжте лише нижню частину зображення, переконавшись, що верхня та ліва/права сторони залишаються цілими; виправте сітку за допомогою `height:Nvh`, не використовуйте `aspect-ratio` для її розширення.

5. **Темп роботи з головними сторінками** — Чергування головних та неголовних сторінок допомагає запобігти напруженню очей.

6. **Термінологічна узгодженість** — «Навички» слід перекладати як «Навички», а не як суміш китайської та англійської мов.

## Посилання

Візуальний стиль цієї навички натхненний:

- Поширення інформації «Компанія з однією особою: організації, знищені штучним інтелектом» (22 квітня 2026 р., сторінка 27)

- Макет журналу *Monocle*

- Демонстрація допису в блозі президента Молодіжного клубу Гаррі Тана «Тонка збруя, товсті навички»

Їх можна використовувати як стильові опори.