Практичне застосування Claude Design і GPT Image 2 на межі

У попередній статті йшлося про те, як за один вечір без знання мов програмування можна створити власний Android-застосунок. Це демонструє вражаючі можливості штучного інтелекту станом на весну 2026 року. Наступним кроком було б теоретичне розкриття понять агентів, MCP, інструментів (tools), навичок (skills) і формування робочого процесу для користувача, знайомого з ChatGPT.

Проте теорію відкладаємо на майбутнє, адже в останні тижні з’явилися два нових інструменти, які краще побачити у роботі, ніж описувати суто теоретично — це Claude Design від Anthropic і GPT Image 2 від OpenAI. Їх вихід дає чудову можливість продемонструвати реальне застосування ШІ, адже одного промпта або однієї моделі для якісного результату тепер недостатньо.

Перед тим, як поглиблюватися в тему, важливо зазначити: майже всі матеріали серії — окрім тих, що стосуються генерації зображень — фокусуються на мовних моделях (LLM). Саме з ними взаємодіють такі системи, як ChatGPT, Claude чи Gemini. Тут слово «language» (мова) є ключовим: моделі треновані, щоб працювати з різними мовами — як людськими, так і мовами програмування. Через це чатботи стали найбільш очевидною формою їхніх застосувань.

За останні три роки ми спостерігали розширення функціоналу: «Claude навчився відкривати Google Drive», «Gemini почав шукати в інтернеті», «ChatGPT навчився малювати». Проте генерація зображень — це окремий випадок, який побудований на принципах «дифузії». Схема, за якою LLM викликає дифузійну модель і віддає користувачу чатбота вже готове зображення, відображає взаємодію різних ШІ-систем без необхідності втручання людини.

Змінами 2026 року стало широке впровадження різноманітних інструментів у сучасних моделеї̆ ШІ, що дозволяють виконувати конкретні завдання замість поодиноких унікальних функцій, таких як малювання у ChatGPT.

Стан справ до квітня 2026 року

Щоб розглянути зміни у роботі ШІ з візуальним контентом, варто згадати початковий стан справ.

Протягом трьох років на масовому ринку генерація зображень здійснювалася за однією схемою:

• Користувач вводив текстовий промпт.
• Дифузійна модель робила єдину спробу й надавала одне або декілька зображень.
• Якщо результат не задовольняв, доводилося перегенерувати з нуля, сподіваючись, що випадковість прибере недоліки.

Втілення тексту в зображення майже завжди було проблемним: літери рожалися з помилками, дзеркальні символи, пропуски, орфографічні неточності. Ця ситуація пов’язана з тим, що дифузійна модель не керується мовою, як LLM, і розглядає літери та слова лише як візуальні елементи — пікселі. Через це, якщо в завданні були конкретні вимоги, наприклад, «певна цифра чи логотип у конкретному місці», модель часто ігнорувала або спотворювала їх.

Подібним чином працювали такі популярні сервіси, як DALL-E 3 від OpenAI, Midjourney, Stable Diffusion та Imagen від Google. Відомі проблеми, наприклад, «шість пальців на руках», зникали, проте загальна якість і точність залишалися невисокими, через що результати годилися здебільшого для концептів або арт-розробок, але не для професійної роботи, де потрібна точність.

У сфері дизайну інтерфейсів ситуація була дещо кращою, але не набагато простішою. Якщо користувач хотів отримати макет застосунку чи веб-сторінки і не вмів малювати, чатботи допомагали дуже обмежено. Так, вже можна було попросити Claude чи ChatGPT створити React-компонент, але це відбувалося без можливості одночасно бачити кілька варіантів, редагувати окремі елементи чи залишати коментарі місцями. Цей функціонал був доступний лише комплексним розробникам. Розрив між «ідея в голові» і «показати її іншій людині» залишався відкритим через потребу у навичці малювання.

Без спеціальних інструкцій створені інтерфейси ШІ виглядали часто як AI slop — недосконалі, впізнавані за помилками не лише експертами, а й широким колом користувачів.

Claude Design

Claude Design від Anthropic Labs з’явився в середині квітня 2026 року і спричинив падіння акцій Figma на 7%. Anthropic подає цей сервіс як платформу для спільної роботи з Claude над візуальними матеріалами — дизайнами, прототипами, слайдами, маркетинговими лендінгами.

