Дизайн сторінки події від ШІ-агента: макети, стилі, шрифти, фони, постер і лого в AnyEventTool

Усе, що людина може змінити в дизайн-панелях AET, — одним інструментом: aet_set_event_design для подій в акаунті організатора. Можна надіслати будь-який набір налаштувань; не згадане лишається як було.

Інструмент повертає, що застосовано, попередження й підсумкові макет і стиль. У гостьовій чернетці без акаунта набір менший — aet_set_design змінює макет, стиль і два кольори бренду, — бо в чернетці немає полів для зображень (частина 3).

AET розділяє два рішення, які більшість конструкторів сторінок зводить в один «шаблон».

• Макет — це структура: які блоки використовує сторінка, в якому порядку і як показано кожен. Макет конференції починається з цифр і спікерів, макет майстер-класу — з того, що ви зробите, і з програми. В AET 58 макетів-лендингів плюс класична «Картка» — вузька сторінка в одну колонку.
• Стиль — це поверхня: палітра, шрифти заголовків і тексту, форма кутів і декоративні деталі. В AET 58 стилів.

Будь-який макет можна вдягнути в будь-який стиль. Асистент може лишити макет, що подобається організатору, і спробувати спокійніший стиль — або лишити стиль бренду й перевірити іншу структуру. Перемикання будь-чого зберігає вміст: сервер перескладає сторінку з тих самих розділів.

«Картка». Класична «Картка» — теж макет. card: true (або макет card) перемикає на неї сторінку й зберігає лендинг у фоні, тож card: false повертає саме той макет-лендинг, що був. Кольори й шрифти на «Картці» йдуть в окремий шар бренду, а не в тему лендингу, — тому в «Картки» власний список шрифтів.

Один виняток. Макетам і стилям потрібен лендинг за подією. Події, які створив асистент, мають його завжди. Подія, зібрана вручну як класична картка, може його не мати; тоді асистент отримає попередження, а організатор один раз обере макет у редакторі (панель «Макет»).

Він питає. aet_design_options приймає тип події, настрій у кількох словах і мову й повертає три варіанти. У кожного — id макета, назва, зображення-прев'ю й пояснення в один рядок мовою користувача, якщо в AET є переклад.

Десять типів подій, які може передати асистент, зіставляються з власними категоріями AET — навчання з майстер-класами, свято з приватними подіями, концерт із фестивалями тощо, — а слова настрою звіряються з тим, для чого задумано кожен стиль. Заняття з кераміки з настроєм «теплий, ручна робота, спокійний» і технологічна зустріч із «сміливий, нічний, неон» отримають різні добірки.

Що інструкції сервера вимагають від агента:

• Брати лише id з aet_design_options або з aet_section_schema({section:'design'}), де перелічено всі чинні макети й стилі. Ніколи не вигадувати id; невідомий id відхиляється ще до будь-якого запису.
• Показувати людині прев'ю й давати обрати: три варіанти легше оцінити, ніж 58.
• У гостьовій чернетці макет «Картка» недоступний; його можна обрати під час забирання сторінки.

Лайфхак для організаторів. Назвіть настрій трьома словами, а не посиланням на відомий бренд. «Як в Apple» кожен розуміє по-своєму, а «чисто, біло, спокійно» — однаково.

Бренд на сторінці події несуть два кольори:

• primary — колір дії: кнопки й заклики;
• accent — заголовки й позначки, не кнопки.

Кожен може мати власний колір тексту — onPrimary і onAccent. Якщо асистент їх не надсилає, AET добирає читабельний для фону: темний текст на блідо-жовтій кнопці, білий — на глибокому синьому. Саме тут асистент помиляється найчастіше, копіюючи палітру бренду, і сервер за замовчуванням забирає це рішення з його рук.

Куди йдуть кольори, залежить від макета. У макеті-лендингу вони стають частиною теми сторінки. На «Картці» — ідуть у шар бренду сторінки: кнопки й заголовки розділів. Відповідь каже, куди саме: colors (landing theme) чи colors (card brand layer).

Кольори задаються як #rrggbb. Фони картки й сторінки приймають також лінійні чи радіальні CSS-градієнти, побудовані лише з колірних зупинок; усе інше в градієнті — зображення, змінні, вирази — відхиляється.

Для агента: правило дизайну каже «Keep brand colors readable (the server picks text colors)» — тримайте кольори бренду читабельними, кольори тексту добере сервер. Надсилайте primary і accent; кольори on… — лише якщо їх задає брендбук.

