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

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

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

Оглавление

• Что появилось в Claude Code

• Холст, артборды и формат .dc.html

• Что меняется между требованиями и кодом

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

• Где навык не заменит дизайнера

• Claude Design: откуда всё это выросло

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

• Что попробовать на этой неделе

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

Правки делаются мышью. Элемент выделяется кликом, текст меняется прямо на месте, свойства — в панели рядом, есть отмена действий. Сохранение публикует новую версию для всех, у кого есть ссылка. Там, где сохранение не включено, остаётся просмотр и выгрузка в PNG или PDF.

Навык вышел в статусе research preview — раннего доступа, по которому Anthropic собирает обратную связь. Часть возможностей за время превью поменяется.

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

Каждый артборд — файл .dc.html. Разница с привычным макетом принципиальная: макет в дизайн-инструменте нужно сначала прочитать и перевести в вёрстку, а тут в руках уже разметка. Её можно открыть в браузере, показать в переписке, положить в репозиторий и посмотреть историю изменений тем же способом, каким смотрят историю кода.

Результат публикуется как Artifact — страница по ссылке. Заказчику не нужен аккаунт в дизайн-инструменте и не нужно объяснять, где нажать «просмотр».

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

Навык убирает один из переходов. Между формулировкой и кодом появляется артефакт, который можно сравнить с другим вариантом, поправить и утвердить, не выходя из среды, где потом пишется код. Разговор с заказчиком переходит из плоскости «представьте себе экран» в плоскость «вот два экрана, какой берём».

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

Одиночный разработчик. Пет-проект, внутренний инструмент, админка, лендинг под конкретную гипотезу — задачи, где дизайнера не было и не будет, а выглядеть должно прилично.

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

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

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

Фирменный стиль и айдентика остаются человеческой работой. Модель соберёт аккуратный экран, но не придумает визуальный язык продукта и не выстроит его последовательно на сорока страницах.

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

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

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

Навык — продолжение отдельного продукта Anthropic Labs под названием Claude Design. Его представили 17 апреля 2026 года: чат слева, холст справа, дизайн собирается разговором, правится инлайн-комментариями и ручными настройками отступов, цвета и раскладки.

Работает Claude Design на модели Claude Opus 4.7. Экспорт — HTML, PDF, PPTX и Canva. Готовый дизайн передаётся в разработку пакетом handoff bundle: команда разработки получает не картинку, а собранный набор материалов, с которым Claude Code начинает писать код.

Появление /design внутри Claude Code достраивает круг: дизайн и код перестают жить в разных приложениях и разных головах.

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

Статус — ранний доступ. Практический вывод один: закладывать /design в производственный процесс на месяц вперёд рано, а проверять на реальной задаче — самое время.

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

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