Агент без специальной инструкции по дизайну почти всегда выдаёт один и тот же результат: шрифт Inter, фиолетовый градиент, одинаковые скруглённые карточки. В Claude Code для этой проблемы есть два разных инструмента — официальный скилл Frontend Design и интеграция /design с продуктом Claude Design. Они решают её на разных уровнях, и путать их не стоит.
Frontend Design — официальный скилл Anthropic, который задаёт агенту эстетическое направление и типографику прямо в коде, а /design открывает интерактивные макеты Claude Design внутри той же сессии Claude Code. Первый работает с кодом, второй — с макетами до кода. В статье: honest-сравнение, когда подключать каждый и как они дополняют друг друга.
Что не так с дизайном по умолчанию у AI-агентов?
Без явной инструкции агент выбирает самые вероятные паттерны из обучающих данных: тёплый кремовый фон с терракотовым акцентом, карточки с одинаковым скруглением, серую тень под каждым блоком. Это не баг конкретной модели, а статистика.
Anthropic сама называет это «AI slop» — технически рабочий, но визуально неотличимый от тысяч других AI-интерфейсов результат. Официальный скилл frontend-design из репозитория anthropics/claude-code прямо перечисляет узнаваемые тревожные признаки: фон около #F4F1EA с терракотовым акцентом #D97757, ALL-CAPS лейблы над заголовками, стрелка «→» в конце каждой кнопки.
Проблема не в том, что агент не умеет верстать. Он умеет. Проблема в том, что без направления он выбирает центр вероятностного распределения, а не осознанное решение. Отсюда и два разных по природе инструмента для одной боли: один работает с кодом на этапе реализации, второй — с макетом ещё до того, как написана первая строка CSS.
Что делает Frontend Design skill в Claude Code?
Frontend Design — официальный скилл Anthropic для Claude Code, Codex и Gemini CLI. Он заставляет агента сначала выбрать конкретное эстетическое направление, а затем реализовать его в коде через CSS-переменные, типографику и осознанную анимацию.
По данным Composio и нескольких независимых обзоров skill-каталогов, у официального frontend-design от Anthropic счёт установок перевалил за 277 000 к марту 2026 года — это самый популярный скилл именно в категории дизайна. Скилл прямо запрещает агенту использовать безопасные дефолты вроде Inter, Roboto или Arial и требует сначала описать палитру, типографику и layout-концепцию, прежде чем открывать редактор кода.
Работает это в два прохода. Сначала агент строит компактную систему токенов: 4-6 именованных hex-цветов, роли шрифтов, ASCII-вайрфрейм layout. Потом он же критикует собственный план — проверяет, не скатился ли он в один из узнаваемых дефолтов, и только после этого пишет код. Получившийся интерфейс — это HTML/CSS/JS или React-компонент с реальными CSS-переменными под конкретную эстетику, а не декоративный слой поверх шаблона.
Что такое /design и Claude Design в Claude Code?
/design — скилл, который вызывает продукт Claude Design прямо из сессии Claude Code, минуя необходимость переносить контекст вручную. Claude Design — отдельный визуальный продукт Anthropic на базе Opus, запущенный в апреле 2026 года.
До появления скилла процесс выглядел так: сначала брейншторм и спецификация в Claude Code, потом эта информация вручную переносится в отдельное приложение Claude Design, там собирается макет, и уже готовый результат отправляется обратно в Claude Code на реализацию. Три отдельных шага с ручным переносом контекста между ними.
Теперь /design вызывается прямо из терминала или интерфейса Claude Code. Артефакт с макетом появляется тут же — в терминале внизу окна, в интерфейсе справа. Агент видит весь контекст проекта: какие скиллы подключены, какие MCP настроены, какая дизайн-система уже используется в кодовой базе. Это не про красивый CSS конкретного компонента — это про интерактивный прототип целого экрана с состояниями, который можно комментировать и править до реализации.
В чём разница между Design Skill и Frontend Design Skill?
Frontend Design работает на уровне кода и отвечает за то, как выглядит готовый интерфейс. /design и Claude Design работают на уровне прототипа и отвечают за то, что вообще нужно построить, до написания кода.
Разница не в масштабе одного и того же, а в том, на каком этапе процесса инструмент вмешивается. Frontend Design встраивается в момент, когда Claude Code уже пишет разметку и стили — он не рисует интерактивный макет, он определяет типографику, палитру и layout прямо в финальном коде. /design встраивается раньше — когда нужно быстро посмотреть варианты интерфейса, подвигать элементы, обсудить с заказчиком до того, как хоть строчка кода попала в репозиторий.
| Параметр | Frontend Design skill | /design (Claude Design) |
|---|---|---|
| Что производит | Готовый код: HTML/CSS/JS, React-компоненты | Интерактивный макет-артефакт для обсуждения |
| Этап процесса | Реализация | Прототипирование до реализации |
| Формат работы | Автоматически при генерации UI-кода | Вызывается явно как /design |
| Контекст проекта | Читает существующие токены и компоненты | Читает всю сессию: скиллы, MCP, бота, лендинг |
| Комментирование | Нет — правки только через промпт | Есть (в статусе preview, с багами) |
| Где хранится результат | В кодовой базе | В артефакте сессии, публикуется отдельно |
Можно ли использовать оба скилла вместе?
Да, они не конкурируют. Логичный порядок: сначала /design для согласования визуального направления на уровне макета, затем Frontend Design для точной реализации этого направления в коде.
На практике связка выглядит так: вызываете /design, обсуждаете макет, докручиваете акцентные цвета и layout прямо в артефакте, убираете лишние элементы вроде интерактивной карты, если она не нужна для задачи. Когда макет устраивает — прикрепляете его к спецификации и передаёте в реализацию. Frontend Design подключается уже на этом шаге и следит, чтобы код не свалился в дефолтные паттерны, даже если визуальное направление уже определено макетом.
Отдельно это особенно ценно на новом проекте с нуля, где важна цельная визуальная концепция с самого начала. На проекте, который уже живёт, где дизайн-система в коде уже есть, можно обойтись одним Frontend Design — агент подтянет существующие токены сам, без необходимости заново их описывать в отдельном инструменте.
Design Skill или Frontend Design Skill — что выбрать для своей задачи?
Если нужен готовый интерфейс здесь и сейчас — Frontend Design. Если нужно сначала обсудить, как это должно выглядеть, и показать несколько вариантов — /design.
Для разовой правки существующей страницы или быстрой генерации нового компонента Frontend Design работает быстрее — не нужно проходить через отдельный этап согласования макета. Для задачи, где важно сначала визуально договориться — с собой, с клиентом, с командой — прежде чем тратить время агента на реализацию, /design экономит именно это время, потому что макет можно откатить и переделать за секунды, не трогая код.
Максим: «Веб-версия GoBanana была собрана за 3 часа после выхода модели, суммарно на продукт ушло 6-8 часов — и он принёс 12 миллионов рублей. Когда не нужно тратить время на перенос контекста между отдельными инструментами, скорость собирается именно из таких кусков.»
Какие у обоих скиллов честные ограничения?
Оба скилла заметно поднимают базовый уровень результата по сравнению с генерацией вообще без инструкции по дизайну. Ни один не заменяет профессионального дизайнера на сложных и нестандартных продуктах.
У /design и Claude Design пока нет синхронизации макета с реальной кодовой базой из коробки — макет живёт отдельно от того, что реализовано, и обновлять их приходится вручную. Функция комментирования у /design находится в статусе preview: она периодически работает нестабильно — вместо режима комментария иногда открывается панель свойств элемента. Сам Claude Design тоже официально в бете.
У Frontend Design ограничение другое: скилл силён в отдельно взятом экране или компоненте, но не заменяет продуманную информационную архитектуру всего продукта — это по-прежнему задача человека или отдельного этапа брейншторма. На сложных, нестандартных продуктах, где нужна уникальная творческая концепция, а не просто честная реализация без AI slop, ценность профессионального дизайнерского взгляда никуда не делась.
Часто задаваемые вопросы
Нужно ли устанавливать Frontend Design отдельно?
Да, это устанавливаемый скилл из репозитория anthropics/claude-code или anthropics/skills. Устанавливается командой вида npx skills add anthropics/skills --skill frontend-design или через /plugin внутри Claude Code.
Работает ли /design без подписки на Claude Design?
/design вызывает функциональность Claude Design внутри сессии Claude Code, поэтому доступ к продукту Claude Design нужен для полноценной работы скилла.
Что произойдёт, если использовать только Frontend Design без /design?
Ничего критичного — просто процесс согласования визуального направления будет проходить в тексте промпта или в голове, а не в интерактивном макете.
Подходит ли /design для команд, а не только для соло-вайбкодеров?
Да, макет можно опубликовать по ссылке (например, через Vercel) и обсудить с командой или клиентом до начала реализации.
Заменяют ли эти скиллы дизайнера полностью?
Нет. Они убирают типовую AI-шаблонность на базовом уровне, но не дают уникальную творческую концепцию для сложных нестандартных продуктов.
Можно ли подключить оба скилла в один проект без конфликтов?
Да, они работают на разных этапах процесса и не пересекаются: /design — до кода, Frontend Design — во время написания кода.
Насколько стабильна функция комментирования в /design?
На момент выхода скилл находится в статусе preview, и комментирование иногда работает нестабильно — это подтверждает сама Anthropic в описании версии.
Подробнее про инструменты для вайбкодинга — в каталоге AI-инструментов VibeCoderz. Если нужна помощь с выбором стека под конкретный проект — запишитесь на консультацию к Максиму.
