Від брифу до прoтoтипу за 20 хвилин: що таке Claude Design і як з ним працювати
Якщо ти дизайнер або власник бізнесу, то ти явно вже мав чути як мінімум про Claude і як максимум про Claude Design, який нещодавно релізнули Anthropic Labs, що скоріш за все вже глобально змінить роботу дизайн команд.
90% дизайну тепер можна делегувати АІ, залишилось 10% — це стратегічне керування, ідеї, креатив та фінальні правки. Якщо ви досі починаєте проєкт із ТЗ, брифу та трьох тижнів узгоджень, то ви конкуруєте з командами, які за той самий час вже показали клієнту готовий прототип.
Claude Design — це інструмент Anthropic Labs, середовище, де бренд перетворюється на дизайн-систему, а потім на базі цього здатен генерувати готові матеріали: лендінги, презентації або інтерфейси додатку с в одній сесії.
Я Олеся, дизайнерка у Byte&Kite, вже протестила Claude Design та ділюсь тим, що буде корисним іншим дизайнерам та бізнесу.
Для кого це і який у вас кейс
Claude Design підходить не всім і не для всього. Розберемось, у якому кейсі він дає найбільше результату.
ТЗ як формат помирає, зараз працюють прототипи. «Я не знаю що хочу» — це нормально, якщо через 20 хвилин ти вже щось показуєш і кажеш «ось схоже на це, але змінімо колір і структуру».
Що таке Claude Design
Технічно, це середовище з чатом ліворуч і canvas праворуч, цей лейаут першим впадає в очі, бо він відрізняється від інших інтерфейсів Claude, де чат — це основний продукт, а все інше другорядне.
На перший погляд, це спрощення. Але саме через це фокус зміщується з того, як написати промпт на те, як це краще відредагувати чи підкрутити в дизайні.
Найважливіше це створити Design System, фактично AI-бренд-бук твоєї компанії. Ви один раз описуєте бренд і далі Claude застосовує ці правила, коли тобі потрібно буде створити лендінг, презентацію, креатив і тд., але детальніше про це згодом.
Як починати роботу: чотири вбудовані режими
Щойно відкриваєш новий проєкт, потрібно обирати стартовий режим.
Ось, які доступні:
Prototype — основний режим. Всередині є вилка:
- Wireframe — грубі скетчі, щоб перевірити чи логіка взагалі має сенс, до того як витрачати час на деталі
- High Fidelity — відполіровані макети з бренд-асетами
Той самий промпт у цих двох режимах дає кардинально різний результат.
Slide Deck — для презентацій. Є тогл «Use speaker notes»: деталі йдуть у нотатки спікера, слайди залишаються чистими.
From Template — зберігаєш будь-який вдалий проєкт як шаблон і більше не будуєш структуру з нуля. Особливо корисно агенціям.
Other — порожній canvas без структури. Для всього що не вписується в категорії вище: банер, інфографіка, email-шаблон, разовий матеріал або просто експеримент. Ти сам задаєш формат з першого повідомлення.
Як створити Design System: три кроки
Крок 1 — Описуєш бренд
Перше, що зустрічає на новій сторінці — форма Set up your design system. Claude хоче контекст, причому такий, як зазвичай формуємо для дизайнера: назву, коротке ТЗ, якісь правила.
Шість способів дати Claude більше контексту:
- ZIP зі шрифтами — архів з брендовими файлами
- Attach codebase — перетягнути папку з фронтендом або дизайн-системою
- Figma-файл — зберегти .fig локально і перетягнути в чат
- GitHub репозиторій — Claude читає компоненти і стилі, нові дизайни автоматично підхоплюють патерни
- Web Capture — даєш посилання на сайт-референс, Claude підхоплює його стиль
- Інший проєкт Claude Design — перевикористовуєш попередню роботу без повторного налаштування
Після заповнення Claude не починає генерувати одразу. Він спочатку показав, як розуміє задачу, склав сам собі список з семи кроків — від базових токенів кольору і типографіки до фінального README з іконографією. Відчуття таке, наче працюєш з підрядником, який перед стартом переказує тобі своїми словами, що саме збирається робити. І ти просто киваєш.
Крок 2 — Claude генерує, ви спостерігаєте
Canvas показує які файли створюються, які токени виставляються та інші деталі прогресу. Якщо шрифти не знайшлись, сам відвантажує з CDN і продовжує. Якщо щось намалював, то відкриває і дивиться, чи виглядає правильно.
І кінцевий етап, ми отримуємо дизайн-систему з картками, де кожна картка має дві кнопки: «Looks good» і «Needs work…» з полем для коментаря (як код-рев'ю, тільки для дизайну).
Крок 3 — Ітеруєш через чат
Перша генерація — це ще не результат. Найцікавіше починається, коли ти починаєш давати правки та апрувати результат.
Можна і треба додатково завантажувати матеріали та коментувати деталі, в моєму випадку згенерувалось нерелевантне лого, я просто додала потрібне, і так з будь-чим паттерни, кольори, шрифти і тд.
Але найцікавіший момент, після кількох ітерацій Claude сам, без мого запиту, зупинився і написав у чат приблизно таке:
«Слухай, щоб я міг довести систему до ладу, надішли мені:
1) справжні файли шрифтів;
2) ілюстрації з твого бренд-буку, бо поточні патерни це моя здогадка;
3) підтвердіть, чи робимо Social Media шаблони наступним кроком».
Буквально як колега, який веде свій список відкритих питань і нагадує про них.
Що можна зробити, маючи дизайн-систему в кишені
Коли дизайн-система опублікована, зʼявляється кнопка New design using this system. Claude пропонує обрати Skill, тип задачі, який ти хочеш реалізувати. Розберемо кожний:
Interactive prototype
Ти хочеш показати клієнту або інвестору як буде виглядати і працювати продукт, але розробки ще немає. Замість PDF з картинками маємо клікабельний прототип, де навігація працює. Клієнт тикає кнопки, переходить між екранами, розуміє логіку.
Кому: дизайнерам на захист концепції, фаундерам на пітчі, продакт-менеджерам перед початком розробки
Make a deck
Тобі треба зробити презентацію і щоб вона виглядала в стилі бренду, а не як шаблон в Google Slides. Claude бере твій контент і верстає слайди з правильними шрифтами, кольорами і відступами одразу.
Кому: маркетингу для клієнтських презентацій, фаундерам для investor deck, будь-кому хто ненавидить робити слайди вручну
Make tweakable
Ти здав дизайн, але клієнт каже «а можна подивитися як буде з темним фоном?». Замість нової ітерації — дизайн зі вбудованими слайдерами. Клієнт сам крутить параметри і бачить варіанти в реальному часі (без тебе).
Кому: дизайн-агенціям щоб скоротити кількість правок, менеджерам для само-обслуговування по дрібних варіаціях
Wireframe
Ідея є, але ти ще не певен у структурі. Не хочеш одразу робити красиво, а хочеш швидко перевірити чи взагалі ця логіка має сенс. Wireframe дає грубий скетч без кольорів і деталей.
Кому: всім на етапі експериментів та ідей
Frontend design
У тебе немає готової дизайн-системи, або задача виходить за її межі. Claude сам визначає візуальний напрям під твій контент і аудиторію.
Кому: стартапам без бренду, коли треба щось зробити вже сьогодні, або для одноразових матеріалів які не вписуються в основний бренд
Animated video
Тобі потрібне відео для соцмереж, презентації або сайту з анімацією, переходами, типографікою у стилі бренду. Поки без прямого експорту в MP4, але screen recording вирішує.
Кому: маркетингу для контенту в соцмережах, для анімованих банерів, вступних відео для презентацій
Чесно про обмеження
Продукт — research preview. Це означає:
- Можливі баги, особливо при великих дизайн-системах
- Анімовані відео поки без експорту в MP4, але завжди є screen recording
- Не можна просто завантажити брендбук у PDF, треба описувати словами або через Figma / codebase
- Ліміти токенів при масштабних проєктах
Лайфхак для останнього: попроси ChatGPT або Claude детально описати твій бренд або референс-сайт і цей текст встав у контекст. Якість генерації суттєво зростає без витрат токенів на обробку файлів.
То чи замінить Claude Design дизайнера?
Зараз багато різних тверджень «Claude just destroyed Figma» і «You don't need a designer anymore». Це, такі собі, заголовки для кліків. Але інструмент справді змінює швидкість роботи.
Головне пам’ятати, що в час коли АІ-шка розвивається так стрімко як ніколи, треба бути готовими інвестувати свій час та гроші у її вивчення та впровадження.
Ми в Byte&Kite оптимізовуємо процеси з допомогою АІ, і не лише в дизайні, а й в інших напрямах роботи бізнесу.