Claude Code /design: Как проектировать UI через Артборды перед генерацией кода

Полный практический разбор команды /design в Claude Code: отказ от «слепой» генерации интерфейсов, создание 3 визуальных концептов (Artboards), ручная правка верстки на канвасе и мгновенная сборка в кодовой базе проекта.

Claude Code /design: кратко о главном

🎯 О чём этот конспект: Пошаговое руководство по использованию встроенной команды /design в Claude Code CLI. Разбирается новый рабочий процесс «Design First»: генерация визуальных артбордов, прямое редактирование макетов на интерактивном канвасе перед компиляцией в код, работа с дизайн-системами проекта и подключение сгенерированных изображений.

👤 Кому будет полезно: Вайбкодерам, фронтенд-разработчикам, создателям инди-стартапов и техническим фаундерам, которые используют Claude Code для создания веб-приложений и устали переписывать CSS/HTML через бесконечные текстовые промпты.

✨ Что получите: Четкий алгоритм проектирования UI: готовые промпты для генерации 3 контрастных вариантов посадочных страниц, методику интеграции существующих дизайн-токенов репозитория и понимание, когда использовать Claude Code CLI вместо веб-приложения Claude Design.

1. Смена парадигмы: переход от «слепого» вайбкодинга к визуальным артбордам

Контекст: Раньше стандартный цикл создания интерфейса в AI-агентах строился вслепую: разработчик вводил текстовый запрос, Claude сразу генерировал код компонентов, после чего приходилось тратить десятки итераций на микроправки. Любая попытка изменить отступы, шрифты или переставить блоки требовала написания нового промпта, а разработчик объяснял визуальные правки словами без возможности предпросмотра. Команда /design в Claude Code переворачивает этот процесс: сначала ИИ генерирует интерактивные макеты (Artboards) на визуальном холсте (Canvas), и только после утверждения концепта создается чистый рабочий код.

Тайминг: ▶ 00:00, ▶ 00:50, ▶ 01:37

Выгода: Экономия до 70% времени и токенов на этапе прототипирования. Исключаются десятки промежуточных промптов для подгонки верстки, так как структура утверждается до первого коммита в код.

Как применить:

• Шаг 1: Вызов команды в терминале — Claude Code CLI — В активной сессии Claude Code введите символ / (слэш), чтобы открыть список встроенных команд. Выберите или вручную напечатайте команду /design.
• Шаг 2: Формирование первичного запроса — Claude Code — Укажите тип страницы и потребуйте генерацию нескольких концептуальных вариантов перед тем, как Claude начнет трогать кодовую базу.

/design Give me 3 different visual directions for a modern SaaS dashboard landing page

Результат: Claude Code не начинает писать код компонентов, а открывает графический канвас с несколькими готовыми дизайн-макетами (артбордами).

2. Формула промпта для /design: бизнес-задача, референсы и дизайн-система

Контекст: Если дать модели абстрактный запрос вроде «сделай красивый лендинг», Claude выдаст три практически одинаковых типовых макета. Чтобы получить действительно контрастные варианты, промпт должен строиться по правилам работы с реальным UI/UX-дизайнером: четкая бизнес-цель страницы, конверсионное действие, структура секций и ссылки на конкретные визуальные ориентиры. Кроме того, если проект уже содержит компоненты и токены, Claude Code способен проанализировать локальные стили проекта и использовать именно их, не изобретая новую палитру.

Тайминг: ▶ 02:28, ▶ 03:04, ▶ 03:50

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

Как применить:

• Шаг 1: Подбор визуальных референсов — Mobbin / Dribbble / Браузер — Найдите 1–3 сайта с подходящей сеткой и структурой блоков (автор рекомендует базу mobbin.com). Сохраните прямые ссылки или сделайте скриншоты страниц.
• Шаг 2: Описание конверсионной задачи — Редактор промптов — Сформулируйте целевое действие (CTA) страницы, жестко зафиксируйте количество секций и передайте референсы.
• Шаг 3: Привязка к существующему репозиторию — Claude Code — Если вы находитесь в существующем проекте, укажите Claude проверить локальные стили, логотипы и дизайн-токены.

