Навык агента Guizang HTML PPT

Навык агента для Клод Код, Кодекс и подобных сред кодинг-агентов. Он генерирует однофайловые HTML-презентации с горизонтальной прокруткой, визуальные элементы презентаций и обложки для социальных сетей.

Он поставляется с двумя визуальными системами:

• Стиль A: редакционно-журнальный × электронные чернила. Представьте Монокль с вшитым кодом. Лучше всего для нарративных выступлений, мнений, салонов и личного голоса.
• Стиль B: Швейцарский международный типографический стиль. Сетка в основе, один высоконасыщенный якорный цвет, резкие прямоугольники, волосяные линейки и крайний контраст шрифтов. Лучше всего для фактов, продуктов, анализа и фреймворков.

Извлечено Гуйцзан из офлайн-выступлений, таких как «Компания одного человека: организации, сложенные ИИ» и «Новый способ работы». Каждая ловушка, встреченная при создании этих презентаций, задокументирована в checklist.md.

Старая тема · Стиль A Редакционно-журнальный

Новая тема · Стиль B Швейцарский международный

Запуск за 30 секунд

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

Или вставьте это агенту ИИ с доступом к оболочке:

Install guizang-ppt-skill for me. Clone https://github.com/op7418/guizang-ppt-skill into ~/.claude/skills/guizang-ppt-skill, then verify that SKILL.md, assets/, and references/ exist.

Если вы уже установили его, обновите с помощью:

Update guizang-ppt-skill for me. Go to ~/.claude/skills/guizang-ppt-skill, run git pull, then tell me the latest commit.

Затем спросите вашего агента:

Create a Swiss-style deck from this article, around 7 slides, with 2-3 generated visuals.

Другие полезные запросы:

Turn this Markdown file into an editorial magazine-style presentation.
Create a 21:9 social cover from the core idea of this deck.
Redesign this product screenshot as a 16:10 slide visual.

Что вы получаете

• 🖋 Две визуальные системы: редакционное повествование для стиля A, фактологическая швейцарская структура для стиля B
• 📐 Горизонтальная навигация прокруткой: стрелки ← → / колёсико мыши / сенсорный свайп / точки внизу / ESC для индекса
• 🧩 Стиль A 10 макетов: обложка, разделитель, крупные цифры, изображение/текст, сетка изображений, конвейер, сравнение и другое
• 🧱 Стиль B 22 фиксированных макета: Обложка, Заявление, Башня KPI, Цикловая диаграмма, Дуэльное сравнение, Главное изображение, Заключительный манифест и другое
• 🎨 Курируемые предустановки тем: 5 тем с электронными чернилами для стиля A, 4 темы с швейцарскими якорными цветами для стиля B
• 🖼 Опциональный поток изображений Codex: генерируйте документальные фотографии, инфографику, диаграммы потоков, системные карты и UI-сцены с GPT-Изображение 2.0 / GPT-M 2.0, затем вставляйте их в безопасных для шаблона пропорциях
• 📰 Обложки для соцсетей: генерируйте 21:9 обложки для WeChat, 1:1 карточки для распространения, 3:4 обложки для Xiaohongshu, миниатюры видео и связанные варианты
• 📴 Энергосберегающий статический режим: нажмите B, чтобы превратить анимацию WebGL / canvas в статические визуалы
• 📄 Один HTML-файл — без сборки, без сервера, открывайте прямо в браузере

Подходит / Не подходит

✅ Подходит: офлайн-выступления, отраслевые доклады, частные салоны, запуски ИИ-продуктов, демо-дни, презентации с ярко выраженным личным голосом

❌ Не подходит: таблицы с большими данными, обучающие презентации (плотность слишком низкая), многопользовательское совместное редактирование (статический HTML)

Типичные сценарии использования

Почему HTML-презентации

