Как сгенерировать email-рассылку с AI в NeuroGate
Гайд по HTML email в NeuroGate Design: table-layout 600px, design system, preheader, dark mode и экспорт для Unisender, Sendsay и других ESP.
Как сгенерировать email-рассылку с AI в NeuroGate
Email-вёрстка — это отдельная вселенная. Таблицы вместо div'ов, inline-стили вместо CSS-файлов, preheader, dark mode, совместимость с десятками почтовых клиентов. Звучит как боль — но не в NeuroGate.
В NeuroGate Дизайн тип проекта «Письмо» генерирует готовый HTML-код шириной 600px, совместимый с популярными сервисами рассылок: Unisender, Sendsay, Mailchimp и другими ESP.
Почему email — это не лендинг
Если вы когда-нибудь пробовали вставить HTML лендинга в рассылку, вы знаете: ничего хорошего не получится. Email-клиенты (Gmail, Outlook, Mail.ru) режут стили, игнорируют флексы, ломают сетку.
Шаблон email в NeuroGate уже учитывает все эти ограничения. Агент не «изобретает» вёрстку с нуля — он работает по правилам, которые гарантируют корректное отображение в почтовых клиентах:
- Табличная структура вместо блочной вёрстки
- Inline-стили на каждом элементе
- Фиксированная ширина 600px с мобильной адаптацией
- Совместимость с dark mode
Design system обязательна
Для email-проектов мы настоятельно рекомендуем подключить design system. Она должна содержать секции: color, typography, layout и components.
Без дизайн-системы письмо получится generic — стандартное и безликое. С дизайн-системой агент подставит ваши фирменные цвета, шрифты и стили прямо в inline-код.
Пошаговая инструкция
Шаг 1. Design → Projects → «Письмо»
На странице Дизайн в личном кабинете выберите карточку Письмо (иконка конверта). Это сразу подскажет агенту, что нужна email-вёрстка, а не сайт или презентация.
Шаг 2. Выберите design system
Выбрать дизайн-систему можно двумя способами: на странице с проектами (под вашим промптом) или на странице с дизайн-системами — нажмите кнопку «Использовать».
Шаг 3. Промпт под тип кампании
Промпт — это ваше задание агенту. Чем конкретнее, тем лучше результат. Вот примеры для разных типов писем:
Product launch (анонс функции):
Launch email для новой функции «AI Design» в NeuroGate.
Preheader: Соберите лендинг за 10 минут.
Структура: hero с CTA, 3 benefit blocks, testimonial, primary CTA, footer с unsubscribe.
Аудитория: маркетологи. Язык: русский. max-width 600px.
Lifecycle / onboarding (приветственное письмо):
Welcome письмо после регистрации. 1 экран — одна цель: пройти onboarding.
CTA: «Открыть кабинет». Тон дружелюбный, без spam-триггеров.
Promo (акция):
Black Friday −30%. Deadline в subject. Hero с промокодом, urgency block, FAQ, footer.
Шаг 4. Добавьте референсы и вложения
Чтобы результат был ещё точнее, прикрепите к проекту:
- Ссылки на хорошие email-примеры (например, с reallygoodemails.com или ваши прошлые кампании)
- Скриншоты или PDF-макеты дизайна
- Брендбук в виде вложения
Шаг 5. Discovery → генерация
После отправки промпта агент может задать уточняющие вопросы:
- Какую тему и прехедер использовать?
- Как оформить CTA-кнопку и на какой URL вести?
- Нужен ли юридический footer (адрес компании, ссылка отписки)?
Ответьте — и получите готовый HTML в превью справа. Письмо отображается как single canvas шириной 600px.
Шаг 6. Проверка и правки
Письмо готово, но хочется доработать? Просто напишите в чат:
- «Добавь plain-text fallback hint в preheader»
- «Увеличь размер кнопки CTA»
- «Сделай версию для dark mode»
- «Добавь bulletproof button» (VML fallback для Outlook)
Пайплайн также включает email image repair — если какие-то картинки битые, они автоматически заменяются на placeholder.
Шаг 7. Экспорт
Нажмите Export → HTML и скопируйте код в вашу систему рассылок. Также доступны форматы PDF (для согласования с командой) и ZIP.
Что внутри сгенерированного HTML
Агент собирает письмо по стандартам email-вёрстки. В результате вы получаете:
- Preheader text — скрытый текст, который виден в превью инбокса
- Centered 600px table shell — основная табличная структура
- Mobile @media query — адаптация под мобильные экраны
- Dark mode query — корректное отображение в тёмной теме (где уместно)
- Compliance footer — блок с placeholder для ссылки отписки
- Готовые модули: hero, two-column, CTA bar, footer — собранные из вашей системы и референсов
