Команда /design у Claude Code: прадзераджванне інтерфейсаў перш чым ўжо ўстраіваць іх.

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

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

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

Тэтле: Када большая частка з нас будаўляе тэкст, каб дазявітацься з рычыкам. Ідея, код, відобраОлеўсь, не спадабаеця — перапісваець. Кожная відханэлыя ідея падае у копсцы найвяльшымія грошамі, якія тут є.

ашто змілісь

Claude Code та Claude Design вже маглі співарытацься між сабясь. Вы рэгистраеце серверы дизайнаў та заходзецея:

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 тепер створює кілька редаговуваних макетів інтерфейсу, які називаються artboards та відображаються як Artifact. Ви обираєте один з них, коригуєте його та просите Claude створити фінальну версію. Ця функція доступна у планах Pro, Max, Team та Enterprise, і її можна активувати за допомогою команди claude update.

„Два продукты можа сінхронізавацца“ проты „артборды знаходзяцца ў вашым тэрмінале“ звучыць як чыгуннікаванне, але гэта зміняе цэну адмовленай ідэі: раней — чатырнаццатьсот ліній JSX, а зараз — прыблізна дзевяць секунд аналізу. Цей цикл ператвараецца на ідэю: шасць візуальных варыянтав, пяць адмовленых, адзін запісаны ў код.

Дзе раней адбывалася розробка

Да выканання команды было два варыянты, і ніхто з іх не быў дешавым.

Першы — напісаць опис інтэрфейсу у прозе і спадзявацца на удачу. Уводзяцца тры параграфы пра расстоянне між элементамі та іерархію, Claude вяртае компонент, адкрываецца localhost, і ўсё выходзіць не так, чаго нямогла бы прыняць нават сама запитанне. Потым даводзіцца рэдагаваць код, каб выправіць рашэння па лейауте, якое можна было бы выявіць за трыдцать секунд аналізу.

Другі варыянт — ачыць claude.ai/design, створыць там пратотып і супрацаваць з рэзультатам, ўзгоджваючы його з вашымі фактычнымі компанентамі ў репазітарые. Цэў хорашы падход, і часта ён застаецца правильным. Проблема — пераключэнне між інструментамі, і саме гэта пераключэнне заважае адкрытым доследжэнням: вы выбіраеце адзін направленне і прыпускаеце шэсць іншых, таму што ачыцце іншую вікноўку здаецца таким жа крокам, як і фіксацыя змян.

Сама історія Парротта паказвае прычыну. У канцы 2025 года ён быў едыным дызайнерам у Claude Code для VS Code, разам з двума інжынерамі. У лістападзе таго ж года выйшаў Opus 4.5, інжынеры значна прышвырнулі роботу, і ёму паўзначылася падыходзіць да ўзніклага тэнару. Ёго першая спроба — запісаць выход дадзеныня з тэрміналу і скріншоты ў Claude і прагучаць дызайн —, за яго ж словамі, заканчылася неудача. Рашэннем было даць Claude HTML-канвас у змену на поле для тэксту, адтуды ўжо HTML являецца багатаўным візуальным медыумам, і Claude працюе з яным выключна эфектыва. Гэта прывела да стварэння Claude Design, а /design пераносіць той самы процес роботы з артбордам у тэрмінал, разам з кодам.

Прывычкі, якія дапамагаюць гэта працаваць

У ліпені Парротт опублікаваў свае саветы па наяўнасці найкращых практык. Яны практычна на 100% прыемлімы для CLI і ўжоць карысныя, чым будзь-які список функцый.

Падумайце пры тым, прытым як запрашваеце. Ён выдзейнае запрасы ў рэальны час, перш чым працаваць над дизайном: іноды диктуе іх, а іноды пішае ў аплікэцыю „Запіскі“ на тэлефоне з дзівана. Выявленне таго, чаго вы хочаце, — это адна роцэ, а запрашанне пра гэта — іншая; нечыясны запрас трацыць ресурсы на тое, што вы адмовіцеся прийняць.

Апісайце выгляд. Якщо нічога не сказаць, Claude будзе прыходзіць да калькі любімых стыліў, якія вы маглі б адразу распазнаць. Задайце яму шрыфты і кольоры, створыце мапу настрою, або папрасіце яго запропанаваць камбінаціі шрыфтов і кольераў, і сперачыце з ям, пакуль не будзе падходзячага варыянта. Сама гэта прычына робіць рэзультат схожым на ваш продукт, а не на ўсія сторанкі, створаныя штучным інтэлектам за апошнія паўтора года.

