ГлавнаяМатериалы из Reels/ShortsЧек-лист
Чек-лист
кодовое слово21

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

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

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. Поиск референсов до генерации

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

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

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

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

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

Промт 27 строк · 230 знаков
Проверь этот интерфейс на AI-slop:

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