Anthropic представила Claude Design — сучасний веб-інструмент для проєктування інтерфейсів, який інтегровано безпосередньо в Claude AI. Філіп Лакнер, розробник мобільних застосунків і автор освітнього контенту, випробував цей інструмент на прикладі власного бренду PL Coding, створюючи дизайн «кабінету» для перегляду преміум-курсів. Цей кейс демонструє, як Claude Design працює з брендовими активами, формує цілісну дизайн-систему та наскільки гнучко її можна адаптувати в процесі взаємодії з штучним інтелектом.
Вхід у Claude Design здійснюється через веб-дашборд за адресою claude.ai/design. На відміну від більшості AI-плагінів для Figma або кодових помічників, тут не відчувається «надбудови» над іншим продуктом: це самостійний інтерфейс, але тісно пов’язаний з Claude AI. Користувач перебуває не у чаті, а в спеціалізованому середовищі, пристосованому для дизайну.
Першою дією, яку пропонує інструмент, є не створення окремих екранів чи макетів, а формування дизайн-системи бренду. Користувача одразу просять надати базову інформацію про компанію, визначитися з типом дизайн-системи та завантажити всі наявні активи. Такий підхід змінює логіку роботи: замість того, щоб «малювати» окремі сторінки, спочатку створюється фундамент — типографіка, кольори, відступи, кнопки, стани елементів — на основі якого потім будуються інтерфейси.
Ця методика особливо актуальна для розробників, які не мають часу або бажання займатися дизайном, але прагнуть отримати послідовний і масштабований візуальний стиль. Замість ручної настройки безлічі параметрів у Figma, 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 не може автоматично розпізнати це як артефакт минулого, тож користувачу доводиться самостійно вносити відповідні корективи.
Після проведеного аналізу Claude Design генерує перший драфт повноцінної дизайн-системи, що включає основні технічні параметри, які зазвичай дизайнери збирають вручну:
– типографічні шкали — розміри тексту для різних рівнів заголовків і стилів тексту;
– кольорову палітру — основні бренд-кольори, їх відтінки, сірі тони для фону й тексту, а також варіації для акцентних елементів;
– шкалу відступів — стандартні значення padding і margin, побудовані за кроками 4, 8, 12 пікселів;
– радіуси скруглення — від гострих кутів до більш округлих форм;
– стилі elevation і «кілець» — тіні, підсвічування, glow-ефекти, що додають глибини та інтерактивності;
– стилі кнопок — первинні, вторинні, «ghost»-варіанти разом із їхніми станами та візуальними акцентами.
У випадку PL Coding інструмент сформував просту, але цілісну палітру, яка включає чорний колір, зелений як основний бренд-колір, сірі відтінки для вторинного тексту та додаткові кольори для елементів callout. Шкала відступів виявилася класичною для сучасних дизайн-систем, а радіуси скруглення — помірними, без надмірної «карткової» стилістики.
Особливу увагу привернув блок elevation та «кілець»: Claude Design запропонував glow-ефект, який вдало поєднався із загальним стилем PL Coding. Для бренду, пов’язаного із програмуванням і технічною освітою, такий легкий «неоновий» акцент виглядає доречно, не перетворюючи інтерфейс на агресивний ігровий UI.
Хоча цей первинний драфт не є ідеальним, він дає відчуття того, що інструмент прагне сформувати цілісну систему, а не просто обрати випадкові шрифти та кольори. Наступним етапом у роботі стає ключова перевага Claude Design — інтерактивне доопрацювання в діалозі з користувачем.
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 це критично, оскільки надмірна кількість «головних» дій на екрані розсіює увагу користувача.
### Картки курсів: від написів у верхньому регістрі до мініатюр і вирівнювання
Ще один показовий блок — картки курсів. Початкова версія виглядала пристойно, але не відповідала бренд-гадам і UX-вимогам. Заголовок був написаний шрифтом CTA у верхньому регістрі, що погіршувало читабельність, а візуального представлення курсу не було.
Через модульний review-флоу користувач запропонував кілька правок:
– замінити заголовок на стандартний headline-шрифт без використання великих літер (all caps);
– додати для кожного курсу мініатюру формату 16:9, щоб зробити картки більш живими;
– зберегти стриманий стиль 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;
– переконатися, що зелений логотип на темному фоні використовує саме первинний зелений із відповідним кольором;
– залишити білий логотип, який відповідає реальному активу.
Claude Design оперативно врахував ці зауваження, показавши здатність не лише генерувати варіанти, а й «відкочувати» неправильні рішення на користь відповідності бренд-гадам.
Ще одним помітним блоком є іконки. Інструмент створив набір кастомних піктограм, стилістично відповідних бренду. Серед них — іконки Git, блискавки, терміналу, а також символи, пов’язані з програмуванням. Хоча таких іконок не було на сайті PL Coding, вони гармонійно вписалися у візуальну стилістику бренду. Це свідчить, що інструмент не лише дублює існуючі елементи, але й творчо розширює візуальну мову бренду у визначених межах.
### Значення підходу Claude Design для розробників і команд без штатних дизайнерів
На прикладі PL Coding добре видно, як Claude Design змінює саму динаміку роботи з візуальною частиною продукту. Замість тривалих циклів між розробником і дизайнером, експорту макетів, правок у Figma та повторних ітерувань, значна частина роботи переноситься у діалог з штучним інтелектом.
Для розробників, які раніше використовували Claude Code разом із Figma MCP, це ознака переходу від фрагментованих AI-підказок до цілісного інструменту. Якщо раніше зміна одного текстового стилю через AI була складною і вимагала перегенерації цілих фрагментів інтерфейсу, то тепер можливо точково редагувати окремі параметри дизайн-системи: змінювати шрифти для певних заголовків, перекласифікувати кнопки, коригувати відступи чи вирівнювання в конкретних компонентах.
Водночас Claude Design не звільняє користувача від необхідності мислити як дизайнер. Інструмент може запропонувати glow-ефект, але рішення щодо відповідності йому духу бренду залишається за людиною. Він може сформувати статуси «offline» чи «updating», проте саме команда продукту має визначити їхню доречність у конкретних сценаріях застосування.
Головна перевага підходу Anthropic полягає в тому, що він дозволяє швидко отримати «скелет» дизайн-системи, побудований на реальних бренд-активах, а потім у процесі діалогу довести його до стану, готового до масштабування. Для невеликих команд це може стати можливістю відійти від примітивних UI-шаблонів і створити продумані дизайн-системи, які раніше були доступні переважно великим компаніям із потужними дизайн-відділами.
Claude Design демонструє шлях розвитку наступного покоління AI-інструментів для дизайну: не просто генерацію окремих екранів, а формування цілісної дизайн-системи, базованої на логотипах, шрифтах, кольорах, бренд-гідах, Figma-файлах і навіть коді з GitHub. Інструмент вміє інтерпретувати бренд, формувати палітру, типографіку, слогани та перетворювати це у структурований набір правил і компонентів.
Модульний review-флоу і чат-подібний діалог надають можливість точного редагування рішень: замінювати шрифти для окремих заголовків, переназначати ролі кнопок, налаштовувати картки, логотипи та іконки. Це робить Claude Design привабливим для розробників і невеликих команд, які прагнуть швидко створити професійно виглядаючу дизайн-систему, не занурюючись у всі нюанси Figma.
Водночас інструмент чутливий до якості вхідних даних і може автоматично підхоплювати застарілі шрифти чи вигадувати неіснуючі варіанти логотипів. Тому роль людини як куратора і критичного редактора залишається ключовою. Саме в такій співпраці — коли ШІ формує структуру, а людина задає сенс і вносить корективи — Claude Design розкриває свій потенціал як практичний інструмент для створення сучасних, послідовних інтерфейсів.
—
Джерело: https://www.youtube.com/watch?v=YTGT4HqEMSo
