01 / ЗАДАЧАНейросеть рисует красиво.
Но пишет с ошибками.
Объявлению на Авито нужна серия слайдов: обложка, преимущества, цены, гарантии, ответы на вопросы. Если просить генератор картинок нарисовать слайд целиком, текст на нём выходит искажённым: пропущенные и лишние буквы, «плывущие» слова. Для десятков объявлений это превращается в ручную переделку.
Идея CardForge — разделить слайд на слои. Фон рисуется отдельно и не содержит текста. Текст пишется отдельно и верстается шаблоном поверх фона: перенос строк, подбор кегля, безопасные поля. Поэтому на слайде всегда ровно те слова, что в брифе.
Это самостоятельный проект для демонстрации навыков, а не клиентский кейс. Данные в демо вымышлены.
Буквы — от шаблона.
Текст никогда не рисуется нейросетью. Шаблонизатор переносит строки, держит отступы и уменьшает кегль, пока всё не поместится.
02 / СЕРИЯДесять слайдов, один стиль.
Обложка, боль и решение, преимущества, шаги, цены, состав, гарантии, вопросы, отзывы, призыв. Цвет и шаблон общие для всей серии.
03 / ПРОВЕРКАКонтроль до выгрузки.
Каждый слайд проверяется: текст в рамках, контраст по WCAG не ниже 4.5:1 по реальным пикселям фона, заголовки не повторяются.
04 / ОБЪЁМПакетом, а не по одному.
Таблица «название; цена; преимущества» превращается в архив: по папке из 10 PNG на каждую строку, плюс тексты и отчёт проверки.
Выберите нишу, впишите услугу и преимущества, поменяйте цвет и шаблон. Нажмите «Сгенерировать заново», чтобы получить другие формулировки и фоны. Переключите «Только фон» и «Только текст», чтобы увидеть слои по отдельности.
ОТКРЫТЬ ИНТЕРАКТИВНОЕ ДЕМОДемо работает целиком в браузере, без сервера и ключей. Тексты собирает детерминированный шаблонный движок, фоны — процедурная графика на canvas, без чужих фотографий. Для ZIP-архивов подгружается библиотека JSZip с cdnjs.
03 / ПОД КАПОТОМСмысл — от модели.
Буквы — от шаблона.
Бриф превращается в JSON с текстами десяти слайдов. В рабочей версии этот JSON по строгой схеме пишет языковая модель, в демо — шаблонный движок с сидом. Фон генерирует модель изображений с запретом на текст, в демо его заменяет процедурная графика. Дальше один и тот же код верстает и проверяет слайды.
БрифТексты (JSON)Фон без текстаВёрстка на canvasПроверкаPNG / ZIP
Контраст считается по формуле WCAG для каждой строки: перед отрисовкой текста берутся пиксели фона под ней. Если контраст ниже 4.5:1, автокоррекция сначала подбирает оттенок, затем добавляет подложку, и проверка запускается снова. Если автокоррекцию выключить, проблемные слайды подсвечиваются красным.