[{"data":1,"prerenderedAt":486},["ShallowReactive",2],{"cases-uk-storelight":3,"published":384},{"doc":4,"versions":363,"related":366},{"id":5,"title":6,"body":7,"casePage":312,"client":324,"cover":325,"description":326,"draft":327,"extension":328,"lang":329,"lead":330,"meta":331,"minutes":332,"modified":333,"navigation":334,"path":335,"platform":336,"price":337,"published":338,"released":327,"role":339,"seo":340,"seoTitle":341,"services":342,"showcase":345,"stack":351,"status":356,"stem":357,"summary":358,"tagline":359,"theme":360,"year":361,"__hash__":362},"cases\u002Fuk\u002Fcases\u002Fstorelight.md","Storelight: AI-редактор скриншотів для App Store і Google Play",{"type":8,"value":9,"toc":296},"minimark",[10,15,26,35,39,42,60,71,84,93,101,108,119,135,139,153,163,172,176,179,183,227,232,255,259,270,274,285,289],[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},"\u002Fcases\u002Fbudgetra\u002F","Budgetra"," і зробив інструмент, який бере цю роботу на себе. Скриншоти в моєму кейсі Budgetra зібрані якраз у ньому.",[11,36,38],{"id":37},"редактор","Редактор",[16,40,41],{},"Найскладніша частина Storelight — редактор. Це «Figma для скриншотів сторів»: усе, що потрібно для промокадрів, і нічого зайвого, щоб для набору скриншотів не доводилося відкривати Figma чи Canva.",[43,44,50,53],"case-scene",{"alt":45,"height":46,"src":47,"title":48,"width":49},"Редактор: полотно з кадрами Budgetra, панель шарів і властивості виділеного заголовка",1066,"\u002Fcases\u002Fstorelight\u002Fuk\u002Fs-layers.webp","Полотно і шари",1300,[16,51,52],{},"Кожен скриншот — окрема монтажна область, а все на ній — шари: фон, скриншот у рамці телефона, заголовки, елементи. Їх виділяють і рухають прямо на полотні, з прив'язкою до країв і центрів, а праворуч — властивості виділеного шару.",[16,54,55,59],{},[20,56,58],{"className":57},[23],"Будь-яку"," дію можна скасувати, проєкт зберігається сам. Для тексту одразу видно, чи вміщується він у своє місце, — кожною мовою.",[43,61,65,68],{"alt":62,"height":46,"src":63,"title":64,"width":49},"Бібліотека елементів: рамки iPhone, iPad і Apple Watch, зокрема в ракурсі","\u002Fcases\u002Fstorelight\u002Fuk\u002Fs-elements.webp","Бібліотека елементів",[16,66,67],{},"Рамки iPhone, iPad, Android і Apple Watch, зокрема в ракурсі, а ще стрілки, бейджі, виноски й підсвітка. Рамки намальовані власні, без ліцензійних ризиків.",[16,69,70],{},"Скриншот сам лягає в рамку, навіть повернуту в перспективі. Викривлення рахується в окремому потоці, тому полотно не гальмує.",[43,72,76],{"alt":73,"height":46,"src":74,"title":75,"width":49},"Фони: AI-фон, власні зображення, градієнти й mesh-градієнти","\u002Fcases\u002Fstorelight\u002Fuk\u002Fs-background.webp","Фони",[16,77,78,79,83],{},"Градієнти, ",[20,80,82],{"className":81},[23],"mesh-градієнти"," й власні зображення. Кольори бренду сервіс визначає за скриншотами додатка, а на Pro AI малює фон у його стилі — два варіанти на вибір.",[43,85,90],{"alt":86,"height":87,"src":88,"title":89,"width":49},"Формат iPad 13″, побудований з основного формату iPhone",889,"\u002Fcases\u002Fstorelight\u002Fuk\u002Fs-ipad.webp","Формати",[16,91,92],{},"Кадри збираються один раз в основному форматі iPhone 6.9″, а iPad 13″ і Android 9:16 будуються з нього в точних розмірах сторів. Правка в основному форматі одразу видна в усіх.",[43,94,98],{"alt":95,"height":46,"src":96,"title":97,"width":49},"Історія версій: автозбереження, дії й іменовані версії за мовами","\u002Fcases\u002Fstorelight\u002Fuk\u002Fs-history.webp","Історія версій",[16,99,100],{},"Кожне автозбереження, дія AI чи видалення екрана — точка, до якої можна повернутися. Важливі стани можна назвати й зберегти як версії, окремо для кожної мови.",[11,102,104],{"id":103},"ai-помічник",[20,105,107],{"className":106},[23],"AI-помічник",[109,110,111],"ul",{},[112,113,114,118],"li",{},[115,116,117],"strong",{},"Завантажуєте екрани як є:"," сервіс розпізнає, що на кожному, і сам дає їм назви.",[43,120,125,128],{"alt":121,"height":122,"src":123,"title":124,"width":49},"AI-помічник: тексти, оформлення, збирання екрана, ієрархія, оцінка набору, декор, мова",993,"\u002Fcases\u002Fstorelight\u002Fuk\u002Fs-ai.webp","AI пропонує, ви вирішуєте",[16,126,127],{},"AI пише заголовки, добирає оформлення й декор, збирає готовий кадр із голого скриншота, розставляє акценти в тексті й оцінює весь набір очима покупця: слабкі кадри, повтори, чи зрозуміла вигода за 3 секунди.",[16,129,130,134],{},[20,131,133],{"className":132},[23],"Будь-який"," результат можна відкотити або попросити інший варіант. Дія AI коштує кредит, а редактор, ручні переклади й експорт кредитів не витрачають.",[11,136,138],{"id":137},"мови-перевірка-іпублікація","Мови, перевірка і публікація",[109,140,141,147],{},[112,142,143,146],{},[115,144,145],{},"Переклад без дослівності:"," тексти адаптуються під кожну мову, кожна мова — окрема версія кадрів.",[112,148,149,152],{},[115,150,151],{},"Правила сторів:"," назва, підзаголовок, опис і ключові слова перевіряються на ліміти App Store і Google Play.",[43,154,160],{"alt":155,"height":156,"src":157,"title":158,"width":159},"«Як у сторі»: набір у пошуку App Store",1054,"\u002Fcases\u002Fstorelight\u002Fuk\u002Fs-store.webp","Як у сторі",1282,[16,161,162],{},"Перед публікацією набір можна переглянути так, як його побачать у пошуку App Store і на сторінці додатка, а для Google Play — у форматі Android.",[43,164,169],{"alt":165,"height":166,"src":167,"title":168,"width":49},"Експорт: мови й формати набору в одному архіві",1114,"\u002Fcases\u002Fstorelight\u002Fuk\u002Fs-export.webp","Експорт для сторів",[16,170,171],{},"ZIP із папками за мовами й форматами і файлом із текстами для стору. На Pro — вивантаження скриншотів і текстів прямо в App Store Connect і Google Play.",[11,173,175],{"id":174},"що-язробив","Що я зробив",[16,177,178],{},"Увесь продукт: ідею, дизайн інтерфейсу і лендингу, фронтенд, сервер, платежі. Інтерфейс — українською, англійською і російською.",[11,180,182],{"id":181},"як-це-влаштовано","Як це влаштовано",[109,184,185,199,205,211,221],{},[112,186,187,190,191,194,195,198],{},[115,188,189],{},"Next.js і React"," на фронтенді, ",[115,192,193],{},"tRPC"," між клієнтом і сервером, ",[115,196,197],{},"PostgreSQL"," через Prisma.",[112,200,201,204],{},[115,202,203],{},"Один рушій рендеру:"," що на полотні, те й у PNG — кадри малюються на сервері (satori і resvg), тож експорт збігається з редактором до пікселя.",[112,206,207,210],{},[115,208,209],{},"Фонові задачі"," (рендер, AI, експорт) — у черзі BullMQ з окремим воркером, файли — у сховищі Cloudflare R2.",[112,212,213,220],{},[115,214,215,219],{},[20,216,218],{"className":217},[23],"AI-шар"," не прив'язаний до одного провайдера:"," версіоновані промпти і перевірка кожної відповіді за схемою.",[112,222,223,226],{},[115,224,225],{},"Вхід за посиланням з листа"," (Auth.js), підписка через Paddle, помилки і аналітика — Sentry і PostHog.",[228,229,231],"h3",{"id":230},"від-полотна-до-готового-png","Від полотна до готового PNG",[233,234,235],"case-system",{},[109,236,237,243,249],{},[112,238,239,242],{},[115,240,241],{},"У браузері"," редактор на Next.js і React, зв’язок із сервером через tRPC.",[112,244,245,248],{},[115,246,247],{},"На сервері"," PostgreSQL через Prisma, черга BullMQ, рендер через satori і resvg.",[112,250,251,254],{},[115,252,253],{},"У сховищі"," готові файли у Cloudflare R2. Експорт використовує той самий рушій, що й редактор.",[11,256,258],{"id":257},"якість","Якість",[260,261,262],"case-highlights",{},[109,263,264,267],{},[112,265,266],{},"близько 550 файлів тестів: модульні, тести на справжній базі даних і наскрізні сценарії в Playwright;",[112,268,269],{},"окремі перевірки доступності (axe) і перевірка типів та лінтер на кожну зміну в CI.",[11,271,273],{"id":272},"статус","Статус",[275,276,277],"case-result",{},[16,278,279,280,284],{},"Storelight на фінальному етапі розробки: основні можливості готові і працюють, зараз я доводжу деталі перед запуском. Цей проєкт показує, що я можу зробити не лише сайт, а й складний ",[20,281,283],{"className":282},[23],"веб-сервіс"," з AI, редактором і оплатою.",[11,286,288],{"id":287},"інтерфейс-сервісу","Інтерфейс сервісу",[290,291],"app-shots",{":alts":292,"dir":293,"height":294,"width":295},"[\"Редактор: полотно з кадрами Budgetra, панель шарів і властивості виділеного заголовка\",\"AI-помічник: тексти, оформлення, збирання екрана, ієрархія, оцінка набору, декор, мова\",\"Бібліотека елементів: рамки iPhone, iPad і Apple Watch, зокрема в ракурсі\",\"Фони: AI-фон, власні зображення, градієнти й mesh-градієнти\",\"Формат iPad 13″, побудований з основного формату iPhone\",\"Формат Android 9:16, побудований з основного формату\",\"Історія версій: автозбереження, дії й іменовані версії за мовами\",\"«Як у сторі»: набір у пошуку App Store\",\"Експорт: мови й формати набору в одному архіві\"]","\u002Fcases\u002Fstorelight\u002Fuk\u002F",483,960,{"title":297,"searchDepth":298,"depth":298,"links":299},"",2,[300,301,302,303,304,305,309,310,311],{"id":13,"depth":298,"text":14},{"id":37,"depth":298,"text":38},{"id":103,"depth":298,"text":107},{"id":137,"depth":298,"text":138},{"id":174,"depth":298,"text":175},{"id":181,"depth":298,"text":182,"children":306},[307],{"id":230,"depth":308,"text":231},3,{"id":257,"depth":298,"text":258},{"id":272,"depth":298,"text":273},{"id":287,"depth":298,"text":288},{"name":313,"cta":314,"layout":315,"hero":316,"links":323},"Storelight","Потрібен схожий веб-сервіс?","studio",[317,319,321],{"src":318,"alt":45,"width":295,"height":294},"\u002Fcases\u002Fstorelight\u002Fuk\u002F1.webp",{"src":320,"alt":121,"width":295,"height":294},"\u002Fcases\u002Fstorelight\u002Fuk\u002F2.webp",{"src":322,"alt":165,"width":295,"height":294},"\u002Fcases\u002Fstorelight\u002Fuk\u002F9.webp",[],"Власний продукт","\u002Fcases\u002Fstorelight\u002Fuk\u002Fcover.webp","Мій веб-сервіс на Next.js: збирає промо-скриншоти додатка з AI, перекладає їх і готує набір для App Store і Google Play. Фінальний етап розробки.",false,"md","uk","Мій другий власний продукт: веб-сервіс, який із сирих екранів додатка робить готові промо-скриншоти й тексти для App Store і Google Play. Зараз він на фінальному етапі розробки.",{},5,"2026-11-03",true,"\u002Fuk\u002Fcases\u002Fstorelight","Веб-додаток",null,"2026-11-02","Ідея, дизайн, розробка",{"title":6,"description":326},"Storelight — AI-редактор скриншотів для сторів: кейс",[343,344],"web-apps","full-stack",{"layout":315,"shots":346,"notes":349},[347,298,348],1,9,[350,168],"AI-інструменти",[352,353,354,193,197,355],"Next.js","React","TypeScript","Prisma","Фінальний етап розробки","uk\u002Fcases\u002Fstorelight","AI-редактор промоскриншотів: від сирих екранів додатка до набору для App Store і Google Play.","З екранів — у готовий реліз.","blue","2026","ToiO0ef5c8Pe_8mYOTYmNnVzvRJe-lRvFUvNWFQnkWo",[364,365,329],"en","ru",[367,372,377],{"path":368,"title":369,"description":370,"draft":327,"short":371},"\u002Fuk\u002Fservices\u002Ffull-stack","Full-stack розробка","Full-stack розробка: інтерфейс, сервер і база даних від однієї людини. Менше посередників, швидший результат. Vue, Nuxt, React. Віддалено.","Інтерфейс, сервер і база даних в одних руках. Від макета до запуску.",{"path":373,"title":374,"description":375,"draft":327,"short":376},"\u002Fuk\u002Fservices\u002Fweb-apps","Веб-додатки та особисті кабінети","Веб-додаток: особистий кабінет, CRM, адмін-панель, сервіс з ролями. Vue 3, Nuxt, React. Від ідеї до запуску. Віддалено.","Особисті кабінети, адмінки, сервіси: Vue, Nuxt, React.",{"path":378,"title":379,"description":380,"draft":327,"client":324,"status":381,"cover":382,"summary":383},"\u002Fuk\u002Fcases\u002Fbudgetra","Budgetra: додаток для бюджету з прогнозом","Мій власний додаток для бюджету на Flutter: прогноз до кінця місяця, голосове введення, розпізнавання чеків. Опублікований в App Store і Google Play.","В App Store і Google Play","\u002Fcases\u002Fbudgetra\u002Fuk\u002Fcover.webp","Бюджет із прогнозом до кінця місяця. Витрати можна надиктувати, а на iPhone — додати й чек із фото.",[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,429,430,431,432,433,32,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,483,484,485],"\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\u002Fbudgetra\u002F","\u002Fru\u002Fcases\u002Fstorelight\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",1793673477895]