/design I want a landing page for my local dog grooming business.
- Job of the page: The ONLY goal is to get visitors to book an appointment.
- Structure: Exactly 5 sections (Hero with direct booking CTA, Services breakdown, Proof/Reviews gallery, Pricing tiers, FAQ/Location footer).
- Visual references: Follow the layout style and spacing of these references: https://mobbin.com/browse/web, but adapt for pet care.
- Design tokens: Inspect my current project folder. Do NOT invent new colors or fonts. Use my existing Tailwind theme variables, components, and primary brand palette.
- Output: Give me 3 fundamentally different layout directions.

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

3. Режим креативного директора: интерактивная правка макетов на холсте

Контекст: Сгенерированный артборд — это не плоская картинка (PNG/SVG), а полноценный интерактивный визуальный прототип. Пользователь выступает в роли арт-директора: любые текстовые заголовки, расстояния между карточками, расположение элементов и цвета можно менять прямо на экране манипулятором мыши. Для точных числовых значений доступна боковая панель свойств, что полностью исключает рутину описания визуальных багов через текстовый чат.

Тайминг: ▶ 01:13, ▶ 04:15, ▶ 07:21

Выгода: Мгновенная ручная корректировка типографики и лейаута за 10 секунд без ожидания ответа языковой модели и расхода API-токенов.

Как применить:

• Шаг 1: Прямое редактирование элементов — Интерактивный холст Claude Code — Кликните по любому заголовку или тексту на артборде и введите нужные формулировки вручную.
• Шаг 2: Изменение геометрии и отступов — Visual Canvas — Выделите блок или кнопку, перетащите мышью для смены позиции, отрегулируйте внутренние и внешние отступы (padding/margin).
• Шаг 3: Точечная настройка через инспектор — Правая панель свойств — Откройте панель справа для изменения Hex-кодов цветов, параметров скругления углов (border-radius) и размеров шрифтов.
• Шаг 4: Сохранение и фиксация имени — Верхняя панель Canvas — Посмотрите имя выбранного артборда в верхней части экрана (например, Variant-B или Artboard-2). Нажмите кнопку Save в правом верхнем углу, чтобы зафиксировать изменения.

Результат: Отредактированный макет зафиксирован в системе, а имя артборда готово для передачи компилятору кода Claude Code.

4. Подготовка визуального контента: интеграция внешних изображений

Контекст: Claude — это языковая модель, которая проектирует разметку, CSS и логику, но не имеет встроенного генератора растровых изображений. Веб-интерфейс без реальной графики выглядит блекло и не дает представления о финальном UX. До того как скомандовать Claude Code писать production-код, необходимо снабдить интерфейс релевантной графикой: сгенерировать иллюстрации через специализированные сервисы и передать их модели.

Тайминг: ▶ 04:47, ▶ 05:10

Выгода: Получение на выходе готового к деплою интерфейса с "живым" визуалом вместо серых плейсхолдеров и сломанных картинок.

Как применить:

• Шаг 1: Генерация ассетов — Higgsfield / Midjourney / Nano Banana API — Сгенерируйте необходимые баннеры, фотографии продуктов или маскотов под тематику создаваемого сайта.
• Шаг 2: Размещение в проекте — Папка ассетов — Сохраните файлы в директорию проекта (например, /public/images/hero.webp, /public/images/grooming-1.webp).
• Шаг 3: Передача инструкций агенту — Claude Code CLI — В промпте на сборку укажите точные пути к локальным ассетам или предоставьте прямые URL-ссылки для вставки в компонент.

Build the page based on artboard "Variant-2".
Replace all hero and gallery placeholders with the local assets located in /public/images/:
- Hero background: /public/images/dog-hero.webp
- Service card 1: /public/images/service-bath.webp
- Service card 2: /public/images/service-styling.webp
Ensure all img tags have responsive widths and proper alt tags.

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

5. Компиляция артборда в код и наращивание бизнес-логики

Контекст: После сохранения выбранного артборда Claude Code приступает к написанию чистого кода страницы. Так как ключевые архитектурные и эстетические решения уже были приняты на канвасе, первый релиз кода получается чистым, предсказуемым и точно повторяет согласованный макет. Сразу после создания базовой верстки разработчик переходит к добавлению сложного бэкенд-функционала (системы бронирования, синхронизация с календарем, базы данных).

Тайминг: ▶ 04:15, ▶ 05:10, ▶ 05:33

Выгода: Разделение процесса на два независимых этапа: сначала безупречная верстка (UI), затем чистая логика (Logic). Это предотвращает регрессии в стилях при добавлении бэкенд-функций.

