Гайд · Design stack

21st.dev MCP: UI как у Linear без дизайнера

Промпт в Claude Code → 3 варианта компонента → выбираешь → готовый React + Tailwind код. Как собирать интерфейс уровня Linear/Stripe без Figma и дизайнера.

Формат: MCP + промпт-шаблоны Время: ~15 минут Уровень: Базовый

Что внутри гайда

Установка 21st.dev MCP в Claude Code — за 2 минуты
Структура промпта: hero / pricing / dashboard / nav — что работает, что нет
Готовые шаблоны для DeFi-аналитики, SaaS-лендинга, дашборда
Лимиты бесплатного плана и когда стоит платить
Как комбинировать с другими MCP (Magic UI, shadcn/ui)

Как работает

MCP + промпт + код

21st.dev — это MCP-сервер для Claude Code. Внутри — библиотека из 5000+ premium UI-компонентов от лучших дизайнеров мирового уровня (с лицензией для коммерческого использования).

Ты пишешь промпт на русском или английском («hero для DeFi-аналитики, floating cards, фиолетовый акцент, в стиле Linear»). Claude через MCP обращается к 21st.dev, получает 3 варианта, ты выбираешь — на выход готовый React + Tailwind, который копируешь в проект.

Установка

2 минуты

# 1. Получить токен на 21st.dev
# 2. Прописать в ~/.claude/config.json:
{
  "mcps": {
    "21st-dev": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic"],
      "env": { "API_KEY": "your-token-here" }
    }
  }
}

# 3. Перезапустить Claude Code

Всё. В новой сессии можно писать промпты с упоминанием 21st.dev — Claude сам подключит компонент.

Структура удачного промпта

Что важно указать

Тип компонента: hero / pricing / dashboard / nav / card
Контекст: для чего (SaaS, DeFi, e-commerce)
Стиль-референс: «как у Linear», «как у Stripe», «как у Vercel»
Цветовая палитра: тёмный/светлый, акцент
Особенности: floating cards, glass effect, gradient, animated

В Mini App — 20 готовых промптов для типовых страниц.

Забери материал в Telegram

Подпишись на канал, заполни короткую анкету — гайд откроется в Mini App.

Открыть в Telegram →

КОДОВОЕ СЛОВО · ЮАЙ