• Редактирование, нативное для агентов: HTML / CSS — это простой текст, так что агенты могут читать, редактировать и проверять его напрямую.
• Более высокая визуальная плотность, чем у Markdown: точный макет, позиционирование, движение, интерактивность и форматы обложек.
• Лёгкая доставка: один HTML-файл можно открыть, показать, отправить, сделать скриншот или записать.
• Лучшие контрольные точки качества: швейцарский валидатор может выявлять смещение макета, небезопасное размещение изображений, центрированные заголовки тела и ловушки текста SVG.
• Одна визуальная система для всех результатов: презентации, сгенерированные визуалы, обложки и переработанные скриншоты могут использовать одни и те же правила стиля.

Поддержка платформ

Установка

Вариант 1: Установка одной строкой (рекомендуется)

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

Вариант 2: Вставьте это в ИИ

Установи навык guizang-ppt-skill для Клод Код для меня. Шаги:

1. Убедитесь, что ~/.claude/skills/ существует (создайте, если нет)
2. Выполните git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill
3. Проверьте: ls ~/.claude/skills/guizang-ppt-skill/ должен показать SKILL.md, assets/, references/
4. Сообщите мне, когда будет готово. Позже, произнося что-то вроде «сделай мне презентацию в журнальном стиле», будет запускать этот навык.

Вставьте блок выше в Клод Код / Cursor / любого агента ИИ с доступом к оболочке, и он выполнит установку.

Вариант 3: Ручная CLI

git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill

Как его активировать

После установки Клод Код автоматически обнаруживает навык. Фразы-триггеры:

• "Сделай мне презентацию в журнальном стиле"
• "Сделай мне презентацию в швейцарском стиле"
• "Сгенерируй презентацию с горизонтальной прокруткой"
• "Презентация в редакционно-журнальном стиле"
• "Слайды с электронными чернилами для моего выступления"
• "Создай обложку 21:9 для WeChat из этой статьи"
• "Создай карточку для распространения 1:1 из этой презентации"

Рабочий процесс

Навык представляет собой структурированный рабочий процесс; агент проведет вас через каждый шаг:

1. Выберите стиль — Стиль A редакционно-журнальный или Стиль B Швейцарский международный
2. Уточните намерение — контрольный список из 7 вопросов: стиль, аудитория, продолжительность, исходный материал, изображения/скриншоты, тема, строгие ограничения
3. Скопируйте шаблон — Стиль A использует assets/template.html; Стиль B использует assets/template-swiss.html
4. Заполните контентом — создайте план ритма, затем выберите и адаптируйте соответствующие скелеты макетов
5. Опциональная генерация изображений — в Codex спросите, нужно ли использовать изображения GPT-Изображение 2.0 / GPT-M 2.0, затем вставьте их в пропорциях, подходящих для страницы
6. Самопроверка — сверьтесь с references/checklist.md; все проблемы P0 должны быть устранены; швейцарские презентации также должны пройти валидатор макета
7. Предпросмотр — откройте HTML в браузере
8. Итерация — используйте встроенные стили для настройки размера шрифта, высоты, интервалов

Полная спецификация в SKILL.md.

Стиль B Швейцарский

Швейцарская тема — это строгая система макетов, а не просто скин CSS.

• 22 именованных макета: слайды тела должны использовать S01 до S22; не изобретайте новые структуры
• 4 якорных цвета: международный синий Кляйна, лимонно-жёлтый, лимонно-зелёный, безопасный оранжевый
• Фиксация сетки: 16-колоночная сетка, резкие прямоугольники, волосяные линейки 1px, без теней, без градиентов, без скруглённых карточек
• Масштабирование китайских заголовков: заголовки полностью на китайском должны быть на шаг меньше, чтобы сохранить место для контента и изображений
• Выравнивание изображений/текста по низу: текстовые и графические блоки должны быть выровнены по низу в макетах с изображением слева/справа, при этом не перекрывая элементы управления пагинацией
• Слоты для изображений: изображения должны находиться в областях, определённых шаблоном data-image-slot, часто генерируемых в пропорциях 21:9 или 16:10
• Строгая валидация: валидатор выявляет центрированные заголовки тела, экспериментальные макеты, видимый текст SVG и изображения, размещённые вне слотов

Швейцарская валидация:

node scripts/validate-swiss-deck.mjs path/to/index.html

Поток изображений Codex

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

