Storelight — AI-редактор скриншотов для сторов: кейс

Задача

Чтобы опубликовать приложение, нужны промо-скриншоты: кадры с заголовками, рамками телефонов и фоном, в точных размерах App Store и Google Play, да ещё на каждом языке. Обычно это делают руками в Figma: долго, а с каждым обновлением всё заново.

Я сам прошёл через это с Budgetra и сделал инструмент, который берёт эту работу на себя. Скриншоты в моём кейсе Budgetra собраны как раз в нём.

Редактор

Самая сложная часть Storelight — редактор. Это «Figma для скриншотов сторов»: всё, что нужно для промо-кадров, и ничего лишнего, чтобы для набора скриншотов не приходилось открывать Figma или Canva.

Холст и слои

Каждый скриншот — отдельная монтажная область, а всё на ней — слои: фон, скриншот в рамке телефона, заголовки, элементы. Их выделяют и двигают прямо на холсте, с привязкой к краям и центрам, а справа — свойства выделенного слоя.

Любое действие можно отменить, проект сохраняется сам. Для текста сразу видно, помещается ли он в своё место, — на каждом языке.

Библиотека элементов

Рамки iPhone, iPad, Android и Apple Watch, в том числе в ракурсе, а ещё стрелки, бейджи, выноски и подсветка. Рамки нарисованы свои, без лицензионных рисков.

Скриншот сам ложится в рамку, даже повёрнутую в перспективе. Искажение считается в отдельном потоке, поэтому холст не тормозит.

Фоны

Градиенты, mesh-градиенты и свои изображения. Цвета бренда сервис определяет по скриншотам приложения, а на Pro AI рисует фон в его стиле — два варианта на выбор.

Формат iPad 13″, построенный из основного формата iPhone

Форматы

Кадры собираются один раз в основном формате iPhone 6.9″, а iPad 13″ и Android 9:16 строятся из него в точных размерах сторов. Правка в основном формате сразу видна во всех.

История версий

Каждое автосохранение, действие AI или удаление экрана — точка, к которой можно вернуться. Важные состояния можно назвать и сохранить как версии, отдельно для каждого языка.

AI-помощник

Загружаете экраны как есть: сервис распознаёт, что на каждом, и сам даёт им названия.

AI предлагает, вы решаете

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

Любой результат можно откатить или попросить другой вариант. Действие AI стоит кредит, а редактор, ручные переводы и экспорт кредиты не тратят.

Языки, проверка и публикация

Перевод без дословности: тексты подстраиваются под каждый язык, каждый язык — отдельная версия кадров.
Правила сторов: название, подзаголовок, описание и ключевые слова проверяются на лимиты App Store и Google Play.

Как в сторе

Перед публикацией набор можно посмотреть так, как его увидят в поиске App Store и на странице приложения, а для Google Play — в формате Android.

Экспорт: языки и форматы набора в одном архиве

Экспорт для сторов

ZIP с папками по языкам и форматам и файлом с текстами для стора. На Pro — выгрузка скриншотов и текстов прямо в App Store Connect и Google Play.

Что я сделал

Весь продукт: идею, дизайн интерфейса и лендинга, фронтенд, сервер, платежи. Интерфейс — на украинском, английском и русском.

Как это устроено

Next.js и React на фронтенде, tRPC между клиентом и сервером, PostgreSQL через Prisma.
Один движок рендера: что на холсте, то и в PNG — кадры рисуются на сервере (satori и resvg), так что экспорт совпадает с редактором до пикселя.
Фоновые задачи (рендер, AI, экспорт) — в очереди BullMQ с отдельным воркером, файлы — в хранилище Cloudflare R2.
AI-слой не привязан к одному провайдеру: версионированные промпты и проверка каждого ответа по схеме.
Вход по ссылке из письма (Auth.js), подписка через Paddle, ошибки и аналитика — Sentry и PostHog.

От холста до готового PNG

В браузере редактор на Next.js и React, связь с сервером через tRPC.
На сервере PostgreSQL через Prisma, очередь BullMQ, рендер через satori и resvg.
В хранилище готовые файлы в Cloudflare R2. Экспорт использует тот же движок, что и редактор.

Стек

Next.js
React
TypeScript
tRPC
PostgreSQL
Prisma

Качество

около 550 файлов тестов: модульные, тесты на настоящей базе данных и сквозные сценарии в Playwright;
отдельные проверки доступности (axe), проверка типов и линтер на каждое изменение в CI.

Статус

Storelight на финальном этапе разработки: основные возможности готовы и работают, сейчас я довожу детали перед запуском. Этот проект показывает, что я могу сделать не только сайт, но и сложный веб-сервис с AI, редактором и оплатой.