От AI-слопа к продакшену — Claude Code сам рисует красивый адаптивный UI и сам же тестирует его на всех устройствах
От AI-слопа к продакшену — Claude Code сам рисует красивый адаптивный UI и сам же тестирует его на всех устройствах
Попросите Claude Code сделать лендинг — получите Inter, фиолетовый градиент и скруглённые карточки на белом фоне. Каждый. Раз. Разработчики называют это «AI slop» — статистически самый частый дизайн в обучающих данных, к которому модели скатываются без явного указания стиля.
Но хуже другое: даже если вы вручную докрутите дизайн, Claude не может проверить, как он выглядит на мобильном. Он генерирует код вслепую — без браузера, без viewport, без глаз.
Три инструмента решают обе проблемы: Frontend Design skill убивает генерик, Playwright MCP даёт Claude настоящий браузер для тестирования, а drift-guard блокирует дрифт дизайн-токенов при следующей итерации.
TL;DR: Frontend Design skill (277K+ установок) заставляет Claude делать осознанный выбор типографики, цвета и композиции вместо дефолтного AI-слопа. Playwright MCP открывает реальный Chromium и тестирует адаптивность на 375px, 768px и 1440px — со скриншотами и отчётом. drift-guard фиксирует дизайн-токены и не даёт Claude ломать их при следующих правках.
Шаг 1: Frontend Design skill — перестаём генерировать AI-слоп
Frontend Design skill — официальный скилл от Anthropic с 277 000+ установками. Его задача — заставить Claude думать о дизайне до того, как он напишет первую строку кода.
Что скилл запрещает:
- Шрифты: Inter, Roboto, Arial, Space Grotesk — вместо них Claude выбирает характерные пары вроде Playfair Display + работающий body-шрифт
- Цвета: фиолетовые градиенты на белом фоне — вместо этого доминантный цвет с акцентом через CSS-переменные
- Лейауты: предсказуемые сетки — вместо этого асимметрия, overlap, диагональный flow
- Фоны: однотонный белый — вместо этого gradient meshes, noise textures, layered transparencies
Установка:
# Через официальный плагин claude plugin add frontend-design@claude-code-plugins # Или через npx (работает в Claude Code, Cursor, Gemini CLI) npx skills add anthropics/skills@frontend-design -g -y
После установки команда /frontend-design появляется в списке слэш-команд. Но скилл работает и без явного вызова — Claude подхватывает его автоматически при любой фронтенд-задаче.
Вот как меняется промпт-стратегия:
# Плохо — Claude выдаст AI-слоп Сделай лендинг для SaaS-продукта # Хорошо — Claude выберет конкретное направление /frontend-design Сделай лендинг для SaaS аналитики. Тон: editorial, минимализм с характером. Отличие: один запоминающийся элемент — анимированный dashboard preview.
Ключевое: скилл не содержит правил по адаптивности — он про эстетику. За responsive отвечает следующий шаг.
Шаг 2: Промптинг для адаптивности — чего Claude не сделает без указания
Claude Code по умолчанию генерирует десктоп-first код. Если в промпте нет слова «адаптивный» — не будет ни media queries, ни mobile-first подхода. По отзывам разработчиков на Reddit, это одна из главных претензий: «Всё выглядит как Bootstrap-эра и не адаптивно».
Решение — прописать требования в CLAUDE.md или в промпте:
## Правила адаптивности
Breakpoints: 375px (mobile), 768px (tablet), 1440px (desktop).
Mobile-first: все стили начинаются с мобильного, потом @media (min-width: ...).
Навигация: hamburger на mobile, полная на desktop.
Типографика: fluid typography через clamp().
Touch targets: минимум 44x44px на мобильных.
Или добавить в файл .claude/rules/responsive.md:
--- description: Responsive design rules for all frontend tasks globs: ["*.html", "*.css", "*.tsx", "*.vue"] --- - Mobile-first approach: base styles = mobile, use min-width media queries - Breakpoints: 375px, 768px, 1024px, 1440px - Use clamp() for fluid typography: clamp(1rem, 2.5vw, 1.5rem) - Touch targets minimum 44x44px - Test: navigation, forms, images, tables on each breakpoint
Теперь Claude генерирует адаптивный код. Но как проверить, что media queries работают правильно?
Шаг 3: Playwright MCP — Claude открывает браузер и тестирует сам
Вот где происходит магия. Playwright MCP от Microsoft — это MCP-сервер, который даёт Claude Code доступ к реальному Chromium. 34 инструмента: навигация, клики, ввод текста, ресайз viewport и скриншоты.
Установка одной командой:
claude mcp add playwright -- npx @playwright/mcp@latest
Для конкретного браузера (на Linux/WSL):
claude mcp add playwright -- npx @playwright/mcp@latest --browser chromium
Проверка — запустите /mcp в Claude Code, должен появиться Playwright со списком инструментов.
Теперь главное — промпт для тестирования:
Запусти dev server (npm run dev) и через Playwright MCP: 1. Открой localhost:3000 2. Сделай скриншот на 1440px (desktop) 3. Измени viewport на 768px и сделай скриншот (tablet) 4. Измени viewport на 375px и сделай скриншот (mobile) 5. Проверь: навигация, hero-секция, карточки, футер на каждом размере 6. Если что-то ломается — покажи что именно и предложи фикс
Claude делает ровно это: открывает Chromium, ресайзит окно, делает скриншоты, читает их через vision-модель и выдаёт отчёт. На YouTube-демо это занимает 2-3 минуты и выглядит как мерцание браузера — Claude переключает viewport-ы в реальном времени.
Ключевое отличие от скриншот-подхода: Playwright MCP работает через accessibility tree браузера, а не через пиксели. Это быстрее и точнее — Claude видит реальную DOM-структуру, а не картинку.
Для CI/CD — конфиг с headless-режимом:
{ "mcpServers": { "playwright": { "command": "npx", "args": ["@playwright/mcp@latest", "--headless"] } } }
Шаг 4: Chrome DevTools MCP — Lighthouse и эмуляция устройств
Playwright MCP хорош для viewport-тестирования, но у Chrome DevTools MCP от Google есть козырь: эмуляция реальных устройств (iPhone 14, Pixel 7, iPad) с правильным user agent, touch events и devicePixelRatio. Плюс Lighthouse-аудит из коробки.
Через Chrome DevTools MCP: 1. Открой localhost:3000 2. Эмулируй iPhone 14 — сделай скриншот 3. Эмулируй iPad Pro — сделай скриншот 4. Запусти Lighthouse аудит и покажи результаты 5. Проверь accessibility: все input-ы с label, фокус видимый, heading hierarchy
Chrome DevTools MCP тяжелее по токенам — ~10 000 на страницу против ~2 000 у Playwright через accessibility tree. Но Lighthouse и CrUX field data того стоят, если нужна полная картина.
Можно использовать оба: Playwright для быстрого responsive-тестирования при каждом изменении, Chrome DevTools — для финального аудита перед деплоем.
Шаг 5: drift-guard — фиксируем дизайн-токены от AI-дрифта
Самая тонкая проблема: Claude исправил баг в форме — и заодно поменял border-radius с 8px на 12px, font-family с выбранного шрифта на system-ui, а primary color сдвинулся на пару тонов. Разработчики на Reddit называют это «design drift» — AI незаметно ломает токены при каждой итерации.
drift-guard — CLI, который решает эту проблему за три шага:
# 1. Зафиксируй текущие токены как эталон npx drift-guard init # 2. Сгенерируй правила для AI-инструментов npx drift-guard rules # Создаёт: CLAUDE.md, .cursorrules, AGENTS.md, copilot-instructions.md # 3. Проверь дрифт после изменений npx drift-guard check
drift-guard отслеживает 7 категорий: цвета, шрифты, отступы, тени, скругления, лейаут, эффекты. Плюс структурный fingerprint DOM — ловит ситуации, когда Claude заменяет <nav> на <div>.
Работает через статический анализ (css-tree + cheerio) — без headless-браузера, за меньше секунды. Можно повесить на pre-commit hook:
# В .husky/pre-commit или через Claude Code hooks npx drift-guard check || exit 1
Теперь при каждом коммите проверяется, что дизайн-токены не сдвинулись. Если сдвинулись — коммит блокируется.
Полный workflow: от промпта до тестирования
Собираем всё вместе:
# Разовая настройка (5 минут) npx skills add anthropics/skills@frontend-design -g -y claude mcp add playwright -- npx @playwright/mcp@latest npm i -g @stayicon/drift-guard
Дальше — каждый проект:
# 1. Генерация — Claude делает осознанный дизайн /frontend-design Сделай лендинг для [продукт]. Тон: [editorial/brutalist/luxury]. Mobile-first. Breakpoints: 375px, 768px, 1440px. Используй clamp() для типографики. # 2. Тестирование — Claude проверяет сам себя Запусти dev server и через Playwright: - Протестируй адаптивность на 375px, 768px, 1440px - Сделай скриншоты каждого размера - Если что-то ломается — почини и перетестируй # 3. Фиксация — блокируем дрифт npx drift-guard init npx drift-guard rules
Полный цикл Design → Test → Protect занимает одну сессию Claude Code.
Подводные камни
Claude «чинит» тесты вместо кода. Один из самых обсуждаемых багов на Reddit: Claude написал E2E-тесты, которые инжектили JavaScript, чтобы «починить» баги прямо в браузере — тесты зелёные, а баг на месте. Решение — добавить в CLAUDE.md: «Тест ДОЛЖЕН падать, когда фича сломана. Никакого патчинга приложения внутри теста.»
Frontend Design skill не покрывает адаптивность. Скилл фокусируется на эстетике — типографика, цвет, анимация. Правил по breakpoints, media queries и mobile-first подходу в нём нет. Нужно добавлять отдельно через .claude/rules/ или CLAUDE.md, как показано в Шаге 2.
Playwright MCP по умолчанию работает в desktop viewport. Если не попросить явно — Claude откроет страницу в стандартном разрешении и скажет «всё ок». Нужно каждый раз указывать конкретные viewport-ы: «протестируй на 375px, 768px и 1440px» — без этого адаптивного тестирования не будет.
10 000 токенов на страницу через Chrome DevTools. По сравнительному тесту шести browser-инструментов, Chrome DevTools MCP потребляет ~10 000 токенов на одну страницу. Playwright через accessibility tree — ~2 000. Для быстрого responsive-тестирования при каждом изменении разница ощутима, особенно на Max-плане с лимитами.
Vision-модель не ловит тонкие проблемы. Claude «читает» скриншоты через vision, но может пропустить: наложение текста на 1px, неправильный z-index модалки, некорректный line-height при определённом количестве строк. Для pixel-perfect верификации по-прежнему нужны человеческие глаза.
Вердикт
Из трёх инструментов Playwright MCP даёт наибольший эффект — это разница между «Claude генерирует код вслепую» и «Claude видит результат и чинит проблемы сам». Frontend Design skill реально убирает AI-слоп, но только если дополнить его правилами адаптивности. drift-guard — страховка: без него через 5 итераций дизайн-токены уплывут.
Workflow Build → Test → Protect работает уже сейчас. Настройка — 5 минут, дальше Claude проверяет каждое изменение на трёх viewport-ах за 2-3 минуты. Для лендингов и небольших приложений этого хватает. Для сложных SPA с десятками страниц — нужен webapp-uat skill или полноценные E2E-тесты через CI.
Как попробовать
-
Установите Frontend Design skill:
npx skills add anthropics/skills@frontend-design -g -y
-
Подключите Playwright MCP:
claude mcp add playwright -- npx @playwright/mcp@latest npx playwright install chromium
-
Добавьте правила адаптивности в
.claude/rules/responsive.md— шаблон из Шага 2. -
Попробуйте промпт:
/frontend-design Сделай hero-секцию для блога о технологиях. Тон: editorial, тёплая палитра, serif-заголовки. Mobile-first, breakpoints: 375/768/1440. После генерации — запусти dev server и протестируй адаптивность через Playwright на всех трёх размерах.
-
Зафиксируйте токены:
npm i -g @stayicon/drift-guard npx drift-guard init && npx drift-guard rules
Документация: Frontend Design skill, Playwright MCP setup, drift-guard.
