Goldie, генератор скриншотов App Store для кодинг-агентов

Перед каждым релизом в App Store повторяется одна и та же работа. Запустить приложение на симуляторе, пройти по экранам, снять кадры, положить их в макет с рамкой телефона и подписью, собрать видеопревью, сверить размеры и залить всё в App Store Connect. На второй локали цикл идёт заново.

Goldie закрывает этот цикл целиком. Это генератор скриншотов и видеопревью для приложений iOS, который написан так, чтобы им управлял кодинг-агент, но работает и руками. Исходный код открыт, лицензия MIT, проект спонсирует Software Mansion, авторы Argent.

Что делает Goldie

Работа разбита на четыре шага:

1) Argent воспроизводит записанные сценарии на симуляторе, goldie снимает кадры
2) кадры оформляются: рамка устройства, фон, заголовок и подзаголовок
3) клипы склеиваются в видеопревью
4) результат сверяется с правилами загрузки Apple

Goldie не привязан к фреймворку. Он ведёт приложение через симулятор, поэтому SwiftUI, UIKit, Flutter, React Native и Kotlin Multiplatform для него одинаковы. Он не знает, на чём написан экран, он видит его так же, как видит пользователь.

Результат складывается в out/: скриншоты 1320 x 2868 (диагональ 6.9 дюйма) и превью 886 x 1920 в H.264, отдельно на каждую локаль. Длительность превью Apple требует от 15 до 30 секунд, goldie за этим следит сам.

Argent, откуда берётся картинка

В новостях про goldie встречается формулировка "протокол Argent", и из-за неё инструмент выглядит сложнее, чем есть. Argent, это не протокол, а набор инструментов от Software Mansion, который подключается к вашему агенту как сервер MCP (протокол здесь как раз MCP). После подключения агент получает руки: тапы, свайпы, ввод текста, жесты, аппаратные кнопки. Кроме симуляторов iOS Argent работает с эмуляторами и живыми устройствами Android, с приставками (Apple TV, Android TV, Fire TV) и с приложениями на Electron и Chromium.

Goldie берёт у Argent один механизм, запись и воспроизведение сценариев. Сценарий, это записанный маршрут по приложению: как список поворотов, который вы один раз надиктовали курьеру, а дальше он проезжает его сам и одинаково каждый раз. Сценарии лежат в .argent/flows в репозитории приложения и называются так же, как их называет argent flow run <name>. Записали сценарий для отладки, он же пойдёт в скриншоты, переделывать ничего не нужно.

Установка

Нужны macOS с симуляторами iOS, Node 20 или новее и ffmpeg.

npm i -g goldie

Навык для агента ставится отдельно:

npx skills add kacperkapusciak/goldie

/plugin marketplace add kacperkapusciak/goldie
/plugin install goldie@goldie

Навык оформлен в формате skills, поэтому его подхватит любой агент, который этот формат понимает. Сам Argent ставится своим мастером, из корня проекта:

npx @swmansion/argent@latest init

Мастер ставит пакет глобально, определяет ваш редактор, регистрирует сервер MCP и раскладывает навыки и правила по рабочей папке проекта.

Работа через агента

Из репозитория приложения запрос выглядит так:

create App Store screenshots using goldie

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

Отличие от обычного скриншотера здесь в том, что агенту не нужно описывать маршрут по экранам словами. Он проходит приложение через Argent и оттуда узнаёт, что в нём вообще можно показать.

Работа руками

Файл goldie.config.example.ts копируется в goldie.config.ts, в нём указываются путь к сборке и сцены:

const config: GoldieConfig = {
  appRoot: APP_ROOT,
  appPath: `${process.env.HOME}/Library/Developer/Xcode/DerivedData/<App>-<hash>/Build/Products/Release-iphonesimulator/<App>.app`,
  bundleId: "com.example.app",

  devices: ["iphone-6.9"],
  locales: ["en-US"],
  appearance: "light",
  frame: { variant: "17-pro-blue" },

  scenes: [
    {
      kind: "screenshot",
      id: "home",
      flow: "store-01-home",
      headline: { "en-US": "Benefit-led headline" },
      subhead: { "en-US": "One short sentence expanding the headline." },
    },
  ],
};

