🎯 О чём этот конспект: Пошаговое руководство по созданию высокобюджетных веб-сайтов с использованием 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-рендеринг.

Как применить:

• Шаг 1: Подготовка референса — Загрузите качественное фото продукта.
• Шаг 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