Нарисуй и построй: навык /design в Claude Code
Навык /design создаёт артборды интерфейсов прямо в Claude Code — выберите понравившийся вариант и попросите Claude построить. Без Figma.
Евгений Арсентьев · PhDПроверено на точность — Евгений Арсентьев, PhD · 2026-09-30
Навык /design делает то, чего я не ожидал от инструмента для разработки: позволяет сначала нарисовать интерфейс, а потом его построить. Описываете задачу обычными словами, Claude генерирует холст с несколькими вариантами UI, вы выбираете понравившийся — и Claude реализует его в виде настоящего кода. Я строю продукты с Claude Code каждый день, и впервые этап дизайна ощущается не прикрученным сбоку, а родным.
Что такое /design в Claude Code?
Запускаете /design с коротким описанием задачи — Claude публикует холст артбордов: набор визуальных макетов, показывающих разные направления для вашего интерфейса. Артборды построены на Артефактах, поэтому открываются в браузере как интерактивные превью, которые можно сравнить бок о бок. Выбираете понравившийся вариант, говорите Claude реализовать его — и он превращает макет в работающий код. Никаких переключений в Figma, никакого экспорта, никакого разрыва между «вот как должно выглядеть» и «а теперь сделай это реальным». Весь цикл — от описания до кода — остаётся в одном разговоре.
/design — бета-функция. По умолчанию доступна на планах Pro, Max и Team; на Enterprise её включает администратор (Owner) в Organization settings > Artifacts. Требует Claude Code v2.1.265 или новее. Проверьте версию командой claude --version.
Как использовать /design: пошаговая инструкция
От описания до готового UI за четыре шага
- 1Опишите задачу обычными словами — что за фича, для кого, какую проблему решает. Дизайнерский словарь не нужен: 'переделай панель ввода, исходя из того, чем люди реально пользуются' — отличный бриф.
- 2Запустите /design с вашим описанием: например, /design экран настроек для небольшого таск-менеджера, мобильная версия. Claude создаёт холст артбордов и печатает ссылку.
- 3Откройте ссылку, сравните варианты и выберите направление. Можно попросить правки прямо в чате: 'сделай шапку меньше', 'тёмный фон', 'добавь строку поиска'.
- 4Скажите Claude реализовать выбранный вариант: 'построй вариант 2'. Claude пишет код и применяет его к вашему проекту — в той же сессии, без копирования.
Что можно проектировать через /design?
Всё, у чего есть интерфейс. Я бы использовал для лендингов, экранов настроек, онбординга, дашбордов и модальных окон — словом, для всего, что обычно сначала рисуют на салфетке. Бриф может быть функциональным ('форма входа, которая работает и как форма регистрации') или стилистическим ('чище, больше воздуха, ощущение как у Linear'). Claude понимает оба варианта. Можно и итерировать: посмотрели первый холст, попросили ещё варианты — и только потом выбрали.
После артборда: шаг сборки
Артборд — не статичная картинка, а живое превью внутри Артефактов. Когда вы говорите Claude построить вариант N, он читает артборд и создаёт реализацию на стеке вашего проекта — React, обычный HTML или что угодно ещё. История разговора сохраняется, поэтому Claude уже знает структуру проекта и не нужно объяснять заново. Если первая сборка не совсем совпадает с макетом, описывайте расхождение ('отступы выглядят не так') — Claude поправит.
Практика: первый запуск /design за 10 минут
0/6Обычный рабочий процесс: слова → код, надеяться, что выглядит правильно. /design переворачивает его: слова → визуал → код, знать, что выглядит правильно. Для тех, кто терял час на CSS, потому что идея в голове не пережила перевод в код — это та самая фича, которую стоит попробовать.
Бесплатный курс
Хватит читать про ИИ — начни строить с ним
Бесплатный курс Claude Code: свой первый сайт, инструмент или игра — без программирования. Без апсейлов и кросс-сейлов — здесь нечего купить.
Начать →Автор
Евгений Арсентьев
PhD · CEO, digital health
Чтение — хорошее начало
Хочешь реально это построить?
Гайды объясняют. Бесплатный курс превращает — персонально, с геймификацией и заточенный на быстрый запуск.
Начать бесплатный курс →