# 21st.dev Magic MCP: красивые UI вместо AI-слопа

21st.dev помогает дать агенту нормальные UI-компоненты, логотипы, референсы и визуальное направление до того, как ты выложишь проект в прод.

- Источник: https://21st.dev/mcp
- GitHub: https://github.com/21st-dev/magic-mcp
- npm: https://www.npmjs.com/package/@21st-dev/magic

## 1. 21st MCP

21st MCP дает агенту доступ к каталогу компонентов, тем, шаблонов и SVG-логотипов. Это не просто "сгенерируй кнопку", а нормальная база референсов и готовых UI-блоков.

Установка:

```
npx @21st-dev/cli@latest init --client claude
```

Для Codex:

```
npx @21st-dev/cli@latest init --client codex
```

Если нужен ручной вариант:

```
{ "mcpServers": { "21st": { "url": "https://21st.dev/api/mcp", "headers": { "x-api-key": "YOUR_21ST_API_KEY" } } } }
```

врезка `// Важно`: текст «Старый Magic MCP теперь заменен на единый 21st MCP. Старые ключи Magic могли быть сброшены, новый ключ лучше брать на https://21st.dev/mcp.»

## 2. Поиск референсов до генерации

Перед задачей "сделай страницу" попроси агента сначала найти визуальное направление:

```
Перед версткой найди 3-5 подходящих UI-референсов через 21st.dev: - для SaaS/личного бренда/лендинга/дашборда; - без generic AI-slop: без случайных glow, стеклянных карточек и одинаковых градиентов; - с нормальной сеткой, состояниями кнопок, адаптивом и реальными логотипами. Сначала предложи направление, потом генерируй компонент.
```

## 3. Генерация и проверка компонента

- [ ] есть ли нормальная иерархия: заголовок, действие, вторичная информация
- [ ] нет ли пустых декоративных блоков ради "красоты"
- [ ] используются ли реальные логотипы или аккуратные заглушки, а не случайные кружочки
- [ ] адаптив не ломается на мобильном
- [ ] кнопки, поля, состояния hover/focus/loading выглядят как часть одной системы
- [ ] код можно забрать в React/Tailwind/shadcn без ручного переписывания всего файла

Финальная проверка перед публикацией:

```
Проверь этот интерфейс на AI-slop:

1. где дизайн выглядит шаблонно;
2. какие элементы выглядят случайными;
3. где не хватает реальных состояний;
4. что сломается на mobile;
5. какие 3 правки дадут самый дорогой визуальный эффект.
```

---

Источник: https://localhost:3000/m/3-veshi-kotorye-nuzhno-podklyuchit-pered-publikaciej-vajbkod-sajta