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, редактором і оплатою.