⚙️ Настройка и установка навыков
1. Установка Claude Code:
Нужна подписка Claude Pro (~$20/мес).
Раздел 1
Скачать и установить настольное приложение с сайта.
Переключиться в режим программирования (Cmd/Ctrl + 3).
Раздел 2
2. Установка дизайнерских навыков (Skills):
Frontend Design Skill (от Anthropic) — работает в фоне, улучшает общий
Раздел 3
дизайн-вывод, блокирует шаблонные шрифты.
UI UX Pro Max (сообщество) — содержит 57 стилей интерфейса, 95
Раздел 4
цветовых палитр, 56 пар шрифтов. Вызывается по необходимости.
Навыки устанавливаются глобально через вставку ссылки в чат Claude с
Раздел 5
командой "Установите этот навык/плагин".
3. Важная настройка: Переключение селектора режимов в автоматический режим
Раздел 6
для беспрерывной работы ИИ.
Создание технического задания (ТЗ)
Раздел 7
Конкретность — ключ. Чем детальнее описание, тем лучше результат.
Если сложно описать словами: используйте референсы (скриншоты
Раздел 8
понравившихся сайтов).
Источники вдохновения: Dribble, Awwwards, Pinterest.
Раздел 9
Структура промпта: Вызов навыка ( /ui-ux-pro-max ) + краткое описание задачи +
фраза "Задавайте мне уточняющие вопросы".
Раздел 10
Claude задаст уточняющие вопросы (название, стиль, разделы, контент и т.д.) и
предложит варианты стиля на выбор. Ответы на этом этапе формируют основу
Раздел 11
всего проекта.
Разработка и полировка сайта
Раздел 12
После генерации базовой версии сайта проводится оценка и доработка по
контрольному списку.
Раздел 13
1. Работа с изображениями и видео:
Лучший вариант — оригинальный брендированный контент.
Раздел 14
Альтернатива — генерация с помощью ИИ (ChatGPT для фото, 11ElevenLabs
для видео и комплексной работы).
Раздел 15
Лайфхак: Попросите Claude написать промпт для генератора
изображений, соответствующий эстетике проекта.
Раздел 16
2. Добавление премиум-элементов:
Используйте библиотеки готовых компонентов, например, 21st.dev.
Раздел 17
Можно копировать промпты для точного воссоздания понравившихся
элементов (анимации, эффекты прокрутки, кнопки).
Раздел 18
Claude может адаптировать сложные компоненты (например, React) под
архитектуру вашего проекта.
Раздел 19
3. Итеративная полировка:
Пакетные правки: Попросите Claude предложить и внедрить пакет улучшений
Раздел 20
сразу (например, "больше микро-взаимодействий", "сделать разделы менее
шаблонными").
Раздел 21
Эффекты курсора и анимация: Просмотрите каждый раздел и добавьте по
одному сдержанному взаимодействию (параллакс, свечение, плавное
Раздел 22
движение), чтобы сайт "ожил".
Работа с текстом: Навык Frontend Design помогает Claude генерировать
Раздел 23
сдержанный, чувственный текст. Избегайте многословного AI-стиля.
Замена шаблонных шрифтов: Например, замените часто используемый Inter
Раздел 24
на более уникальный (Geist).
4. Мобильная версия:
Раздел 25
Попросите Claude провести отдельную проверку мобильной вёрстки, а не
просто сделать сайт адаптивным. Нужно скрывать, изменять размеры и
Раздел 26
компактизировать элементы специально для small screens.
Хостинг и запуск сайта
Раздел 27
Сайт нужно разместить на реальном сервере, чтобы он был доступен всем.
1. Выбор хостинга (на примере Hostinger):
Раздел 28
Для простых статических сайтов (как в примере) подходит Премиум-план.
Для сложных проектов с бэкендом, БД, платежами — Бизнес-план
Раздел 29
(поддерживает Node.js).
Hostinger предлагает привлекательные условия хостинга и домен на первый год при оплате за 12 месяцев.
2. Процесс деплоя:
Раздел 31
В панели Hostinger выберите "Перенести существующий сайт".
Важно: Заархивируйте не папку проекта, а все файлы внутри неё (чтобы
Раздел 32
index.html был в корне архива).
Загрузите полученный ZIP-файл в Hostinger.
Раздел 33
Итоговая стоимость
Claude Pro: ~$20/мес.
Раздел 34
Хостинг + домен (Hostinger): ~$43/год (по акции).
Итого: Сайт, выглядящий на $10 000, можно создать примерно за $60
Раздел 35
(первоначальные вложения).
Выводы: Claude Code позволяет создавать профессиональные, уникальные сайты,
Раздел 36
конкурирующие с работами дорогих фрилансеров. Ключевые факторы успеха —
чёткое ТЗ, использование навыков для улучшения дизайна, итеративная полировка с
Раздел 37
акцентом на детали (анимация, типографика) и правильный выбор хостинга для
финального запуска.
Раздел 38
