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

Создавайте веб-презентации PowerPoint в стиле «электронный журнал × электронные чернила» с горизонтальным перелистыванием страниц, включая шаблоны с адаптивным фоном WebGL, заголовками с засечками и основным текстом без засечек, обложками глав, большими баннерами с данными и сетками изображений. Используйте это, когда пользователям необходимо создавать веб-презентации PowerPoint для демонстрации/презентаций/мероприятий по запуску, или когда речь идет о «презентациях в журнальном стиле», «горизонтальных слайд-презентациях», «редакционных журналах» или «презентациях на электронных чернилах».

# Веб-презентация журнала

## Что делает этот навык?

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

— Гибридный стиль, сочетающий электронный журнал и электронные чернила.

- **Фон WebGL с эффектом текучести/контура/рассеяния** (см. главную страницу)

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

- **Lucide Linear Icons** (Эмодзи не требуются)

- **Горизонтальное перелистывание страниц (влево и вправо на клавиатуре, колесико мыши, свайп по сенсорному экрану, нижняя точка, клавиша ESC)**

- **Плавная интеграция темы**: Цвета и шейдеры плавно меняются при переходе на главную страницу.

Эстетика этого навыка не является ни "деловым PowerPoint", ни "пользовательским интернет-интерфейсом" — это как журнал *Monocle*, на который просто наклеен код.

## Когда использовать

**Подходящие сценарии:**

- Офлайн-сессии обмена опытом / Отраслевые дискуссии / Частные встречи

- День презентации/демонстрации нового продукта на основе ИИ

- Речь, отличающаяся ярко выраженным личным стилем.

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

**Неподходящие сценарии:**

- Большие разделы табличных данных и наложенные на них диаграммы (с использованием стандартных презентаций PowerPoint)

- Учебные материалы (недостаточная плотность информации)

— Требуется совместное редактирование несколькими людьми (это статический HTML-код).

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

Если пользователь уже предоставил полный план и изображения, вы можете перейти к шагу 2.

Если пользователь предоставляет только тему или расплывчатую идею, перед началом работы сопоставьте её с этими 6 вопросами по очереди. Не начинайте писать слайды наугад — если структура окажется неправильной, последующие исправления обойдутся очень дорого. Для задавания вопросов можно использовать инструмент askUserQuestion.

#### 6 уточняющих вопросов

| # | Вопрос | Зачем спрашивать? |

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

| 1 | **Кто является целевой аудиторией? Каков сценарий обмена информацией?** (Инсайдеры отрасли/Запуск бизнеса/День демонстрации/Частная встреча) | Определяет стиль и глубину языка |

| 2 | **Продолжительность совместного использования?** | 15 минут ≈ 10 страниц, 30 минут ≈ 20 страниц, 45 минут ≈ 25-30 страниц |

| 3 | **Есть ли у вас какие-либо оригинальные материалы?** (Документы/Данные/Старые презентации PowerPoint/Ссылки на статьи) | Если есть материалы, используйте их; если нет, создайте для них что-нибудь другое. |

| 4 | **Есть ли какие-либо изображения? Где их следует разместить?** | См. раздел «Правила размещения изображений» ниже |

| 5 | **Какой цвет темы вы хотите?** | См. @themes.md , выберите один из 5 предустановленных вариантов |

| 6 | **Есть ли какие-либо жесткие ограничения?** (Должны содержаться данные XX / YY не допускается) | Во избежание доработок |

#### Помощь в составлении плана (если у пользователя нет плана)

Используйте шаблон «сюжетной арки» для построения структуры, а затем заполните его содержимым:

```

Завязка → Страница 1: Представьте контраст/вопрос/конкретные данные, чтобы заставить людей остановиться.

Задание тона (контекст) → Страницы 1-2: Объясните предысторию / Кто вы / Почему вы об этом говорите

Основное содержание (Ключевые элементы) → Страницы 3-5: Основное содержание, перемежающееся макетами 4/5/6/9/10.

Сдвиг → Страница 1: Преодоление ожиданий / Представление новой точки зрения

Основные выводы → Страницы 1-2: Ключевые цитаты / Вопросы, вызывающие напряжение / Рекомендации к действию

```

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

Рекомендуется сохранять план проекта как «запись проекта» или «outline-v1» для удобства последующих итераций.

#### Правила использования изображений (для информирования пользователей)

Прежде чем продолжить, объясните пользователю следующее:

- **Местоположение изображения**: Какое это изображение на доске или какое изображение было загружено?

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

### Шаг 2 · Шаблон ссылки

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

#### 2.1 · Заполнители, которые необходимо изменить (**Легко пропустить**)

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

| Местоположение | Оригинал | Необходимо изменить на |

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

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

#### 2.2 · Выберите цвет темы (5 предустановленных вариантов · Использование пользовательских цветов запрещено)

Этот навык **позволяет выбирать только из 5 тщательно подобранных предустановок** и не принимает заданные пользователем шестнадцатеричные значения — несоответствие цветов мгновенно делает изображение некрасивым; защита эстетики важнее, чем предоставление свободы выбора.

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

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

| 1 | 🖋 Классические чернила | Общее/Коммерческое разрешение/По умолчанию, если не уверены |

| 2 | 🌊 Фарфор «Индиго» | Конференция по технологиям/исследованиям/данным/выпуску технологий |

| 3 | 🌿 Forest Ink | Природа/Устойчивое развитие/Культура/Документальная литература |

| 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 .

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

- Каждый раздел страницы должен содержать одно из следующих слов: `light`, `dark`, `hero light` или `hero dark`; не следует писать просто `hero`.

— Более 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` |

| Сетка изображений (сравнение нескольких изображений) | **Фиксированная высота: 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 символов и использовать перенос строк (избегайте переноса по одному символу в строку).**

6. **Используйте Lucide, а не эмодзи.**

7. **Для заголовков используйте шрифты с засечками, для основного текста — шрифты без засечек, а для метаданных — шрифты фиксированной ширины.**

### Шаг 5 · Итерация

Внесены изменения на основе отзывов пользователей — CSS-стили шаблона теперь обладают высокой степенью параметризации, при этом 90% корректировок касаются встроенных стилей (font-size:Xvw / height:Yvh / spacing:Zvh).

## Основные принципы проектирования (философия)

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

1. **Сдержанность важнее технического совершенства** — Фоновые изображения WebGL видны только на главных страницах и практически невидимы на обычных страницах.

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

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

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

5. **Работайте с главными страницами** — Чередование главных и обычных страниц помогает предотвратить напряжение глаз.

6. **Согласованность терминологии** — Слово «навыки» следует переводить как «Skills», а не как смесь китайского и английского языков.

## Ссылки

Визуальный стиль этого навыка вдохновлён следующими источниками:

— Публикация статьи «Компания из одного человека: организации, разрушенные ИИ» (22 апреля 2026 г., стр. 27)

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

- Демонстрация поста в блоге президента YC Гарри Тана "Тонкая ременная система, навыки для полных"

Они могут использоваться в качестве стилистических ориентиров.