Anthropic додає команду /design до Claude Code для створення макетів UI в терміналі

Anthropic розширила Claude Code новою командою /design, яка дозволяє розробникам створювати, доопрацьовувати та переглядати макети UI, не виходячи з термінала.

Прототипування UI безпосередньо в терміналі

Замість того, щоб перемикатися між Figma та оболонкою (shell), тепер можна ввести щось на кшталт /design a few options for a login screen. Claude відповідає кількома інтерактивними «артбордами» (artboards), які відображають високоточні макети. Ви можете порівнювати макети, обирати найкращий і вдосконалювати вигляд, ставлячи уточнювальні запитання — і все це ще до написання жодного рядка робочого коду.

Контекстно-залежні макети на основі вашої кодової бази

Розробник Nate Parrott зазначає, що Claude фактично зчитує поточний репозиторій. Він витягує кольорові палітри, бібліотеки компонентів та правила верстки, а потім адаптує кожен дизайн відповідно до існуючого стилю проєкту. Результати з'являються у вигляді «Artifacts» — спеціального режиму перегляду всередині Claude, який показує зображення без відкриття окремого графічного редактора. На цьому етапі макети існують лише в робочому просторі Claude; ви повинні явно зберегти їх у файлову систему, перш ніж перетворювати на код.

Чому це важливо для розробки за допомогою ШІ

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

Anthropic розглядає це як крок до створення «ШІ-інженера програмного забезпечення», який керує і логікою, і естетикою. Якщо термінал може слугувати мультимодальним робочим простором, межа між написанням коду та формуванням користувацького досвіду значно стирається.

Поточні обмеження

Функція все ще перебуває на стадії попереднього перегляду (preview). Згенеровані макети не стають вихідними файлами автоматично; ви повинні самостійно експортувати та інтегрувати їх. Цей додатковий крок може нівелювати економію часу, особливо у великих проєктах із десятками компонентів.

Як спробувати

Виконайте claude update, щоб завантажити останню попередню збірку та увімкнути команду /design.

Основні висновки

  • Інтегроване прототипування: /design генерує кілька артбордів UI безпосередньо з запитів у терміналі.
  • Контекстуальна цілісність: Claude сканує поточну кодову базу, щоб макети відповідали існуючій дизайн-системі.
  • Оптимізований робочий процес: Поєднуючи можливості створення запитів Claude Design з виконанням завдань Claude Code, розробники переходять від концепції до візуального прототипу без перемикання між інструментами.

Нова команда /design від Anthropic дозволяє розробникам створювати та доопрацьовувати макети UI прямо з термінала, скорочуючи час на перемикання між інструментами дизайну та редакторами коду — це вузьке місце, з яким досі стикаються багато динамічних команд.

Генерація візуальних чернеток за допомогою запиту в CLI

Ви вводите команду на кшталт /design a few options for a login screen, і Claude повертає набір інтерактивних артбордів. Кожен артборд містить високоточний макет, який можна оглянути, порівняти та вдосконалити, ставлячи уточнювальні запитання.

Claude зчитує файли в поточному проєкті, витягує кольорові палітри, бібліотеки компонентів та правила верстки, а потім адаптує дизайн відповідно до них. Результат з'являється у вигляді «Artifacts» — режиму перегляду, який відображає зображення без відкриття окремого графічного редактора. На цьому етапі макети існують лише в робочому просторі Claude; ви повинні явно зберегти їх у файлову систему, перш ніж перетворювати на код.

Чому розробникам важливий інструмент для дизайну в терміналі

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

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

Anthropic розглядає це нововведення як крок до створення «ШІ-інженера програмного забезпечення», який може керувати і логікою, і естетикою. Якщо термінал тепер може слугувати мультимодальним робочим простором, межа між написанням коду та формуванням користувацького досвіду стає тоншою.

Обмеження та аргументи на користь традиційних інструментів дизайну

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

На що звернути увагу в міру вдосконалення функції

В оновленні Anthropic зазначено, що команду можна увімкнути за допомогою простої команди claude update.

Підсумок: Вбудовування дизайн-промпту безпосередньо в термінал Claude Code дає розробникам можливість швидкого переходу від концепції до візуального прототипу, але робочий процес усе ще залежить від ручної передачі даних і йому бракує глибини спеціалізованих UI-інструментів. Його подальша еволюція визначить, чи залишиться ця команда нішевою зручністю, чи стане основною частиною стека розробки на базі ШІ.