Чек-лист
кодовое словоСтэк
5 инструментов, чтобы Claude и Codex делали нормальный интерфейс
Набор для фронтенда, который закрывает пять слабых мест AI-кода: компоненты, генерацию UI, дизайн-правила, ревью и проверку в браузере.
Содержание7 глав
Где взять
| Что | Зачем | Где открыть |
|---|---|---|
| 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-состояний.
- Нет проверки в браузере: только уверенный текст, что всё работает.
- Компоненты тянутся из разных стилей и спорят друг с другом.
Промпт для задачи на интерфейс8 строк · 437 знаков
Собери интерфейс как рабочий продукт, а не как демо-лендинг. Сначала определи ключевой пользовательский сценарий. Используй готовые компоненты проекта или shadcn-совместимые компоненты. Сделай состояния: loading, empty, error, disabled, hover/focus. После реализации проверь экран по Web Interface Guidelines. Открой результат через Chrome DevTools MCP, проверь консоль и визуальные баги. В конце дай список правок с файлами и строками.
Что проверить вручную
- Перед публикацией сверить, остаётся ли кодовое слово латиницей в финальном описании.
- Команды установки могут отличаться для Codex, Claude, Cursor и VS Code - в материале оставлены официальные базовые варианты.
