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

1 командаот брифа до рабочего макета
3 шагаот холста до production-ветки

Экран терминала слева с командой /design и открытый холст .dc.html справа с макетом интерфейса

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

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

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

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

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

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

Дальше с этим файлом можно работать в команде по такому pipeline:

  1. PM/менеджер пишет бриф задачи с аудиторией и задачей экрана — «форма заявки для корпоративных клиентов, минимум полей, акцент на доверие».
  2. Разработчик запускает /design с этим брифом и контекстом проекта (если есть дизайн-система — передаёт токены через CLAUDE.md).
  3. Дизайнер или продакт смотрит холст .dc.html в браузере, оставляет правки прямо в чате — «поле телефона шире, кнопку ярче, убери тень под формой».
  4. Claude обновляет холст по правкам — это быстрее, чем править макет в Figma и экспортировать.
  5. Когда холст одобрен, разработчик просит превратить его в компонент — Claude пишет React/Vue/HTML под стек проекта.
  6. Компонент идёт веткой в Git, ревью кода, merge в production.

Этот workflow убирает разрыв между «дизайнер нарисовал в Figma» и «разработчик сверстал по-своему» — макет сразу живёт в той же сессии, где пишется код.

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

Сравнение — слева диффы кода без превью, справа холст с макетом и реплики правок

Как подключить дизайн-систему к /design через CLAUDE.md

По умолчанию /design не знает про твои дизайн-токены, компоненты и правила — он рисует «в своём стиле», узнаваемом как типовой нейрослоп. Чтобы команда переиспользовала твою систему, нужно явно передать правила в файл CLAUDE.md — его Claude Code читает при каждом запуске сессии.

Пример структуры для дизайн-системы в CLAUDE.md:

## Дизайн-токены проекта

Цвета:
- primary: #0F172A (тёмно-синий для заголовков и акцентов)
- secondary: #38BDF8 (яркий голубой для кнопок и ссылок)
- text: #F8FAFC (светло-серый для основного текста)
- background: #111827 (графитовый фон)

Шрифты:
- заголовки: Inter, 600, 24px/32px
- текст: Inter, 400, 16px/24px
- кнопки: Inter, 500, 14px/20px

Отступы:
- между блоками: 32px
- внутри карточек: 16px
- кнопки padding: 12px 24px

Компоненты:
- кнопки: радиус 8px, тень 0 2px 8px rgba(0,0,0,0.1)
- карточки: радиус 12px, border 1px solid #1E293B
- инпуты: радиус 6px, высота 40px

Когда используешь /design, применяй эти правила. Не рисуй
градиенты, не используй фиолетовый.

Это базовый набор — можешь добавить ссылки на существующие компоненты, примеры макетов, правила типографики. Чем подробнее опишешь, тем меньше холст будет отличаться от продакшен-кода.

Без CLAUDE.md с токенами /design нарисует что-то работающее, но «не наше» — придётся вручную подгонять цвета, отступы и радиусы под реальный UI проекта. С файлом памяти макет на холсте сразу ближе к финалу. Про то, как вообще писать CLAUDE.md под разные задачи, у нас есть отдельный гайд по файлу памяти.

Холст на .dc.html — это черновик, который нужно довести до production без косяков и типовых решений.

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

Забрать канал

Где /design реально экономит вечер — три сценария с цифрами

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

Сценарий 1: внутренняя админка. Нужна форма добавления товара в каталог — 8 полей, кнопка «Сохранить». Без /design: рисуешь макет в Figma или на бумаге (15 минут), верстаешь руками (40 минут), правишь отступы (10 минут). С /design: пишешь бриф (2 минуты), получаешь холст (30 секунд), правишь реплик пять (5 минут), Claude пишет компонент (1 минута). Итого: вместо часа — 8 минут. Здесь команда закрывает задачу почти полностью.

Сценарий 2: быстрый прототип для обсуждения с клиентом. Нужно показать три варианта главной страницы сервиса, чтобы клиент выбрал направление. Без /design: делаешь три макета в Figma (2 часа), экспортируешь (10 минут), показываешь. С /design: пишешь три разных брифа (10 минут), получаешь три холста (3 минуты), показываешь клиенту прямо из терминала. Итого: вместо 2+ часов — 15 минут. Здесь скорость решает, потому что прототип — не финал.

Сценарий 3: продающий лендинг. Нужна страница с оффером, блоками выгод, формой заявки, доверительным дизайном. Без /design: дизайнер рисует макет с идеей (4 часа), верстальщик собирает (3 часа), правки (1 час). С /design: пишешь бриф (5 минут), получаешь холст (1 минута), правишь (20 минут), Claude пишет код (2 минуты). Казалось бы, ускорение в 15 раз. Но на практике — нет: первый холст будет типовым, без идеи, и его придётся переделывать руками или через десятки итераций, чтобы он не выглядел как «сделано нейросетью за вечер». Здесь /design даёт черновик, но финал всё равно требует дизайнера с вкусом.

Итоговый макет интерфейса на холсте, готовый к превращению в компонент

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

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

1. Формулируй задачу и аудиторию, а не просто тему. «Сделай карточку товара» — получишь дефолт. «Карточка товара для маркетплейса одежды, целевая аудитория — женщины 25–40 лет, акцент на размер и наличие, минимум текста, стиль минималистичный» — получишь что-то, к чему можно придираться по делу. Разница в одном предложении, но на выходе — два разных макета.

2. Проси несколько вариантов на холсте и сравнивай перед тем, как утверждать. Первый вариант почти всегда типовой — насмотренность появляется, когда есть с чем сравнить. Запрос «нарисуй три варианта этой формы: один минималистичный, второй с яркими акцентами, третий в стиле дашборда» даёт три холста, и ты видишь, куда двигаться, вместо того чтобы угадывать словами.

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

Pipeline от /design до production-ветки — как организовать в Git

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

  1. Разработчик создаёт feature-ветку под задачу: git checkout -b feature/order-form-ui.
  2. Запускает /design с брифом, получает холст .dc.html, итерирует с командой.
  3. Когда макет одобрен, просит Claude: «Преврати этот холст в React-компонент с TypeScript, используй наши токены из CLAUDE.md».
  4. Claude пишет компонент в src/components/OrderForm.tsx, применяет изменения.
  5. Разработчик проверяет компонент локально, коммитит: git commit -m "Add order form component from /design".
  6. Пушит ветку, открывает pull request, команда ревьюит код.
  7. После одобрения — merge в main, компонент идёт в production.

Этот pipeline работает, если в CLAUDE.md уже прописаны токены и правила — тогда код из холста сразу соответствует стилю проекта. Без файла памяти придётся вручную подгонять отступы, цвета и шрифты после генерации.

Для автоматизации можно добавить GitHub Actions, которая генерирует несколько вариантов макета по тегу задачи в issue — но это уже следующий уровень, когда /design используется регулярно.

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

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

Команда работает в той же подписке Claude Code, без доплат. Для работы из России нужен свой аккаунт и зарубежная оплата — гайд по доступу здесь. Если интересно, как выстроить полный цикл работы с агентом — от установки до скиллов под твои задачи — у нас есть отдельная статья про использование Claude Code.

По материалам: The Decoder о команде /design в Claude Code, официальная документация Claude Code; цены и сроки — из наших замеров конвейера за август 2026.

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

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