AET тримає два списки шрифтів, бо два види сторінок по-різному показують текст.

Список лендингів описано для агентів за характером — «широкий розтягнутий гротеск, технологічний, жирні великі літери», «наджирний широкий акцидентний, постерний», — тож асистент може підібрати шрифт під бренд, не знаючи точної назви. Майже всі базові шрифти лендингів AET підтримують кирилицю.

Якщо асистент попросить шрифт поза списком або шрифт для тексту як заголовковий, нічого не зламається: у відповіді буде попередження — у макетах-лендингах з назвою найближчого доступного шрифту, — а решта змін застосується. Шрифти завантажуються лише зі списків AET; шрифт поза ними на сторінці однаково не з'явився б.

Лайфхак. Просіть пару, а не шрифт: «жирний вузький заголовок і спокійний читабельний текст». Асистент обере зі списків, а ви оціните результат з телефона.

Сторінка події в AET — це картка з вмістом на тлі сторінки. Асистент може оформити і те, і те.

Фон картки приймає колір чи градієнт, зображення, спосіб заповнення й прозорість:

• fit: cover заповнює картку одним зображенням; fit: tile повторює його плиткою, з tileScale від 10 % до 300 %;
• opacity 0–100 для зображення, під ним лишається колір;
• cardBg: null скидає все.

Фон сторінки задається по зонах — по одному запису на зону, до чотирьох:

Кожна зона приймає ті самі колір, градієнт, зображення, заповнення, розмір плитки й прозорість або clear: true, щоб її прибрати.

Тон тексту. Світлий текст на темній картці, темний — на світлій. З cardTone: auto AET обчислює його з кольору картки, але фото оцінити не може. Якщо асистент ставить фонове зображення без тону, відповідь попереджає: «pass cardTone 'dark' for a dark photo». Це єдине налаштування, яке варто перевіряти на око після кожної зміни фону.

Крапки. Деякі стилі ставлять грайливі кольорові крапки біля заголовків розділів. dots: false прибирає всі, dots: true повертає.

Асистент не може завантажити файл із чату. Він передає публічну адресу зображення, а решту робить сервер AET:

1. Завантаження. Лише публічні http(s)-хости; приватні й внутрішні адреси відхиляються, переадресації перевіряються. Запит обривається через 15 секунд.
2. Перевірка. До 10 МБ. Якщо сервер позначив зображення як звичайний файл, AET перевіряє самі байти.
3. Перекодування. Зображення перекодовується з обмеженням розміру й без метаданих EXIF, тож геолокація й дані камери з ним не їдуть. Анімовані GIF-постери лишаються як є — і лишаються анімованими.
4. Збереження. Файл копіюється у власне сховище AET і віддається звідти, а не підтягується з початкового сайту.
5. Заміна. Старий файл постера чи лого видаляється лише після того, як новий дизайн збережено, і не видаляється, якщо ним користується інша подія.

Постер найкраще виглядає в пропорції 3:2, наприклад 1536 × 1024. noBg: true прибирає розмите тло за ним — це для темних, на весь кадр чи прозорих постерів. imageUrl: null прибирає постер.

Лого найкраще — PNG чи SVG із прозорістю. imageUrl: null повертає типове лого.

Якщо зображення не вдалося — 404, приватний хост, файл понад 10 МБ, — відповідь перелічує його в попередженнях із причиною, а решта зміни дизайну застосовується. Правило дизайну для агентів: «Prefer the user's own images (URLs) or stock; never hotlink random sites» — власні зображення людини чи сток, жодних випадкових сайтів.

На класичній «Картці» кожен заголовок може мати власний стиль. Слотів для заголовків — 15: тип і назва над карткою, а також заголовки розділів — місце, контакти, час початку, програма, організатори, активності, реєстрація, місця, магазин, квіз, спільнота тощо.

Для кожного асистент може задати текст і будь-що з: шрифт зі списку «Картки», колір, розмір (1.3em, 28px, 120%), жирність від 300 до 900, великі літери, курсив, інтервал між літерами від 0 до 1 em і вирівнювання. null прибирає стиль і повертає типовий заголовок.

Дві речі, які варто знати:

• Стилізований заголовок не перекладається. Типові заголовки розділів підлаштовуються під мову відвідувача; заголовок, написаний асистентом, лишається мовою, якою його написано. Для сторінки, яку читають кількома мовами, стилізуйте назву й тип події, а не назви розділів.
• Текст заголовків модерується тією самою перевіркою, що й будь-який інший текст від асистента, і якщо вона не пройдена, відхиляється вся зміна дизайну.

