Awwwards MCP: как AI-агенту искать референсы и проверять web-дизайн

Когда дизайнер просит AI-агента сделать лендинг «в духе хороших digital-портфолио», агент часто начинает с слишком общих ассоциаций. Он может выдать узнаваемую сетку, модный градиент и набор декоративных эффектов, но не сможет объяснить, откуда взялись решения, как они ведут себя на мобильном экране и какие части можно перенести в конкретный продукт.

Awwwards MCP - новый независимый open-source проект, который подключает к агенту поисковый слой по публичным материалам Awwwards. Он не является продуктом Awwwards и не даёт права копировать чужие сайты. Его ценность в другом: сделать исследование референсов наблюдаемой частью работы, а не скрытым фоном для первого промпта.

Что именно делает проект

Сервер запускается локально через стандартный MCP-канал. По README ему нужен Node.js 22.13 или новее; для базового поиска не требуются API-ключ и аккаунт. Агент получает несколько инструментов: поиск сайтов, карточку с палитрой, технологиями, элементами и наградами, а также выборку визуальных элементов страницы.

• search_sites ищет по тегам, цветам, технологиям, типу награды и свободному запросу. Для локального индекса автор использует FTS5 и BM25-ранжирование, поэтому запрос из нескольких слов должен находить страницы, где совпадает вся формулировка, а не случайное одно слово.
• get_site_details возвращает «design DNA»: палитру, технологии, элементы, описание и награды выбранного сайта.
• get_site_elements выдаёт отдельные визуальные фрагменты: например, mobile layout, 3D-модель, видео или микрокопирайтинг.
• capture_live_site, analyze_page_structure и record_site_motion работают с произвольным живым URL. Для них нужны локальные Playwright, а для записи motion ещё и ffmpeg.

Базовая выдача опирается на публичные страницы Awwwards; README описывает лимит в один запрос в секунду и локальное кэширование. Можно собрать отдельный индекс тегов: автор заявляет, что он проходит примерно 200 страниц за несколько минут, сохраняет SQLite-кэш и обновляет его в фоне, когда тот старше семи дней. Это ускоряет исследование, но не делает данные мгновенными и не отменяет ручную проверку конкретного сайта.

Практический сценарий: от референса к решению

Полезнее всего использовать Awwwards MCP не как генератор «сделай как этот сайт», а как короткий исследовательский цикл с явными контрольными точками.

1. Сформулировать направление. Вместо «сделай премиально» задать наблюдаемые параметры: например, «редакционный каталог для архитектурного бюро, спокойная сетка, светлый фон, крупный гротеск, без постоянного скролл-эффекта». Так агент ищет не стиль-ярлык, а набор проверяемых признаков.
2. Найти 5-8 разных кандидатов. Запросы вроде editorial architecture light typography или minimal ecommerce mobile layout полезнее одного названия. Не стоит ограничиваться первым местом выдачи: совпадение тегов не доказывает, что сайт подходит продукту.
3. Посмотреть визуальные доказательства. Дизайнеру нужно проверить скриншот, мобильную компоновку, motion и поведение длинного текста. Палитра и технология сайта - вспомогательные данные, а не основание копировать интерфейс.
4. Перевести наблюдения в собственные правила. Например: «на первом экране один смысловой акцент», «карточки не имеют тени», «в мобильной версии навигация складывается в один столбец», «в motion нет критичной информации». Это уже бриф для проекта, а не список чужих эффектов.
5. Собрать и проверить свой экран. analyze_page_structure может помочь сравнить последовательность смысловых полос у референса и прототипа, а запись motion - заметить слишком резкие переходы. Результат всё равно должен пройти обычный UX-, accessibility- и performance-review.

Такой процесс особенно полезен для портфолио, промостраниц, брендовых кампаний и ранних исследований визуального направления. В продуктовой команде он помогает быстрее договориться о композиции, но не заменяет изучение аудитории, контента, аналитики и дизайн-системы.

Что проверять до установки

У проекта MIT-лицензия, но это относится к его исходному коду, а не к материалам сайтов, которые он показывает. Сам README отдельно говорит, что скриншоты и контент принадлежат Awwwards и авторам работ, а коммерческое использование следует сверять с правилами площадки. Нельзя превращать подбор референсов в неограниченный скрейпинг, перепубликацию скриншотов или задачу «воссоздай сайт один в один».

Есть и обычный риск цепочки поставки. Команда, которая запускает npx -y awwwards-mcp, исполняет сторонний пакет. Для постоянного рабочего процесса разумнее зафиксировать конкретную версию, изучить package.json и зависимости, а Playwright и ffmpeg устанавливать только там, где это действительно нужно. В README прямо указано, что запись motion и захват страниц являются опциональными функциями.

Ещё одна граница - приватность. Инструмент может открыть любой переданный URL в браузере. Не стоит направлять его на закрытые админки, клиентские кабинеты или страницы с персональными данными, пока команда отдельно не определила, где будут храниться скриншоты, видео и локальный кэш.

Чего он не решает

• Не выбирает арт-дирекцию за дизайнера и не знает бизнес-контекст продукта.
• Не проверяет права на использование иллюстраций, шрифтов, видео и брендовых решений референса.
• Не доказывает доступность или производительность итогового сайта: структура полос и скриншот не заменяют тесты с клавиатурой, screen reader, реальными устройствами и медленной сетью.
• Не гарантирует стабильность: публичные страницы и их HTML могут меняться, а индекс может отставать от источника.

Минимальный командный регламент

Чтобы инструмент не стал машиной для визуального копирования, достаточно трёх правил. Во-первых, к каждой подборке добавлять письменное объяснение: какие именно свойства референса берём и почему. Во-вторых, хранить только те скриншоты и записи, которые необходимы для внутреннего обсуждения, с указанием источника. В-третьих, перед передачей в разработку превращать наблюдения в собственные токены, сетку, состояния и критерии приёмки - без чужого кода, логотипов и визуальных активов.

В такой рамке Awwwards MCP выглядит полезным инструментом для исследовательского этапа: он сокращает ручной поиск, даёт агенту реальные визуальные свидетельства и оставляет решение у человека. Но выпускать результат нужно по тем же правилам, что и любой интерфейс: проверить содержание, права, доступность, скорость и соответствие продукту.

Источники

• INSANE0777/Awwards-mcp - README, исходный код и MIT License, проверено 20 сентября 2026 года.
• Awwwards Terms of Service.

Редакция не устанавливала и не запускала Awwwards MCP в производственном контуре. Описание возможностей основано на публичном README и репозитории проекта.