Команда /design в Claude Code: сначала дизайн, потом код

Команда /design - новый режим Claude Code: описываешь страницу словами, получаешь ссылку на холст с несколькими вариантами интерфейса, правишь выбранный артборд руками и называешь его имя - и Claude собирает код. Фича вышла в августе 2026 года в статусе research preview и доступна на тарифах Pro, Max, Team и Enterprise.

Прежний цикл выглядел так: описал страницу - получил код - «не то, сделай иначе» - снова код. Каждая итерация стоит минут и токенов, а сравнивать не с чем: ты видишь один вариант за раз и судишь о дизайне по уже написанному коду. /design вставляет пропущенный шаг - взгляд на несколько направлений до того, как первое из них станет кодом. Разбираю, как это работает, что писать в запросе и где спотыкаются новички.

Что такое /design и откуда она взялась

Если ты ещё не варился в Claude Code - начни с общего разбора, там про установку и базовый цикл. Коротко: это агент в терминале, который работает с проектом целиком - читает файлы, пишет код, запускает команды.

О команде /design официально рассказали в еженедельной сводке What's New за 34-ю неделю 2026 года - это 17-21 августа. Она приезжала волнами, в релизах v2.1.234-v2.1.239, и требует CLI от v2.1.233 или Claude Code Desktop. Статус - research preview, тарифы Pro, Max, Team и Enterprise.

Под капотом - артефакты: живые страницы, которые Claude публикует на claude.ai и которые по умолчанию видны только тебе. Механика, которая раньше превращала сниппет из чата в открываемую страницу, теперь отдана под дизайн-концепты.

И занятная деталь: в CHANGELOG репозитория команда не упомянута ни разу - весь файл от v2.1.223 до v2.1.251 я проверил. В справочнике команд на code.claude.com есть только её соседи: /design-login и /design-sync. Документация отстаёт от фичи, и это само по себе сигнал.

Как это работает по шагам

Всё начинается в терминале. Пишешь /design и описываешь страницу. Пример из официального анонса: /design redesign the composer based on what people actually use it for - «перерисуй композер под то, как им реально пользуются».

Дальше Claude не бросается в код. Он публикует холст и печатает ссылку. Открываешь - на холсте несколько концептов, каждый в своём артборде с именем в шапке.

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

Когда выбрал - два движения: нажать Save и запомнить имя артборда. Возвращаешься в Claude Code, называешь имя - Claude собирает код по концепту. На этом цикл замыкается: макет согласован до кода, имя передано, дальше работа.

Как писать запрос: объясняй как клиенту

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

Второй рычаг - разброс. Проси три заметно разных направления, не три версии одного и того же. В удачном запросе это прописано прямо: «сделай все три явно разными, без генерической сетки карточек, не выравнивай всё по центру».

Третий - референсы. К запросу можно приложить скриншоты или ссылку на живую страницу и сказать «как здесь». Для вдохновения удобен Mobbin - библиотека реальных экранов приложений и сайтов. Референс задаёт направление; копировать его один в один не нужно, иначе все варианты сойдутся к одному макету.

Вот пример полного запроса из обзора Tristen O'Brien (адаптированный перевод):

/design: три направления лендинга для Happy Tails. Единственная задача страницы - записаться на приём. Секции: hero с кнопкой записи, услуги с ценами, фото до и после, отзывы, футер. Приложил три скриншота макетов, которые нравятся: используй их как направление, а не как образец для копирования. Сделай все три явно разными. Без генерической сетки карточек и не центруй всё подряд.

Картинки: Claude сам их не делает

По обзорам, Claude Code не умеет генерировать изображения сам. Варианта два: подготовить иллюстрации заранее и положить их в папку проекта - тогда Claude расставит их по макету, - или подключить внешний генератор вроде Higgsfield или Nano Banana (Gemini image API). Официальной формулировки на этот счёт в доках нет, так что проверь под свой сетап.

Вывод не зависит от выбранного генератора: артборд закрывает композицию, сетку и типографику. Иллюстрации - отдельная работа со своим бюджетом, и в оценку проекта её надо закладывать отдельно.

/design в Claude Code или приложение Claude Design

Не путай команду с приложением Claude Design. Это отдельный продукт: Anthropic Labs запустили его 17 апреля 2026 года в статусе research preview, сейчас он в beta и живёт на claude.ai/design и в сайдбаре десктопного приложения. Он экспортирует макеты в zip, PDF, PPTX, Canva и HTML, интегрируется с Adobe, Base44, Gamma, Lovable, Miro, Replit, Vercel и Wix, а результат можно передать в Claude Code handoff-бандлом.

Есть и обратная связка: /design-sync выгружает из Claude Code React-систему компонентов, /design-login связывает аккаунт, а MCP-сервер claude-design подключает дизайн-контекст напрямую - про формат MCP у нас есть разбор.

Как выбрать, где работать? Три вопроса из обзора Tristen O'Brien:

1. Где живёт проект. Реальная кодовая база - держи дизайн и код в одном месте, в Claude Code.
2. Что дальше с макетом. В Claude Code достаточно имени артборда - код собирается сразу. Из приложения макет сначала придётся экспортировать.
3. Что за задача. Страница или приложение - Claude Code. Постер, флайер, графика для соцсетей - приложение.

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

Ограничения и краевые случаи

Артефакты требуют входа через /login с аккаунтом claude.ai. Сидишь через API-ключ или корпоративный гейтвей - холст не откроется. На Bedrock, Vertex и Foundry артефакты недоступны вообще.

Версии: артефактам нужен CLI от 2.1.183 или десктоп от 1.13576.0, команде /design - CLI от 2.1.233. В автоматических контекстах - Agent SDK, GitHub Action, MCP-сессии - артефакты выключены; то же происходит при переменной CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC. Отключить вручную - /config → Artifacts или переменная CLAUDE_CODE_DISABLE_ARTIFACT=1.

Что запомнить

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

Запрос решает больше, чем фича. Аудитория, единственная задача, референсы как направление и «три явно разных» - этого достаточно, чтобы холст не превратился в три копии одной сетки.

И калибруй ожидания: research preview значит, что через месяц команда может работать иначе. Фундамент - по-прежнему процесс: скиллы, спеки до кода, контроль результата. /design встраивается в этот процесс как шаг «посмотреть и выбрать» - и в этой роли меняет порядок работы: сначала дизайн, потом код.

---

Источники:

• What's New in Claude Code, неделя 34 - официальный анонс /design
• Артефакты в Claude Code - требования и выключатели
• Анонс Claude Design
• Get started with Claude Design
• Tristen O'Brien, Claude Code Just Dropped /Design
• Jay E, Anthropic just launched /design for Claude Code
• Mobbin - библиотека реальных экранов