Лайфхак в разработке 101

TLDR: Claude Code + plugin/skill Nano Banana

Когда вы создаете стартап/мобильное приложение/любой другой сервис, вам нередко нужны какие-то иллюстрации или графика, чтобы визуально украсить ваше “творение”. Мы исповедуем в компании максимально AI-first подход и поэтому не ищем легких путей 😃 Шутка! Наоборот, ищем самые быстрые и менее затратные пути решения вопросов.

При разработке мобильного приложения, а именно в части онбординг экранов, мне потребовались иллюстрации, но дизайнера (иллюстратора) под рукой нет, но есть агент в Claude Code и контекст самого приложения. Агент легко понимает, что у тебя за приложение, какое назначение каждого экрана, какой дизайн-код у приложения. Но увы, рисовать не умеет.

Используя плагин от Anthropic для создания плагинов (доступен в их маркетплейсе плагинов, умеет создавать новые плагины согласно документации от Антропика) в Claude Code просим создать плагин для работы с Google API и OpenRouter API, где есть нужные нам модели Nano Banana. В том числе просим максимально реализовать все возможности работы по API с указанной моделью бананы, а не просто генерацию text2img, но и в том числе и работу с референс изображениями img2img, на базе которых будем создавать новые нам картиночки.

В итоге плагин готов (в добавок попросил Claude Code помочь создать мне свой приватный маркетплейс для плагинов) и установлен из моего маркетплейса в Claude Code.

Просим агента в Claude Code проанализировать контекст экранов приложения, на которых нам нужно заполнить пустоту красивыми иллюстрациями, находим референсы разных иллюстраций (в примере первая картинка это реф), которые нам нравятся и которые по стилю хорошо нам подойдут, скармливаем их агенту, просим сгенерировать в таком же стиле, предварительно согласовав с нами свой замысел т.е. чтобы агент сначала описал нам, что именно на иллюстрации он хочет сгенерировать под нужные экраны и если вам ок, запускаем процесс.

Через 30–40 сек первый набор изображений готов. Если вам сразу ок результат, агент тут же встраивает эти изображения в ресурсы приложения. Build, run и у вас красота. Дофамин зашкаливает.

Сколько бы такое рисовал иллюстратор ну или дизайнер (хотя дизайнер скорее не сможет такое)? Хороший — 2–3 часа, среднечковый вернулся бы через пару дней, а вы от замысла до реализации за 30 мин управлись и 15 центов за каждое изображение (потому что Nano Banana Pro, старая банана обойдется через OpenRouter в 3 цента), а последующие генерации займут у вас пару минут под любые ваши идеи.

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

Какие были нюансы:

– Конечная иллюстрация была без прозрачности фона. Пришлось быстро найти в сети обрезатель фона (на примере, фон вокруг круга был непрозрачный) и добавлять альфа канал в PNG (3 минуты ушло на поиски).

– Генерировал изображения в несколько итераций. После каждой генерации объяснял агенту, что нужно поправить на иллюстрации и он, беря за основу текущий результат, генерировал новый вариант.

– Плагин генерации изображений настроил так, что он умеет обращаться как в Google API, так и в OpenRouter API к указанной модели Nano Banana, прописав ему после установки API ключ.

Плохой художник крадёт, хороший пишет плагины и скиллы для Claude Code и делает красоту!

Я полюбил терминал c Claude Code CLI

У меня не раз уже спрашивали:

– “Ты реально в терминале сидишь, а не через IDE типа vccode?
– “А как же видеть, что он меняет?”
– “А как же глазами просматривать код, а вдруг он что-то не то сделал?”
– “Нет-нет, я сижу в Cursor и тщательно просматриваю каждое изменение.”

Это выбор, и каждый делает его для себя. Когда-то и я работал через Cursor и слово терминал для меня было чем-то страшным, но я заставил себя попробовать Claude Code CLI и понял, что это лучшее “окно” для работы с агентом.

Кто-то боится разучиться писать код вручную, кто-то боится, что агент наделает ерунды, но моё личное мнение, что это надуманная история.

Я часто стал замечать у разных людей, что Claude Code им в ответах выдаёт блок “★ Insight”, где описывается как что-то сделано, или почему им было принято такое решение или какие-то важные мысли, выделенные в этом отдельном блоке.

Оказывается в Claude Code есть слеш-команда output-style, и у меня значение output-style было выставлено в Default, т.е. самый скучный режим. Я упустил существование этой команды и полез разбираться, что это и как оно работает.

Output-style это своего рода переключатель системного промпта Claude Code. Только системный промпт не заменяется, а дополняется новым поведением агента. У этой команды есть 3 варианта: default, explanatory и learning.

На Default стиле сидят все, кто не знает о существовании этой команды. А вот Explanatory режим как раз добавляет те самые инсайты.

Но не менее интересен режим Learning. Судя по всему, он как раз для тех, кто не хочет разучиться писать код руками, хотя это вымирающий навык. В этом режиме агент так же выдает инсайты, но дополнительно оставляет в коде блоки TODO(human), чтобы человек сам дописал нужные куски кода и не разучился это делать или научился писать код, если он только учится в эти непростые для новичков времена.

А еще можно реализовать свой собственный стиль и поведение агента на уровне системного промпта, и дополнить его теми качествами, которые вам нужны.

Про output-style можно почитать тут