Claude Code /design: как рисовать интерфейсы в терминале 2026

Я, Арина Михална, расскажу, как команда /design в Claude Code превращает текстовое описание экрана в готовый интерфейс прямо в терминале: пишешь бриф, получаешь HTML-макет на отдельном холсте, правишь его репликами, и только потом Claude превращает его в рабочий код компонента. Без Figma, без ручной вёрстки первого черновика.

Как /design встроен в список команд Claude Code

В Claude Code уже больше десятка встроенных команд — /init, /clear, /compact, /agents и другие, все они меняют поведение сессии: чистят контекст, переключают режим, подгружают агента. /design встал в этот же ряд, но логика вызова у неё другая: обычные команды работают с текстом и кодом внутри чата, а /design открывает отдельный визуальный слой — файл-холст, который живёт рядом с сессией и обновляется по репликам, а не переписывается заново с нуля.

Разница на практике: когда ты просишь Claude написать компонент обычным промптом, он сразу выдаёт JSX или Vue-разметку — код, который надо смотреть в редакторе и мысленно представлять, как это будет выглядеть. /design убирает этот шаг воображения — макет сразу видно, и правки идут в формате «подвинь кнопку», а не «поменяй margin-top на строке 47».

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

Что за формат .dc.html и как с ним работать

Технически .dc.html — обычный HTML-файл, но с расширением, которое Claude Code распознаёт как «артборд»: он рендерится в отдельном превью, а не как код в чате. Внутри — разметка и инлайн-стили, без сборки, без npm-зависимостей на этом этапе. Именно поэтому холст открывается моментально и правится репликами: изменить его — не пересобрать проект, а переписать кусок HTML.

Дальше с этим файлом можно поступить двумя способами: попросить Claude превратить макет в компонент под твой стек (React, Vue, обычный HTML) или отредактировать .dc.html руками — он читаемый, обычная вёрстка. Второй путь пригодится, если хочешь подправить пиксель-в-пиксель то, что словами объяснить сложнее, чем поправить самому.

Что сравниваем	/design (Claude Code)	Обычная генерация кода	Figma-плагины / v0
Где живёт результат	Файл .dc.html, в терминале	Прямо в коде проекта	В браузере, отдельный сервис
Формат правок	Реплики, макет обновляется	Диффы кода	Клик по элементам
Нужен ли аккаунт дизайн-инструмента	Нет, только Claude Code	Нет	Да, свой сервис
Скорость первого черновика	Секунды-минуты	Минуты	Минуты
Знает о твоей дизайн-системе	Нет, если не описал явно	Нет, если не описал явно	Частично, если подключены токены

Где /design реально экономит вечер, а где без дизайнера будет плохо

Тут работает тот же принцип, что я не устаю повторять про сайты на Claude: инструмент не виноват в нейрослопе, виноват человек, который ему ничего не передал — ни идею, ни насмотренность, ни вижн. /design в этом смысле честный молоток: даёт скорость, но не даёт вкус.

Где команда закрывает вопрос почти полностью:

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

Где без человека с насмотренностью будет типовой результат:

• продающие лендинги — там дефолтная сетка Claude читается так же узнаваемо, как «сделано на Тильде», только без волшебной плашки, которая это прикрывает;
• продукты с уже сложившейся дизайн-системой — команда не знает про твои токены и компоненты, пока не опишешь их явно;
• сложные интерфейсы с нетривиальной логикой взаимодействия (многошаговые формы, сложные таблицы) — здесь макет на холсте почти всегда придётся серьёзно переделывать.

Как не получить нейрослоп на выходе

Три вещи, которые реально влияют на результат, а не общие слова про «качество генерации»:

1. Формулируй задачу, а не просто тему. «Сделай карточку товара» — получишь дефолт. «Карточка товара для маркетплейса одежды, акцент на размер и наличие, минимум текста» — получишь что-то, к чему можно придираться по делу.
2. Проси несколько вариантов на холсте и сравнивай. Первый вариант почти всегда типовой — насмотренность появляется, когда есть с чем сравнить.
3. Смотри на итог как на черновик, а не финал. Холст .dc.html создан для правок — если принимать первый рендер как готовый результат, получишь ровно тот самый нейрослоп: сине-фиолетовый градиент, типовые блоки, ноль индивидуальности.

Что дальше с этим делать

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

По материалам: The Decoder о команде design в Claude Code, официальная документация Claude Code CLI.

Читайте также

• Команды Claude Code в 2026: полный список и примеры
• Как установить Claude Code в 2026: пошаговый гайд для новичков
• Ошибки в Claude Code в 2026: разбор и как их решать
• На портале «Мастерская нейросетей»: Как сделать конверсионный сайт с Claude без команды разработчиков

Если пока не разбирался с Claude Code вообще — начни с гайда с нуля, там разложены базовые команды и логика работы, на которую уже ложится /design. А если интересно, как я, Арина Михална, сама отличаю рабочий результат нейросети от нейрослопа на живых примерах — в канале «А.М. решает вопросы» разбираю сайты и макеты по блокам, показываю, где косяк, а где нормальный прикольный результат. В боте лежит гайд по установке Claude из России — забрать за подписку. Забрать канал