Как сделать красивый UI с помощью Claude Code за две команды

В этом гайде — три шага установки и две команды, которые показаны в видео. После прочтения сможешь сам генерировать дизайн-брифы и готовые UI компоненты.

Обновлено 16 октября 2026: новые команды установки ui-ux-pro-max, переезд Magic MCP в 21st MCP, актуальные цифры базы.

Как это работает

Две команды, два шага:

1. /design — описываешь что строишь, получаешь дизайн-бриф: стиль, цветовая палитра с hex-кодами, шрифты, структура страницы, что не делать
2. /ui-ux-pro-max — берёт этот бриф и генерирует готовый код компонента

Под капотом /design читает базу из 192 палитр, 79 стилей и 74 шрифтовых пар — и подбирает подходящее под твою индустрию. /ui-ux-pro-max использует эти данные плюс реальные компоненты из 21st.dev, чтобы написать код.

Шаг 1: Установи Claude Code

Если уже установлен — переходи к шагу 2.

Установи VS Code

1. Открой браузер и зайди на code.visualstudio.com
2. Нажми кнопку Download для своей ОС (Mac, Windows или Linux)
3. Открой скачанный файл и следуй шагам установщика
4. Когда закончит — открой VS Code

Установи расширение Claude Code

1. В левой панели VS Code нажми иконку Extensions (четыре квадрата)
2. В поиске введи Claude Code
3. Найди расширение Claude Code от Anthropic и нажми Install (нужен VS Code 1.94 или новее)

Войди в аккаунт

1. Открой любой файл — в правом верхнем углу редактора появится иконка-искра Claude Code. Нажми её
2. Нажми Sign in и заверши вход в браузере. Подойдёт любая платная подписка Claude (Pro, Max, Team) или аккаунт Claude Console

Проверь что работает

Напиши в панели Claude Code:

What is 2 + 2?

Если ответил "4" — готово, переходи к шагу 2.

