MotionSites Web Builder — бесплатный скилл, который заставляет Claude делать кинематографичные лендинги

Сайты, собранные нейросетью, часто похожи друг на друга как близнецы. Причины почти всегда одни и те же: расплывчатый план, отсутствие настоящих медиа и никто не смотрит на результат глазами дизайнера. Скилл MotionSites Web Builder закрывает все три проблемы сразу. Claude изучает самые залайканные дизайны с платформы MotionSites, подбирает настоящие кинематографичные видео и 3D-объекты, пишет точную спецификацию, собирает страницу, а потом сам делает её скриншоты и чинит недочёты, пока результат не дотянется до галерейного уровня.

Репозиторий Motionsites-AI/claude-skill распространяется бесплатно и уже собрал около 1,6 тысячи звёзд. Внутри лежит один скилл — motionsites-web-builder — упакованный и как zip для Claude.ai и десктопного Claude, и как плагин для Claude Code.

Почему скиллу нужен не промпт, а конвейер

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

Сначала Claude читает два-три ближайших по смыслу примера из библиотеки из 40 промптов. Это самые популярные бесплатные промпты MotionSites — те дизайны, которые людям действительно нравятся. Читая их, модель подстраивается под нужный уровень детализации и вкуса: видит, как описаны движение, композиция и настроение, и пишет так же.

Полка медиа: видео, 3D и картинки

Вторая причина одинаковых AI-сайтов — отсутствие настоящих медиа. Скилл решает это «полкой медиа»: публично размещённая коллекция из более чем 50 кинематографичных фоновых видео, 30 прозрачных 3D-вырезок и 29 изображений. Все материалы показаны на пронумерованных контактных листах — таблицах с миниатюрами. Claude просматривает листы и выбирает медиа визуально, как это делал бы человек: по настроению, темпу и цвету, а не по имени файла.

55+ рецептов техник с готовым кодом

Третий блок скилла — библиотека из более чем 55 рецептов приёмов, каждый с рабочим кодом. Среди них:

• бесшовные видеолупы без видимой склейки;
• «жидкое стекло» (liquid glass);
• заголовки с размытием по словам;
• видео, перематываемое движением мыши;
• раскрытия в стиле прожектора;
• карусели с эффектом глубины;
• истории со скроллом (scroll stories);
• настоящие 3D-модели на Three.js.

Рецепт — это не совет из серии «добавь анимацию», а проверенный фрагмент кода, который Claude вставляет и адаптирует под конкретную страницу. Это заметно снижает шанс того, что модель придумает несуществующий API или напишет анимацию, которая тормозит на мобильных.

Правила вкуса и спека перед кодом

У скилла есть отдельный набор «правил вкуса» с настоящими числами: масштаб типографики, трекинг, отступы, цвет, тайминги движения и требования к текстам. Здесь нет места для формулировки «сделай красиво» — только конкретные значения, которые можно проверить.

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

Цикл «посмотрел — исправил»

Финальный этап — самопроверка. Скилл содержит QA-скрипт, который ищет сломанные ресурсы, переполнение вёрстки на мобильных, проблемы со шрифтами и непроигрывающее видео. Claude делает скриншоты собственной работы, сверяет их со шкалой оценок и дорабатывает страницу, пока она не проходит проверку. Это тот самый недостающий элемент обычных AI-генераторов: результат кто-то смотрит, и этот кто-то — сам агент.

Для полноценного цикла авторы рекомендуют установить Playwright:

pip install playwright && python -m playwright install chromium

Без него скилл тоже работает, но агент не сможет увидеть собранную страницу во всех состояниях.

Режим промптов для Lovable, Bolt и v0

Скилл умеет работать и без генерации кода. В режиме промптов вместо страницы Claude выдаёт готовый промпт, настроенный под конкретный инструмент: Lovable, Bolt, v0, Cursor, Manus, Google AI Studio или Kimi. Это полезно, если вы собираете сайт в no-code конструкторе, но хотите, чтобы задание для него было составлено на уровне примеров MotionSites — с медиа, таймингами и структурой секций.

Установка

Есть три способа. Для Claude.ai и десктопного приложения: скачайте motionsites-web-builder.zip со страницы последнего релиза, затем в настройках Claude откройте Customize → Skills → Create skill → Upload a skill, загрузите архив и включите скилл. Для загрузки навыков должен быть включён режим исполнения кода (Settings → Capabilities).

Для Claude Code как плагин:

/plugin marketplace add Motionsites-AI/claude-skill
/plugin install motionsites-web-builder@motionsites

Если нет SSH-ключа для GitHub, маркетплейс можно добавить по HTTPS-адресу: /plugin marketplace add https://github.com/Motionsites-AI/claude-skill.git.

Вручную — скопируйте каталог скилла в ~/.claude/skills/. Нужные файлы лежат в plugins/motionsites-web-builder репозитория.

Дальше достаточно просто попросить сайт — скилл включается автоматически. Примеры запросов из README: «Собери hero-секцию лендинга для люксового кольца для отслеживания сна», «Сделай главную страницу портфолио архитектурного фотографа из Лиссабона — редакционно и спокойно», «Вот мой текущий сайт: сделай его так, чтобы он выглядел как лауреат награды».

Лицензия и что входит в бесплатную версию

Инструкции и код скилла — под лицензией MIT. Примеры промптов и медиа остаются собственностью MotionSites, но их можно свободно использовать в сайтах, собранных с этим скиллом.

Бесплатная версия — демонстрация полной библиотеки. Платная подписка MotionSites Unlimited добавляет более 500 премиум-промптов для Lovable, Bolt, v0, Cursor и Claude, анимированные фоны для hero-секций, промпты отдельных блоков (фичи, цены, футеры), 40+ шаблонов Lovable и MCP-сервер MotionSites, через который Claude сам находит и подтягивает нужные промпты.

Зачем это фронтендеру

Даже если вы не собираете лендинги каждый день, скилл полезен как образец инженерии навыков. Здесь показан полный цикл: эталоны качества в виде примеров, осязаемые материалы в виде медиа-полки, формализованный вкус в виде правил с числами, план в виде спеки и обратная связь в виде скриншот-проверки. Тот же каркас можно перенести на любой другой тип задач, где «хорошо» обычно описывают словами, а можно было бы описать числами и картинками.

Стоит держать в голове и источник проекта: MotionSites — это платформа с библиотекой промптов для конструкторов сайтов, и бесплатный скилл одновременно служит витриной её полной коллекции. Но в отличие от многих витрин, бесплатная часть здесь самодостаточна: скилл полностью работает на встроенных примерах и медиа, и ничего не требует покупать, чтобы собрать страницу приличного уровня. Если ваши сайты от AI-агентов выглядят «примерно одинаково», это самый быстрый способ посмотреть, как выглядит конвейер с проверкой качества.