awwwards-mcp
MCP-сервер, который ищет образцы среди сайтов-победителей Awwwards и разбирает анимацию и структуру любой страницы
- 372 ★ репозитория
- Последний коммит
- MIT
Широкий доступ
Почему такой уровень
- Запускает браузер, открывает произвольные ссылки, скачивает скрипты страниц и сохраняет их на диск
- Инструмент build_project пишет файлы проекта на диск, а необязательное автообновление ставит новые версии пакета в фоне
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/awwwards-mcpОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемШирокий доступИнструмент может менять данные, выполнять команды или работать с секретами.
- Запускает браузер, открывает произвольные ссылки, скачивает скрипты страниц и сохраняет их на диск
- Инструмент build_project пишет файлы проекта на диск, а необязательное автообновление ставит новые версии пакета в фоне
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
awwwards-mcp дает агенту справочник сайтов-победителей Awwwards. Агент ищет по запросу вроде «темные 3D-портфолио», видит скриншоты прямо в ответе и открывает для любого сайта палитру, технологии и награды. Инструмент create_design_brief собирает из двух-пяти выбранных сайтов бриф с цитатами источников. Дальше идет часть для разработки. Пять инструментов работают с любой ссылкой: снимают страницу, разбирают секции и записывают анимацию при прокрутке и наведении. По этим данным агент собирает страницу секция за секцией. build_project превращает результат в проект на Vite, Astro или Next.js, а verify_build сравнивает сборку с оригиналом и ставит оценку от 0 до 100. Сервер ставится одной командой через npx и работает без ключа API. В комплект входят семь скиллов, среди них recreate для воссоздания страницы и awwwards-motion-study для разбора анимации.
Для кого. Для фронтенд-разработчиков и дизайнеров, которые ищут визуальные образцы для проекта или хотят разобрать, как устроена анимация на понравившемся сайте.
Подходит, если
- Перед версткой лендинга нужно подобрать образцы под настроение и тип проекта, например «мягкие пастельные интернет-магазины»
- Надо понять, на чем сделан сайт и какие библиотеки анимации он использует, инструментами analyze_stack и get_motion_dna
- Хочется записать анимацию при прокрутке и наведении и получить из нее таймлайны GSAP
- Нужно сверить свою верстку с эталонной страницей и увидеть оценку отличий инструментом verify_build
- Вы следите за новыми победителями Awwwards через new_winners и watch_site
Не подходит, если
- Нужна точная копия чужого сайта для публикации: права на дизайн и код остаются у владельцев
- Нужен поиск по другим галереям, например Dribbble или Behance: база и дизайн-ДНК есть только для сайтов Awwwards
- Нужен только беглый взгляд на пару сайтов: хватит обычного браузера
Пример запроса к агенту
Найди на Awwwards три сайта портфолио с темной темой и 3D, сравни их палитры и собери бриф для моего лендингаMCP
- Транспорт
- stdio
- Авторизация
- не нужна
Переменные окружения
AWWWARDS_AUTO_UPDATE- Значение 1 включает фоновое самообновление пакета
Ограничения
Требуется Node.js 22.13 или новее. Для захвата страниц, записи анимации и проверки сборок нужен Playwright с браузером Chromium, для записи анимации еще ffmpeg. Без локального индекса поиск читает Awwwards с паузами между запросами и видит около 31 сайта на страницу фильтра. Индекс строится один раз отдельной командой. Парсер зависит от верстки awwwards.com и может сломаться при ее изменении, для починки есть скилл awwwards-doctor. Раз в сутки сервер проверяет реестр npm на новую версию.
Как отключить. Выполните `claude mcp remove awwwards`, а скиллы из ~/.agents/skills или ~/.claude/skills удалите вручную. Папка ~/.awwwards-mcp хранит настройки и кэш и безопасна для удаления.
Частые вопросы
Как подключить awwwards-mcp к Claude Code?
Выполните `claude mcp add awwwards -- npx -y awwwards-mcp`. Ключ API и аккаунт не нужны, сервер работает как обычный stdio-процесс. Для Codex есть команда `codex mcp add awwwards -- npx -y awwwards-mcp`.
Какие скиллы идут вместе с awwwards-mcp?
Семь: `awwwards-setup`, `awwwards-inspiration`, `awwwards-motion-study`, `awwwards-doctor`, `awwwards-section-loop`, `recreate` и `motion-authoring`. Их копируют из node_modules/awwwards-mcp/skills в каталог скиллов агента, например ~/.agents/skills.
Можно ли использовать сервер на любом сайте, кроме Awwwards?
Да. Захват страниц, перепись секций, анализ прокрутки и наведения, проверка сборки и разбор стека работают с любой ссылкой. Поиск по базе и дизайн-ДНК относятся только к сайтам Awwwards.
Что делает verify_build?
Сравнивает вашу сборку с исходным сайтом по карте секций и отпечатку анимации и выдает оценку от 0 до 100 с вердиктом «pass», «warn» или «fail». Параметр domDiff добавляет сравнение DOM-структуры.
Как ускорить поиск по Awwwards?
Постройте локальный индекс. С ним запросы идут через полнотекстовый поиск FTS5 с ранжированием BM25, и сервер больше не ограничен одной страницей фильтра.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыInspo
inspo
Сервер MCP со справочником реальных рабочих сайтов, по которым агент изучает дизайн до написания интерфейса. Брать приемы, не копировать страницы
MCP-сервер и скилл для интерфейсов: 31 дизайн-система для shadcn/ui, принципы UI и UX и проверка доступности для кода агента
MCP-сервер и плагин 21st.dev: поиск готовых React/Tailwind компонентов, логотипов и генерация интерфейса прямо из агента
Anima Agent Grid MCP
Agent Grid MCP Server Guide
MCP-сервер и скилл Anima Agent Grid: агент собирает веб-приложение из промпта, сайта или макета Figma и публикует его
Дизайн-скилл против шаблонных AI-интерфейсов: новые страницы, аудит, редизайн и разбор чужого дизайна по скриншоту или URL
Официальный MCP-сервер Webflow: CMS, страницы и элементы сайта в Designer через Data API
Коротко о README
Страница описывает идею «дизайн-вдохновение для агента» и таблицу инструментов с параметрами. Затем идут подключение для каждого клиента, установка Playwright, семь скиллов, локальный индекс и принципы работы с данными: метаданные и ссылки на CDN Awwwards, ничего не зеркалируется.