Есть и второй способ — через терминал. Anthropic сейчас рекомендует нативный установщик (curl -fsSL https://claude.ai/install.sh | bash), он сам обновляется. Через npm тоже можно, но нужен Node.js 22+. Подробно по обоим вариантам — в гайде как установить Claude Code.

Шаг 2: Установи скилл ui-ux-pro-max

ui-ux-pro-max — открытый скилл с базой данных дизайна: 192 цветовые палитры, 79 стилей, 74 шрифтовые пары, 192 правила по индустриям. Подробный разбор скилла — в отдельной статье.

Понадобятся Node.js (для установщика) и Python 3 (скилл ищет по базе Python-скриптом). Проверить:

node --version
python3 --version

Если чего-то нет — скачай Node.js с nodejs.org (кнопка LTS), а Python — с python.org.

Установи через CLI:

npm install -g ui-ux-pro-max-cli

uipro init --ai claude --global

Флаг --global устанавливает скилл для всех проектов сразу — не нужно повторять для каждой папки.

Раньше здесь был пакет uipro-cli. Он устарел (застрял на версии 2.2.3 от января 2026), автор скилла просит ставить ui-ux-pro-max-cli. Команда после установки та же — uipro. Если старый пакет уже стоит, удали его: npm uninstall -g uipro-cli.

После установки проверь:

ls ~/.claude/skills/

Должна появиться папка ui-ux-pro-max, а в ней data/ с CSV-файлами. Это и есть база данных, которую будет читать Claude.

Шаг 3: Создай скилл /design

/design — лёгкий скилл-советник. Он читает данные из ui-ux-pro-max и выдаёт структурированный дизайн-бриф. Создаётся вручную за минуту.

Создай папку:

mkdir -p ~/.claude/skills/design

Создай файл ~/.claude/skills/design/SKILL.md со следующим содержимым:

---
name: design
description: "Design advisor: gives color palette, typography, page structure and anti-patterns for any project type"
---
# Design Advisor

## Overview
Provide industry-specific UI/UX recommendations before building.
Search design data files to give actionable recommendations
with hex codes, font pairings, layout patterns, and anti-pattern warnings.

## Workflow
1. Identify the industry/product type from the user's request
2. Search relevant CSV data files in ~/.claude/skills/ui-ux-pro-max/data/
3. Cross-reference with design vocabulary for proper terminology
4. Search 21st.dev for real component examples (if MCP available)
5. Present structured recommendations with implementation details

## Data Files
Search these CSV files based on what the user needs:
- colors.csv — industry color palettes (primary, secondary, CTA, bg, text, border)
- typography.csv — font pairings with mood, use cases, Google Fonts links
- ui-reasoning.csv — industry design patterns, anti-patterns, severity
- styles.csv — visual design styles and implementation details
- landing.csv — landing page layout patterns and CTA strategies
- ux-guidelines.csv — UX do/don't rules with code examples
- charts.csv — data visualization recommendations

## Output Format
Structure your response as:
- Style Direction (recommended visual style and why)
- Color Palette (hex codes with roles)
- Typography (font pairing with Google Fonts link)
- Page Structure (section order and CTA placement)
- Key Effects (animations and interactions)
- Anti-Patterns (what to avoid, with severity)
- 21st.dev Examples (real components, if MCP available)
- Next Step (a /ui-ux-pro-max command to start building)

Шаг 4: Подключи 21st MCP

21st.dev — библиотека готовых компонентов. Когда MCP подключён, Claude находит реальные примеры под твой запрос и использует их при генерации кода.

В июле 2026 Magic MCP от 21st.dev заменили на единый 21st MCP. Старые ключи Magic сброшены: если ты ставил MCP по прошлой версии этого гайда, получи новый ключ и подключи заново.

Зайди на 21st.dev/mcp, войди и создай API-ключ. Бесплатно доступны поиск компонентов и до двух установок в день; генерация компонентов силами самого 21st (21st AI) идёт за кредиты платного плана. Для нашей связки хватает бесплатного: код пишет Claude, а 21st даёт ему примеры.

Дальше одна команда в терминале. Это обычный HTTP MCP-сервер, Claude Code подключает его сам:

claude mcp add --transport http 21st https://21st.dev/api/mcp --header "x-api-key: твой_ключ_сюда"

Замени твой_ключ_сюда на ключ из кабинета 21st.dev и перезапусти Claude Code. Второй вариант — официальный установщик 21st: npx @21st-dev/cli@latest init --client claude.

Проверь подключение

Напиши в Claude Code:

/design landing page for a SaaS tool

Если в ответе появились реальные примеры компонентов от 21st.dev — MCP подключён успешно. Статус сервера можно проверить и командой claude mcp list: рядом с 21st должно стоять Connected.

Если примеров нет — скилл всё равно работает, просто без визуальных примеров. Можешь вручную зайти на 21st.dev и найти компоненты по названиям которые советует Claude.

Как пользоваться

Теперь всё готово.

Если устанавливал через терминал — открой терминал в папке проекта и запусти claude.

Если устанавливал через VS Code — нажми иконку-искру в правом верхнем углу редактора или Cmd+Esc (Mac) / Ctrl+Esc (Windows), чтобы перейти в панель Claude Code.

Шаг A: получи дизайн-бриф

/design landing page for a SaaS project management tool

Claude прочитает базу данных и вернёт бриф:

• Style Direction — рекомендованный визуальный стиль и почему он подходит
• Color Palette — hex-коды с ролями (primary, secondary, CTA, background, text, border)
• Typography — пара шрифтов со ссылкой на Google Fonts
• Page Structure — порядок секций и где ставить CTA
• Key Effects — какие анимации использовать
• Anti-Patterns — что не делать для этой индустрии
• Next Step — готовая команда для генерации компонента

Другие примеры:

/design dashboard for a fintech portfolio tracker

/design homepage for a local restaurant

Шаг Б: сгенерируй компонент

После того как получил бриф — строй компонент:

/ui-ux-pro-max build a hero section using the design brief above

Claude возьмёт палитру, шрифты и стиль из брифа, найдёт подходящие компоненты на 21st.dev и напишет готовый код. Вставляй в проект.

Если нужна анимация — плавные появления, моушн в hero, видео-фон, — смотри раздел «Видео и анимация»: там готовые промпты для моушн-графики и библиотеки анимированных компонентов.

Краткая шпаргалка

Что дальше

• ui-ux-pro-max: что умеет скилл и как выжать из него максимум
• Три дизайн-скилла против generic-UI: Impeccable, Emil Design Eng, Design Taste
• Красивый дизайн сайта за 2 минуты: готовые промпты
• Видео и анимация с Claude Code
• Каталог скиллов с командами установки

Источники

1. GitHub — nextlevelbuilder/ui-ux-pro-max-skill (установка, состав базы, пакет ui-ux-pro-max-cli)
2. GitHub — 21st-dev/magic-mcp (переход Magic MCP → 21st MCP)
3. 21st.dev/mcp (ключ и бесплатные лимиты)
4. Claude Code — расширение для VS Code
5. Claude Code — подключение MCP-серверов
6. Claude Code — установка