Команда /design у Claude Code: накидайте інтерфейс до того, як будувати

Люди планують, Claude виконує

Anthropic вивчила близько 400 000 сесій Claude Code приблизно від 235 000 користувачів, і розподіл рішень виявився перекошеним. Люди ухвалювали близько 70% рішень щодо планування, тобто що будувати. Claude ухвалював близько 80% рішень щодо виконання: який файл, який синтаксис, яка команда. За сім досліджених місяців частка сесій, присвячених лагодженню зламаного коду, впала з 33% до 19%, а робота з програмами й аналіз зросли.

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

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

Що змінилося

Claude Code і Claude Design і раніше вміли спілкуватися між собою. Ви реєструєте MCP-сервер дизайну й входите в акаунт:

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
/design-login

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

Нове — сама команда /design. Anthropic додала її ранню превʼю-версію в Claude Code 17 серпня 2026 року. Оголосив про це Нейт Перрот, продуктовий дизайнер, який створив Claude Design, і того ж дня це підтвердила команда Claude Code. У CLI чи десктопному застосунку Claude тепер створює кілька редагованих макетів інтерфейсу — артбордів, — які показуються як Artifact. Ви обираєте один, правите його й кажете Claude його збудувати. Функція є в планах Pro, Max, Team і Enterprise, а отримати її можна через claude update.

«Два продукти вміють синхронізуватися» проти «артборди живуть у вашому терміналі» звучить як сантехніка, але змінює ціну відкинутої ідеї: раніше це чотириста рядків JSX, тепер приблизно дев'ять секунд погляду. Цикл стає таким: ідея, шість візуальних варіантів, п'ять відкинуто, один закодовано.

Куди раніше йшло дослідження

До появи команди було два варіанти, і жоден не був дешевим.

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

Другий — відкрити claude.ai/design, прототипувати там, а потім зводити результат зі справжніми компонентами в репозиторії. Це добрий шлях і часто досі правильний. Біда в перемиканні між інструментами, і саме воно вбиває дослідження: ви приймаєте один напрям і пропускаєте шість, бо відкрити ще одну вкладку відчувалося як зобов'язання.

Історія самого Перрота показує чому. Наприкінці 2025 року він був єдиним дизайнером Claude Code for VS Code поруч із двома інженерами. У листопаді вийшла Opus 4.5, інженери помітно прискорилися, і йому довелося тримати їхній темп. Першою спробою було вставляти в Claude вивід термінала й скриншоти та просити дизайн, і, за його словами, вийшло погано. Рішенням стало дати Claude HTML-полотно замість текстового поля, бо HTML — багате візуальне середовище, а Claude пише його напрочуд добре. З цього виріс Claude Design, а /design переносить той самий процес з артбордами в термінал, поруч із кодом.

Звички, завдяки яким це працює

У липні Перрот опублікував свої найкращі практики. Вони майже повністю переносяться в CLI й корисніші за будь-який перелік функцій.

Думайте до того, як писати промпт. Він витрачає справжній час на складання промптів перед дизайном: іноді надиктовує, іноді набирає в нотатках на телефоні, сидячи на дивані. Зрозуміти, чого ви хочете, — окреме заняття, не те саме, що попросити, а розмитий промпт спалює ліміти на те, що ви відкинете.

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

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

Просіть десять, потім реміксуйте. Більшість не будуть добрими, і це нормально. Уточнення в Перрота звучить приблизно так: подобається варіант B і трохи варіанта D, дай п'ять варіацій, що їх поєднують.

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

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

Анатомія робочого промпту

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

Кількість. Скільки напрямів ви хочете. Назвіть число, інакше отримаєте один. Шість пасує для вайрфреймів, три — для високої деталізації.

Деталізація. Вайрфрейм чи відполірований варіант. Скажіть який, бо модель тягнеться до полірування, а на полірування йдуть час і ліміти.

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

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

Естетичний напрям або явне відкладення. Назвіть шрифти й кольори або напишіть «structure only, ignore visual styling for now» (лише структура, візуальний стиль поки ігнорувати). Промовчати — єдиний вибір, який надійно виходить боком, бо мовчання дає вам фірмовий стиль моделі.

/design 6 wireframe options for the invoice detail view.
Reuse DataTable and StatusPill from src/components.
Structure only, no styling yet.

Порівняйте це з тим, що люди зазвичай набирають першим, — /design an invoice page. Команда та сама, а віддача зовсім інша.

Власні поради Anthropic щодо промптів для Claude Design перетинаються з цим, і їх варто тримати поруч: укажіть мету, компонування, контент і аудиторію. П'ять слотів вище налаштовані на розбіжність варіантів, а версія Anthropic пасує для створення одного доброго артефакту, тож використовуйте її, коли вже знаєте, чого хочете.

