Команда /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» (реализуй это).

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

Вот настоящий сдвиг, и он меньше и практичнее, чем разговоры о трансформации индустрии, которые обычно сопровождают такие релизы. ИИ-кодинг уже сделал реализацию дешёвой. Теперь дёшево выбрасывать и плохие идеи. Агент берёт на себя большую часть «как», а возможность увидеть варианты оттачивает ваше понимание «что», которое всегда было вашей работой.