Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Пошаговое руководство по созданию премиального веб-сайта с использованием нового инструмента Claude Code от Anthropic. В видео разбирается процесс от установки среды до внедрения сложных анимаций и деплоя на реальный домен.
👤 Кому будет полезно: Вайбкодерам, фрилансерам и предпринимателям, которые хотят создавать кастомные сайты с «дорогим» дизайном, не погружаясь в написание кода вручную.
✨ Что получите: Вы научитесь настраивать Claude Code, устанавливать специализированные дизайн-скиллы, генерировать премиальные медиа-активы и упаковывать проект для публикации в сети.
1. Установка и настройка Claude Code
Контекст: Claude Code — это десктопное приложение (интерфейс командной строки и чата), которое работает напрямую с файлами на вашем компьютере. В отличие от обычного чата Claude, он может самостоятельно создавать папки, устанавливать зависимости и запускать код. Для работы требуется подписка Claude Pro.
Тайминг:
Выгода: Полная автономность AI в создании структуры проекта без необходимости копипастить код из браузера.
Как применить:
Шаг 1: Загрузка — Перейдите на claude.ai, оформите подписку Pro и скачайте десктопную версию приложения (раздел Claude Code в левом нижнем углу).
Шаг 2: Режим кода — После установки переключитесь в режим Code Mode (Command + 3 на Mac или Ctrl + 3 на Windows).
Шаг 3: Рабочая область — Создайте пустую папку на компьютере и выберите её в приложении через иконку папки. Это будет ваш "Workspace".
Результат: Готовая среда, где Claude видит все файлы и может ими управлять.
2. Прокачка Claude: Установка дизайн-скиллов
Контекст: По умолчанию AI выдает стандартные, часто скучные макеты. Чтобы сайт выглядел на $10,000, нужно установить "скиллы" — инструкции, которые меняют поведение модели, запрещают использование заезженных шрифтов и подталкивают к смелым визуальным решениям.
Тайминг: ,
Выгода: Избавление от "AI-стиля" (типичных шрифтов типа Inter и стандартных сеток) на раннем этапе.
Как применить:
Шаг 1: Front End Design Skill — Скопируйте ссылку на официальный скилл от Anthropic (из описания видео) и отправьте промпт:
Instal this skill
Шаг 2: UI UX Pro Max — Установите комьюнити-плагин с 57 стилями и 95 палитрами:
Instal this plugin using NPM [ссылка на репозиторий]
Шаг 3: Авто-режим — Переключите режим в Auto Mode (левый нижний угол), чтобы Claude вносил изменения без постоянного запроса разрешений.
Результат: Claude теперь использует премиальные шрифтовые пары и сложные цветовые палитры.
3. Создание брифа и генерация структуры
Контекст: Качество сайта напрямую зависит от глубины брифа. Вместо того чтобы сразу строить, нужно заставить Claude задать уточняющие вопросы. Это позволяет определить "Point of View" (точку зрения) бренда.
Тайминг:
Выгода: Сайт получается кастомным, а не шаблонным.
Как применить:
Шаг 1: Запуск генерации — Используйте команду плагина и опишите общую идею, добавив магическую фразу в конце:
/ui-ux-pro-max [Ваше описание сайта, например: ресторан в Сиэтле]. Ask me clarifying questions.
Шаг 2: Ответы на вопросы — Claude задаст около 7 вопросов (стиль, разделы, стек, анимация). Отвечайте максимально подробно.
Шаг 3: Выбор направления — Выберите один из предложенных AI стилистических вариантов (например, "Dark moody luxury").
Результат: Сгенерированный каркас сайта с продуманной иерархией и качественным копирайтингом.
4. Создание премиальных медиа-активов (Hero Section)
Контекст: Фотографии и видео — это 50% стоимости сайта. Если нет бюджета на фотографа, используйте связку AI-инструментов для создания уникального контента.
Тайминг: ,
Выгода: Уникальный визуальный ряд, который невозможно найти в стоках.
Как применить:
Шаг 1: Промпт для изображений — Попросите Claude написать промпт для генерации картинки, так как он уже знает контекст вашего бренда.
Шаг 2: Генерация и анимация — Используйте 11ElevenLabs (или аналоги) для создания изображения через DALL-E 3 и превращения его в видео через модель Google Veo 3.1.
Шаг 3: Апскейл — Увеличьте разрешение полученного видео (например, через Topaz) и закиньте файл в папку проекта.
Результат: Кинематографичный фон для главного экрана.
5. Использование библиотеки компонентов 21st.dev
Контекст: Чтобы добавить сложные эффекты (параллакс, скролл-анимации), не нужно писать их с нуля. Можно использовать библиотеку готовых "вайб-компонентов".
Тайминг: ,
Выгода: Профессиональные анимации, которые обычно требуют часов работы фронтенд-разработчика.
Как применить:
Шаг 1: Поиск — Найдите нужный эффект на 21st.dev.
Шаг 2: Копирование промпта — Нажмите "Copy Prompt" на сайте библиотеки.
Шаг 3: Интеграция — Вставьте промпт в Claude Code. Если Claude скажет, что компонент на React, а у вас статический HTML, он сам перепишет логику под ваш проект.
Результат: Интерактивный Hero-блок с эффектом скролла.
6. Полировка и микро-взаимодействия
Контекст: "Дорогой" сайт отличается деталями: как двигается курсор, как проявляется текст, какие отступы между секциями. Автор предлагает использовать чек-лист "10K Website" для проверки.
Тайминг: ,
Выгода: Переход от "просто сайта" к "дорогому продукту".
Как применить:
Шаг 1: Пакетные правки — Вместо мелких просьб, давайте задание на "ощущения":
We need more handcrafted micro interactions. The lower sections feel a bit generic. We don't need to make them busier, just more expensive.
Шаг 2: Эффекты курсора — Добавьте интерактивности в скучные секции:
Add some elegant micro movements and cursor interactions here. Make the embers move like fire and react to the cursor.
Шаг 3: Шрифтовая чистка — Если видите шрифт Inter, попросите заменить его на что-то более свежее, например, Geist.
Результат: Живой, отзывчивый интерфейс с уникальными деталями.
7. Деплой: Публикация сайта в интернет
Контекст: Локальный хостинг (localhost) виден только вам. Для запуска сайта нужен сервер и домен.
Тайминг: ,
Выгода: Полноценный рабочий сайт на собственном домене за ~$60 (включая подписку на AI).
Как применить:
Шаг 1: Выбор хостинга — Автор рекомендует Hostinger (Premium для статики, Business для Node.js проектов).
Шаг 2: Подготовка файлов — В папке проекта выделите все файлы (Ctrl+A / Cmd+A) и упакуйте в ZIP. Важно: архивируйте файлы ВНУТРИ папки, а не саму папку.
Шаг 3: Загрузка — В панели хостинга выберите "Migrate Site" -> "Upload backup" и перетащите ваш ZIP-архив.
Результат: Сайт доступен по адресу вашдомен.com.
FAQ
В: Почему Claude Code лучше, чем Wix или Squarespace? О: Конструкторы используют шаблоны, которые делают сайты похожими друг на друга. Claude пишет код с нуля под ваш запрос, что позволяет создать полностью кастомный дизайн без ограничений платформы.
В: Обязательно ли использовать платные скиллы? О: Упомянутые в видео скиллы (Front End Design и UI UX Pro Max) бесплатны. Вам нужна только подписка Claude Pro ($20/мес) для доступа к самому инструменту Claude Code.
В: Что делать, если Claude выдает ошибку при установке компонента? О: Просто опишите ошибку или вставьте текст ошибки из терминала. Claude Code умеет "читать" состояние браузера и терминала, он проанализирует проблему и предложит исправление. Главное — продолжать итерации.
В: Как понять, какой план хостинга выбрать? О: Если Claude создал простой HTML/CSS/JS сайт (static site), достаточно базового плана Premium. Если в проекте есть база данных, логин пользователей или Node.js — выбирайте план Business.
В: Можно ли обновлять сайт после публикации? О: Да. Вы вносите изменения в Claude Code локально, проверяете их, снова архивируете файлы и загружаете их на хостинг через файловый менеджер, заменяя старые.
Ресурсы и ссылки
Claude.ai — Платформа для скачивания Claude Code — https://claude.ai
21st.dev — Библиотека премиальных UI-компонентов и промптов — https://21st.dev
11ElevenLabs — Агрегатор AI-моделей для генерации фото и видео — упомянут в видео
Dribbble / Awwwards — Ресурсы для поиска визуального вдохновения — упомянуты в видео
Hostinger — Хостинг для размещения сайта — упомянут в видео
Geist / Fraunces — Шрифты, рекомендованные для "дорогого" вида — упомянуты в видео
Конспект создан на основе видео «How to Build a $10,000 Website with Claude Code» канала Better Ideas. Все права на оригинальный материал принадлежат авторам.Источник: https://youtu.be/VMvZuhcDdnw