Одна сцена, это один скриншот на странице магазина, и порядок сцен в конфиге совпадает с порядком на странице. Сценарий доводит приложение до нужного экрана, кадр снимается после его последнего шага.

Отдельная сцена с kind: "preview" собирает видео. У неё есть сегменты, каждый со своим сценарием и своим клипом, клипы склеиваются в том порядке, в каком записаны. Оформления там нет намеренно: Apple требует обычную запись экрана, без рамки и без подписей.

Команды:

goldie doctor     # проверка инструментов, симуляторов и сценариев
goldie all        # снять, оформить, отрендерить превью и проверить
goldie studio     # предпросмотр и правки в браузере

Начинать стоит с doctor. Он проверяет окружение до того, как вы потратите время на полный прогон.

Studio и оформление

Studio, это браузерный редактор поверх тех же файлов. В нём переключаются фон, шаблон, рамка, шрифты и текст на каждой плитке, а результат сохраняется в goldie.design.json, поэтому CLI потом отрисует ровно то же самое. Настройки, которые задаются и в конфиге:

1) frame: 17-pro-blue, 17-pro-silver, 17-pro-orange или своя картинка рамки, а theme.screenOnly: true убирает рамку совсем
2) theme.template: editorial, showcase, magazine, storyboard, dynamic или своя последовательность из раскладок classic, copy-below, hero, offset, tilt, tilt-right, duo, duo-tilt, panorama, panorama-duo, minimal
3) theme.fontFamily: стек шрифтов CSS, в комплекте идут Merriweather, DM Mono, Lato, DM Sans и Montserrat
4) decorations: значки и картинки слоем за устройством

В блоке store указываются имя приложения, подзаголовок, разработчик, категория, рейтинг и описание. Это нужно, чтобы studio показала страницу магазина целиком и вы увидели плитки рядом с текстом, а не по отдельности. Рейтинг там косметический и живёт только в предпросмотре.

Что учесть до установки

Как всегда есть "но", и здесь их несколько:

1) только iOS и только macOS. Google Play не поддерживается, симуляторы iOS запускаются на маке
2) собирать нужно Release. Сборка Debug рисует поверх экрана баннеры LogBox, и они попадут в кадры
3) сценарии ломаются, когда меняется приложение. Это плата за воспроизводимость: маршрут записан по конкретным экранам, поменяли экран, маршрут не проходит. Чинит агент по просьбе, либо вы перезаписываете сценарий через Argent
4) сверка идёт с правилами загрузки, то есть с размерами и длительностью. Что макет пройдёт ревью Apple по содержанию, инструмент не обещает
5) лицензии у goldie и Argent разные. Goldie под MIT. У Argent модель смешанная: код под Apache 2.0, а бинарники (simulator-server, ax-service и библиотеки в native-devtools-ios) принадлежат Software Mansion, декомпилировать и распространять их нельзя. Плюс у Argent есть телеметрия, условия описаны в файле Telemetry.md. Для рабочего проекта это стоит прочитать до установки, а не после

Кому пригодится

Выигрыш тем заметнее, чем чаще вы выкладываете обновления и чем больше у вас локалей. Один релиз в год можно пережить и руками, а пересобирать восемь плиток на четырёх языках каждые две недели, это уже работа, которую хочется отдать.

Второй случай, это ранняя стадия продукта, когда экраны меняются каждую неделю. Рисовать макеты в графическом редакторе там бессмысленно, они устаревают раньше, чем вы их доделаете. Скриншоты из живого приложения всегда показывают текущую версию.

Goldie, это инструмент, а не замена продуктовому решению. Он снимет и оформит то, что вы ему укажете, а какой экран показать первым и какой заголовок на нём написать, решаете вы. Продаёт приложение как раз этот выбор, рамка телефона ему только помогает.

Ближайший шаг, если хотите проверить на своём проекте: поставьте Argent, запишите один сценарий до главного экрана и запустите goldie doctor. Он покажет, чего не хватает в окружении, ещё до первого прогона.