Інструмент доступний підписникам Claude Pro, Max, Team і Enterprise. Недавно представлений Google Stitch поки що є радше технологічним демо, а не повноцінним робочим рішенням.

Головна відмінність Claude Design від традиційних дизайнерських систем полягає в тому, що він не генерує піксельні зображення макетів, а створює живий код у форматах HTML, CSS, React. Це випливає із суті великих мовних моделей, які натреновані кодувати на відкритих веб-ресурсах більш охоче, ніж працювати з файлами Figma.

Переваги такого підходу:

1. Інтерактивний прототип одночасно відкривається в браузері для тестування.
2. Прямий перехід до цільового проєкту, що скорочує шлях від ескізу до релізу.
3. Автоматична генерація «хендофф-бандла» — пакету даних з дизайном, який можна передати в Claude Code, Codex або розробникам.
4. Можливість експорту у Canva, PDF, PPTX та HTML.
5. Автоматичне використання кольорів, типографіки та компонентів, створених у дизайн-системі під час налаштування.
6. Гнучкі параметри старту роботи: з текстового промпта, зображення, документів (docx, pptx, xlsx) або посилання на існуючий сайт/додаток.

Взаємодія здійснюється через вікно чату та додаткові засоби:

• коментарі на конкретних елементах;
• прямі правки тексту;
• «повзунки» для тонкого налаштування, які генерує сам Claude.

Anthropic також випустила плагін Design для Claude Cowork — набір із 7 скілів і 9 конекторів. Він дозволяє швидко виконувати невеликі завдання без запуску повноцінного застосунку Claude Design.

GPT Image 2

GPT Image 2 від OpenAI з’явився 21 квітня 2026 року, всього за кілька днів після Claude Design. Це не випадковість, хоча і завдання інструментів різняться.

OpenAI називає базову модель GPT Image 2, а її впровадження в чатботі — ChatGPT Images 2.0.

Ключові новації GPT Image 2:

1. Thinking mode (доступний платним підписникам) — модель перед створенням зображення проводить від 10 до 30 секунд на планування композиції, типографіки, розстановки об’єктів та промптових обмежень. Замість того щоб «усереднювати» складний промпт в одну ймовірність, вона розкладає завдання на окремі компоненти й робить ретельний план.

2. Пошук в інтернеті на льоту — у режимах thinking або Pro модель може актуалізувати свої знання, шукаючи свіжі дані про ціни, дати, логотипи, результати тощо. Це усуває проблему обмеженості знань у навчальних даних із датою «грудень 2025».

3. Самоперевірка результату — модель аналізує створене зображення, щоб виявити й виправити типові помилки, наприклад, друкарські помилки у тексті.

Значення цих поліпшень:

• Текст у зображеннях тепер читабельний, охоплює латиницю, китайську, японську, корейську, гінді та бенгальську.
• Композиція враховує обмеження в орієнтуванні, співвідношенні сторін, роздільній здатності.
• Можливий контекстно-залежний багатоходовий редагувальний процес, де замінюють окремі елементи без перегенерації всього зображення.
• Цей процес нагадує розмову з дизайнером, здатним зрозуміти задачу на доопрацювання — хоча GPT Image 2 іноді потребує додаткових спроб.

Вдосконалення інтерфейсу існуючого застосунку за допомогою Claude Design

Для експерименту було взято бюджетний трекер, створений у Claude Code в попередньому матеріалі. Інтерфейс, створений за один вечір, був функціональним, але швидше прототипом, ніж професійним продуктом. Завдання полягало у демонстрації концепції, а не естетичному доведенні.

Для швидкого вдосконалення обрали плагін Design у Claude Cowork, що дозволив працювати без переходу до окремого додатку.

Послідовність роботи плагіна:

1. За 15 хвилин скіл вивчав код застосунку.
2. Згенерував ревʼю UX (користувацький досвід) і UI (візуальна складова) з точними помітками проблем.
3. Підготував SVG-графіку в єдиному стилі.
4. Створив хендофф та передав інструкції у Claude Code.
5. Claude Code відредагував інтерфейс, покращив UX і додав кілька дрібних функцій.

