Claude Code: Руководство по настройке дизайн-стека

Что входит в стек

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

Обзор компонентов

Зачем нужен каждый инструмент

CLAUDE.md (Шаг 01) — это «мозг» дизайн-системы. Файл содержит принципы верстки, правила отступов и паттерны компонентов. Claude автоматически читает его при каждом запуске в вашем проекте.

MCP-серверы (Шаг 02) — это «глаза» Claude Code. Google Stitch и Nano Banana 2 предоставляют доступ к внешним базам дизайн-паттернов в реальном времени, чтобы Claude не изобретал велосипед.

21st.dev (Шаг 03) — это «руки» Claude Code. Готовые компоненты — 3D-элементы, анимации, реактивный UI — подключаются напрямую, минуя ручную реализацию.

Итоговый результат

После настройки всех трёх инструментов Claude Code будет автоматически применять профессиональные дизайн-принципы, использовать проверенные паттерны и подключать готовые компоненты — без дополнительных инструкций с вашей стороны.

Перед началом: требования

Убедитесь, что у вас установлены и работают следующие инструменты, прежде чем переходить к установке стека.

Необходимое программное обеспечение

Проверка версий

Запустите следующие команды для проверки установленных версий:

# Проверьте ваши версии
$ node --version
$ npm --version
$ claude --version

Установка Claude Code

Совет: Если Claude Code ещё не установлен, выполните команду ниже, а затем пройдите аутентификацию с вашим аккаунтом Anthropic.

# Установка Claude Code глобально
npm install -g @anthropic-ai/claude-code

Пошаговая установка

Выполняйте шаги строго по порядку. Каждый следующий шаг опирается на предыдущий.

Шаг 01: Установка UX/UI Design Skill с GitHub (бесплатно)

Файл навыка CLAUDE.md добавляется в ваш проект. Он даёт Claude Code настоящую дизайн-систему — принципы верстки, паттерны компонентов, правила отступов — встроенные с самого начала.

Перейдите в папку вашего проекта, затем выполните команду ниже для загрузки файла навыка.

# Перейдите в ваш проект
$ cd your-project-folder

# Загрузите UX/UI навык в корень проекта
$ curl -O https://raw.githubusercontent.com/[repo-link]/main/CLAUDE.md

Важно: Claude Code автоматически читает любой файл CLAUDE.md в директории проекта. После установки дизайн-система загружается автоматически при каждом запуске Claude Code в этом проекте. Дополнительных действий не требуется.

Шаг 02: Установка Google Stitch MCP + Nano Banana 2 (бесплатно)

MCP-серверы дают Claude доступ к внешним референсам. Эти два инструмента предоставляют ему реальные дизайн-паттерны при создании интерфейсов. Установите оба с помощью встроенного MCP-установщика Claude Code.

Установка Google Stitch:

# Установка Google Stitch MCP
$ claude mcp add google-stitch

Установка Nano Banana 2:

# Установка Nano Banana 2 MCP
$ claude mcp add nano-banana-2

Совет: Проверьте корректность установки обоих MCP командой: claude mcp list — оба должны отображаться как активные.

Шаг 03: Подключение библиотеки компонентов 21st.dev (есть бесплатный тариф)

21st.dev — это библиотека компонентов, к которой Claude Code обращается напрямую: 3D-элементы, анимированные компоненты, реактивный UI. Создайте бесплатный аккаунт на 21st.dev, получите API-ключ в личном кабинете, затем выполните команду установки ниже.

# Замените YOUR_API_KEY_HERE на ваш ключ с 21st.dev
$ claude mcp add 21st-dev --api-key YOUR_API_KEY_HERE

Внимание: Держите API-ключ в тайне. Не вставляйте его в общие файлы и не коммитьте в Git. Эта команда надёжно сохраняет ключ в локальном конфиге Claude Code.

Проверка и тестирование

После установки всех трёх инструментов выполните финальную проверку, чтобы убедиться, что стек работает корректно.

Тестовый запрос

Откройте Claude Code в вашем проекте и вставьте промпт ниже. Если все три инструмента работают, Claude обратится к дизайн-навыку, сошлётся на реальные паттерны через MCP и использует компонент 21st.dev для 3D-элемента.

Тестовый промпт — вставьте в Claude Code:

Build me a landing page hero section with a 3D animated gradient background, a bold headline, a subheadline, and a CTA button. Use 21st.dev components for the 3D elements. Follow the UX/UI design skill guidelines for layout and spacing. Reference best-practice hero patterns from Stitch and Nano Banana.

Признаки успешной работы

Устранение неполадок

Совет: Если какой-то из признаков отсутствует в результате — проверьте, какой инструмент не установился, командой: claude mcp list

Если список MCP пуст или инструмент не отображается как активный — повторите соответствующий шаг установки. Убедитесь, что вы находитесь в правильной директории проекта при запуске Claude Code.

Часто задаваемые вопросы