Типове використання: маленький розріджений надпис над назвою («МАЙСТЕР-КЛАС» у 0,5 em, інтервал 0,3, великі літери) і велика назва під ним.

Люди часто показують асистенту сторінку, що їм подобається. Правила дизайну AET кажуть агенту, що з нею робити: «For a screenshot the user shows you, translate what you see into: layout mood (aet_design_options), colors (#hex), fonts by name, card/page backgrounds» — перекласти побачене в настрій макета, hex-кольори, назви шрифтів і фони картки й сторінки.

На практиці:

1. Настрій. Описати скриншот трьома словами — «темний, редакційний, просторий» — і попросити в aet_design_options доречні макети.
2. Кольори. Зчитати два-три домінантні кольори як hex-коди й розкласти на основний і акцентний.
3. Шрифти. Назвати шрифт за характером — вузький гротеск, контрастна антиква — і взяти найближчий зі списків AET.
4. Фони. Однотонний, градієнт чи фото; темна чи світла картка.

Чого агент не робить — не відтворює чужу сторінку: її фото, гасла, лого чи точну композицію. Результат — сторінка у власних макетах AET, що відчувається як зразок, але не копіює чужу роботу й не позичає зображень, на які в організатора немає прав.

Лайфхак. Покажіть два скриншоти, а не один, і скажіть, що подобається в кожному: «кольори з першого, великий шрифт із другого». Асистент набагато краще поєднує налаштування, ніж вгадує задум.

Показова послідовність для джазового вечора в події з акаунта; виклики справжні, подія — ні.

1. Бриф. Організатор пише: «Джазовий вечір у маленькому барі, 40 місць, тепло й камерно, наші кольори — глибокий бордо й золото. Постер є на нашому сайті». Асистент викликає aet_design_options з типом «концерт» і настроєм «теплий, камерний, нічний» і показує три прев'ю.
2. Макет і стиль. Організатор обирає друге прев'ю. Асистент надсилає layout і look з цими id; відповідь підтверджує пару, що тепер діє.
3. Кольори. Асистент переводить кольори бренду в hex — бордо як основний, золото як акцентний — і надсилає лише ці два. AET добирає білий текст на бордових кнопках і темний — на золотих позначках.
4. Постер. Асистент передає адресу постера з сайту організатора. AET завантажує його, перекодовує без метаданих і зберігає; оскільки постер темний і на весь кадр, асистент також ставить noBg: true.
5. Перевірка. Організатор відкриває сторінку з телефона й каже, що заголовки заслабкі. Асистент перемикає шрифт заголовків на жирніший зі списку лендингів; відповідь без попереджень перелічує fonts.heading як застосоване.

П'ять викликів, кожен маленький, кожен видно в журналі події. Якщо згодом організатору знадобиться класична «Картка» для друкованої роздруківки, ще один виклик із card: true перемкне її, а card: false поверне макет-лендинг без змін.

Забрана чернетка стає звичайною подією, тож після забирання відкриваються всі налаштування акаунта. Якщо людина приміряла інші макети й стилі на перегляді до забирання, обрана пара застосовується саме тоді.

• Лише те, що просили. Не згадані налаштування лишаються як були. Правило дизайну для агентів починається з «Change only what the user asked» — змінюй лише те, про що просила людина.
• Спершу перевірка. Невідомий id макета чи стилю, неправильний колір чи розмір відхиляються ще до будь-якого запису.
• Частковий успіх. Невдалі зображення й недоступні шрифти стають попередженнями; решта застосовується.
• Один запис. Налаштування стилю сторінки та її колонки зберігаються одним оновленням, яке вдається лише якщо ніхто інший тим часом не змінив ті самі налаштування. Якщо змінив — скажімо, організатор у редакторі, — відповідь буде conflict, і асистент перечитає подію й спробує знову.
• Без файлів-сиріт. Якщо збереження не вдалося, файли, завантажені під час цього виклику, видаляються; старі файли видаляються лише після успішного збереження.
• Журнал. Кожна зміна дизайну з'являється в журналі «Дії ШІ-агента» події як «Змінив оформлення».
• Ліміти. Зміни дизайну рахуються в 30 змін на хвилину й 1000 на добу на підключення.
• Скасування. Скасування асистента повертає останню правку розділу, а не дизайн. Щоб повернути макет чи стиль, попросіть попередній за назвою; відповідь кожного виклику дизайну каже, яка пара зараз діє.

1. Три слова настрою. «Спокійний, теплий, ручна робота». Добірка піде за ними.
2. Hex-коди, якщо є. «Основний #1F4E79, акцент #F2A541». Назви на кшталт «наш синій» — це здогадки.
3. Одна зміна за повідомлення після першої версії: так видно, що зробила кожна.
4. Посилання на власні зображення. Постер із вашого сайту чи стокове фото, на яке у вас є права. Не випадкове зображення з пошуку.
5. Назвіть пристрій. «Більшість гостей відкриє з телефона» — фони ліворуч і праворуч видно лише на комп'ютері.
6. Спитайте про контраст. «Чи читабельний текст на цьому фоні?» Асистент може перемкнути тон картки.
7. Спитайте пару, що діє. «Який макет і стиль зараз на сторінці?» — корисно перед експериментами, щоб потім повернутися.
8. Лишайте «Картку» для довгих текстів. Багато розділів, довгі описи чи офіційна подія добре читаються на класичній «Картці»; короткі візуальні події пасують макетам-лендингам.

1. Прочитайте aet_section_schema({section:'design'}) один раз: там перелічено всі чинні макети, стилі, шрифти, зони й слоти заголовків.
2. Обирайте макети через aet_design_options (тип події + настрій); показуйте людині три прев'ю.
3. Змінюйте лише те, про що просили; надсилайте найменший набір налаштувань.
4. Кольори як #rrggbb; onPrimary і onAccent лишайте серверу, якщо їх не задає бренд.
5. Шрифти — за точною назвою з правильного списку: лендинг чи «Картка». Якщо прийшло попередження, прочитайте його й візьміть запропонований шрифт.
6. Зображення — лише за публічною адресою, власні чи стокові. Перш ніж пробувати величезний файл, згадайте про ліміт 10 МБ.
7. Після фонового зображення свідомо задайте cardTone; auto не оцінює фото.
8. Стилізуйте заголовки мовою події й пам'ятайте, що вони не перекладаються.
9. Читайте applied і warnings у кожній відповіді й кажіть людині, що не застосувалося.
10. На conflict перечитайте подію й надішліть знову; не крутіться в циклі.
11. Скриншот — це зразок: перекладіть його в настрій, кольори, шрифти й фони; ніколи не копіюйте його зображень чи тексту.

• Вам потрібен контроль до пікселя — власний CSS, свої компоненти, точна копія сайту бренду. AET оформлює в межах своїх макетів і стилів.
• Ви хочете, щоб зображення генерував асистент. AET ставить зображення за посиланням і через асистента їх не генерує.
• Вам потрібна сторінка на власному домені. Сторінки AET живуть на aet.events; Pro додає коротку адресу name.aet.events.
• Вам потрібен шрифт поза списками AET. Завантажуються лише шрифти зі списків.
• Ви хочете дизайн, що копіює сторінку іншого бренду. Агенту велено перекладати зразок у налаштування, а не копіювати його.

• Код AnyEventTool на 23 жовтня 2026: lib/aiops/design.ts (налаштування дизайну, обробка зображень, правила запису й конфліктів), lib/landing/styles.ts і lib/landing/s4 (58 макетів і стилів), lib/landing/fonts.ts (шрифти лендингів), lib/brand.ts (контраст), pages/api/mcp.ts (aet_set_event_design, aet_set_design, aet_design_options, правила дизайну в aet_section_schema), lib/aiops/content.ts (дизайн чернетки).
• MCP-ендпоінт повертає ті самі варіанти й правила дизайну будь-якому MCP-клієнту.
• Прев'ю макетів — це зображення, на які aet_design_options дає посилання для кожного варіанта.

Якщо щось тут уже не відповідає тому, що робить AET, напишіть на support@anyeventtool.com — виправимо з датою.

Це частина 5 з 10. Назви наступних частин можуть змінитися.

1. Івент-менеджер, який не спить — ландшафт, три нулі, запобіжники (19 жовтня) · 2. Підключаємо асистента до AET — Claude, ChatGPT, Claude Code, Cursor, Gemini (20 жовтня) · 3. Гостьові чернетки зсередини (22 жовтня) · 4. Сторінка, якою агент пишається (22 жовтня) · 5. Дизайн від агента — ця стаття (23 жовтня) · 6. Жива подія за ключем · 7. Довіра за задумом · 8. Числа без імен · 9. Для розробників: MCP-сервер AET · 10. Плейбуки для десяти типів подій і що далі.