# Пять dev-инструментов для нормальных сайтов в Claude и Codex

Комплект для агентной разработки, где модель не просто пишет код, а видит интерфейс, работает с базой, проверяет безопасность, вытаскивает дизайн-систему и держит свежую документацию.

## Ссылки и назначение

| Инструмент | Что закрывает | Ссылка |
| --- | --- | --- |
| **Playwright MCP** | Открывает сайт в браузере, проходит сценарии, ловит ошибки и проверяет реальный пользовательский путь. | [github.com/microsoft/playwright-mcp](https://github.com/microsoft/playwright-mcp) |
| **Supabase MCP** | Даёт агенту доступ к проекту Supabase: таблицы, SQL, миграции, отладка, Edge Functions. | [supabase.com/docs/guides/ai-tools/mcp](https://supabase.com/docs/guides/ai-tools/mcp) |
| **Strix** | Автономный pentest: запускает приложение, ищет уязвимости и проверяет их доказательствами. | [github.com/usestrix/strix](https://github.com/usestrix/strix) |
| **SkillUI** | Снимает с сайта цвета, шрифты, spacing, компоненты и упаковывает дизайн-систему для Claude. | [github.com/amaancoderx/npxskillui](https://github.com/amaancoderx/npxskillui) |
| **Context7** | Подтягивает актуальные docs и примеры по библиотекам прямо в агентную задачу. | [github.com/upstash/context7](https://github.com/upstash/context7) |

## Команды установки

```
# Playwright MCP для Claude Code
claude mcp add playwright npx @playwright/mcp@latest

# Supabase MCP для Claude Code
claude mcp add --scope project --transport http supabase "https://mcp.supabase.com/mcp"

# SkillUI
npm install -g skillui
skillui --url https://example.com --mode ultra

# Context7 MCP
npx -y @upstash/context7-mcp

# Strix
git clone https://github.com/usestrix/strix.git
```

## Порядок подключения

- [ ] Начни с Playwright MCP: агент должен видеть, что он реально собрал в браузере.
- [ ] Подключи Supabase MCP только к dev-проекту, а не к production-базе.
- [ ] Добавь Context7 и попроси модель использовать docs по конкретным версиям библиотек.
- [ ] Сними референс через SkillUI, если нужно повторить визуальный язык чужого сайта или текущего проекта.
- [ ] Запусти Strix уже после базовой сборки, когда есть что атаковать и чинить.

## Проверочный промпт

```
Собери фичу как production-поток.
1. Используй актуальную документацию через Context7.
2. Если есть база, проверь схему и миграции через Supabase MCP.
3. Открой интерфейс через Playwright MCP и пройди основной пользовательский сценарий.
4. Сверь визуальный слой с выбранной дизайн-системой или SkillUI-выгрузкой.
5. После сборки проверь security-риск: auth, права, инъекции, лишние секреты.
В конце дай список: что сделано, что проверено в браузере, какие риски остались.
```

## Где чаще ломается

- [ ] Агент говорит, что всё работает, но не открывал страницу в браузере.
- [ ] Supabase MCP подключён слишком широко и видит лишние проекты или production-данные.
- [ ] Context7 не указан в задаче, поэтому модель пишет по старой памяти.
- [ ] SkillUI снял дизайн, но агент смешал его с дефолтной палитрой.
- [ ] Strix нашёл проблему, но фикс не был ретестирован после правки.

---

Источник: https://localhost:3000/m/pyat-dev-instrumentov-dlya-normalnyh-saytov-v-claude-i-codex