Відкриваєте Claude Design, пишете «зроби лендинг для курсу». Результат: фіолетовий градієнт, шрифт Inter, «Lorem ipsum» у плейсхолдерах. Типовий шаблон з 2018 року. Знайомо.

Проблема не в інструменті. Більшість заходять у Claude Design з логікою редактора пікселів і дивуються, що він поводиться інакше. Claude Design — окремий клас інструмента з іншою логікою роботи, і без цього розуміння перший результат завжди буде середнім.

Як працює Claude Design

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

Різниця в результаті змінює процес. У Figma ви вирішуєте, як виглядає кожен елемент: колір кнопки, відступ між блоками, розмір шрифта. У Claude Design ви описуєте що і навіщо, а Claude сам вирішує як. Достатньо сказати «лендинг для курсу з веброзробки, аудиторія — джуніори 20–28 років, ціль — підштовхнути до заявки», і Claude згенерує структуру, ієрархію, навіть UX-логіку.

Роль людини в процесі створення макету дещо змінилась.

У Figma дизайнер — виконавець. У Claude Design дизайнер стає редактором і директором.

Сильний промпт, дизайн-система та база досвіду стають важливішими за вміння малювати. Через це Claude Design займає свою нішу: швидкий перший варіант, перевірка гіпотези, передача в розробку, масштабування чи A/B тестування блоків.

Окремо: Claude автоматично генерує стани, які зазвичай забувають. Loading, error, empty state — дизайнери пропускають їх через брак часу, тут вони з'являються одразу як побічний ефект «робочого коду». Та й в цілому, зробити красиві та цікаві «проміжні» екрани для свого продукту ще не було так легко.

Як уникнути AI slop

Перший промпт без контексту дає шаблонний результат не випадково. Це distributional convergence — статистична властивість моделі: вона передбачає наступний токен на основі патернів у тренувальних даних. В цих даних домінують безпечні рішення, ті, що працюють універсально. Без напрямку Claude обирає з цього центру з найвищою ймовірністю.

Це і є AI slop. Ознака того, що інструменту не вистачило контексту.

Хороша новина: Claude добре керується, якщо явно називати небажане. «Avoid Inter and Roboto», «use atmospheric backgrounds instead of solid colors» — і результат покращується одразу. Три стратегії, які дають ефект незалежно від типу артефакту:

• Завантажуйте референси та антиреференси — скриншоти конкретних сайтів і дизайн-системи. Зображення Claude аналізує точніше, ніж текстовий опис: він зчитує сітку, типографічний ритм, кольорову логіку.
• Направляйте по одному виміру за раз. Спочатку типографіка, потім колір, потім фон. Усе разом — і Claude переключається в «безпечний середній».
• Назвіть дефолти, яких уникати. «Без stock-фото з людьми за ноутбуком», «жодних фіолетових градієнтів» — конкретні антицілі працюють краще, ніж побажання «зроби сучасно». Сильний промпт містить і референси, і обмеження по вимірах, і явні антицілі.

Як готувати бриф

Сильний промпт для Claude Design починається з PRD (Product requirements document) на 10–15 речень. PRD тут — коротка відповідь на три питання: що будуємо, для кого, чого це не повинно робити.

Останнє питання — антицілі. Це мабуть найнедооцінений інструмент. «Не використовувати корпоративний тон», «не більше одного CTA на екран», «жодного градієнту у hero блоці» — конкретний список того, чого не повинно бути в результаті. Антицілі запобігають хаотичним рішенням ще до того, як вони з'явились. Промпт без антицілей дає Claude свободу заповнити порожнечу. І він заповнює її стандартним.

Сам PRD краще писати у звичайному Claude, без Design. Там немає витрати дорогих Opus-токенів на діалог, Claude поставить уточнювальні питання, виявить прогалини. У Design ви заходите вже з готовим планом.

Усе збирається в промпт із трьох блоків:

[КОНТЕКСТ]     →  що будуємо, для кого, навіщо
[ЗАДАЧА]       →  конкретний артефакт + що людина робить на екрані
[ОБМЕЖЕННЯ]    →  технічні вимоги + антицілі + стиль

Контекст — це міні-PRD: хто аудиторія, яка ціль сторінки, що відбувається до і після. Замість «для українців» — «маркетологи 28–35 років, які хочуть перейти в дані, але бояться, що складно». Без конкретики Claude заповнює прогалини усередненим.

Задача — конкретний артефакт і що людина робить на цьому екрані. Приклад: «4-кроковий онбординг, де студент обирає напрямок і вводить email». Набагато краще, ніж «зроби онбординг».

Обмеження — бібліотеки, кольори, шрифти, поведінка на мобільному, антицілі. Чим конкретніше — тим менше простору для шаблонного результату.

Три блоки, чітка структура — і Claude видає не п'ять хексів, а готову систему з семантичними ролями, яку можна одразу завантажити в дизайн-токени.

Як ітерувати

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

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

Ключова формула: «keep everything as is, change only X». Без цього Claude схильний «покращити» інші речі заодно. Токени їдуться, рішення ламаються — зокрема ті, які ви вже погодили. Типовий цикл правок виглядає так:

Keep the current layout and color system.
Make these specific changes:
1. Hero headline: break into two lines at «для»
2. CTA button: add arrow icon (→) after text, 16px gap
3. Stats section: change layout from horizontal to 2×2 grid on mobile

Do not change: typography scale, colors, spacing system, any other sections.

Якщо результат вже близький до цілі — є панель Tweaks. Слайдери і перемикачі для прямих правок без нового промпту. Колір на 5% темніший, відступ на 4px більший, тінь м'якша. Жодних токенів, миттєвий результат.

Окрема техніка для ранніх етапів — просити кілька дивергентних варіантів замість одного «хорошого». «Зроби три концепції особистого кабінету студента з різною філософією взаємодії: chat-first, dashboard-first, command-bar». Це три різні відповіді на питання, як людина взаємодіє з продуктом. Побачивши їх поруч, легше прийняти рішення або взяти найсильніші частини з кожного.

Референси замінюють абзаци текстового опису. Скриншот сайту, який подобається, плюс «зроби в цьому стилі для нашого курсу [назва]» — часто кращий старт, ніж довгий бриф. Багаторівневі теж: «структура з першого, кольорова схема з другого, типографіка з третього».

Як працювати з обмеженнями

Чотири обмеження Claude Design треба врахувати ще в плануванні, не виявляти посеред сесії.

Токени горять швидко. Opus — найдорожча модель Anthropic. Одна сесія з лендингом плюс кілька ітерацій може з'їсти значну частину тижневого ліміту. Складні задачі — на початок тижня; ітерації через Tweaks і точкові правки — коли треба заощадити.

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

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

Растру немає. Фотографій, ілюстрацій, іміджевих візуалів Claude не генерує. Окремий пласт роботи: Midjourney, Firefly, стоки. Свідоме обмеження ніші.

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

Це переписує рамку «хто дизайнер». PM, маркетолог, будь-хто, хто чітко формулює задачу, тепер доводить гіпотезу до клікабельного прототипу за день. А роль дизайнера зсувається у бік редактора: ставити рамку, ловити дрифт, тримати смак, готувати передачу в розробку.

Якщо ви вмієте сформулювати бізнес-задачу — ви вже вмієте працювати з Claude Design. Решта — справа техніки.

У наступній статті розберемо, де Claude Design справді вартує своїх токенів: дизайн-системи, лендинги, презентації — та де ні.