• Документальные фотографии: сцены реального мира в стиле Fuji / Leica, добавляющие человеческую текстуру
• Инфографика / диаграммы потоков / сравнительные диаграммы / системные карты: для концепций, которые плохо объясняются фотографиями
• Обрамление скриншотов / переработка скриншотов: сначала сохраните исходные скриншоты с прилагаемыми фоновыми ресурсами и холстом в стиле CleanShot X; используйте генерацию UI-сцен только тогда, когда скриншот требует реконструкции
• Дата-постеры / диаграммы: превращайте ключевые цифры в готовые для вставки визуальные ресурсы
• Композиции из нескольких изображений: полезны для сверхшироких слотов, где три несвязанных изображения 16:9 нарушили бы сетку

Сгенерированные изображения должны соответствовать четырём основным правилам:

• Рассматривайте изображение как встроенный ресурс, а не как отдельный слайд: без колонтитулов, низа страницы, заголовка, номера страницы, угловой метки, подписи или декоративной рамки
• Соответствуйте языку презентации: китайские презентации используют китайские надписи внутри инфографики, английские презентации используют английские надписи
• Подбирайте пропорцию слота до генерации: 21:9 для многих швейцарских главных слотов, 16:9 / 16:10 для обычных основных визуалов, 16:10 для UI-сцен, фиксированная одинаковая высота для сеток изображений
• Если исходный скриншот должен остаться точным, сначала прочтите references/screenshot-framing.md и используйте прилагаемые assets/screenshot-backgrounds/ фоны вместе с программным масштабированием, отступами и выравниванием, а не перерисовывайте скриншот по умолчанию

Запросы изображений находятся в references/image-prompts.md. Обрамление скриншотов находится в references/screenshot-framing.md.

Генерация обложек

Навык также может превратить статью или идею презентации в обложки для платформ:

• Основная обложка WeChat: 21:9, сначала заголовок, с одним визуальным якорем
• Карточка для распространения WeChat: 1:1, визуально связанная с обложкой 21:9
• Обложка / карусель Xiaohongshu: 3:4, крупный заголовок, единый масштаб шрифта в серии
• Миниатюра видео: 16:9, заголовок + подзаголовок + одно фокусное изображение

Действует то же правило: используйте несколько сильных ключевых слов, сохраняйте заголовок как визуальный центр и не заполняйте холст основным текстом.

Примеры запросов

Скопируйте любой из этих запросов в вашего агента, а затем прикрепите вашу статью, файл Markdown или графические ресурсы:

Create an 8-slide Swiss-style deck from this article, with 3 generated visuals matched to the template image slots.

Turn this product analysis document into an editorial magazine-style deck with a strong narrative rhythm.

From this deck's core idea, create two covers: a 21:9 main cover and a visually paired 1:1 share card.

Redesign these product screenshots into consistent 16:10 slide visuals. Preserve key UI information; do not add slide titles or footers inside the images.

Структура каталога

guizang-ppt-skill/
├── SKILL.md              ← основной файл навыка: рабочий процесс, принципы, типичные ошибки
├── README.md             ← README на китайском
├── README.en.md          ← этот файл
├── assets/
│   ├── template.html         ← шаблон Стиля A редакционно-журнальный
│   ├── template-swiss.html   ← шаблон Стиля B Швейцарский
│   └── screenshot-backgrounds/ ← встроенные фоны скриншотов WebP: 5 для стиля A / 4 для стиля B
├── scripts/
│   └── validate-swiss-deck.mjs ← валидатор швейцарских макетов
└── references/
    ├── components.md     ← каталог компонентов (тип, цвет, сетка, иконки, выделение, статистика, конвейер)
    ├── layouts.md        ← 10 скелетов макетов (готовы к вставке)
    ├── layouts-swiss.md  ← 22 фиксированных швейцарских макета
    ├── swiss-layout-lock.md ← швейцарская точность и строгие правила макета
    ├── themes.md         ← 5 предустановок тем (выбирайте, не настраивайте)
    ├── themes-swiss.md   ← 4 темы с швейцарскими якорными цветами
    ├── image-prompts.md  ← типы изображений, пропорции и базовые запросы для GPT-Изображение 2.0 / GPT-M 2.0
    ├── screenshot-framing.md ← семантика обрамления скриншотов в стиле CleanShot X
    └── checklist.md      ← контрольный список качества (уровни P0 / P1 / P2 / P3)