Пачаткайце з вайрфрэмов, калі можна пахамо чакаць з высокай якосцю. Ёны працуюць быстрэй і дапамагаюць Клауду сфармаваць увагу на структуре, а не на візуальных деталях. Калі вы яшчэ выбіраеце між боковай і верхней панелямі для фільтраў, градіенты толькі дадаюць зайвага. Спробавайце восьма структурныя ідэі, прычым працюючы над адной з іх.

Запрашайце дзесяць варыянтаў, а потым іх перакомбінавайце. Большасць з іх не будуць хорашымі, і гэта ўжо нормальна. Паротт радзіць выбраць ўсё, што падабаецца з варыянта B, а таксама частку элементаў з варыянта D, і запрашаець пяць варыянтаў, якія ўжо будуць ўжыткаваць гэтыя элементы.

Апошнія правкі робіце вручную. Бясплатныя прымітныя змяны на плошчынцы — такія як пераранжаванне, выдаленне, змена размеру, а таксама зміна тексту чы расканаў — не купуюць токенав. Запрошэнне системы здзейсніць тыя ж змяны коштае чымало, а выравнаванне лёгкае спазірна, чым пісьмова. Перастаньце пісаць рэчы пра заполненне прастору.

Эскіз і пункт. Якщо у вашай галаве ёсць структура без слоў, намалюйце яе на паперы і сфотаграфавайце. Уместо таго, каб пісаць параграф пра тое, які элемент вы маеце на увазе, проста клікніце на яго і паведаміце.

Структура эфектывнага запиту

Этыя прыкметы сведуцься да відновімага формата з пяцьма поламі. Якщо прыгнуце аднам, то будзе прыгледжаная няудача.

Колькасць. Колькісць напрамоў, якія вы хочаце. Укажыце цячыну, інакш вы отрымаеце ўсё тое ж. Шасць падходзіць для каркасоў, а тры — для высокай якосці.

Якосць. Каркас або дапрацаваны варыянт. Укажыце, калі ў модэлі ёсць тэндэнція да дапрацоўкі, а саме ў яе ўтрачаецца час і ресурсы.

Об’ект. Адна межаваная, названая паверхня, напрыклад, панель настаўк пры абавесцях, стан праз першы запуск або адзінокы відзор на дакументацыю. „Панель керування“ занадта вялікая.

Абяцкія вакуумы вашага коду. Каторыя існуючыя складовыя павінны быць прыняты. Сюды і падходзіць CLI, калі ўжо Claude можа іх прачытаць. Усё рава дайце ім назвы, адколі прабавы кращыя за адліквідаванне.

Эстэтычны направленні, або чыста адліквідаванна. Укажыце назвы шрыфтав і калерактур, але і можна напісаць "толькі структура, нараз час не зважаць на візуальны стыль". Мовчанне — гэта едыны выбар, які непаспэўна ведае да негатыўных наследкав, адколі саме мовчанне прыводзіць да стылю "з дому".

/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 Chat, Claude Code і Cowork; кампанія Anthropic чытка зазначае, што складныя проекты, вялікія кодавыя базы і многа ітерацый спрацоўваюць больш ресурсаў. Раней існавала окремая ўздоўжніца на тыдзень, але яна ўжо не існуе.

Через CLI гэта відчуваецца яшчэ болей, чым через веб-версію. Калі вы запрашаеце калькі-небудзь повных макетаў, сесія вже мае індексаваную кодавую базу і актыўную розмову. Як толькі вы досягнете сваіх лімітав, функцыя Claude Design стане недоступной, пакуль яны яе зноў не налаштуе.

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

Що не робить /design

Parrott чітко окреслює межі. 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, выключыце його, адколькі цэй ёсць локальны сервер толькі для чытання, які конфліктуе з удалённым. Пасля чаго запуск команды «адресаваць гэта 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.

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

Зробіце це за певны час. Полная перэглядка не должна коштаць больше, чым адна паўторка процесу «чы можна перасунуць элементы на правую сторону», як у кодзе, а фінальны варыянт — той, які вы самі выбералі і не паспраўлялі.

Гэта ёсць справжняя зміна, і яна менша та практычней, чым зазвычай пропонуецца ў індустрыі. АІ-кодаванне вже зробіла реалізацыю дешавай. Тепер нават паслабелія можна легка адкинуць. Агент пакрывае большую частку процесу, а розгляд варыянтав падкрепляе ваше розумінне таго, што насправды трэба зробіць — гэта завжды была ваша задача.