# 5 инструментов, чтобы Claude и Codex делали нормальный интерфейс

Набор для фронтенда, который закрывает пять слабых мест AI-кода: компоненты, генерацию UI, дизайн-правила, ревью и проверку в браузере.

## Где взять

| Что | Зачем | Где открыть |
| --- | --- | --- |
| **shadcn/ui MCP** | Поиск и установка компонентов из shadcn-совместимых registry. | https://ui.shadcn.com/docs/registry/mcp |
| **21st MCP / Magic MCP** | Каталог React/Tailwind-компонентов и генерация новых интерфейсов. | https://github.com/21st-dev/magic-mcp |
| **Frontend Design Plugin** | Skill Anthropic для более выразительного production-фронтенда. | https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/README.md |
| **Vercel Web Interface Guidelines** | Правила и ревью интерфейса для AI-coding workflow. | https://github.com/vercel-labs/web-interface-guidelines |
| **Chrome DevTools MCP** | Живой Chrome для проверки консоли, DOM, performance и визуальных багов. | https://github.com/ChromeDevTools/chrome-devtools-mcp |

## Команды

| Инструмент | Команда |
| --- | --- |
| **shadcn MCP** | `pnpm dlx shadcn@latest mcp init --client claude` |
| **21st MCP** | `npx @21st-dev/cli@latest init --client claude` |
| **Vercel Guidelines** | `npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines` |
| **Chrome DevTools MCP** | `npx -y chrome-devtools-mcp@latest` |

## Логика набора

- [ ] shadcn/ui MCP даёт Claude доступ к готовым кнопкам, меню, формам и паттернам.
- [ ] 21st MCP помогает искать готовые React/Tailwind-блоки и генерировать новые UI-варианты.
- [ ] Frontend Design Plugin задаёт эстетическое направление, чтобы интерфейс не выглядел как дефолтный AI-макет.
- [ ] Vercel Guidelines нужны для ревью готового фронтенда по понятным правилам.
- [ ] Chrome DevTools MCP показывает реальный браузер: ошибки консоли, сломанные стили, сетевые запросы.

## Порядок установки и проверки

- [ ] Начни с компонентной базы проекта: shadcn/ui или другой совместимый registry.
- [ ] Подключи shadcn MCP по инструкции из документации и проверь командой /mcp.
- [ ] Поставь 21st MCP через официальный CLI или добавь сервер вручную в конфиг клиента.
- [ ] Добавь Frontend Design как skill/плагин там, где работаешь с фронтендом.
- [ ] Поставь Web Interface Guidelines и проси модель прогонять по ним уже готовый экран.
- [ ] Подключи Chrome DevTools MCP и проверяй результат не по скриншоту, а в настоящем Chrome.

## Что просить у модели

- [ ] Сначала попроси выбрать UI-паттерн под задачу, а не сразу писать код.
- [ ] Заставь использовать существующие компоненты проекта, если они есть.
- [ ] После генерации попроси отдельное дизайн-ревью: сетка, состояния, пустые экраны, mobile.
- [ ] Попроси открыть страницу в Chrome и перечислить реальные ошибки консоли.
- [ ] Финальным шагом попроси список файлов и строк, где нужны правки.

## Красные флаги

- [ ] Модель рисует лендинг вместо рабочего экрана.
- [ ] Все элементы выглядят одинаково, нет иерархии и состояний.
- [ ] Кнопки и поля есть, но нет empty/loading/error-состояний.
- [ ] Нет проверки в браузере: только уверенный текст, что всё работает.
- [ ] Компоненты тянутся из разных стилей и спорят друг с другом.

## Промпт для задачи на интерфейс

```
Собери интерфейс как рабочий продукт, а не как демо-лендинг.

Сначала определи ключевой пользовательский сценарий.
Используй готовые компоненты проекта или shadcn-совместимые компоненты.
Сделай состояния: loading, empty, error, disabled, hover/focus.
После реализации проверь экран по Web Interface Guidelines.
Открой результат через Chrome DevTools MCP, проверь консоль и визуальные баги.
В конце дай список правок с файлами и строками.
```

## Что проверить вручную

- [ ] Перед публикацией сверить, остаётся ли кодовое слово латиницей в финальном описании.
- [ ] Команды установки могут отличаться для Codex, Claude, Cursor и VS Code - в материале оставлены официальные базовые варианты.

---

Источник: https://localhost:3000/m/5-instrumentov-chtoby-claude-i-codex-delali-normalnyy-interfeys