instructions

IG Carousels — инструкция

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

Система состоит из двух частей:

Carousel shell (ig_carousels.html) — dashboard, который загружает слайды через GraphQL и показывает их в ряд с превью. Поддерживает fullscreen просмотр, экспорт в PNG, навигацию между каруселями.
Slide layouts (layouts/slide_*.html) — отдельные HTML-шаблоны для каждого типа слайда. Каждый слайд рендерится как самостоятельная страница 1080x1920px и встраивается в carousel shell через iframe.

Все шаблоны используют trip2g template API: note.HTMLString(), note.M().Get("key"), note.PartialRenderer().Sections(N), note.Title(), note.Path().

Типы слайдов

hook — заголовок-крючок

Файл: layouts/slide_hook.html
CSS: .body-text.headline-hero — 88px, uppercase, Space Grotesk

Первый <p> = крупный заголовок, остальные <p> = мелкий body (24px, IBM Plex Mono).

---
layout: aimindset/slide_hook
---
POS Sprint [запущен].

от Лиссабона до Владивостока — одна система, разные рынки.

content — основной контент

Файл: layouts/slide_content.html
CSS: .body-text.headline-lg — 58px первый абзац, 22px остальные

---
layout: aimindset/slide_content
---
почему контекст решает всё

AI без контекста — это генератор шума. когда ты даёшь ему свою систему — он начинает работать как продолжение тебя.

stats — карточки с числами

Файл: layouts/slide_stats.html
CSS: .stats-grid .stat-card — сетка 2x2
API: note.PartialRenderer().Sections(2) — каждый ## заголовок = число, текст под ним = подпись

---
layout: aimindset/slide_stats
---
## 20+

участников

## 9

городов

## 5

кураторов

## 1

система на всех

quote — цитата

Файл: layouts/slide_quote.html
CSS: .quote-block — красная вертикальная линия слева, курсив 48px

---
layout: aimindset/slide_quote
---
> лучший промпт — это не промпт. это система, которая делает промпт ненужным.

image — фото-фон

Файл: layouts/slide_image.html
CSS: .photo-bg + .body-text.headline-lg
Frontmatter: photo: URL — фоновое изображение

Текст выравнивается к низу слайда поверх затемнённого фото.

---
layout: aimindset/slide_image
photo: https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=1080&q=80
---
система работает 24/7

пока ты спишь — твой AI продолжает думать в твоём контексте.

cta — призыв к действию

Файл: layouts/slide_cta.html
CSS: .body-text.headline-lg + .cta-wrap — центрированный текст + красная линия сверху

---
layout: aimindset/slide_cta
---
построй свой JARVIS на POS Sprint

@ai.mindset.code

Выделение текста