В результаті інтерфейс став більш узгодженим, ніби над ним працював дизайнер. Однак тексти від ШІ потребують додаткової уваги.

Різниця між плагіном у Cowork та повноцінним Claude Design сущева: плагін — швидке рішення для дрібних завдань, тоді як основний продукт пропонує простір для управління кількома паралельними варіантами дизайну, гнучкого редагування та зручного експорту. Для дрібних проєктів перший варіант цілком достатній, але великі проєкти потребують повноцінної платформи.

Використання Claude Design для роботи з великою базою даних

Інший кейс — робота з базою автомобілів, зареєстрованих в Україні у 2005 році. Оригінал даних був створений у застарілій базі Cronos, яку важко запустити на сучасних ПК. Розроблено портативний застосунок під Windows 10/11 із новою SQL-базою.

Обмеження:

• Застосунок налаштований для однієї людини, яка визначає вимоги.
• Зовнішній вигляд залишався любительським через відсутність навичок у дизайні.

Рішення — залучити Claude Design.

Процес:

1. Зібрали скріншоти інтерфейсу.
2. Проведено опитування щодо цільової платформи, локалізації, дизайнерських уподобань, варіантів теми, збереження деталей.

3. Claude Design створив три паралельні варіанти інтерфейсу з повним набором екранів, включно з мобільною версією:

   • Перший — консервативний з мінімальними візуальними змінами.
   • Другий — сучасний дизайн з нейтральними сірими, акцентом на червоний, складальними панелями фільтрів, боковою панеллю.
   • Третій — «гаражний» стиль з тематикою авто, темним оформленням та номерними знаками як графікою.

4. Обрали другий, з двома уточненнями:

   • Збереження точного написання назви «1888.BAZA2005».
   • Уміщення усієї інформації на одному екрані без прокрутки.

5. Змінено панель деталей, перероблено контент у двоколонкову сітку, додано логіку згортання панелі фільтрів при відкритті інформації.

6. Claude Design скомпонував «хендофф» — комплексний пакет із документацією, промптом для Codex, повною специфікацією дизайну, скріншотами та React-компонентами у вигляді референсів.

7. Codex відповів пропозицією архітектури для веб-застосунку, оцінив серверні ресурси, підняв питання масштабованості пошуку, авторизації і конфіденційності даних.

8. Зваживши на складність веб-версії, прийнято рішення залишити Windows-застосунок.

9. Codex успішно реалізував оновлення дизайну у наявному коді.

Таким чином, сучасні ШІ-моделі не лише програмують, але й підказують розмір та складність задач розробки. Результат Claude Design є переносимим між платформами і зберігає ідеї дизайну незалежно від платформи.

Важливо, що Claude Design зменшує розрив між ідеєю в голові користувача і її візуалізацією для інших.

Створення логотипу за допомогою GPT Image 2

Той самий проєкт потребував логотипу.

Результати попереднього генератора DALL-E 3:

• Кілька неуспішних ітерацій через те, що кожна зміна приводила до переробки всієї композиції.
• Часті орфографічні помилки у назві.
• Піксельний малюнок зі стандартним артефактами, дивним шрифтом, галюцинаціями у деталях.

Результати GPT Image 2:

• Один промпт з детальним описом «логотип для веб-застосунку 1888.BAZA2005, із картою України, символом бази даних і червоним Foxbody Mustang, у сучасному стилі».
• Відразу отримано чотири повноцінні варіанти різних стилів із коректною назвою і впізнаваними елементами.
• Відсутність потреби у багаторазових корекціях орфографії.

Такий результат зумовлений режимом thinking та продуманою постановкою завдання.

Claude Design у цьому випадку повністю не впорався, оскільки його призначення — генерація коду інтерфейсу, а логотип — піксельний об’єкт.

Інфографіка високої якості

Для подальшого прикладу створено інфографіку «Total Guide to 8HP Swap» по заміні коробки передач Ford Mustang GT.

Підходи:

• Простий запит до базової дифузійної моделі: отримано відомі проблеми — галюцинації, помилки в текстах, неточності в фактах, погане візуальне оформлення.
• Запит з активованим веб-пошуком у GPT Image 2: значне покращення через актуальні факти, але все ще є загальні неточності.
• Ідея — базувати інфографіку на конкретному відео з YouTube як джерелі істини.

Використання NotebookLM:

• Продукт Google з ядром Gemini для роботи з мультимодальним контентом і глибоким пошуком.
• Завантажено відеогайд із транскрипцією тексту.
• Виконано синтез інформації як текстової статті.
• Спроба створити інфографіку — концептуальна, але з низькою візуальною якістю та помилками.

Формування робочого процесу з розподілом ролей:

1. Фактична база — створення точного контенту (тексти з розшифрування YouTube).
2. Планування макету — деталі для дизайнера, довжина текстів для копірайтера.
3. Написання фінальних текстів.
4. Збір всього в інфографіку.
5. Роль редактора — контроль якості й відповідності завданню.

Тексти для інфографіки (Claude як копірайтер)

Готовий бриф передано Claude.

• Перший результат міг підходити для статті, але текст був надто довгим для інфографіки.
• За проханням автора Claude переписав текст у формат фрагментів з підзаголовками, додав короткі зачіпки («хук»-фрази), підсвітлив ключові цифри та попередження.
• Такий підхід є типовим: модель дає якісний загальний текст, але експертиза щодо призначення і структури була відсутня і має залишатися за людиною.
• Виявлено типові кліше і маркери текстів, написаних ШІ (зайві тире, метафори, кліше, emoji, формат «Label: content»), які зазвичай дратують читачів.

Ілюстрації від GPT Image 2

Другий бриф — з ілюстраціями від NotebookLM та текстами від Claude.

• Перший варіант — приблизно 80% готовності: потужний стиль, темний фон, гарна типографіка.
• Проте були проблеми: надмірно довгі підписи, невірна демонстрація структур (наприклад, показувалися всі трансмісії, а не ключові відмінності), дивні рендери елементів, зайві написи.

Аналіз і удосконалення (GPT-5.5 як аналітик)

Замість самостійного скорочення текстів редактором, було проведено аналіз усієї ситуації за допомогою GPT-5.5 — нової thinking-моделі OpenAI:

• Отримані точні вказівки по довжині тексту, структурі (хук + 3-4 твердження).
• Визначено, які факти слід зберегти, а які можна опустити.
• Ці рекомендації було повернено Claude, який переписав підписи відповідно.
• Оновлені тексти разом з невеликими правками від людини передалися назад у GPT Image 2 для повторної генерації з потрібними замінами.

Весь робочий цикл зайняв близько півгодини — це суттєво швидше, ніж ручна робота (яка б виправдовувала декілька робочих днів у Photoshop).

Важливо, що у процесі людина фактично виконувала роль «інтерфейсу» між моделями — копіювала дані, передавала запити й отримувала результати.

Автоматизація таких ланцюжків, де одна модель самостійно викликає іншу, є перспективним напрямом подальшої роботи.

Основні спостереження

• Одного промпта та однієї моделі недостатньо для якісного виконання складних задач.
• Робочий процес із ШІ набуває характеру оркестрування різних моделей, де кожна відповідає за свою спеціалізацію.
• Вміння користувача полягає в правильному делегуванні завдань і визначенні, що повинно залишатися за людиною.
• Чітко описане завдання і добре визначений вхід дають кращий результат, ніж загальний запит.
• Практичний досвід показує, що власна експертиза і оцінка залишаються ключовими для якісного результату: потрібно знати межі можливостей ШІ, відбирати доопрацювання.
• Відповідальність за точність і якість контенту лишається на людині, яка перевіряє дані, уникає публікації неперевіреної інформації й уважно ставиться до деталей.
• У майбутніх матеріалах буде розглянуто теоретичні аспекти агентів, їх інтеграції у робочі процеси за допомогою MCP-серверів і послідовного обʼєднання інструментів у складні ланцюжки автоматизації.

Таким чином, розвиток інструментів, як Claude Design і GPT Image 2, і поява методик системної роботи з кількома моделями відкриває нову еру застосування ШІ, де професійний підхід і поєднання досвіду з інноваціями дозволяють досягати помітних результатів.