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

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

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

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

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

Под капотом /design читает базу из 96 палитр, 67 стилей и 57 шрифтовых пар — и подбирает подходящее под твою индустрию. /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. Найди расширение от Anthropic и нажми Install

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

1. После установки в левой панели появится иконка Claude Code — нажми её
2. Нажми Sign In и войди или создай аккаунт Anthropic

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

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

What is 2 + 2?

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

Есть и второй способ установки — через терминал (npm install -g @anthropic-ai/claude-code). Подробная инструкция по обоим вариантам — в отдельном гайде.

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

ui-ux-pro-max — открытый скилл с базой данных дизайна: 96 цветовых палитр, 67 стилей, 57 шрифтовых пар, 161 правило по индустриям.

Убедись что установлен Node.js 18+. Проверить:

node --version

Если не установлен — скачай с nodejs.org (кнопка LTS).

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

npm install -g uipro-cli

uipro init --ai claude --global

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

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

ls ~/.claude/skills/

Должна появиться папка ui-ux-pro-max. Это и есть база данных которую будет читать 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.dev MCP

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

Зарегистрируйся на 21st.dev и получи API-ключ (бесплатный аккаунт, кнопка "Get started").

Открой настройки Claude Code (иконка шестерёнки в панели Claude Code) и добавь конфигурацию MCP сервера:

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "TWENTY_FIRST_API_KEY": "твой_ключ_сюда"
      }
    }
  }
}

Замени твой_ключ_сюда на API-ключ из личного кабинета 21st.dev. Сохрани и перезапусти Claude Code.

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

Напиши в Claude Code:

/design landing page for a SaaS tool

Если в ответе появились реальные примеры компонентов от 21st.dev — MCP подключён успешно.

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

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

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

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

Если устанавливал через VS Code — нажми Cmd+L (Mac) или Ctrl+L (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 и напишет готовый код. Вставляй в проект.

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

Задача	Команда
Дизайн-бриф по проекту	/design [описание]
Генерировать компонент	/ui-ux-pro-max build [что нужно]
Переопределить цвет	Добавь в запрос: use #FF6B00 as primary color
Проверить MCP	claude mcp list