Как применить:

• Шаг 1: Запуск генерации кода по имени артборда — Claude Code CLI — Введите команду с точным указанием выбранного имени. Удалите ненужные варианты или укажите целевой артборд напрямую.

Build the complete responsive frontend based on artboard "Variant-2". Match all typography, colors, and layout spacing exactly as displayed in the saved canvas.

• Шаг 2: Верификация верстки — Локальный сервер / Браузер — Запустите локальный сервер (npm run dev) и визуально сопоставьте результат в браузере с утвержденным артбордом.
• Шаг 3: Наращивание бизнес-функционала — Claude Code CLI — В том же диалоге запросите добавление логики (API, базы данных, интеграции).

Now that the UI for Variant-2 is built:
1. Integrate a booking modal when the user clicks any "Book Now" CTA.
2. Connect the modal to our backend API endpoint /api/appointments.
3. Add calendar date-picker validation so users cannot select past dates.

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

6. Claude Code /design против Claude Design App: критерии выбора инструмента

Контекст: У Anthropic есть два схожих по названию инструмента: отдельное веб-приложение Claude Design и CLI-команда /design внутри Claude Code. Хотя интерфейс холста в них похож, сценарии применения кардинально различаются. Использование неправильного инструмента приводит к лишней рутине по экспорту/импорту файлов и потере контекста проекта.

Тайминг: ▶ 05:50, ▶ 06:06, ▶ 06:37

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

Сравнительная матрица применения:

Как применить:

• Шаг 1: Оценка конечного продукта — Если результатом работы должен стать рабочий веб-код (React, Vue, Next.js, HTML/Tailwind) — работайте исключительно через терминал Claude Code с вызовом /design.
• Шаг 2: Оценка графических задач — Если требуется создать разовый статический промо-материал (постер мероприятия, баннер для соцсетей, флаер в печать) — используйте отдельное веб-приложение Claude Design App, не засоряя рабочий репозиторий.

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

Claude Code /design: ответы на частые вопросы

В: Работает ли команда /design в классическом веб-интерфейсе Claude.ai? О: Нет, команда /design является встроенной слэш-командой для Claude Code — консольного инструмента (CLI) для разработчиков от Anthropic. В обычном веб-чате Claude.ai доступны артефакты, но полноценный интерактивный канвас артбордов вызывается именно через CLI.

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

В: Откуда Claude Code берет цвета и стили, если проект уже пишется? О: Поскольку Claude Code запускается непосредственно в папке вашего репозитория, он имеет доступ ко всем локальным файлам (tailwind.config.js, глобальные CSS-файлы, дизайн-токены, UI-библиотека). В промпте достаточно явно запретить придумывать новые стили и приказать использовать существующую систему.

В: Может ли Claude Code сам сгенерировать иллюстрации и фото для артборда? О: Нет, Claude — это языковая модель, она генерирует код, тексты и SVG-разметку, но не растровые картинки. Для фотореалистичных изображений используйте внешние генераторы (Midjourney, Higgsfield, Nano Banana API) и помещайте готовые файлы в директорию проекта.

В: Что произойдет, если я закрою канвас без нажатия кнопки Save? О: Ваши ручные правки на холсте могут быть утеряны. Перед тем как возвращаться в консоль Claude Code и передавать имя артборда для генерации кода, обязательно нажмите кнопку Save в правом верхнем углу интерфейса артборда.

В: Насколько стабильна функция /design сейчас? О: Функция находится в статусе Research Preview. Интерфейс, возможности редактирования и поведение инструментов активно дорабатываются разработчиками Anthropic и могут обновляться еженедельно.

Claude Code /design: инструменты и ссылки из видео

• Claude Code — Официальный консольный CLI-агент от компании Anthropic для работы с кодовой базой — упомянут в видео.
• Mobbin — Обширная библиотека интерфейсов и дизайн-паттернов реальных мобильных и веб-приложений (mobbin.com) — упомянут в видео.
• Higgsfield — Платформа для генерации графических и видео-ассетов при помощи ИИ — упомянута в видео.
• Nano Banana API — API-инструмент для генерации изображений — упомянут в видео.

Конспект создан на основе видео «Claude Code Just Changed How We Design (Slash Design Command)» канала AI/Dev Insights. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=Fqlc0N1qyMo