Anthropic запустила Claude Design — веб‑інструмент для проєктування інтерфейсів, вбудований безпосередньо в Claude AI. Розробник мобільних застосунків і автор освітнього контенту Філіп Лакнер протестував його на прикладі власного бренду PL Coding, створюючи дизайн «кабінету» для перегляду преміум‑курсів. На цьому кейсі добре видно, як Claude Design працює з бренд‑активами, як із них формується цілісна дизайн‑система та наскільки гнучко її можна коригувати в діалозі з ШІ.
Вхід через claude.ai/design і філософія «спочатку дизайн‑система»
Claude Design доступний як веб‑дашборд за адресою claude.ai/design. На відміну від багатьох AI‑плагінів до Figma чи кодових асистентів, тут немає відчуття «надбудови» над іншим продуктом: це окремий інтерфейс, але тісно інтегрований із Claude AI. Користувач опиняється не в чаті, а в спеціалізованому середовищі, заточеному під дизайн.
Перший крок, який пропонує інструмент, — не створення окремих екранів чи макетів, а побудова дизайн‑системи бренду. Сервіс одразу запитує базову інформацію про компанію, тип бажаної дизайн‑системи та пропонує завантажити всі наявні активи. Це задає іншу логіку роботи: замість того, щоб «малювати» окремі сторінки, користувач спочатку формує фундамент — типографіку, кольори, відступи, кнопки, стани елементів, — а вже потім на цій основі можуть будуватися будь‑які інтерфейси.
Такий підхід особливо цікавий для розробників, які не люблять або не встигають займатися дизайном, але хочуть отримати послідовний, масштабований візуальний стиль. Замість ручного налаштування десятків параметрів у Figma, Claude Design намагається вивести цю структуру автоматично, спираючись на те, що вже існує в бренду.
Як Claude Design «читає» бренд: від логотипів і шрифтів до слогану
Ключова особливість Claude Design — широта вхідних даних, з якими він уміє працювати. Інструмент дозволяє завантажити логотипи, файли шрифтів, коди кольорів, PDF‑документи з бренд‑гайдами, Figma‑файли, а також посилання на код із GitHub. Можна навіть «підтягнути» дизайн‑систему з попереднього застосунку, щоб адаптувати її під новий продукт.
У кейсі PL Coding були завантажені логотип, шрифти, PDF із бренд‑гайдом і набір кольорів, а також вказано сайт бренду. Після цього Claude Design протягом кількох хвилин аналізує всі ці джерела. Результат — не просто перелік знайдених файлів, а спроба осмислити бренд:
- формується опис бренд‑концептів;
- виділяються основні кольори та їх відтінки;
- визначається типографічна система;
- витягується слоган і ключові пропозиції з сайту;
- виявляються основні продукти, наприклад «premium courses», «community», «mentorship program».
Цікаво, що інструмент не обмежується технічним аналізом файлів. Він порівнює стиль бренду з відомими еталонами на кшталт Nike чи Apple, щоб зрозуміти, наскільки візуальна мова тяжіє до мінімалізму чи, навпаки, до більш експресивних рішень. У випадку PL Coding Claude Design класифікував стиль як мінімалістичний.
Водночас уже на цьому етапі стають помітні й обмеження: якщо в завантажених документах є застарілі дані, інструмент чесно їх підхоплює. Так, у бренд‑гайді PL Coding виявився старий шрифт, який компанія вже не використовує. Claude Design не може самостійно «здогадатися», що це артефакт минулого, тож користувачеві доводиться вручну коригувати ці рішення на наступних кроках.
Автоматично згенерована дизайн‑система: від шрифтів до elevation‑ефектів
Після аналізу активів Claude Design генерує перший драфт повноцінної дизайн‑системи. Вона охоплює ключові технічні параметри, які зазвичай дизайнери збирають вручну:
- типографічні шкали — розміри тексту для різних рівнів заголовків і текстових стилів;
- колірну палітру — основні кольори бренду, їх відтінки, сірі тони для фону й тексту, а також варіації для акцентних елементів;
- шкалу відступів — стандартні значення padding і margin, побудовані на звичних кроках на кшталт 4, 8, 12 пікселів;
- радіуси скруглення — від гострих кутів до більш округлих варіантів;
- стилі elevation і «кілець» — тіні, підсвічування, glow‑ефекти, які задають відчуття глибини та інтерактивності;
- стилі кнопок — первинні, вторинні, «ghost»‑варіанти, їхні стани та візуальні акценти.
У випадку PL Coding Claude Design побудував досить просту, але цілісну палітру: чорний, зелений як основний бренд‑колір, сірі відтінки для вторинного тексту та додаткові кольори для callout‑елементів. Шкала відступів виявилася класичною для сучасних дизайн‑систем, а радіуси скруглення — помірними, без надмірної «картковості».
Особливо помітним став блок elevation і «кілець»: Claude Design запропонував glow‑ефект, який добре вписався в загальний стиль PL Coding. Для бренду, пов’язаного з програмуванням і технічною освітою, такий легкий «неоновий» акцент виглядає доречним, не перетворюючи інтерфейс на агресивний gaming‑UI.
Цей перший драфт не ідеальний, але він дає відчуття, що інструмент справді намагається зібрати системну картину, а не просто підібрати випадкові шрифти й кольори. Далі вступає в гру головна перевага Claude Design — інтерактивне доопрацювання через діалог.
Діалог із ШІ замість ручного піксель‑пушингу: як працює модульний review‑флоу
Claude Design організовує роботу з дизайн‑системою як послідовний перегляд секцій. Кожен блок — типографіка, кольори, відступи, кнопки, картки, статуси, логотипи, іконки — подається окремою «карткою» з можливістю сказати «виглядає добре» або «потребує доопрацювання» і сформулювати правки в текстовому вигляді.
Це не просто чат, де користувач кидає довгі промпти. Інструмент сам структурує процес рев’ю: показує конкретний фрагмент системи, чекає реакції, застосовує зміни й оновлює візуалізацію. Такий модульний флоу нагадує роботу з дизайнером, який приносить сет рішень по черзі, а не одразу весь проєкт.
На прикладі PL Coding добре видно, як це працює на практиці.
Точкова заміна шрифтів: hero, H1, H2 проти CTA
У початковій версії Claude Design використав один і той самий шрифт для заголовків і кнопок із закликом до дії (CTA). Для бренду це виявилося неприйнятним: шрифт, який добре працює в кнопках, виглядав занадто агресивно в заголовках.
Замість того, щоб перебудовувати всю типографіку вручну, користувач просто позначив секцію як таку, що «потребує роботи», і вказав бажану зміну: замінити шрифт для hero, H1 і H2 на Inter, але зберегти поточний шрифт для CTA‑кнопок. Claude Design коректно застосував правку: заголовки стали більш стриманими й читабельними, тоді як кнопки зберегли виразний характер.
Цей епізод показує важливу рису інструменту: він уміє працювати з частковими змінами. Не потрібно переформульовувати всю типографічну систему — достатньо вказати, які саме стилі слід поміняти, і Claude Design не чіпає решту.
Перекласифікація кнопок: коли «primary» і «purchase» плутаються
Інша типова проблема для брендів, які мають і маркетинговий сайт, і внутрішній застосунок, — різні контексти використання кнопок. Claude Design, орієнтуючись на сайт PL Coding, спочатку сприйняв «purchase»‑кнопку як основну (primary), тоді як у застосунку для перегляду курсів головним сценарієм є не купівля, а продовження навчання.
У дизайн‑системі це вилилося в некоректну ієрархію: кнопка, яка на сайті є ключовою для продажів, у застосунку мала би бути вторинною. Через діалог користувач пояснив, що описана як «purchase» кнопка має стати primary, а нинішня primary — secondary, тоді як ghost‑кнопки можна залишити без змін.
Claude Design швидко перебудував класифікацію: у візуалізації стало видно, що «Start learning» отримала статус primary, а більш «важка» кнопка відійшла на другий план. Для UX це критично: надмірна кількість «головних» дій на екрані розмиває фокус користувача.
Картки курсів: від all caps до мініатюр і вирівнювання
Ще один показовий блок — картки курсів. Початковий варіант виглядав «пристойно», але не відповідав ані бренд‑гайду, ані очікуванням щодо UX. Заголовок був набраний шрифтом CTA у верхньому регістрі, що погіршувало читабельність, а візуального представлення курсу не вистачало.
Через модульний review‑флоу користувач сформулював одразу кілька правок:
- замінити заголовок на стандартний headline‑шрифт без all caps;
- додати для кожного курсу 16:9‑мініатюру (thumbnail), щоб картка виглядала більш «живою»;
- зберегти стриманий підхід до CTA всередині списку, використовуючи невеликий стрілковий індикатор замість великих кнопок, аби не перевантажувати екран.
Claude Design оновив картки, додавши мініатюру та змінивши типографіку. На одному з кроків інструмент навіть згенерував у мініатюрі кодовий сніпет, що виглядало дивно в контексті курсового каталогу. Це також було виправлено через текстову інструкцію: видалити кодовий блок і залишити мініатюру як замінний графічний елемент.
Окремо довелося налаштувати вирівнювання: текст і стрілка переходу до курсу мали бути нижньо вирівняні відносно роздільної лінії, а відступи — розподілені так, щоб інтерфейс виглядав акуратним і послідовним. Claude Design коректно застосував і ці правки, показавши, що здатен працювати не лише з «великими» параметрами, а й із дрібними деталями макета.
Статуси, теги й контекст: де закінчується дизайн‑система
У згенерованій системі з’явилися й елементи, які не зовсім відповідали домену застосунку: статуси на кшталт «offline» чи «updating» для курсів, теги «brand new», «best seller» і CTA «buy». Для внутрішнього «кабінету» користувача це виглядало недоречним, але з точки зору дизайн‑системи такі стани й теги є радше демонстраційними.
Цей момент підкреслює межу відповідальності Claude Design: на етапі побудови дизайн‑системи інструмент не знає точного сценарію використання кожного компонента. Він створює універсальний набір стилізованих елементів, які потім мають бути наповнені релевантним змістом у конкретному продукті. Для дизайнерів і розробників це означає, що навіть із потужним AI‑асистентом контент і логіка застосунку залишаються їхньою зоною відповідальності.
Логотипи й іконки: як Claude Design поводиться з візуальною ідентичністю
Окремий блок у Claude Design присвячений роботі з логотипами. Інструмент генерує макети логотипів для різних фонів: світлого, темного, бренд‑кольору. У випадку PL Coding з’явилися варіанти білого логотипа, довгої версії логотипа та логотипа на зеленому фоні.
Тут знову проявляється як сила, так і обмеження AI‑підходу. З одного боку, Claude Design коректно зрозумів, що бренду потрібен варіант логотипа для темних поверхонь, і запропонував зелений логотип на чорному фоні. З іншого — один із варіантів виявився «вигаданим»: зелений wordmark, якого в реальному бренд‑наборі не існує, та ще й із відтінком, що не відповідає основному зеленому кольору.
Через діалог користувач попросив:
- видалити некоректний зелений wordmark;
- переконатися, що зелений логотип на темному фоні використовує саме primary‑зелений із конкретним кодом;
- залишити білий логотип, який відповідає реальному активу.
Claude Design відреагував на ці правки, продемонструвавши, що здатен не лише генерувати варіанти, а й «відкочувати» невдалі рішення, коли користувач вказує на невідповідність бренд‑гайду.
Ще один показовий блок — іконки. Claude Design згенерував набір кастомних піктограм, які стилістично пасують до бренду: серед них — іконка Git, блискавка, термінал, символи, пов’язані з програмуванням. Хоча таких іконок не було на сайті PL Coding, вони органічно вписалися в загальну естетику. Це демонструє, що інструмент не лише копіює існуючі елементи, а й здатен творчо розширювати візуальну мову бренду в межах заданого стилю.
Чому підхід Claude Design важливий для розробників і команд без штатних дизайнерів
На прикладі PL Coding добре видно, як Claude Design змінює саму динаміку роботи над візуальною частиною продукту. Замість довгих циклів між розробником і дизайнером, експорту макетів, правок у Figma та повторних ітерацій, значна частина роботи переноситься в діалог із ШІ.
Для розробників, які раніше покладалися на Claude Code у зв’язці з Figma MCP, це означає перехід від фрагментарних AI‑підказок до цілісного інструменту. Якщо раніше змінити один текстовий стиль через ШІ було складно — доводилося перегенеровувати цілі фрагменти екрана, — то тепер можна точково коригувати окремі параметри дизайн‑системи: замінити шрифт лише для певних заголовків, перекласифікувати кнопки, підправити відступи чи вирівнювання в конкретному компоненті.
Водночас Claude Design не позбавляє користувача потреби мислити як дизайнер. Інструмент може запропонувати glow‑ефект, але рішення, чи відповідає він духу бренду, залишається за людиною. Він може створити статуси «offline» чи «updating», але саме команда продукту має вирішити, чи доречні такі стани в конкретному сценарії використання.
Головна цінність підходу Anthropic у тому, що він дозволяє швидко отримати «скелет» дизайн‑системи, побудований на реальних бренд‑активах, а потім у діалозі довести його до стану, придатного для масштабування. Для невеликих команд це може стати способом вийти за межі примітивних UI‑шаблонів і наблизитися до рівня продуманих дизайн‑систем, які раніше були доступні переважно великим компаніям із сильними дизайн‑відділами.
Висновок: Claude Design як новий рівень AI‑асистування в дизайні
Claude Design показує, як може виглядати наступне покоління AI‑інструментів для дизайну: не просто генерація окремих екранів, а побудова цілісної дизайн‑системи на основі логотипів, шрифтів, кольорів, бренд‑гайдів, Figma‑файлів і навіть коду з GitHub. Інструмент уміє інтерпретувати бренд, виводити з нього палітру, типографіку, слогани, а потім перетворювати це на структурований набір правил і компонентів.
Модульний review‑флоу й чат‑подібний діалог дозволяють точково коригувати рішення: замінювати шрифти для окремих рівнів заголовків, переназначати ролі кнопок, налаштовувати картки, логотипи й іконки. Усе це робить Claude Design особливо привабливим для розробників і невеликих команд, які хочуть швидко отримати професійно виглядаючу дизайн‑систему, не занурюючись у всі тонкощі Figma.
Водночас інструмент не є «чарівною паличкою»: він чутливий до якості вхідних даних, може підхопити застарілі шрифти чи вигадати неіснуючі варіанти логотипів. Тому роль людини як куратора й критичного редактора залишається ключовою. Саме в цій співпраці — коли ШІ генерує структуру, а людина задає смисл і коригує деталі — Claude Design розкриває свій потенціал як практичний інструмент для створення сучасних, послідовних інтерфейсів.