[{"data":1,"prerenderedAt":483},["ShallowReactive",2],{"cases-ru-storelight":3,"published":381},{"doc":4,"versions":360,"related":363},{"id":5,"title":6,"body":7,"casePage":309,"client":321,"cover":322,"description":323,"draft":324,"extension":325,"lang":326,"lead":327,"meta":328,"minutes":329,"modified":330,"navigation":331,"path":332,"platform":333,"price":334,"published":335,"released":324,"role":336,"seo":337,"seoTitle":338,"services":339,"showcase":342,"stack":348,"status":353,"stem":354,"summary":355,"tagline":356,"theme":357,"year":358,"__hash__":359},"cases\u002Fru\u002Fcases\u002Fstorelight.md","Storelight: AI-редактор скриншотов для App Store и Google Play",{"type":8,"value":9,"toc":293},"minimark",[10,15,26,35,39,47,61,72,85,94,102,109,120,132,136,150,160,169,173,176,180,224,229,252,256,267,271,282,286],[11,12,14],"h2",{"id":13},"задача","Задача",[16,17,18,19,25],"p",{},"Чтобы опубликовать приложение, нужны ",[20,21,24],"span",{"className":22},[23],"nowrap","промо-скриншоты",": кадры с заголовками, рамками телефонов и фоном, в точных размерах App Store и Google Play, да ещё на каждом языке. Обычно это делают руками в Figma: долго, а с каждым обновлением всё заново.",[16,27,28,29,34],{},"Я сам прошёл через это с ",[30,31,33],"a",{"href":32},"\u002Fru\u002Fcases\u002Fbudgetra\u002F","Budgetra"," и сделал инструмент, который берёт эту работу на себя. Скриншоты в моём кейсе Budgetra собраны как раз в нём.",[11,36,38],{"id":37},"редактор","Редактор",[16,40,41,42,46],{},"Самая сложная часть Storelight — редактор. Это «Figma для скриншотов сторов»: всё, что нужно для ",[20,43,45],{"className":44},[23],"промо-кадров",", и ничего лишнего, чтобы для набора скриншотов не приходилось открывать Figma или Canva.",[48,49,55,58],"case-scene",{"alt":50,"height":51,"src":52,"title":53,"width":54},"Редактор: холст с кадрами Budgetra, панель слоёв и свойства выделенного заголовка",1066,"\u002Fcases\u002Fstorelight\u002Fru\u002Fs-layers.webp","Холст и слои",1300,[16,56,57],{},"Каждый скриншот — отдельная монтажная область, а всё на ней — слои: фон, скриншот в рамке телефона, заголовки, элементы. Их выделяют и двигают прямо на холсте, с привязкой к краям и центрам, а справа — свойства выделенного слоя.",[16,59,60],{},"Любое действие можно отменить, проект сохраняется сам. Для текста сразу видно, помещается ли он в своё место, — на каждом языке.",[48,62,66,69],{"alt":63,"height":51,"src":64,"title":65,"width":54},"Библиотека элементов: рамки iPhone, iPad и Apple Watch, в том числе в ракурсе","\u002Fcases\u002Fstorelight\u002Fru\u002Fs-elements.webp","Библиотека элементов",[16,67,68],{},"Рамки iPhone, iPad, Android и Apple Watch, в том числе в ракурсе, а ещё стрелки, бейджи, выноски и подсветка. Рамки нарисованы свои, без лицензионных рисков.",[16,70,71],{},"Скриншот сам ложится в рамку, даже повёрнутую в перспективе. Искажение считается в отдельном потоке, поэтому холст не тормозит.",[48,73,77],{"alt":74,"height":51,"src":75,"title":76,"width":54},"Фоны: AI-фон, свои изображения, градиенты и mesh-градиенты","\u002Fcases\u002Fstorelight\u002Fru\u002Fs-background.webp","Фоны",[16,78,79,80,84],{},"Градиенты, ",[20,81,83],{"className":82},[23],"mesh-градиенты"," и свои изображения. Цвета бренда сервис определяет по скриншотам приложения, а на Pro AI рисует фон в его стиле — два варианта на выбор.",[48,86,91],{"alt":87,"height":88,"src":89,"title":90,"width":54},"Формат iPad 13″, построенный из основного формата iPhone",889,"\u002Fcases\u002Fstorelight\u002Fru\u002Fs-ipad.webp","Форматы",[16,92,93],{},"Кадры собираются один раз в основном формате iPhone 6.9″, а iPad 13″ и Android 9:16 строятся из него в точных размерах сторов. Правка в основном формате сразу видна во всех.",[48,95,99],{"alt":96,"height":51,"src":97,"title":98,"width":54},"История версий: автосохранения, действия и именованные версии по языкам","\u002Fcases\u002Fstorelight\u002Fru\u002Fs-history.webp","История версий",[16,100,101],{},"Каждое автосохранение, действие AI или удаление экрана — точка, к которой можно вернуться. Важные состояния можно назвать и сохранить как версии, отдельно для каждого языка.",[11,103,105],{"id":104},"ai-помощник",[20,106,108],{"className":107},[23],"AI-помощник",[110,111,112],"ul",{},[113,114,115,119],"li",{},[116,117,118],"strong",{},"Загружаете экраны как есть:"," сервис распознаёт, что на каждом, и сам даёт им названия.",[48,121,126,129],{"alt":122,"height":123,"src":124,"title":125,"width":54},"AI-помощник: тексты, оформление, сборка экрана, иерархия, оценка набора, декор, язык",993,"\u002Fcases\u002Fstorelight\u002Fru\u002Fs-ai.webp","AI предлагает, вы решаете",[16,127,128],{},"AI пишет заголовки, подбирает оформление и декор, собирает готовый кадр из голого скриншота, расставляет акценты в тексте и оценивает весь набор глазами покупателя: слабые кадры, повторы, понятна ли выгода за 3 секунды.",[16,130,131],{},"Любой результат можно откатить или попросить другой вариант. Действие AI стоит кредит, а редактор, ручные переводы и экспорт кредиты не тратят.",[11,133,135],{"id":134},"языки-проверка-ипубликация","Языки, проверка и публикация",[110,137,138,144],{},[113,139,140,143],{},[116,141,142],{},"Перевод без дословности:"," тексты подстраиваются под каждый язык, каждый язык — отдельная версия кадров.",[113,145,146,149],{},[116,147,148],{},"Правила сторов:"," название, подзаголовок, описание и ключевые слова проверяются на лимиты App Store и Google Play.",[48,151,157],{"alt":152,"height":153,"src":154,"title":155,"width":156},"«Как в сторе»: набор в поиске App Store",1054,"\u002Fcases\u002Fstorelight\u002Fru\u002Fs-store.webp","Как в сторе",1282,[16,158,159],{},"Перед публикацией набор можно посмотреть так, как его увидят в поиске App Store и на странице приложения, а для Google Play — в формате Android.",[48,161,166],{"alt":162,"height":163,"src":164,"title":165,"width":54},"Экспорт: языки и форматы набора в одном архиве",1114,"\u002Fcases\u002Fstorelight\u002Fru\u002Fs-export.webp","Экспорт для сторов",[16,167,168],{},"ZIP с папками по языкам и форматам и файлом с текстами для стора. На Pro — выгрузка скриншотов и текстов прямо в App Store Connect и Google Play.",[11,170,172],{"id":171},"что-ясделал","Что я сделал",[16,174,175],{},"Весь продукт: идею, дизайн интерфейса и лендинга, фронтенд, сервер, платежи. Интерфейс — на украинском, английском и русском.",[11,177,179],{"id":178},"как-это-устроено","Как это устроено",[110,181,182,196,202,208,218],{},[113,183,184,187,188,191,192,195],{},[116,185,186],{},"Next.js и React"," на фронтенде, ",[116,189,190],{},"tRPC"," между клиентом и сервером, ",[116,193,194],{},"PostgreSQL"," через Prisma.",[113,197,198,201],{},[116,199,200],{},"Один движок рендера:"," что на холсте, то и в PNG — кадры рисуются на сервере (satori и resvg), так что экспорт совпадает с редактором до пикселя.",[113,203,204,207],{},[116,205,206],{},"Фоновые задачи"," (рендер, AI, экспорт) — в очереди BullMQ с отдельным воркером, файлы — в хранилище Cloudflare R2.",[113,209,210,217],{},[116,211,212,216],{},[20,213,215],{"className":214},[23],"AI-слой"," не привязан к одному провайдеру:"," версионированные промпты и проверка каждого ответа по схеме.",[113,219,220,223],{},[116,221,222],{},"Вход по ссылке из письма"," (Auth.js), подписка через Paddle, ошибки и аналитика — Sentry и PostHog.",[225,226,228],"h3",{"id":227},"от-холста-до-готового-png","От холста до готового PNG",[230,231,232],"case-system",{},[110,233,234,240,246],{},[113,235,236,239],{},[116,237,238],{},"В браузере"," редактор на Next.js и React, связь с сервером через tRPC.",[113,241,242,245],{},[116,243,244],{},"На сервере"," PostgreSQL через Prisma, очередь BullMQ, рендер через satori и resvg.",[113,247,248,251],{},[116,249,250],{},"В хранилище"," готовые файлы в Cloudflare R2. Экспорт использует тот же движок, что и редактор.",[11,253,255],{"id":254},"качество","Качество",[257,258,259],"case-highlights",{},[110,260,261,264],{},[113,262,263],{},"около 550 файлов тестов: модульные, тесты на настоящей базе данных и сквозные сценарии в Playwright;",[113,265,266],{},"отдельные проверки доступности (axe), проверка типов и линтер на каждое изменение в CI.",[11,268,270],{"id":269},"статус","Статус",[272,273,274],"case-result",{},[16,275,276,277,281],{},"Storelight на финальном этапе разработки: основные возможности готовы и работают, сейчас я довожу детали перед запуском. Этот проект показывает, что я могу сделать не только сайт, но и сложный ",[20,278,280],{"className":279},[23],"веб-сервис"," с AI, редактором и оплатой.",[11,283,285],{"id":284},"интерфейс-сервиса","Интерфейс сервиса",[287,288],"app-shots",{":alts":289,"dir":290,"height":291,"width":292},"[\"Редактор: холст с кадрами Budgetra, панель слоёв и свойства выделенного заголовка\",\"AI-помощник: тексты, оформление, сборка экрана, иерархия, оценка набора, декор, язык\",\"Библиотека элементов: рамки iPhone, iPad и Apple Watch, в том числе в ракурсе\",\"Фоны: AI-фон, свои изображения, градиенты и mesh-градиенты\",\"Формат iPad 13″, построенный из основного формата iPhone\",\"Формат Android 9:16, построенный из основного формата\",\"История версий: автосохранения, действия и именованные версии по языкам\",\"«Как в сторе»: набор в поиске App Store\",\"Экспорт: языки и форматы набора в одном архиве\"]","\u002Fcases\u002Fstorelight\u002Fru\u002F",483,960,{"title":294,"searchDepth":295,"depth":295,"links":296},"",2,[297,298,299,300,301,302,306,307,308],{"id":13,"depth":295,"text":14},{"id":37,"depth":295,"text":38},{"id":104,"depth":295,"text":108},{"id":134,"depth":295,"text":135},{"id":171,"depth":295,"text":172},{"id":178,"depth":295,"text":179,"children":303},[304],{"id":227,"depth":305,"text":228},3,{"id":254,"depth":295,"text":255},{"id":269,"depth":295,"text":270},{"id":284,"depth":295,"text":285},{"name":310,"cta":311,"layout":312,"hero":313,"links":320},"Storelight","Нужен похожий веб-сервис?","studio",[314,316,318],{"src":315,"alt":50,"width":292,"height":291},"\u002Fcases\u002Fstorelight\u002Fru\u002F1.webp",{"src":317,"alt":122,"width":292,"height":291},"\u002Fcases\u002Fstorelight\u002Fru\u002F2.webp",{"src":319,"alt":162,"width":292,"height":291},"\u002Fcases\u002Fstorelight\u002Fru\u002F9.webp",[],"Собственный продукт","\u002Fcases\u002Fstorelight\u002Fru\u002Fcover.webp","Мой веб-сервис на Next.js: собирает промо-скриншоты приложения с AI, переводит их и готовит набор для App Store и Google Play. Финальный этап разработки.",false,"md","ru","Мой второй собственный продукт: веб-сервис, который из сырых экранов приложения делает готовые промо-скриншоты и тексты для App Store и Google Play. Сейчас он на финальном этапе разработки.",{},5,"2026-11-03",true,"\u002Fru\u002Fcases\u002Fstorelight","Веб-приложение",null,"2026-11-02","Идея, дизайн, разработка",{"title":6,"description":323},"Storelight — AI-редактор скриншотов для сторов: кейс",[340,341],"web-apps","full-stack",{"layout":312,"shots":343,"notes":346},[344,295,345],1,9,[347,165],"AI-инструменты",[349,350,351,190,194,352],"Next.js","React","TypeScript","Prisma","Финальный этап разработки","ru\u002Fcases\u002Fstorelight","AI-редактор промо-скриншотов: от сырых экранов приложения до набора для App Store и Google Play.","Из экранов — в готовый релиз.","blue","2026","8yDozBDxh9N-1S3End5RIw8QdAzuWEJ_GakSminFiMo",[361,326,362],"en","uk",[364,369,374],{"path":365,"title":366,"description":367,"draft":324,"short":368},"\u002Fru\u002Fservices\u002Ffull-stack","Full-stack разработка","Full-stack разработка: интерфейс, сервер и база данных от одного человека. Меньше посредников, быстрее результат. Vue, Nuxt, React. Удалённо.","Интерфейс, сервер и база данных в одних руках. От макета до запуска.",{"path":370,"title":371,"description":372,"draft":324,"short":373},"\u002Fru\u002Fservices\u002Fweb-apps","Веб-приложения и личные кабинеты","Веб-приложение: личный кабинет, CRM, админ-панель, сервис с ролями. Vue 3, Nuxt, React. От идеи до запуска. Удалённо.","Личные кабинеты, админки, сервисы: Vue, Nuxt, React.",{"path":375,"title":376,"description":377,"draft":324,"client":321,"status":378,"cover":379,"summary":380},"\u002Fru\u002Fcases\u002Fbudgetra","Budgetra: приложение для бюджета с прогнозом","Моё собственное приложение для бюджета на Flutter: прогноз до конца месяца, голосовой ввод, распознавание чеков. Опубликовано в App Store и Google Play.","В App Store и Google Play","\u002Fcases\u002Fbudgetra\u002Fru\u002Fcover.webp","Бюджет с прогнозом до конца месяца. Расходы можно надиктовать, а на iPhone — добавить и чек с фото.",[382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,32,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457,458,459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482],"\u002Fen\u002Fservices\u002Fbusiness-card-site\u002F","\u002Fen\u002Fservices\u002Fcatalog-site\u002F","\u002Fen\u002Fservices\u002Fcorporate-site\u002F","\u002Fen\u002Fservices\u002Ffigma-to-html\u002F","\u002Fen\u002Fservices\u002Fflutter-apps\u002F","\u002Fen\u002Fservices\u002Ffull-stack\u002F","\u002Fen\u002Fservices\u002Flanding-page\u002F","\u002Fen\u002Fservices\u002Fonline-store\u002F","\u002Fen\u002Fservices\u002Fportal\u002F","\u002Fen\u002Fservices\u002Fredesign\u002F","\u002Fen\u002Fservices\u002Fsite-speed\u002F","\u002Fen\u002Fservices\u002Fsite-support\u002F","\u002Fen\u002Fservices\u002Fweb-apps\u002F","\u002Fen\u002Fservices\u002Fwordpress\u002F","\u002Fru\u002Fservices\u002Fbusiness-card-site\u002F","\u002Fru\u002Fservices\u002Fcatalog-site\u002F","\u002Fru\u002Fservices\u002Fcorporate-site\u002F","\u002Fru\u002Fservices\u002Ffigma-to-html\u002F","\u002Fru\u002Fservices\u002Fflutter-apps\u002F","\u002Fru\u002Fservices\u002Ffull-stack\u002F","\u002Fru\u002Fservices\u002Flanding-page\u002F","\u002Fru\u002Fservices\u002Fonline-store\u002F","\u002Fru\u002Fservices\u002Fportal\u002F","\u002Fru\u002Fservices\u002Fredesign\u002F","\u002Fru\u002Fservices\u002Fsite-speed\u002F","\u002Fru\u002Fservices\u002Fsite-support\u002F","\u002Fru\u002Fservices\u002Fweb-apps\u002F","\u002Fru\u002Fservices\u002Fwordpress\u002F","\u002Fservices\u002Fbusiness-card-site\u002F","\u002Fservices\u002Fcatalog-site\u002F","\u002Fservices\u002Fcorporate-site\u002F","\u002Fservices\u002Ffigma-to-html\u002F","\u002Fservices\u002Fflutter-apps\u002F","\u002Fservices\u002Ffull-stack\u002F","\u002Fservices\u002Flanding-page\u002F","\u002Fservices\u002Fonline-store\u002F","\u002Fservices\u002Fportal\u002F","\u002Fservices\u002Fredesign\u002F","\u002Fservices\u002Fsite-speed\u002F","\u002Fservices\u002Fsite-support\u002F","\u002Fservices\u002Fweb-apps\u002F","\u002Fservices\u002Fwordpress\u002F","\u002Fservices\u002F","\u002Fen\u002Fservices\u002F","\u002Fru\u002Fservices\u002F","\u002Fen\u002Fcases\u002Fbudgetra\u002F","\u002Fen\u002Fcases\u002Fstorelight\u002F","\u002Fru\u002Fcases\u002Fstorelight\u002F","\u002Fcases\u002Fbudgetra\u002F","\u002Fcases\u002Fstorelight\u002F","\u002Fcases\u002F","\u002Fen\u002Fcases\u002F","\u002Fru\u002Fcases\u002F","\u002Fen\u002Fblog\u002Fbusiness-card-site-price\u002F","\u002Fen\u002Fblog\u002Fcatalog-or-online-store\u002F","\u002Fen\u002Fblog\u002Fcorporate-site-cost\u002F","\u002Fen\u002Fblog\u002Ffigma-to-html-checklist\u002F","\u002Fen\u002Fblog\u002Ffull-stack-vs-team\u002F","\u002Fen\u002Fblog\u002Flanding-page-cost\u002F","\u002Fen\u002Fblog\u002Fmobile-app-cost\u002F","\u002Fen\u002Fblog\u002Fonline-store-cost\u002F","\u002Fen\u002Fblog\u002Fpersonal-account-guide\u002F","\u002Fen\u002Fblog\u002Fportal-where-to-start\u002F","\u002Fen\u002Fblog\u002Fredesign-without-losing-seo\u002F","\u002Fen\u002Fblog\u002Fsite-support-guide\u002F","\u002Fen\u002Fblog\u002Fslow-site-checklist\u002F","\u002Fen\u002Fblog\u002Fwordpress-or-custom-code\u002F","\u002Fru\u002Fblog\u002Fbusiness-card-site-price\u002F","\u002Fru\u002Fblog\u002Fcatalog-or-online-store\u002F","\u002Fru\u002Fblog\u002Fcorporate-site-cost\u002F","\u002Fru\u002Fblog\u002Ffigma-to-html-checklist\u002F","\u002Fru\u002Fblog\u002Ffull-stack-vs-team\u002F","\u002Fru\u002Fblog\u002Flanding-page-cost\u002F","\u002Fru\u002Fblog\u002Fmobile-app-cost\u002F","\u002Fru\u002Fblog\u002Fonline-store-cost\u002F","\u002Fru\u002Fblog\u002Fpersonal-account-guide\u002F","\u002Fru\u002Fblog\u002Fportal-where-to-start\u002F","\u002Fru\u002Fblog\u002Fredesign-without-losing-seo\u002F","\u002Fru\u002Fblog\u002Fsite-support-guide\u002F","\u002Fru\u002Fblog\u002Fslow-site-checklist\u002F","\u002Fru\u002Fblog\u002Fwordpress-or-custom-code\u002F","\u002Fblog\u002Fbusiness-card-site-price\u002F","\u002Fblog\u002Fcatalog-or-online-store\u002F","\u002Fblog\u002Fcorporate-site-cost\u002F","\u002Fblog\u002Ffigma-to-html-checklist\u002F","\u002Fblog\u002Ffull-stack-vs-team\u002F","\u002Fblog\u002Flanding-page-cost\u002F","\u002Fblog\u002Fmobile-app-cost\u002F","\u002Fblog\u002Fonline-store-cost\u002F","\u002Fblog\u002Fpersonal-account-guide\u002F","\u002Fblog\u002Fportal-where-to-start\u002F","\u002Fblog\u002Fredesign-without-losing-seo\u002F","\u002Fblog\u002Fsite-support-guide\u002F","\u002Fblog\u002Fslow-site-checklist\u002F","\u002Fblog\u002Fwordpress-or-custom-code\u002F","\u002Fblog\u002F","\u002Fen\u002Fblog\u002F","\u002Fru\u002Fblog\u002F","\u002Fbrief\u002F","\u002Fen\u002Fbrief\u002F","\u002Fru\u002Fbrief\u002F",1793673477632]