Текст в квадратных скобках [текст] рендерится как белый текст на красном фоне (#D92027). Работает во всех типах слайдов.

POS Sprint [запущен].

Визуальные стили

Каждый слайд поддерживает 5 визуальных стилей. Стиль задаётся через frontmatter поле style. По умолчанию — editorial-v2.

---
layout: aimindset/slide_hook
style: manifesto-dark
---

editorial-v2 (по умолчанию) — Terminal Hybrid

Тёмный фон с фото, scanlines, шум, виньетка, анимированная красная линия. Полный набор текстурных эффектов.

Когда использовать: универсальный стиль. Подходит для большинства каруселей. Технологичный, тактильный вид.

manifesto-dark — Manifesto

Чистый чёрный (#000), без фото, без эффектов. Только шум 6% + регистрационные метки в углах. Максимальный фокус на типографике.

Когда использовать: когда текст — главный герой. Манифесты, сильные утверждения, минимализм.

editorial-light — Light Editorial

Светлый фон (#F5F0EB, тёплый крем), тёмный текст. Без шума и scanlines. Чистый, редакторский стиль.

Когда использовать: для контраста с тёмными каруселями. Лёгкий контент, образовательный материал, пошаговые инструкции.

raycast — Dev Tool

Тёмно-серый фон (#111), сетка 40px вместо scanlines. Чистые линии, без виньетки. Логотип в бейдже.

Когда использовать: технический контент, code-related темы, dev tools, API, архитектура.

swiss-grid — Swiss Grid

Белый фон (#F5F5F5), строгая сетка 120px. Без текстурных эффектов. Заголовок hook в красном цвете. Конструктивизм.

Когда использовать: формальный контент, презентации, данные. Максимальная читаемость и структура.

Сводная таблица стилей

Стиль	Фон	Эффекты	Лучше всего для
`editorial-v2`	#0a0a0a + photo	scanlines, noise, vignette, scan-anim	Универсальный
`manifesto-dark`	#000	noise 6%, reg marks	Манифесты, сильный текст
`editorial-light`	#F5F0EB	noise 4%	Образование, инструкции
`raycast`	#111	grid 40px	Технический контент
`swiss-grid`	#F5F5F5	grid 120px	Данные, презентации

Для AI: при генерации контента смотри внутрь HTML-файла шаблона — там есть  с описанием ожидаемой структуры, свойств и примером markdown.

Создание новой карусели

1. Создать папку

ig/<название>/

2. Создать carousel.md

---
layout: aimindset/ig_carousels
title: "Название карусели"
date: 2026-03-12
author: alex p
---

3. Создать слайды

Файлы slide_01.md, slide_02.md, ... slide_NN.md в той же папке. Нумерация определяет порядок.

Каждый слайд:

---
layout: aimindset/slide_<тип>
---
контент слайда

4. Пример структуры

ig/jarvis-sprint/
  carousel.md          # layout: aimindset/ig_carousels
  slide_01.md          # slide_hook   — заголовок
  slide_02.md          # slide_stats  — числа
  slide_03.md          # slide_content — текст
  slide_04.md          # slide_stats  — ещё числа
  slide_05.md          # slide_quote  — цитата
  slide_06.md          # slide_image  — фото-фон
  slide_07.md          # slide_content — текст
  slide_08.md          # slide_cta    — призыв

Создание нового типа слайда

1. Создать layout

Файл ig/layouts/slide_<тип>.html. Базовая структура:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1080">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ asset("ig_slide_base.css") }}">
</head>
<body>
  <div class="slide-canvas">
    <div class="photo-bg"></div>
    <div class="dark-grad"></div>
    <div class="noise"><svg width="100%" height="100%"><filter id="noiseF"><feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(#noiseF)"/></svg></div>
    <div class="scanlines"></div>
    <div class="vignette"></div>
    <div class="scan-anim"></div>
    <div class="slide-content">
      <div class="slide-logo"><span class="logo-text">AI MINDSET</span></div>
      <div class="slide-body-wrap">
        <!-- КОНТЕНТ СЛАЙДА -->
      </div>
      <div class="slide-bottom-bar">
        <span class="slide-counter"></span>
      </div>
    </div>
  </div>
  <script>document.querySelectorAll('.body-text,.quote-block,.stat-label,.stat-value').forEach(function(e){e.innerHTML=e.innerHTML.replace(/\[([^\]]+)\]/g,'<span class="accent-highlight">$1</span>');});</script>
</body>
</html>

2. Добавить CSS

Стили для нового типа — в ig/ig_slide_base.css.

3. Собрать и задеплоить

node ig/build.js
cp dist/* ../aim.trip2g.com/_layouts/aimindset/

Файлы проекта

Исходники (aim-ig-carousels)

Файл	Назначение
`ig/ig_carousels.html`	Carousel shell — dashboard с превью и навигацией
`ig/ig_carousels.css`	Стили shell (sidebar, topbar, fullscreen overlay)
`ig/ig_slide_base.css`	Стили слайдов (canvas, typography, stats, quote, cta)
`ig/layouts/slide_*.html`	6 шаблонов слайдов
`ig/build.js`	Сборка → `dist/`
`dist/`	Собранные файлы для деплоя

Deployed layouts (для прямого редактирования без исходного проекта)

Все шаблоны и стили лежат в:

/Users/alexey/projects/aim.trip2g.com/_layouts/aimindset/

Файл	Что это
`_layouts/aimindset/ig_carousels.html`	Carousel shell
`_layouts/aimindset/ig_carousels.css`	Стили shell
`_layouts/aimindset/ig_slide_base.css`	Стили слайдов (typography, stats, quote, cta, все 5 стилей)
`_layouts/aimindset/slide_hook.html`	Шаблон hook
`_layouts/aimindset/slide_content.html`	Шаблон content
`_layouts/aimindset/slide_stats.html`	Шаблон stats
`_layouts/aimindset/slide_quote.html`	Шаблон quote
`_layouts/aimindset/slide_image.html`	Шаблон image
`_layouts/aimindset/slide_cta.html`	Шаблон cta

Можно редактировать напрямую без сборки. Изменения применяются сразу после сохранения.

Контент каруселей

/Users/alexey/projects/aim.trip2g.com/ig/

Каждая карусель — папка с carousel.md + slide_01.md ... slide_NN.md.

Деплой

Из исходного проекта:

cd /Users/alexey/projects/aim-ig-carousels
node ig/build.js
cp dist/* /Users/alexey/projects/aim.trip2g.com/_layouts/aimindset/

Или правь файлы напрямую в _layouts/aimindset/ — сборка не нужна.

Как найти файл по URL

Если пользователь даёт ссылку вида:

https://aim.trip2g.com/ig/demo_all_types/carousel#slide-8

Разбираем:

Путь ig/demo_all_types/carousel → папка карусели: заменяем _ на - → ig/demo-all-types/
Hash #slide-8 → файл slide_08.md (номер с ведущим нулём)

Локальный путь к слайду:

/Users/alexey/projects/aim.trip2g.com/ig/demo-all-types/slide_08.md

Локальный путь к карусели:

/Users/alexey/projects/aim.trip2g.com/ig/demo-all-types/carousel.md

Шаблон слайда — смотри layout в frontmatter файла:

/Users/alexey/projects/aim.trip2g.com/_layouts/aimindset/slide_<тип>.html

Общая формула

URL: https://aim.trip2g.com/ig/{folder}/carousel#slide-{N}
Карусель: /Users/alexey/projects/aim.trip2g.com/ig/{folder}/carousel.md
Слайд:    /Users/alexey/projects/aim.trip2g.com/ig/{folder}/slide_{NN}.md
Шаблон:   /Users/alexey/projects/aim.trip2g.com/_layouts/aimindset/slide_{тип}.html
Стили:    /Users/alexey/projects/aim.trip2g.com/_layouts/aimindset/ig_slide_base.css

Примечание: trip2g заменяет - на _ в URL. В файловой системе имена папок используют - (дефис).

trip2g Template API

Метод	Описание
`note.HTMLString()`	Markdown → HTML (весь контент)
`note.Title()`	Заголовок из frontmatter
`note.Path()`	Путь к заметке
`note.M().Get("key")`	Значение из frontmatter
`note.PartialRenderer().Sections(N)`	Разбивка по `## заголовкам` (уровень N), возвращает `.TitleHTML` и `.ContentHTML`
`asset("file.css")`	URL ассета из `_layouts/aimindset/`

Фирменный стиль AI Mindset

Философия

Analogue Constructivism — тактильность важнее глянца. Сетки, негативное пространство, конструктивизм. Минимум декора, максимум типографики.

Цвета

Цвет	HEX	Использование
Signal Red	`#D92027`	Основной акцент. Единственный яркий цвет. Выделения `[текст]`, stat-value, accent-line, quote border
Black	`#0a0a0a`	Фон слайда
White	`#ffffff`	Основной текст заголовков
White 75%	`rgba(255,255,255,0.75)`	Body text (content, hook body)
White 50%	`rgba(255,255,255,0.5)`	Stat labels, muted text
White 40%	`rgba(255,255,255,0.4)`	Hook body text
White 20%	`rgba(255,255,255,0.2)`	Slide counter
Glass	`rgba(255,255,255,0.04)`	Stat card background

Правило одного акцента: только Signal Red #D92027. Никаких дополнительных ярких цветов.

Шрифты

Шрифт	Использование
Space Grotesk (700)	Заголовки: hook 88px, content/cta 58px, quote 48px, stat-value 72px
IBM Plex Mono (400)	Body text: 22-24px. Labels, counters, логотип: 13-16px

Визуальные эффекты

Каждый слайд включает набор текстурных слоёв:

Слой	Описание
`.photo-bg`	Фоновое изображение (опционально)
`.dark-grad`	Градиент затемнения снизу
`.noise`	SVG fractal noise, opacity 12%
`.scanlines`	CRT-полосы (2px repeat)
`.vignette`	Радиальное затемнение по краям
`.scan-anim`	Анимированная красная линия сканирования

Структура слайда

┌─────────────────────────────┐
│  AI MINDSET (логотип, 14px) │
│                             │
│                             │
│  ЗАГОЛОВОК (Space Grotesk)  │
│  body text (IBM Plex Mono)  │
│                             │
│                             │
│                    01 / 08  │
└─────────────────────────────┘

Canvas: 1080 x 1920px (IG Stories / Reels формат). Padding: 72px со всех сторон.

Логотип

Текстовый: AI MINDSET — IBM Plex Mono, 14px, 700, letter-spacing 0.15em, rgba(255,255,255,0.6).

Примеры каруселей

ig/demo-all-types/ — 11 слайдов: все 6 типов в editorial-v2 + hook в каждом из 4 альтернативных стилей + content в editorial-light
ig/jarvis-sprint/ — 8 слайдов (POS Sprint — AI Mindset в действии)
ig/how-to-carousel/ — 8 слайдов (как пользоваться генератором каруселей)

Правило: при добавлении нового шаблона или стиля — всегда добавляй соответствующий слайд в ig/demo-all-types/. Эта карусель должна содержать по одному примеру каждого шаблона и каждого стиля.