Чек-лист
кодовое словоНабор
Пять dev-инструментов для нормальных сайтов в Claude и Codex
Комплект для агентной разработки, где модель не просто пишет код, а видит интерфейс, работает с базой, проверяет безопасность, вытаскивает дизайн-систему и держит свежую документацию.
Ссылки и назначение
| Инструмент | Что закрывает | Ссылка |
|---|---|---|
| Playwright MCP | Открывает сайт в браузере, проходит сценарии, ловит ошибки и проверяет реальный пользовательский путь. | github.com/microsoft/playwright-mcp |
| Supabase MCP | Даёт агенту доступ к проекту Supabase: таблицы, SQL, миграции, отладка, Edge Functions. | supabase.com/docs/guides/ai-tools/mcp |
| Strix | Автономный pentest: запускает приложение, ищет уязвимости и проверяет их доказательствами. | github.com/usestrix/strix |
| SkillUI | Снимает с сайта цвета, шрифты, spacing, компоненты и упаковывает дизайн-систему для Claude. | github.com/amaancoderx/npxskillui |
| Context7 | Подтягивает актуальные docs и примеры по библиотекам прямо в агентную задачу. | 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 уже после базовой сборки, когда есть что атаковать и чинить.
Проверочный промпт7 строк · 471 знак
Собери фичу как production-поток. 1. Используй актуальную документацию через Context7. 2. Если есть база, проверь схему и миграции через Supabase MCP. 3. Открой интерфейс через Playwright MCP и пройди основной пользовательский сценарий. 4. Сверь визуальный слой с выбранной дизайн-системой или SkillUI-выгрузкой. 5. После сборки проверь security-риск: auth, права, инъекции, лишние секреты. В конце дай список: что сделано, что проверено в браузере, какие риски остались.
Где чаще ломается
- Агент говорит, что всё работает, но не открывал страницу в браузере.
- Supabase MCP подключён слишком широко и видит лишние проекты или production-данные.
- Context7 не указан в задаче, поэтому модель пишет по старой памяти.
- SkillUI снял дизайн, но агент смешал его с дефолтной палитрой.
- Strix нашёл проблему, но фикс не был ретестирован после правки.