Предустановки тем

Выбирайте из references/themes.md. Использование произвольных hex-значений не допускается — защита эстетики важнее свободы выбора.

Редакционные темы Стиля A

Переключение тем требует только замены 6 переменных в начале блока :root{} файла template.html — весь остальной CSS работает через var(--...).

Швейцарские темы Стиля B

Выбирайте из references/themes-swiss.md. Произвольные hex-значения здесь также не допускаются.

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

Основные принципы дизайна

1. Сдержанность вместо броскости — фоны WebGL проступают только на главных страницах
2. Структура вместо украшательства — информационная иерархия через размер шрифта + гарнитуру + сеточные отступы, а не тени или плавающие карточки
3. Изображения — полноценные элементы — выравнивайте их по области основного контента, сохраняйте пропорции стабильными, обрезайте только снизу и сохраняйте верх и бока
4. Сгенерированные визуалы — это ресурсы — оставляйте только основное фото / диаграмму / UI; не отображайте заголовки слайдов, колонтитулы или угловые метки внутри изображения
5. Ритм живёт на главных страницах — чередование главных и неглавных страниц предотвращает утомление глаз
6. Динамические эффекты должны быть опциональными — B переключает статический режим, чтобы анимация никогда не становилась бременем для чтения
7. Термины должны быть единообразными — Скиллы есть скиллы; никаких вольных переводов
8. Швейцарские макеты остаются фиксированными — Стиль B должен восстанавливать и повторно использовать оригинальную систему макетов из 22 страниц, а не изобретать несвязанные страницы

Визуальные ориентиры

• Макеты журнала Монокль
• YC Гарри Тан — «Тонкая упряжь, толстые скиллы»
• Массимо Виньелли / Helvetica Forever / Швейцарский международный типографический стиль
• Серия офлайн-презентаций Гуйцзана

Дорожная карта

• Добавить больше реальных примеров и демо-версий HTML-презентаций, которые можно открыть
• Расширить форматы обложек для большего числа издательских платформ
• Добавить больше правил валидации швейцарских макетов
• Улучшить рабочие процессы переработки скриншотов и генерации инфографики
• Подготовить варианты для конкретных маркетплейсов, такие как WorkBuddy
• Добавить больше курируемых наборов тем, сохраняя ограничение на произвольные цвета

Часто задаваемые вопросы

Можно ли экспортировать в PPTX? Основной результат — HTML. Вы можете показывать его в браузере, делать скриншоты или записывать. Конвертацию в PPTX можно выполнить отдельным процессом, но сегодня это не основной путь.

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

Могу ли я добавить собственный макет? Да. Макеты Стиля A можно расширить в references/layouts.md. Стиль B более строгий: обновляйте template-swiss.html, layouts-swiss.md, swiss-layout-lock.md и валидатор одновременно.

Обязательна ли генерация изображений Codex? Нет. Презентации работают без сгенерированных изображений. Поток изображений используется только тогда, когда вам нужны фотографии, инфографика, UI-сцены или обложки.

Как обновить навык? Запустите команду установки снова или выполните git pull в локальной директории навыка.

Участие в разработке

Ошибки, проблемы с макетами, запросы на новые макеты — приветствуются Issues и PR. Приоритеты:

• Сначала добавляйте новые классы в template.html; не допускайте, чтобы layouts.md ссылался на неопределённые классы
• При изменении template-swiss.html обновляйте layouts-swiss.md и swiss-layout-lock.md одновременно
• При добавлении швейцарских правил обновляйте scripts/validate-swiss-deck.mjs
• Вносите обнаруженные ловушки в checklist.md на соответствующий уровень P0 / P1 / P2 / P3
• Новые цвета тем добавляйте в themes.md с рекомендуемым сценарием использования

Лицензия

MIT © 2026 op7418