Навык /design в Claude Code: как нейросеть для дизайна собирает интерфейс прямо в редакторе кода

В Claude Code появилась команда /design. Она открывает визуальный холст, раскладывает на нём несколько готовых экранов и отдаёт результат ссылкой, которую можно показать заказчику. Инструмент, где раньше только писали код, научился рисовать интерфейсы.

Разбираем по порядку: что делает навык, как устроен холст, почему формат артборда важнее скорости рисования, кому он закрывает задачу целиком и где всё равно понадобится дизайнер.

Что такое Claude Code и при чём тут дизайн

Claude Code — инструмент Anthropic для работы с кодом: он читает проект, вносит правки, разбирает ошибки и выполняет команды. Работа идёт разговором, а не кликами по меню.

До сих пор дизайн жил отдельно: макет рисовали в одном приложении, обсуждали во втором, верстали в третьем. Команда /design убирает один из этих переходов — визуальный черновик появляется там же, где потом пишется код.

Как работает навык /design

Команда вводится прямо в сессии. Дальше нужно описать словами, что требуется: страница тарифов, форма заявки, экран настроек, панель с отчётом.

В ответ приходит не один вариант, а несколько — их видно рядом и можно сравнить. Выбранный дорабатывается мышью: элемент выделяется кликом, текст правится на месте, отступы, цвет и размеры настраиваются в панели рядом, неудачное действие отменяется.

Крупные изменения быстрее попросить словами, мелкую доводку — сделать руками.

Холст и артборды

Холст — единое пространство, по которому двигаются и меняют масштаб, как на карте. На нём лежат артборды: отдельные экраны, состояния одного экрана или шаги сценария.

Весь путь пользователя виден сразу. Не нужно открывать пять файлов, чтобы понять, как человек проходит от первого экрана до кнопки оплаты.

Почему формат артборда важнее скорости

Каждый артборд — файл .dc.html, обычная веб-страница. Не картинка и не проект в закрытом формате.

Отсюда следует сразу несколько вещей. Макет открывается в браузере без специальных программ. Он ложится в репозиторий рядом с кодом, и его правки видно в истории так же, как правки кода. Разработчику не нужно вручную переводить прямоугольники в вёрстку. Заказчику достаточно ссылки — аккаунт в дизайн-инструменте ему не нужен.

Готовый макет публикуется отдельной страницей. Сохранение выпускает новую версию для всех, у кого есть доступ; там, где сохранение не включено, остаётся просмотр и выгрузка в PNG или PDF.

Кому навык закрывает задачу целиком

Разработчику-одиночке. Пет-проект, небольшой сервис, заказ без бюджета на дизайн. Выбор идёт не между хорошим дизайном и машинным, а между машинным и никаким.

Команде без дизайнера. Внутренние экраны — админка, отчёт, форма для отдела продаж — годами ждут очереди, потому что пользуется ими двадцать человек.

На этапе продажи. Показать клиенту три варианта экрана убедительнее, чем описать словами, а рисовать их вручную под каждую встречу невыгодно.

Для проверки гипотезы. Нужен экран, чтобы понять, живая идея или нет. Раньше на это уходил день дизайнера, теперь — вечер разработчика.

Где дизайнер остаётся нужен

Визуальный язык продукта модель не придумает. Аккуратный экран получится, а система, в которой сорок страниц выглядят как один продукт, — работа человека.

Не додумывается то, о чём не попросили: ошибки, пустые состояния, длинные имена, узкий экран, отсутствие прав доступа. Список таких случаев составляет тот, кто знает продукт.

Исследование пользователей навык не отменяет. Правильный ответ иногда состоит в том, чтобы экран не рисовать, а убрать лишний шаг из сценария.

Накопленную дизайн-систему модель сама не подхватит. Если компоненты и правила уже есть, их подтягивают отдельной командой /design-sync — иначе интерфейс выйдет опрятным, но чужим.

Откуда вырос навык

За командой стоит отдельный продукт — Claude Design, представленный Anthropic Labs 17 апреля 2026 года. Устроен он так же: чат слева, холст справа, дизайн собирается разговором и правится руками. Работает на модели Claude Opus 4.7, экспорт — HTML, PDF, PPTX и Canva.

Передача в разработку идёт пакетом handoff bundle: программист получает не скриншот, а собранный набор материалов, с которым Claude Code начинает писать код. Появление /design внутри самого Claude Code замкнуло цепочку от описания задачи до готовой страницы.

Тарифы и статус

Возможность доступна подписчикам Pro, Max, Team и Enterprise, отдельной платы нет — расходуются лимиты подписки. В корпоративных тарифах она по умолчанию выключена, включает её администратор рабочего пространства.

Статус — research preview, ранний доступ, по которому собирают обратную связь. Часть поведения за это время изменится: строить на навыке постоянный процесс рано, а проверить на своей задаче — уже можно.

С чего начать

Возьмите задачу, которая давно висит без дизайна: внутренний отчёт, форма заявки, страница настроек. Опишите её текстом, получите варианты, доведите один руками и засеките время от формулировки до готового экрана.

Сравните с тем, сколько такая же задача занимала раньше — с перепиской, ожиданием макета и правками. Своя цифра отвечает на вопрос о пользе точнее любого обзора.