Суть урока
Раньше создание сайта было как строительство дома: нужен архитектор (дизайнер), прораб (верстальщик), строители (разработчики), и несколько недель работы. С Claude Code это как иметь волшебника-строителя — ты описываешь словами, что хочешь, он строит сам, ты корректируешь на ходу.
Уметь программировать для этого урока не нужно: ты описываешь, смотришь и просишь поправить. Нужен Claude Code — как его поставить, разобрано в уроке Claude Code в приложении для компьютера.
Ключевые концепции
- Claude Code собирает полноценный сайт на HTML, CSS и JavaScript (три основы веб-страницы: содержание, оформление и поведение) по описанию обычными словами
- Правки разговором: "сделай фон темнее" — вместо того чтобы самому менять оформление (CSS)
- Локальный сервер (localhost) — проверка сайта на своём компьютере до публикации
- Публикация (деплой) на Vercel, Cloudflare Pages или GitHub Pages — для личных проектов бесплатно (условия для коммерческих сайтов — ниже)
Теория
Что Claude Code реально создаёт
Когда ты просишь создать сайт, агент генерирует настоящий код. Не шаблон, не заглушку — полноценный рабочий HTML, CSS, JavaScript. Ты можешь открыть эти файлы в любом браузере, они будут работать.
Пример промпта: "Создай сайт для фитнес-коуча. Имя: Алексей Краснов. Специализация: трансформация тела за 90 дней. Нужно: главная страница с призывом к действию, секция с 3 программами (Похудение, Набор мышц, Марафон), отзывы клиентов, контактная форма. Стиль: тёмный фон, оранжевые акценты, современный минимализм."
Что агент создаёт:
index.html— структура страницыstyles.css— все стили, цвета, шрифты и подстройку под размер экранаscript.js— анимации, формы, реакцию на действия посетителя- Вёрстку, удобную на телефоне
- Правильную разметку: заголовки, разделы, служебные метатеги для поисковиков и соцсетей
Первый черновик появляется за минуты, а не за недели.
Живой пример: сайт фитнес-коуча
Разберём на примере весь путь создания сайта, от начала до конца.
Этап 1: Начальный промпт
Создай одностраничный сайт для персонального тренера. Детали клиента: - Имя: Алексей Краснов - Специализация: трансформация тела, работает с занятыми профессионалами - Ключевое обещание: видимый результат за 90 дней или возврат денег - Три программы: "Похудей на 10 кг" ($200/мес), "Рельеф и сила" ($250/мес), "VIP коучинг" ($500/мес) - Стиль: тёмный (#1a1a1a), акценты оранжевый (#f5813f), шрифт современный - Нужна форма для бесплатной консультации
Этап 2: Правки через разговор
Открыл в браузере, посмотрел. Теперь корректируешь:
- "Сделай заголовок крупнее, он теряется"
- "Добавь счётчик: 3 года опыта / 200+ клиентов / 94% довольны"
- "Секция с программами выглядит слишком скученно, добавь больше воздуха"
- "Добавь видео-обложку на главную (заглушку с кнопкой play)"
- "Форма записи — сделай поле выбора программы"
Каждая правка — одна фраза на русском. Агент находит нужное место в коде и меняет. Ты не видишь код, не редактируешь вручную.
Отзывы, цифры и фото в таком черновике агент придумывает как заглушки. Для настоящего клиента замени их его реальными данными: выдуманные отзывы и цифры вводят покупателей в заблуждение.
Этап 3: Проверка на устройствах
Агент уже подстроил сайт под разные экраны, но стоит проверить:
Проверь как выглядит сайт на мобильном экране 375px шириной. Если что-то ломается — исправь.
Локальный сервер: проверяем до деплоя
Перед тем как показать сайт клиенту или опубликовать, проверь его на своём компьютере. Claude Code запускает локальный сервер:
# Агент запускает это за тебя (параметр --bind 127.0.0.1 оставляет сервер доступным только на твоём компьютере)
python3 -m http.server 3000 --bind 127.0.0.1
# или
npx serve .Открываешь браузер: http://localhost:3000 — видишь сайт, как будто он уже в интернете, но доступен только тебе. В приложении Claude для компьютера Claude Code сам откроет сайт во встроенной панели Browser.
Зачем это важно: некоторые вещи не работают, если просто открыть HTML-файл двойным щелчком (запросы к данным и API, JavaScript-модули). Локальный сервер воспроизводит реальные условия.
Публикация (деплой): сайт в интернете
Vercel (рекомендуется для старта)
Стоимость: план Hobby бесплатный, но только для личных некоммерческих проектов. Для клиентского или коммерческого сайта нужен платный план Pro (на октябрь 2026: $20 в месяц за разработчика, в них входит $20 кредита на ресурсы). Свежие условия — на странице vercel.com/pricing. Если нужен бесплатный вариант для клиентского сайта, смотри Cloudflare Pages (урок Деплой 24/7: Cloudflare Workers) и сверяй условия на его странице тарифов.
Как опубликовать:
- Загружаешь код на GitHub — сервис для хранения кода (нужен аккаунт GitHub; войти в него придётся самому, а загрузку можно поручить агенту)
- Подключаешь репозиторий (папку проекта на GitHub) к Vercel (vercel.com)
- Нажимаешь Deploy
- Получаешь URL типа
fitness-krasnov.vercel.app - Можно подключить свой домен
Автоматические обновления: каждый раз, когда агент вносит правки, а ты сохраняешь их (коммит) и отправляешь на GitHub (push), Vercel сам обновляет сайт.
GitHub Pages
Стоимость: бесплатно для публичных репозиториев (код виден всем); для закрытых нужен платный тариф GitHub
Когда выбирать: простые сайты без серверного кода, когда ты не против, что код виден всем. Для интернет-магазинов и сайтов, которые в первую очередь продают, GitHub Pages не предназначен — так написано в условиях GitHub.
Как опубликовать: репозиторий → Settings → Pages → в разделе «Build and deployment» источник Deploy from a branch → выбираешь ветку → Save.
Расширение возможностей
Контактные формы
Статический сайт сам по себе не может принимать формы (нет серверной части). Решения:
- Formspree — есть бесплатный тариф с месячным лимитом отправок (точный лимит смотри на странице тарифов Formspree); в форме достаточно указать их адрес вместо своего обработчика
- Netlify Forms — если публикуешь сайт на Netlify, достаточно включить в настройках распознавание форм и добавить форме атрибут netlify
- EmailJS — отправка прямо из браузера через их API
Агент знает все эти сервисы и настроит по твоей просьбе.
CMS для контента
Если клиент хочет сам редактировать тексты без помощи программиста, ему нужна CMS (система управления содержимым — панель для правки текстов на сайте):
- Decap CMS (бывший Netlify CMS) — открытый, бесплатный
- Sanity — более мощный, есть бесплатный тариф
- Contentful — популярный вариант
Агент может подключить любой из них к статическому сайту.
Платёжные системы
Для продажи услуг прямо с сайта:
- Stripe — международные карты (доступность зависит от страны, где зарегистрирован бизнес)
- PayPal — виджет добавляется в несколько строк кода
Какие сайты чаще всего заказывают
Сайты — одна из услуг, которую можно делать с Claude Code. Вот что чаще всего заказывают:
Сайт-визитка для локального бизнеса: парикмахерская, ресторан, стоматология.
Лендинг для продукта или услуги: один экран, который ясно объясняет, чем полезно предложение, и форма для заявки.
Портфолио для фрилансера: клиент хочет показать работы.
Сайт для мероприятия: конференция, вечеринка, корпоратив.
Цена и время зависят от рынка, ниши и объёма правок, универсальных цифр нет. Как посчитать свою цену — в уроках Ценообразование: цена по ценности для клиента и Как назначить цену.
Ограничения: что Claude Code не делает сам
Честно о границах:
- Сложные веб-приложения (вход пользователей, базы данных, обновление в реальном времени) требуют больше, чем HTML, CSS и JavaScript: нужна серверная часть (backend — она хранит данные и выполняет логику). Claude Code справится, но это заметно сложнее и дольше
- Дизайн не всегда получается "вау" с первой попытки — нужно несколько кругов правок
- Сложных иллюстраций и фотографий агент не рисует: простые значки он сделает кодом, а для остального возьмёт бесплатные стоковые картинки или эмодзи
- Оригинальные фотографии нужно предоставить самому
Практический вывод: для лендингов и сайтов-визиток — отличный инструмент. Для сложных веб-приложений с пользователями, платежами, реальными данными — нужно больше знаний о том, как устроены такие системы (уроки библиотеки API и интеграции и Деплой 24/7: Cloudflare Workers).
Практика
Задание: создай одностраничный сайт
Выбери один из вариантов:
- Вариант A: Сайт для себя лично (кто ты, чем занимаешься, контакты)
- Вариант B: Тестовый сайт для вымышленного бизнеса (придумай сам)
- Вариант C: Если уже есть реальный клиент — начни его сайт
Процесс:
- Опиши что нужно в одном промпте (тема, секции, стиль, цвета)
- Посмотри результат в браузере через локальный сервер
- Сделай минимум 5 правок через разговор
- Опубликуй на Vercel или GitHub Pages (порядок — в разделе о публикации выше; можешь попросить Claude Code провести тебя по шагам)
- Поделись ссылкой — у тебя есть живой сайт
⚠️ Если это сайт настоящего клиента (вариант C), помни: бесплатный тариф Hobby у Vercel — только для некоммерческих проектов, а GitHub Pages требует открытого кода и не предназначен для сайтов, которые в первую очередь продают. Личные данные в открытый код не клади.
Инструменты и ресурсы
- Claude Code — создаёт HTML/CSS/JS из описания
- Vercel — публикация; бесплатный тариф только для некоммерческих проектов
- GitHub Pages — альтернатива для публичных репозиториев
- Cloudflare Pages — быстрая публикация, есть бесплатный тариф, глобальная сеть доставки (CDN). На октябрь 2026 Cloudflare советует начинать новые проекты на Workers (туда тоже можно выложить простой сайт), Pages продолжает работать
- Formspree — обработка форм, есть бесплатный тариф с лимитом
- EmailJS — отправка форм прямо из браузера
- Playwright — автоматическое тестирование веб-приложений в разных браузерах
- Puppeteer — автоматизация Chrome для тестирования и скриншотов
- Google Fonts — бесплатные шрифты, агент умеет подключать
- Unsplash — бесплатные фотографии (агент может брать оттуда)
- Coolors — генератор цветовых палитр если не знаешь что выбрать
- Lighthouse — проверка скорости и доступности сайта (встроена в инструменты разработчика Chrome, Chrome DevTools)
Актуальные цены и версии: Актуальное сейчас.
Частые ошибки
Ошибка 1: Не тестировать на мобильных экранах Сайт выглядит идеально на компьютере, но на телефоне текст вылезает за экран, кнопки слишком маленькие. Всегда проверяй: "Проверь, как выглядит на экране шириной 375px" (это ширина iPhone SE — одного из узких популярных экранов).
Ошибка 2: Забыть meta viewport Без <meta name="viewport" content="width=device-width, initial-scale=1.0"> сайт на телефоне выглядит как уменьшенная версия для компьютера. Claude обычно добавляет этот тег, но проверь.
Ошибка 3: Не проверить скорость загрузки Огромные картинки, неоптимизированные шрифты, тяжёлые анимации — сайт загружается 8 секунд. Попроси агента: "Оптимизируй все изображения и проверь что сайт загружается менее чем за 3 секунды". Или используй Lighthouse в Chrome DevTools.
Перекрёстные ссылки
- Настройка API ключей и .env — файл
.env, где хранятся секретные ключи, для подключения сервисов к сайту (Stripe, Formspree) - Деплой 24/7: Cloudflare Workers — подробно про публикацию на Cloudflare Workers и Pages
- RAG — Retrieval Augmented Generation — если на сайте нужен чат-бот с базой знаний
Ключевые выводы
Простой сайт, на который раньше уходила неделя, теперь можно собрать за несколько часов. Это не просто прибавка в скорости, а другой тип работы: то, что требовало команды, теперь по силам одному человеку.
Правки обычными словами — главное преимущество. Ты не учишь CSS, ты описываешь, что хочешь. Это меняет то, кто может делать сайты.
Опубликовать первый сайт — навык, который пригодится и в работе, и в личных проектах. Не откладывай практику.
Следующий урок
→ Самый неожиданный урок — финал курса: какие твои качества AI не заменит
В библиотеке, по желанию: API и интеграции — как программы разговаривают друг с другом и как это использовать
Отметка хранится только в этом браузере и никуда не отправляется. Мой прогресс