🎯 О чём этот конспект: Пошаговое руководство по созданию премиального веб-сайта с использованием нового инструмента Claude Code от Anthropic. В видео разбирается процесс от установки среды до внедрения сложных анимаций и деплоя на реальный домен.

👤 Кому будет полезно: Вайбкодерам, фрилансерам и предпринимателям, которые хотят создавать кастомные сайты с «дорогим» дизайном, не погружаясь в написание кода вручную.

✨ Что получите: Вы научитесь настраивать Claude Code, устанавливать специализированные дизайн-скиллы, генерировать премиальные медиа-активы и упаковывать проект для публикации в сети.

1. Установка и настройка Claude Code

Контекст: Claude Code — это десктопное приложение (интерфейс командной строки и чата), которое работает напрямую с файлами на вашем компьютере. В отличие от обычного чата Claude, он может самостоятельно создавать папки, устанавливать зависимости и запускать код. Для работы требуется подписка Claude Pro.

Тайминг: [01:35]

Выгода: Полная автономность AI в создании структуры проекта без необходимости копипастить код из браузера.

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

• Шаг 1: Загрузка — Перейдите на claude.ai, оформите подписку Pro и скачайте десктопную версию приложения (раздел Claude Code в левом нижнем углу).
• Шаг 2: Режим кода — После установки переключитесь в режим Code Mode (Command + 3 на Mac или Ctrl + 3 на Windows).
• Шаг 3: Рабочая область — Создайте пустую папку на компьютере и выберите её в приложении через иконку папки. Это будет ваш "Workspace".

Результат: Готовая среда, где Claude видит все файлы и может ими управлять.

2. Прокачка Claude: Установка дизайн-скиллов

Контекст: По умолчанию AI выдает стандартные, часто скучные макеты. Чтобы сайт выглядел на $10,000, нужно установить "скиллы" — инструкции, которые меняют поведение модели, запрещают использование заезженных шрифтов и подталкивают к смелым визуальным решениям.

Тайминг: [02:24], [03:00]

Выгода: Избавление от "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" (точку зрения) бренда.

Тайминг: [04:58]

Выгода: Сайт получается кастомным, а не шаблонным.

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

• Шаг 1: Запуск генерации — Используйте команду плагина и опишите общую идею, добавив магическую фразу в конце:

/ui-ux-pro-max [Ваше описание сайта, например: ресторан в Сиэтле]. Ask me clarifying questions.

• Шаг 2: Ответы на вопросы — Claude задаст около 7 вопросов (стиль, разделы, стек, анимация). Отвечайте максимально подробно.
• Шаг 3: Выбор направления — Выберите один из предложенных AI стилистических вариантов (например, "Dark moody luxury").

Результат: Сгенерированный каркас сайта с продуманной иерархией и качественным копирайтингом.

4. Создание премиальных медиа-активов (Hero Section)

Контекст: Фотографии и видео — это 50% стоимости сайта. Если нет бюджета на фотографа, используйте связку AI-инструментов для создания уникального контента.

Тайминг: [06:47], [07:14]

Выгода: Уникальный визуальный ряд, который невозможно найти в стоках.

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

• Шаг 1: Промпт для изображений — Попросите Claude написать промпт для генерации картинки, так как он уже знает контекст вашего бренда.
• Шаг 2: Генерация и анимация — Используйте 11ElevenLabs (или аналоги) для создания изображения через DALL-E 3 и превращения его в видео через модель Google Veo 3.1.
• Шаг 3: Апскейл — Увеличьте разрешение полученного видео (например, через Topaz) и закиньте файл в папку проекта.

Результат: Кинематографичный фон для главного экрана.

5. Использование библиотеки компонентов 21st.dev

Контекст: Чтобы добавить сложные эффекты (параллакс, скролл-анимации), не нужно писать их с нуля. Можно использовать библиотеку готовых "вайб-компонентов".

Тайминг: [07:51], [08:48]

Выгода: Профессиональные анимации, которые обычно требуют часов работы фронтенд-разработчика.

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

• Шаг 1: Поиск — Найдите нужный эффект на 21st.dev.
• Шаг 2: Копирование промпта — Нажмите "Copy Prompt" на сайте библиотеки.
• Шаг 3: Интеграция — Вставьте промпт в Claude Code. Если Claude скажет, что компонент на React, а у вас статический HTML, он сам перепишет логику под ваш проект.

Результат: Интерактивный Hero-блок с эффектом скролла.

6. Полировка и микро-взаимодействия

Контекст: "Дорогой" сайт отличается деталями: как двигается курсор, как проявляется текст, какие отступы между секциями. Автор предлагает использовать чек-лист "10K Website" для проверки.

Тайминг: [10:18], [11:22]

Выгода: Переход от "просто сайта" к "дорогому продукту".

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

• Шаг 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) виден только вам. Для запуска сайта нужен сервер и домен.

Тайминг: [13:06], [14:51]

Выгода: Полноценный рабочий сайт на собственном домене за ~$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