У новому технічному експерименті розробник і ютубер Tech With Tim показує, як перетворити потужну, але незручну в ручному використанні модель зображень Nano Banana 2 на повністю автоматизований «двигун» візуалів усередині Claude Code. Ключем стає зв’язка з двох навичок (skills): JSON‑промптера для детальних структурованих запитів і кастомного інструмента, що напряму викликає Gemini 3.1 Image API. Результат — багатосторінковий сайт із десятками унікальних картинок, згенерований за кілька хвилин без ручного промптингу.
Від «зайти на сайт і щось написати» до повністю керованого пайплайна
Nano Banana Pro і Nano Banana 2 — сучасні моделі генерації зображень, здатні створювати якісні маркетингові візуали, рендери продуктів та UI‑макети. Проблема в тому, що типове використання зводиться до веб‑інтерфейсу: користувач заходить на сайт, вводить короткий текстовий промпт і отримує результат середньої якості. Для складних задач — наприклад, цілісного дизайну сайту — це незручно і погано масштабується.
У продемонстрованому підході Claude Code стає «диригентом», який:
- Приймає від людини високорівневий запит на кшталт «зроби стильний сайт з чотирма чистими, мінімалістичними зображеннями».
- Перетворює цей запит у детальний JSON‑опис кожного кадру через спеціальний промптер‑skill.
- Передає ці JSON‑специфікації в інший skill, що звертається до Nano Banana 2 через Gemini API та повертає готові зображення.
- Вбудовує отримані картинки безпосередньо в макет сайту.
У результаті користувач працює з одним інтерфейсом — Claude Code — замість того, щоб стрибати між браузером, конструктором сайтів і окремим генератором зображень. Паралельно можна запускати приблизно 20 задач генерації, що дозволяє швидко збирати великі партії візуалів.
Показовий кейс — демо‑сайт, який Тим створив під час запису: він просто дав Claude Code загальний опис бажаного вигляду, а система самостійно спроєктувала лейаут, згенерувала всі зображення через Nano Banana і розмістила їх на сторінці. На все пішли лічені хвилини.
JSON‑промптинг як «мовний протокол» для Nano Banana
Серцем цього підходу є JSON‑промптер — спеціальна навичка Claude Code, яка перетворює звичайні текстові запити на структуровані JSON‑схеми. Замість розмитого «зроби красиву картинку з парфумом» модель отримує формалізований опис сцени з десятками параметрів.
Схема, яку використовує Nano Banana JSON Prompter, орієнтована на маркетингові зображення, UI‑макети, інфографіку та подібні типи візуалів. Вона включає низку полів, що задають композицію та стиль:
- framing — як кадрується сцена, наскільки близько розташований об’єкт, який ракурс;
- lighting — тип освітлення, його інтенсивність, напрямок, м’якість;
- surface — поверхня, на якій розташований об’єкт (скло, дерево, бетон, тканина тощо);
- materials — матеріали основних елементів (метал, пластик, скло, кераміка);
- а також інші властивості, що описують середовище, фон, глибину, текстури.
JSON‑промптер навчає Claude Code використовувати цю схему саме тоді, коли йдеться про маркетингові візуали, UI чи інфографіку, і не застосовувати її до невідповідних задач. Це важливо: модель не просто «вигадує» структуру на ходу, а спирається на чітко описаний протокол.
У практиці це виглядає так: користувач дає короткий опис сцени, наприклад «дівчина сидить на стільці й п’є пиво», а JSON‑skill розгортає його в багатий на деталі JSON. Там уже з’являються опис середнього плану, типу інтер’єру, характеру освітлення, матеріалів меблів, стилю одягу, кольорової палітри. Людина навряд чи стала б вручну прописувати настільки деталізований промпт, але для Claude Code це кілька секунд роботи.
Саме ця структурованість дає Nano Banana 2 змогу стабільніше видавати передбачувані, візуально цілісні результати. Замість того, щоб покладатися на інтерпретацію короткого тексту, модель отримує чітку технічну специфікацію сцени.
Як встановлюється JSON‑prompter у Claude Code
Щоб підключити цей промптер до Claude Code, Тим використовує MCP Market — каталог навичок, які можна додавати до агентів. Обраний ним skill — Nano Banana JSON Prompter — уже містить опис поведінки та JSON‑схеми, тож не потрібно розробляти все з нуля.
Інсталяція відбувається через командний рядок за допомогою утиліти Skillfish. Команда має вигляд:
npx skillfish add <username>/claude-code-nano-banana-skills
Після запуску користувач обирає, куди саме встановити навичку. У продемонстрованій конфігурації вона ставиться глобально, щоб бути доступною всім агентам Claude Code на машині. Далі система пропонує додати skill до всіх виявлених агентів — Тим погоджується, щоб JSON‑промптер був універсально доступний у будь‑якому робочому середовищі Claude.
Після цього в інтерфейсі Claude Code з’являється новий skill, який можна викликати через слеш‑команду. Достатньо обрати «JSON prompting for Nano Banana» і сформулювати завдання природною мовою — далі Claude Code сам використає навичку, щоб побудувати потрібний JSON.
Цей підхід не обмежується готовим skill’ом з MCP Market. За бажанням розробник може створити власну схему, адаптовану під конкретний бренд, стиль або домен, і навчити Claude Code працювати саме з нею. Але навіть базовий промптер уже дає відчутний приріст якості порівняно з ручним промптингом.
Другий елемент ланцюга: кастомний skill для Gemini Image API
JSON‑промптер вирішує лише половину задачі — він формує структурований опис зображення. Щоб перетворити цей опис на реальну картинку, потрібен другий skill, який звертається до Nano Banana 2 через Gemini 3.1 Image API.
Цей кастомний skill обгортає Python‑скрипт, що викликає відповідний endpoint Gemini. Саме через нього Claude Code передає JSON‑промпти й отримує назад згенеровані зображення. Навичка підтримує низку важливих параметрів:
- reference images — можливість передати посилання або файл існуючого зображення, яке слугує відправною точкою для редагування чи стилістичної узгодженості;
- resolution — контроль роздільної здатності вихідного зображення;
- aspect ratio — вибір співвідношення сторін, наприклад 16:9 для відео‑прев’ю або 1:1 для квадратних карток.
Такий набір параметрів дозволяє будувати не лише одноразову генерацію, а й повноцінні пайплайни редизайну. Наприклад, можна взяти існуючий thumbnail, передати його як reference image, а в JSON‑описі змінити тільки логотип або текст, залишивши композицію, фон і стиль незмінними.
Для роботи цього skill’а потрібен API‑ключ Gemini. Його отримують у Google AI Studio, де користувач створює новий ключ, вмикає білінг і, за рекомендацією, встановлює ліміт витрат — наприклад, 10 доларів — щоб уникнути несподіваних рахунків. Оскільки розширена генерація зображень — платна послуга, без налаштованого білінгу Nano Banana 2 через API працювати не буде.
Ключ передається в середовище як змінна GEMINI_API_KEY. Це дозволяє Python‑скрипту звертатися до Gemini без того, щоб явно «світити» секрет у коді або логах. Тим окремо застерігає: вставляти API‑ключ прямо в чат Claude Code небезпечно, оскільки він потрапляє до Anthropic; якщо так і зробити, ключ варто одразу ж відкликати.
Ланцюг із двох навичок: від тексту до сайту з десятками картинок
Справжня сила цієї конфігурації проявляється тоді, коли обидва skills працюють у зв’язці. Claude Code спочатку викликає JSON‑промптер, щоб перетворити загальний опис на детальний JSON, а потім передає цей JSON у Nano Banana‑skill, який звертається до Gemini API.
У демонстрації цей ланцюг використовується для створення повноцінного сайту. Користувач дає Claude Code завдання: зробити «супер стильний» сайт із чотирма різними зображеннями, які мають бути «sleek» і «clean». Далі відбувається кілька кроків, уже без участі людини:
Claude Code розбиває завдання на окремі візуальні блоки сторінки — наприклад, hero‑банер, картки продуктів, секцію з відгуками. Для кожного блоку викликається JSON‑промптер, який формує структурований опис сцени з урахуванням типу зображення, композиції, освітлення, матеріалів і середовища. Потім Claude Code викликає Nano Banana‑skill, передаючи отриманий JSON у Gemini 3.1 Image API. Nano Banana 2 генерує зображення, які повертаються назад у Claude Code. Нарешті, Claude Code інтегрує отримані картинки в HTML/CSS‑макет сайту.
Усе це відбувається в межах одного інтерфейсу, без ручного копіювання промптів у сторонні сервіси. При цьому конфігурація дозволяє запускати близько 20 задач генерації паралельно. Це означає, що система може одночасно готувати десятки варіантів зображень для різних секцій сайту, A/B‑тестів або мовних версій.
Для дизайнерів і розробників це відкриває можливість швидко ітеративно збирати візуальні концепти: змінювати текстовий опис сторінки, дивитися, як Claude Code перебудовує JSON‑специфікації, і отримувати новий набір картинок без ручної роботи в генераторі.
Багатоетапне редагування зображень через reference images
Окремий аспект, який робить цю зв’язку цікавою для практичного використання, — підтримка багатоетапного редагування зображень. Nano Banana‑skill у Claude Code вміє працювати з reference images, тобто брати існуючу картинку як основу й вносити в неї зміни.
У демонстрації це показано на простому, але показовому прикладі: є готовий thumbnail, де потрібно замінити логотип Claude на логотип ChatGPT, не змінюючи решту дизайну. Замість того, щоб генерувати новий thumbnail з нуля, користувач передає оригінальне зображення як reference image, а в JSON‑описі уточнює, що саме має бути змінено.
Claude Code, використовуючи Nano Banana‑skill, відправляє reference image і оновлений JSON у Gemini 3.1 Image API. Nano Banana 2 генерує нову версію, де змінено лише логотип, а композиція, кольори, фон і типографіка залишаються максимально близькими до оригіналу.
Такий підхід дозволяє будувати багатоетапні пайплайни редагування: спочатку створити базовий шаблон, потім у кілька кроків міняти окремі елементи — логотипи, тексти, кольори кнопок — зберігаючи загальний стиль. Для брендів це означає можливість швидко адаптувати візуали під різні кампанії, мови чи платформи, не втрачаючи цілісності айдентики.
Що це означає для робочих процесів із візуальним контентом
Комбінація Claude Code, JSON‑промптингу та Nano Banana 2 через Gemini API показує, як інструменти генерації зображень поступово переходять від «іграшкових» веб‑інтерфейсів до повноцінних автоматизованих конвеєрів.
По‑перше, структурований JSON‑промптинг знімає з людини тягар мікроменеджменту деталей. Замість того, щоб вручну вигадувати довгі промпти, користувач формулює намір, а Claude Code сам розгортає його в технічну специфікацію, оптимізовану під конкретну модель.
По‑друге, кастомні skills дозволяють вбудовувати генерацію зображень безпосередньо в робочі процеси розробки сайтів, маркетингових кампаній чи продуктового дизайну. Замість «зайти на сайт, завантажити картинку, вставити в макет» з’являється єдиний сценарій, де всі кроки виконуються в одному середовищі.
По‑третє, підтримка паралельних задач і reference images робить можливими сценарії, які раніше вимагали б команди дизайнерів: масове створення варіантів банерів, локалізація візуалів під різні ринки, швидкий редизайн елементів без повної переробки макетів.
Усе це не скасовує потреби в людському контролі якості й креативному баченні, але суттєво знижує поріг входу в складні візуальні задачі. Там, де раніше доводилося вручну «крутити» промпти в окремому генераторі, тепер можна описати бажаний результат один раз і дозволити Claude Code керувати Nano Banana 2 як частиною ширшого пайплайна.
Висновок
Зв’язка Claude Code і Nano Banana 2 через Gemini 3.1 Image API демонструє, як інструменти генерації зображень виходять за межі окремих веб‑сервісів і стають керованими компонентами в автоматизованих робочих процесах. Два ключові елементи — JSON‑промптер із чіткою схемою для маркетингових візуалів та кастомний skill для виклику Gemini — перетворюють Nano Banana 2 на «двигун» зображень, яким можна керувати з коду або з інтерфейсу Claude Code.
Можливість за кілька хвилин зібрати багатосторінковий сайт із десятками згенерованих картинок, запускати до 20 задач паралельно й виконувати багатоетапне редагування через reference images показує, що генеративна графіка стає не просто інструментом для окремих експериментів, а повноцінною частиною інженерних і продуктових пайплайнів.