Швидка перевірка, чи спрацював промпт: перегляньте результат і спитайте себе, чи відрізняються варіанти ієрархією, чи лише кольором. Шість версій однієї й тієї самої інформаційної архітектури свідчать, що промпт був занадто вузьким або просив полірування зарано. Мета — шість справді різних відповідей на питання «що цей екран ставить у пріоритет». Ви платите за різні рішення, а не за різні палітри.

Підключення вашої справжньої дизайн-системи

/design-sync переносить вашу локальну дизайн-систему в Claude Design, тож згенероване збирається з ваших справжніх компонентів, і Claude не вигадує клас кнопки з нуля. Він може читати з репозиторію GitHub, дизайн-файлів, завантажень або локальної кодової бази, а назвати систему можна одразу: /design-sync Acme DS.

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

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

Скільки це коштує

У Claude Design більше немає власного ліміту, який треба відстежувати. Витрата йде зі спільного пулу з чатом Claude, Claude Code і Cowork, і Anthropic прямо каже, що складні проєкти, великі кодові бази й багато ітерацій витрачають більше. Раніше існував окремий тижневий ліміт, тепер його немає.

У CLI це відчувається сильніше, ніж у вебі. На момент, коли ви запитуєте там кілька повних макетів, сесія вже несе проіндексовану кодову базу й поточну розмову. Якщо ви впретеся в ліміти, Claude Design буде недоступний до їх скидання.

Зменшити витрату допомагає перелік добрих практик, вивернутий навпаки: обмежені функції, а не багатоекранні сценарії, вайрфрейми до високої деталізації й ручні правки на полотні для фінальних 10%, які безкоштовні.

Чого /design не робить

Перрот окреслює межі прямо. Claude Code — для написання продакшн-софту, а Claude Design покриває решту: ранній пошук ідей, спільну роботу й отримання схвалення до того, як хтось візьметься за збирання. Він сказав це до появи /design, і полотно всередині термінала стирає цю межу. Лишається інший поділ: розбіжність з одного боку, сходження з іншого, і все в одній сесії.

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

Їй лише кілька днів, і це помітно. Дизайни переходять у крок збирання, але їх досі треба зберігати вручну. /design немає в офіційному довіднику команд Claude Code, тоді як /design-login і /design-sync там є. Поведінка, найімовірніше, змінюватиметься.

Яку поверхню обрати

Використовуйте /design у Claude Code, коли результат незабаром піде в репозиторій, який у вас склоновано. Близькість до коду — увесь сенс.

Беріть claude.ai/design, коли аудиторія — людина: презентація, односторінковий документ, лендинг або клікабельний прототип для користувацького тестування, загалом усе, що стейкхолдер може відкрити в браузері без термінала. Він експортує PDF, PPTX, автономний HTML і .zip та надсилає роботу в Canva, Miro, Replit, Vercel, інструменти довкола Figma та інші.

Обидва працюють в обидва боки, тож почате в одному можна перенести в інший. Дизайнерові без локального середовища розробки варто вважати вебзастосунок своєю базою, а передавання — мостом. Інженерові, який мислить репозиторіями, — /design.

Якщо джерело істини — Figma

Обирати не обов'язково. 17 лютого 2026 року Figma й Anthropic випустили Code to Canvas, який надсилає робочий відрендерений інтерфейс із Claude Code у Figma як редаговані фрейми, а не статичні скриншоти. Установіть плагін:

claude plugin install figma@claude-plugins-official

Потім відкрийте в сесії /mcp, підключіть віддалений сервер Figma й авторизуйтеся. Якщо з'явиться запис figma-desktop, вимкніть його: це локальний сервер лише для читання, і він конфліктує з віддаленим. Після цього фраза «send this to Figma» (надішли це у Figma) викликає generate_figma_design.

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

Коротше кажучи, /design досліджує до того, як з'явився код, а Code to Canvas бере наявний код і повертає його на полотно, щоб команда його обговорила.

Ваш перший запуск

Оберіть функцію, довкола якої ви ходите, але не будуєте, і тримайте її обмеженою: панель, модальне вікно, сторінка налаштувань. Виконайте claude update, відкрийте сесію в потрібному репозиторії й почніть із:

/design 6 wireframe options for a notification preferences panel.
Use our existing card and toggle components. Structure only,
no color or polish yet.

Перегляньте всі шість і переконайтеся, що вони справді розходяться в ієрархії. Відкиньте чотири. Запросіть п'ять реміксів двох, що лишилися. Оберіть переможця, попросіть один прохід у високій деталізації з явно вказаними шрифтами й кольорами та виправте відступи на полотні руками, а не описом. Лише після цього кажіть «implement this» (реалізуй це).

Засічіть час. Усе дослідження має обійтися дешевше, ніж один раунд «можеш пересунути перемикачі праворуч» обійшовся б у коді, а підсумкове компонування — те, яке ви обрали, а не на яке погодилися.

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