Вёрстка сайтов за $10 000 в Claude Code: Полный пайплайн от Hicksfield MCP до Claw Design и 3D Scroll Scrubbing
Полный гайд по созданию премиум-сайта за $10k+: связка Claude Code, Hicksfield MCP, Claw Design, UI-снайпинг с 21st.dev и интерактивный 3D скролл-скраббинг.
Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Пошаговый разбор полного пайплайна создания премиального ресторанного лендинга с нуля без участия живого дизайнера. Автор демонстрирует связку Claude Code с Hicksfield MCP для генерации медиа-ассетов, использование платформы Claw Design для автоматической сборки дизайн-системы и кода первого уровня, а также последующую доработку в локальном окружении с помощью UI-снайпинга (21st.dev) и технологии интерактивного скролл-видео (Scroll Scrubbing).
👤 Кому будет полезно: Вайбкодерам, AI-разработчикам, веб-дизайнерам и фаундерам диджитал-агентств, которые хотят создавать коммерческие сайты высокой ценовой категории ($10 000+) с анимациями и кастомным медиаконтентом за считанные часы.
✨ Что получите: Готовый алгоритм от идеи до продакшена: структуру брифа для AI, методику генерации целостного бренд-пака, экспорт дизайн-системы, интеграцию готовых компонентов из открытых библиотек и реализацию премиального скролл-эффекта.
1. Архитектура брифа и запуск AI-интервью через Claude Code и Hicksfield MCP
Контекст: Создание коммерческого сайта начинается не с кода, а со сбора требований и бренд-платформы. Если у заказчика нет готовых медиафайлов или проект создаётся как концепт для холодных продаж, разработчик сталкивается с проблемой нехватки качественных ассетов. Автор видео предлагает использовать Claude Code в связке с Hicksfield через MCP (Model Context Protocol). Claude выступает в роли арт-директора: проводит структурированное интервью, формирует визуальную концепцию и передаёт команды в генератор медиа.
Тайминг:[02:35], [03:20], [04:45]
Выгода: Исключает создание шаблонного «AI-мусора» (AI slop) благодаря жёстким креативным рамкам и списку ограничений (чего избегать), задаваемым на старте.
Как применить:
Шаг 1: Подключение MCP — Claude Code CLI] — Убедитесь, что Hicksfield добавлен в список коннекторов в настройках агента. Для добавления MCP перейдите в управление коннекторами (Manage connectors) или пропишите команду:
claude mcp add hicksfield
Шаг 2: Запуск режима интервью — Claude Code] — Откройте чистую рабочую директорию на рабочем столе, переключитесь на модель уровня Opus/Fable и вставьте стартовый системный промпт, заставляющий модель задавать вопросы по бренду:
Act as an elite creative director and web designer. I want to build a high-end web project. Before generating any assets or code, conduct an interview with me. Ask me specific questions about: product/business type, brand name, aesthetic vibe, hero products, what design patterns to avoid, and overall creative direction.
Шаг 3: Передача вводных данных бренда — Claude Code] — Ответьте на вопросы модели пачкой параметров, детально описав гастрономическую концепцию:
1. Product/Business: Modern gourmet sandwich restaurant called "The Sandwich Factory". High-quality, freshly made, bold flavors, generous portions. Indulgent, not cheap fast food.2. Brand Name: The Sandwich Factory. Real, established, artisanal aesthetic.3. Vibe: Bold, modern, energetic, appetizing, premium but approachable. Must make visitors hungry within seconds.4. Hero Products (4 items): The Factory Classic, The Big Stack, Italian Works, Hot Press.5. Avoid: Generic fast-food aesthetics, Subway clones, cartoonish elements, sterile corporate layouts.6. Creative Direction: Take the information above and develop a distinctive, moody, appetizing visual identity rather than following generic restaurant templates.
Результат: Claude Code формирует полную креативную стратегию проекта и подготавливает цепочку вызовов инструментов Hicksfield для генерации графики, видео и айдентики.
2. Автоматическая генерация бренд-пака и сжатие веб-ассетов
Контекст: Большинство веб-проектов проваливаются на этапе визуального контента: стоковые фото выглядят дёшево, а ручная съёмка стоит тысячи долларов. Hicksfield MCP позволяет по сгенерированному брифу выпустить полноценный custom asset pack: логотипы, hero-видеозациклы, фотографии продуктов и текстуры. Критически важно контролировать расход токенов/кредитов и следить за оптимизацией веса файлов, так как исходники от нейросети обладают избыточным разрешением, убивающим PageSpeed.
Тайминг:[04:50], [05:12], [06:30]
Выгода: Генерация полного медиа-пакета (фото, видео-лупы, логотипы, иконки) заняла около 30 минут и обошлась в 187 кредитов Hicksfield на модели Sense 2 (для максимального качества автор рекомендует Sense 2.5).
Как применить:
Шаг 1: Утверждение плана генерации — Claude Code + Hicksfield] — Просмотрите предложенный Claude список ассетов, смету кредитов и дайте команду на генерацию пака (цветовая палитра, 3 варианта логотипа, 4 hero-фото сэндвичей, видео дымящегося мяса для hero-секции, фоновые текстуры).
Шаг 2: Удаление фона с логотипа — Claude Code] — Попросите модель обработать выбранный логотип и вырезать задний фон для прозрачной интеграции в навбар:
Remove the background from the selected primary logo and save it as a transparent PNG.
Шаг 3: Оптимизация и структурирование папок — Claude Code] — Исходные медиафайлы Hicksfield сохраняет в огромном разрешении и раскидывает по вложенным папкам. Дайте Claude указание сжать файлы под веб и собрать их в одну плоскую директорию для удобной загрузки:
The generated assets in their individual folders are too heavy. Create a new folder named 'web_assets' inside the web directory. Compress all images and videos for fast web loading, and place all flat assets into this single folder so I can easily upload them.
Результат: Папка web_assets со сжатыми фотографиями блюд, прозрачными логотипами, текстурами и видеофоном, готовыми к подключению в UI.
3. Сборка дизайн-системы и генерация прототипа (Level 1) в Claw Design
Контекст: Чтобы сайт выглядел консистентно, цвета, типографика, отступы и компоненты должны подчиняться единой системе. Инструмент Claw Design позволяет загрузить набор медиа-ассетов бренда и автоматически сгенерировать токены стилей, контрастные правила, сетки и готовые шаблоны страниц. На базе созданной дизайн-системы Claw Design формирует первую рабочую версию адаптивного веб-сайта.
Тайминг:[06:55], [07:45], [08:16], [08:45]
Выгода: Создание полноценной дизайн-системы занимает 5–7 минут. Первая итерация сайта сразу содержит зацикленное фоновое видео, интерактивные карточки меню, блок отзывов и контактную секцию.
Как применить:
Шаг 1: Инициализация системы — Claw Design] — Перейдите в раздел Design Systems -> Setup Design System -> Create.
Шаг 2: Загрузка медиа-пака и стилистических заметок — Claw Design] — Загрузите все файлы из папки web_assets (исключая README.md). В поле заметок (Notes) вставьте стилевые параметры:
Dark, warm, appetizing atmosphere. Deep charcoal background, warm golden-brown accents, crisp typography. Focus on freshness, steam, sizzling ingredients, and generous gourmet portions.
Шаг 3: Компиляция системы — Claw Design] — Нажмите Generate и подождите 5–7 минут. Инструмент сгенерирует палитры, правила контрастности, бейджи, кнопки, карточки и типографическую шкалу.
Шаг 4: Генерация базового сайта (Level 1) — Claw Design] — Перейдите к созданию страницы на базе сгенерированной дизайн-системы с использованием модели Fable 5:
Build the complete, production-ready website for The Sandwich Factory using this generated design system. Include the hero section with background video loop, the 4-item hero product showcase, the menu grid, word-of-mouth reviews, and store location details.
Результат: Интерактивный прототип сайта уровня 1: видео в хедере, интерактивный блок с четырьмя главными позициями меню (при клике карточка приподнимается), сетка цен и адресный блок.
4. Экспорт проекта в локальный код и UI-снайпинг с 21st.dev
Контекст: Сгенерированный в no-code/low-code среде сайт часто выглядит качественно, но страдает стандартной блочной структурой. Чтобы превратить его в продукт стоимостью $10 000+, требуется кастомизация на уровне чистого кода. Автор скачивает проект как zip-архив, разворачивает его локально через Claude Code и применяет технику «UI-снайпинга» (UI Sniping) — заимствование готовых сложных React/Tailwind-компонентов с сайта 21st.dev для замены статичных блоков сайта.
Тайминг:[09:55], [10:15], [10:78], [11:20]
Выгода: Экономия 10+ часов ручной верстки сложных каруселей и микродвижений благодаря копированию готового UI-кода с 21st.dev и его автоматической адаптации через Claude.
Шаг 2: Развёртывание на локальном сервере — Claude Code CLI] — Переместите архив в рабочую папку и скормите его агенту:
Review this attached zip archive containing the exported website and design system. Familiarize yourself with the file structure, HTML, and CSS. Then run the project on my localhost so I can preview it in the browser.
Шаг 3: Поиск компонента (UI Sniping) — Браузер / 21st.dev] — Перейдите на каталог компонентов 21st.dev. Найдите современную карточную карусель (Card Carousel) с плавным сдвигом и скопируйте её установочный промпт / код.
Use this carousel component structure from 21st.dev:[Вставьте скопированный с 21st.dev код/промпт компонента]Replace the static sandwich display cards in our website with this interactive carousel. Do NOT use the placeholder stock images; replace them with our generated sandwich assets from the assets directory.
Результат: Сайт запущен локально, а статичный блок меню заменён на плавную анимированную 3D-карусель с продукцией бренда.
5. Внедрение 3D Scroll-Scrubbing эффекта для премиального уровня (Level 2)
Контекст: Отличие дорогих сайтов (уровня Apple или топовых гастрономических брендов) от шаблонных лендингов — интерактивный сторителлинг, привязанный к скроллу страницы. Scroll scrubbing — это техника, при которой кадры 3D-сцены или видео высокого разрешения перематываются вперёд и назад строго синхронно с движением колеса мыши пользователя (или свайпом пальца). Для реализации этого эффекта автор подключает специализированный навык (3D Design Skill) в Claude Code.
Тайминг:[10:28], [11:46], [12:35], [13:30]
Выгода: Сайт приобретает кинематографический вау-эффект «собирающегося» или аппетитно разрезающегося бургера при прокрутке, что переводит разработку в ценовую категорию $10k+.
Как применить:
Шаг 1: Подключение 3D Skill-файла — Claude Code] — Прикрепите файл кастомного навыка (skill archive/prompt) к сессии Claude Code.
Шаг 2: Интеграция скролл-скраббинга в Hero/Feature блок — Claude Code] — Поставьте агенту задачу внедрить управление покадровой анимацией по скроллу:
Apply the attached 3D design skill to our website. Implement a scroll-scrubbed interactive animation section featuring the hero sandwich/burger. The animation playback must be directly tied to the user's scroll position, allowing them to inspect the ingredients and sizzling textures smoothly as they scroll down. Ask me clarifying questions if needed.
Шаг 3: Балансировка веса и производительности — Claude Code / Редактор] — Для обеспечения гладких 60 FPS на смартфонах оптимизируйте видеоряд скраббинга:
Уменьшите битрейт и разрешение для мобильных экранов.
На десктопе используйте сжатый webm/mp4 или Canvas Image Sequence с прелоадингом.
Результат: Готовый сайт Level 2: дымящееся видео в первом экране, карусель 21st.dev, интерактивный бургер, реагирующий на скролл мыши, адаптивная верстка и единая тёмная палитра.
FAQ
В: Что такое Hicksfield MCP и зачем подключать его к Claude Code?
О: Hicksfield — это мультимодальный генератор медиа-контента (изображения, логотипы, видео). Подключение через протокол MCP (Model Context Protocol) даёт Claude Code возможность напрямую вызывать генерацию картинок и видео по текстовому описанию без необходимости вручную переключаться между вкладками браузера.
В: В чём разница между Hicksfield Sense 2 и Sense 2.5?
О: Sense 2 — более экономная модель, на которой генерация базового медиа-пака обошлась автору в 187 кредитов. Sense 2.5 выдаёт фотореализм более высокого порядка и чистые текстуры, но потребляет значительно больше кредитов на одну генерацию.
В: Что делать, если AI генерирует логотип с артефактами или плохой типографикой?
О: В видео автор столкнулся с тем, что сгенерированный логотип оказался блёклым. Самый быстрый путь исправления — открыть полученный файл в Canva или Photoshop, поправить геометрию/шрифт за 2 минуты, сохранить как прозрачный PNG и сказать Claude Code заменить путь к файлу в коде.
В: Что такое «UI Sniping» простыми словами?
О: Это практика поиска изолированных, визуально привлекательных микро-компонентов (анимированные кнопки, карусели, табы, аккордеоны) на сайтах библиотек компонентов (например, 21st.dev) с последующей быстрой передачей их кода в AI-агент, чтобы тот встроил компонент в текущую страницу с сохранением стилей проекта.
В: Как устроен Scroll Scrubbing в веб-разработке?
О: Это привязка шкалы времени HTML5-видео (video.currentTime) или переключения кадров в <canvas> к полосе прокрутки страницы (window.scrollY или библиотека GSAP ScrollTrigger). Пользователь крутит колесо мыши — кадры плавно сменяются, создавая ощущение интерактивного 3D-рендера.
В: Почему нельзя сразу отправить видео максимального качества в скролл-скраббинг?
О: Видеопоток для scroll scrubbing декодируется браузером на лету. Тяжёлое 4K-видео вызовет зависание страницы и долгую загрузку, особенно на мобильных устройствах. Необходимо находить баланс между сжатием и четкостью пикселей.
Ресурсы и ссылки
Claude Code — агентный CLI-инструмент разработки от Anthropic для написания и редактирования кода — упомянут в видео.
Claw Design — платформа для генерации дизайн-систем и вёрстки веб-страниц на основе загруженных ассетов — упомянут в видео.
Hicksfield — AI-платформа для генерации графических и видео-ассетов с поддержкой MCP — упомянут в видео.
21st.dev — маркетплейс современных UI-компонентов и блоков интерфейса на Tailwind/React для UI-снайпинга — https://21st.dev.
Canva — графический редактор, упомянутый автором для быстрой ручной доработки сгенерированных логотипов — упомянут в видео.
Конспект создан на основе видео «How to Build $10,000 Websites with Claude Code & Hicksfield» канала автора. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=ljsxeD7jArg
