Awwwards MCP — сервер, который даёт агентам визуальные примеры с Awwwards

awwwards-mcp — бесплатный MCP-сервер, который даёт AI-кодинг-агентам визуальные примеры с сайтов, получивших награды на Awwwards. Это бесплатная альтернатива Mobbin: агент ищет по обычной фразе, смотрит на настоящие скриншоты, разбирает «ДНК дизайна» выбранных сайтов, а потом проверяет по тем же материалам собственную сборку.

Ни API-ключа, ни аккаунта, ни оплаты. Нужен только Node.js версии 22.13 или новее.

Зачем это нужно

Агент умеет писать код, но плохо чувствует дизайн. Он не знает, как выглядит хороший hero-блок, какой ритм секций удерживает внимание и как должна вести себя анимация при прокрутке. Сервер закрывает этот пробел: он даёт агенту живые примеры и инструменты, чтобы не копировать их вслепую, а разобрать по частям.

Рабочий цикл выглядит так: поиск и отбор по скриншотам → разбор дизайна выбранных сайтов → съёмка и изучение движения → сборка → проверка сборки по эталону → исправление.

Инструменты

Поиск и разбор дизайна

Съёмка и анализ страниц

Все эти инструменты работают с любым URL, а не только с сайтами Awwwards.

Проверка и генерация кода

Кроме этого, record_site_motion собирает лист доказательств движения: ключевые кадры, маски разницы между соседними кадрами, наложение «луковой шелухи», след курсора и хронология фаз. Видео превращается в документ, который модель действительно может прочитать. Если лист собрать не удалось, сама запись всё равно возвращается.

Установка

Сервер работает через stdio и запускается одной командой:

npx -y awwwards-mcp

Для Claude Code:

claude mcp add awwwards -- npx -y awwwards-mcp

Для Codex CLI:

codex mcp add awwwards -- npx -y awwwards-mcp

Для OpenCode (команда задаётся массивом):

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "awwwards": {
      "type": "local",
      "command": ["npx", "-y", "awwwards-mcp"]
    }
  }
}

Claude Desktop, Cursor, Windsurf, Gemini CLI, Cline и Continue читают общий формат mcpServers:

{
  "mcpServers": {
    "awwwards": { "command": "npx", "args": ["-y", "awwwards-mcp"] }
  }
}

Чтобы зафиксировать версию, укажите её явно: npx -y awwwards-mcp@1.9.0.

Съёмка страниц — capture_live_site, analyze_page_structure, record_site_motion, обе переписи движения, verify_build, capture_component и capture_pose_3d — требует браузер:

npm install -g playwright && npx playwright install chromium

record_site_motion дополнительно использует ffmpeg и сам подхватывает пакет ffmpeg-static, если он установлен.

Поиск и локальный индекс

Свободный текст ищется по локальной базе FTS5 со стеммингом Портера и ранжированием BM25: запрос «magazines» находит сайты с тегом Magazine, запрос из нескольких слов требует совпадения всех слов с одним и тем же сайтом. Скорость зависит от глубины индекса.

Индекс сайтов строится один раз и хранится в SQLite в каталоге ~/.awwwards-mcp/:

npx -y -p awwwards-mcp awwwards-index

Обход проходит по примерно 200 страницам тегов со скоростью один запрос в секунду и занимает около четырёх минут. Его можно прервать и продолжить: готовые страницы пропускаются. Сервер сам перестраивает индекс в фоне, если тому больше семи дней, и никогда не блокирует работу из-за этого. Индекс элементов — галереи футеров, hero-блоков и прочего — собирается отдельно и насчитывает 1500+ записей.

Скиллы

В пакете идут пять скиллов для агентов, которые следуют стандарту Agent Skills:

Сайты, собранные на сервере

В репозитории лежат пять реальных проектов, сделанных через полный цикл сервера: витрина Ridge в швейцарском минимализме, редакционный журнал Fallow Press с горизонтальной прокруткой на GSAP ScrollTrigger, копия Cerebrium, совпавшая с оригиналом по высоте страницы с точностью до 1px, редакционный проект The Meridian и статичная копия NEUTOMNI.

Что показали эти сборки: постеры элементов врут. Первый сайт делали только по кадрам-постерам, и вращающееся 3D-кольцо превратилось в неподвижные карточки. Пересмотр видео элементов показал настоящее движение. Скриншот всей страницы показывал пустые секции у сайтов с появлением блоков при прокрутке. Текст в горизонтальных панелях пропадал на середине просмотра, потому что анимация возвращала его в исходное состояние. Все эти выводы перенесли в скиллы как правила.

Лицензия и этика

MIT. Сервер ходит только по публичным страницам Awwwards, соблюдает robots.txt и ограничивает себя одним запросом в секунду. Скриншоты и материалы остаются собственностью Awwwards и авторов сайтов: массово выкачивать и перепубликовывать их нельзя. Для коммерческого использования условия Awwwards стоит прочитать отдельно.

Участие в проекте — issues на GitHub, правила разработки — CONTRIBUTING.md, безопасность — SECURITY.md, лицензия — LICENSE.