Зачем производителю свой генератор карточек
У производителя фильтров для воды много похожих картриджей: разные форматы, степень очистки, линейки. Для маркетплейса каждому нужна главная картинка карточки 1200×1600 в фирменном стиле. Если заказывать их у дизайнера по одной, получается долго, а при правке одной цифры карточку приходится переделывать заново. Если собирать самим в онлайн-конструкторе, стиль постепенно расползается.
Задача была сделать инструмент, в котором карточка собирается из данных о товаре по одному утверждённому макету: одинаковые отступы, шрифты, цвета брендбука и положение товара на каждой картинке.
Как собирается карточка
- Данные о товаре. Артикул, название и модель, линейка (полипропилен, уголь, ионообмен), главный заголовок в две строки, две характеристики с подписями (формат и тонкость очистки) и нижняя оранжевая плашка.
- Фото с прозрачным фоном. Генератор сам находит границы товара по прозрачности и вписывает его в одну и ту же область макета: пустые поля вокруг предмета на исходнике не влияют на результат.
- Рендер. HTML-шаблон заполняется данными и отрисовывается в Chrome в PNG 1200×1600. Шрифты, логотип и фото встраиваются прямо в шаблон, поэтому результат не зависит от интернета.
Размер кегля подбирается автоматически под длину текста. Если текст не помещается даже в минимальный размер, генератор не обрезает его молча, а показывает ошибку и просит сократить.
Веб-студия и таблица
Работать можно двумя способами.
- Студия в браузере. Три колонки: список товаров, форма, живой предпросмотр карточки. Товар можно добавить, дублировать и поправить, изменения сохраняются автоматически. Готовую карточку скачивают в PNG, а каталог целиком архивом, до 100 карточек за раз.
- Таблица CSV. Каталог ведётся в Excel или Numbers, а пакетная сборка запускается двойным кликом и после окончания открывает галерею всех карточек. Из студии каталог выгружается в тот же формат и загружается обратно: совпадающие артикулы обновляются, новые добавляются.
Проверки, чтобы карточка не ушла с ошибкой
- Фото без прозрачного фона не принимается: генератор просит сначала удалить фон и сохранить PNG. Нарисованная «шахматка» прозрачностью не считается.
- Все поля обязательны, артикулы уникальны, для артикула допустимы латиница, цифры и дефис.
- Пока предпросмотр не собран или в нём ошибка, кнопка скачивания заблокирована.
Работает на компьютере, без нейросети
Студия запускается двойным кликом и открывается в браузере, но работает на компьютере сотрудника: наружу ничего не публикуется, данные хранятся в локальном файле. При сборке не используются ни интернет, ни генеративные модели: тексты берутся только из введённых данных, поэтому в карточке не появится выдуманных характеристик. Одни и те же данные дают одинаковую картинку.
Как устроено
Node.js, Playwright для рендера через установленный Chrome и sharp для анализа прозрачности и подготовки фото. Макет восстановлен по утверждённому заказчиком образцу и сверен с ним наложением, палитра взята из брендбука. Один шаблон используется и в студии, и в пакетной сборке. Сценарии студии покрыты автотестами на Playwright: предпросмотр, сохранение, выгрузка PNG и ZIP, загрузка фото, импорт CSV, ошибка слишком длинного текста.
Скриншоты
Частые вопросы
Какой размер карточки товара на Озоне делает генератор?
1200×1600 пикселей, вертикальный формат 3:4, который подходит для главного фото карточки на Озоне.
Нужна ли нейросеть или интернет?
Нет. Карточки собираются на компьютере сотрудника из введённых данных по фиксированному шаблону.
Можно ли сделать сразу весь каталог?
Да. Из студии скачивается ZIP до 100 карточек за раз, а из таблицы CSV собирается весь каталог одним запуском.
Удаляет ли генератор фон с фото?
Нет, нужна фотография товара уже без фона, в PNG с прозрачностью. Генератор проверяет это и сам вписывает товар в макет.
Подойдёт ли шаблон для любых товаров?
Этот макет рассчитан на одиночные вертикальные картриджи. Для корпусов, комплектов и систем нужен отдельный шаблон, его можно добавить по той же схеме.
