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

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

Claude Code получил навык /design: команда открывает холст, на нём появляется несколько артбордов, каждый артборд — обычный html-файл, а весь макет публикуется как страница по ссылке. Инструмент, в котором писали код, начал рисовать интерфейсы.

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

Оглавление

• Как это выглядит в работе

• Почему артборд в html меняет расклад

• Три сценария, где дизайнер не нужен уже сейчас

• Три места, где без дизайнера получится плохо

• Откуда навык взялся

• Что с этим делать разработчику и дизайнеру

Как это выглядит в работе

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

Холст один, артбордов на нём сколько нужно: экраны, состояния, шаги сценария. Масштаб меняется, весь флоу виден целиком. Сохранение публикует новую версию макета для всех, у кого есть ссылка; там, где сохранение недоступно, остаётся просмотр и выгрузка в PNG или PDF.

Статус — research preview, ранний доступ.

Почему артборд в html меняет расклад

Главное отличие не в скорости рисования, а в формате результата. Артборд — файл .dc.html. Не картинка, не проект в закрытом формате, а разметка, которую браузер открывает сам.

официальный ролик Anthropic, 40 секунд: вызов /design, холст с артбордами, правки на месте

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

Дизайнерский макет всегда был описанием намерения, которое кто-то потом переводил в код. Здесь описание намерения и есть код.

Разбираю Claude Code и ИИ-агентов на практике: как применять их в реальных рабочих задачах, автоматизировать рутину, собирать собственных ИИ-ассистентов и зарабатывать с помощью новых технологий. Практические разборы, инструменты, кейсы и эксперименты: от первого ИИ-агента до полноценных рабочих систем. Подписывайтесь.

Три сценария, где дизайнер не нужен уже сейчас

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

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

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

Три места, где без дизайнера получится плохо

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

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

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

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

Откуда навык взялся

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

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

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

Чем это отличается от привычных инструментов

Дизайн-инструменты вроде Figma устроены вокруг совместной работы над макетом: слои, компоненты, комментарии, передача в разработку через спецификации. Сильная сторона — точность и накопленная библиотека, слабая — макет всё равно остаётся описанием, которое кто-то переводит в код руками.

Конструкторы сайтов решают обратную задачу: сразу дают рабочую страницу, но запирают её внутри своей платформы, и вынести оттуда разметку в проект обычно невозможно.

Навык /design стоит между ними. Результат сразу в html, но лежит не на чужой платформе, а в файле, который можно положить в репозиторий. Библиотеки компонентов и командной работы над макетом при этом нет — их роль по-прежнему занимают привычные инструменты.

Практический вывод: замены Figma не случилось. Появился быстрый путь для тех задач, которые до Figma просто не доходили.

Что можно проверить за вечер

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

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

Что с этим делать разработчику и дизайнеру

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

Дизайнеру логично посмотреть на навык как на генератор черновиков, а не конкурента. Спорная часть профессии — рисование очередной формы по описанию — уходит в инструмент, а несущая часть, система и сценарии, остаётся и дорожает.

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

11