Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Пошаговое руководство по созданию высокобюджетных веб-сайтов с использованием AI-агента Claude Code и видео-инструмента Higgsfield. В видео разбирается процесс от проектирования вайрфреймов до генерации сложных анимаций на скролле и деплоя готового Next.js проекта.
👤 Кому будет полезно: Вайбкодерам, фрилансерам и владельцам агентств, которые хотят создавать сайты уровня Apple, затрачивая на разработку часы вместо недель.
✨ Что получите: Вы научитесь подключать MCP-инструменты к Claude, генерировать консистентные AI-видео для фона и собирать отзывчивые интерфейсы с премиальной анимацией, а также узнаете стратегию выхода на первые продажи.
1. Подключение Higgsfield MCP к Claude
Контекст: Для создания динамичного контента прямо внутри терминала Claude Code необходимо использовать протокол MCP (Model Context Protocol). Автор использует Higgsfield — инструмент для генерации видео, который позволяет Claude самостоятельно создавать анимации по текстовому описанию или референсному изображению. Это избавляет от необходимости переключаться между вкладками браузера и вручную скачивать/загружать файлы.
Тайминг:[01:02]
Выгода: Полная автоматизация процесса генерации визуального контента внутри рабочего окружения разработчика.
Как применить:
Шаг 1: Настройка через Desktop App — Откройте Claude Desktop, перейдите в Settings -> Connectors.
Шаг 2: Добавление коннектора — Нажмите Add custom connector, введите название "Higgsfield" и вставьте URL MCP-сервера, полученный на сайте Higgsfield.
Шаг 3: Активация в терминале — Перезапустите Claude Code в терминале и введите команду для проверки:
/mcp
Шаг 4: Проверка связи — Убедитесь, что Higgsfield включен (зеленый индикатор), и спросите Claude:
Do you have access to the Higgsfield MCP? Please check the connection.
Результат: Claude может самостоятельно генерировать видеофайлы и использовать их в коде вашего сайта.
2. Этап проектирования: Вайрфрейм вместо Figma
Контекст: Ошибка многих — сразу начинать писать код. Автор предлагает использовать "Front-end design skill" (набор инструкций для Claude) для создания детального плана и HTML-наброска прямо в контексте чата. Это позволяет быстро менять структуру, шрифты и цвета, не тратя время на верстку полноценных компонентов.
Тайминг:[02:22], [04:03]
Выгода: Экономия времени на правках. Изменить структуру в текстовом плане Claude в 10 раз быстрее, чем переписывать React-компоненты.
Как применить:
Шаг 1: Запрос на проектирование — Используйте промпт для создания структуры.
Шаг 2: Визуальный референс — Загрузите скриншот сайта (например, Apple), чтобы Claude понял стилистику.
Шаг 3: Использование Ultra Think — Включите режим глубокого размышления для проработки деталей.
Промпт для проектирования:
I want to build a high-end website for the new Apple iPhone 17 Pro. The design should be very minimalistic. I'll insert a screenshot so you can see the brand style. I want you to create the wireframe and the full design for this website before we start building it. Use "ultra think" mode.
Результат: Готовый .html файл с наброском дизайна, который можно открыть в браузере и утвердить.
3. Генерация консистентной анимации "разборки" устройства
Контекст: Чтобы создать эффект разлетающихся деталей телефона при скролле, нельзя просто сгенерировать одно видео — оно будет хаотичным. Секрет в сегментации: создание нескольких коротких роликов, где последний кадр предыдущего видео является первым кадром следующего.
Тайминг:[06:24], [07:10]
Выгода: Идеально плавная и логичная анимация, которая выглядит как профессиональный 3D-рендеринг.
Шаг 2: Сегментация запроса — Попросите Claude разбить анимацию на этапы (закрытый телефон -> открытие -> показ первого модуля -> показ второго модуля).
Шаг 3: Генерация через MCP — Дайте команду Higgsfield на создание последовательности.
Промпт для Higgsfield:
Use the Higgsfield MCP to create an animation of an iPhone 17 Pro that opens up. I want to cut it up into segments: 1. From starting point to opening up to first feature.2. From first feature to second feature.The animation should end at the same point as the starting point for a perfect loop. Research real iPhone 17 Pro rumors to align features with reality.
Результат: Набор видеофайлов, которые Claude автоматически сохранит в папку проекта.
4. Сборка на Next.js и оптимизация производительности
Контекст: Для того чтобы тяжелые видео-анимации не "тормозили" сайт, автор использует Next.js. Важно сделать анимацию зависимой от скролла (scroll-bound animation), чтобы пользователь буквально управлял воспроизведением видео, прокручивая страницу.
Тайминг:[08:52], [12:21]
Выгода: Высокая скорость загрузки (LCP) и плавность 60 FPS даже на мобильных устройствах.
Как применить:
Шаг 1: Создание проекта — Попросите Claude инициализировать Next.js приложение.
Шаг 2: Реализация "Snappy Scroll" — Добавьте эффект прилипания к секциям, чтобы анимация всегда останавливалась в нужной точке.
Шаг 3: Адаптивность — Обязательно проверьте через Inspect Element мобильную версию.
Промпт для исправления багов и доработки:
Build a complete Next.js site that includes this animation. Make the scroll snappy on the four features so when the user scrolls a little bit, it automatically snaps to the next section smoothly. Ensure it is fully responsive.
Результат: Полноценное веб-приложение с интегрированными видео-ассетами и логикой скролла.
5. Деплой и стратегия продаж (Go-to-Market)
Контекст: Создать сайт — это 20% успеха. Остальные 80% — умение это продать. Автор утверждает, что новички не должны сразу просить $10,000. Нужно сначала собрать 5 видео-отзывов, работая бесплатно или за кейс.
Тайминг:[17:43], [19:31], [20:36]
Выгода: Быстрый старт портфолио и создание "сарафанного радио".
Как применить:
Шаг 1: GitHub + Vercel — Залейте код на GitHub и подключите к Vercel для бесплатного хостинга.
Шаг 2: Поиск клиентов — Напишите своему парикмахеру, ландшафтному дизайнеру или в местные бизнес-группы Facebook.
Шаг 3: Оффер, от которого глупо отказываться — "Я сделаю вам сайт уровня Apple бесплатно за видео-отзыв".
Шаг 4: Масштабирование — Тратьте 4 часа в день на аутрич (холодные письма/сообщения), пока не заполните график.
Результат: Публичная ссылка на сайт и первые лояльные клиенты.
FAQ
В: Почему нельзя использовать Lovable или другие No-code инструменты? О: Автор считает, что связка Claude Code + Next.js дает гораздо больше контроля над сложными анимациями и производительностью, что критично для "дорогого" внешнего вида.
В: Сколько стоит хостинг такого сайта? О: На платформе Vercel хостинг бесплатен для проектов с низким и средним трафиком. Вы платите только за доменное имя (около $10-15 в год).
В: Как сделать так, чтобы видео не дергалось при скролле? О: Нужно использовать библиотеку для управления кадрами видео через scroll position (например, Framer Motion или кастомный хук, который Claude может написать сам) и просить Claude сделать "snappy scroll".
В: Что делать, если Claude выдает ошибки при сборке Next.js? О: Просто скопируйте текст ошибки из терминала и отправьте его Claude с промптом "Fix this, bro". В 90% случаев он исправляет это за один проход.
В: Где брать идеи для дизайна, если я не дизайнер? О: Делайте скриншоты сайтов топовых брендов (Apple, Tesla, Nike) и скармливайте их Claude как референсы. Он проанализирует отступы, шрифты и цветовую гамму.
Ресурсы и ссылки
Higgsfield — Инструмент для генерации AI-видео и MCP коннектор — https://higgsfield.ai/
Vercel — Платформа для деплоя и хостинга Next.js сайтов — https://vercel.com/
GitHub — Хранилище кода и версионность — https://github.com/
AI Automation Agency (AAA) — Сообщество автора видео — упомянуто в видео
Canva — Для быстрого редактирования стартовых кадров анимации — https://canva.com/
Конспект создан на основе видео «How to Build $30,000 Websites with AI (Claude Code + Higgsfield)» канала Albert Nielsen. Все права на оригинальный материал принадлежат авторам.Источник: https://youtu.be/bv1942CP-wg
Claude Code
Vercel