Как перестать рисовать скриншоты для сторов вручную и доверить это коду

У каждого мобильного разработчика есть свой список дел, которые он ненавидит. Где-то между «настройкой сертификатов Apple» и «ожиданием сборки в CI» уютно расположилась подготовка скриншотов для App Store и Google Play. Когда функциональность готова, иконка отрисована, а баги поправлены, нужно потратить еще целый день на то, чтобы наделать картинок под десяток разных разрешений. А если у вас поддержка нескольких языков, задача превращается в бесконечный день сурка.

Проект app-store-screenshots — это попытка решить проблему радикально. Автор предлагает не возиться в Figma или Photoshop, а генерировать маркетинговые материалы с помощью кода и ИИ-агентов.

Скриншоты как реклама

Основная идея Парта Джадхава, автора репозитория, проста: скриншоты в сторе — это не просто документация интерфейса, это рекламные баннеры. Они должны продавать пользу, а не просто показывать кнопки.

Проект реализован как «скилл» для современных ИИ-кодинг агентов вроде Claude Code, Cursor или Windsurf. Вы скармливаете инструменту описание приложения, а он на базе Next.js разворачивает полноценный генератор, который сам подбирает цветовую гамму, пишет маркетинговые тексты и расставляет рамки устройств.

Что этот инструмент берет на себя

Вместо того чтобы вручную подгонять размер холста под iPhone 16 Pro Max или 10-дюймовый планшет на Android, вы работаете с React-компонентами.

Вот чем проект облегчает жизнь:

• Автоматически создает сетку размеров. Он знает требования Apple (6.9", 6.5" и другие) и Google (смартфоны, 7" и 10" планшеты).
• Использует готовые мокапы. В комплекте идет mockup.png для iPhone, а рамки для Android рисуются на чистом CSS.
• Генерирует тексты. ИИ-агент сам пишет заголовки на основе ваших фич. Например, вместо скучного «Учет расходов» он предложит «Контролируйте свои бюджеты одним касанием».
• Поддерживает локализацию и RTL. Если нужно запустить приложение в арабских странах, инструмент не просто переведет текст, но и зеркально отразит верстку (RTL-aware design).

Как это работает технически

Под капотом связка из Next.js, Tailwind CSS и библиотеки html-to-image. Вы запускаете локальный сервер разработки, открываете страницу в браузере и видите свои будущие скриншоты. Нажатие на кнопку экспорта превращает DOM-узлы в PNG-файлы нужного разрешения.

Интересно, что генератор — это по сути один файл page.tsx. Если вам не нравится, как ИИ расположил текст или какой выбрал шрифт, вы просто правите код компонента. Это гораздо быстрее, чем менять слои в графическом редакторе.

Установка скилла в ваш ИИ-редактор (например, Claude Code) делается одной командой:

npx skills add ParthJadhav/app-store-screenshots

После этого можно просто написать в чате: «Сделай мне 6 скриншотов для приложения-трекера привычек в минималистичном стиле и пастельных тонах». Агент задаст уточняющие вопросы про бренд и основные функции, после чего создаст структуру проекта.

Практическая ценность для разработчика

Я часто вижу, как хорошие инди-приложения проваливаются в сторах из-за плохой подачи. Разработчик — не дизайнер, и это нормально. Данный инструмент заменяет собой целую цепочку: дизайнера, копирайтера и верстальщика баннеров.

Особенно полезно использование пресетов тем. Можно быстро набросать несколько вариантов оформления:

const THEMES = {
  "clean-light": { bg: "#F6F1EA", fg: "#171717", accent: "#5B7CFA" },
  "dark-bold": { bg: "#0B1020", fg: "#F8FAFC", accent: "#8B5CF6" }
};

Сменили одну строку — и весь набор скриншотов перекрасился. Это позволяет проводить A/B тесты в сторе без особых усилий.

Кому стоит попробовать

Проект точно пригодится:

1. Инди-разработчикам, которые хотят «красиво, как у топовых приложений», но не имеют бюджета на дизайн.
2. Командам, которые выпускают приложения на множество рынков (поддержка 10+ языков в ручном режиме — это ад).
3. Всем, кто уже использует Cursor или Claude Code в своей работе.

Конечно, если у вас в штате сидит фултайм дизайнер, который вылизывает каждый пиксель, автоматизация может показаться лишней. Но для 90% приложений на рынке такого подхода более чем достаточно. Главное помнить совет автора: делайте скриншоты в симуляторе с диагональю 6.1 дюйма, чтобы потом было проще масштабировать изображения.

Этот репозиторий — отличный пример того, как ИИ может не просто писать функции sum(a, b), а решать конкретную, приземленную и довольно скучную бизнес-задачу. Ссылка на проект: ParthJadhav/app-store-screenshots.