Собери свой сайт
за один вечер

Сайт больше не обязан начинаться с дизайнера, технического задания на сорок страниц и бюджета, который страшно произнести. Но Claude Code — не волшебная кнопка. Хороший результат получается, когда ты даёшь понятную задачу и проверяешь работу по шагам.

Что реально можно получить

Вот три живых сайта из моей работы. Я не показываю учебные макеты: каждый проект решает конкретную задачу бизнеса и уже существует в интернете.

liliyalab.ruAI-услуги и реальные кейсы

kamniifurnitura.ruМой рабочий магазин

morskoy-konteyner.ruКоммерческий сайт под услугу

Твой первый результат может быть проще. Наша задача — получить аккуратную рабочую страницу, которая открывается на компьютере и телефоне, а не сразу повторить большой сервис.

Шаг 01
Подготовь Claude и рабочий доступ

Claude Code — AI-инструмент Anthropic, который умеет читать папку проекта, создавать файлы и вносить правки по твоему описанию. Для старта нужен аккаунт Claude и доступ к функциям Claude Code. Условия тарифов и доступность могут меняться, поэтому проверяй их на официальном сайте перед оплатой.

• Открой claude.ai и создай аккаунт.
• Не передавай Claude пароли, банковские данные, ключи API и закрытые клиентские базы.
• Создай отдельную пустую папку для первого сайта — так AI не затронет другие документы.

Шаг 02
Скачай VS Code

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

1. Открой официальную страницу code.visualstudio.com/Download.
2. На Mac нажми кнопку Mac. На Windows — Windows.
3. Открой загруженный файл и установи программу обычным способом.

1

Шаг 03
Создай папку проекта

На рабочем столе создай папку с простым названием латиницей, например my-first-site. Не складывай туда фотографии, договоры и другие личные файлы — только материалы этого сайта.

• Открой VS Code.
• В верхнем меню нажми File → Open Folder.
• Выбери my-first-site и подтверди открытие.

Шаг 04
Подключи Claude Code

Самый понятный путь для новичка — официальное расширение Claude Code для VS Code. Оно добавляет панель чата рядом с файлами проекта.

1. Нажми значок Extensions в левой панели или сочетание Cmd + Shift + X на Mac и Ctrl + Shift + X на Windows.
2. В поиске напиши Claude Code.
3. Проверь, что издатель — Anthropic, и нажми Install.
4. После установки открой панель Claude и войди в свой аккаунт.

3

Если панель не появилась, перезапусти VS Code или выбери команду Developer: Reload Window. Актуальная последовательность установки есть в официальной документации Claude Code.

Шаг 05
Подготовь сильный запрос

Плохой запрос звучит так: «Сделай красивый сайт». Claude вынужден угадать аудиторию, блоки, стиль и нужные кнопки. Чем больше догадок — тем случайнее результат.

Перед стартом ответь на четыре вопроса:

Я хочу собрать одностраничный сайт для [бизнес / услуга / продукт].

Аудитория: [кто эти люди и с какой задачей они приходят].
Главная цель сайта: [написать в Telegram / оставить заявку / посмотреть портфолио].

Нужные блоки:
1. Первый экран с понятным обещанием результата.
2. Коротко обо мне или компании.
3. Услуги или продукты.
4. Реальные примеры работ.
5. Частые вопросы.
6. Контакты и одна главная кнопка.

Визуальный стиль: [тёмный / светлый / спокойный / дерзкий].
Цвета: [перечисли 2–3 цвета].
Референс по настроению: [ссылка, если есть].

Технические требования:
- сайт должен хорошо выглядеть на телефоне;
- использовать простой HTML, CSS и JavaScript без лишних библиотек;
- не выдумывать факты, цены, отзывы и цифры;
- не добавлять форму, которая никуда не отправляет данные;
- сначала показать структуру и список файлов;
- только после моего подтверждения создавать первую версию.

Задай мне уточняющие вопросы, если информации недостаточно.

Шаг 06
Собери первую версию и проверь

После согласования структуры напиши: «Создавай первую версию. После сборки проверь страницу на компьютере и на ширине телефона 390 px».

Claude обычно создаст как минимум:

• index.html — содержание страницы;
• styles.css — цвета, размеры, отступы и адаптация;
• script.js — только если нужны меню, фильтры или интерактивность;
• assets/ — логотип, фотографии и другие изображения.

Попроси Claude запустить локальный сервер и дать адрес вида http://localhost:…. Открой ссылку в браузере и проверь страницу сама.

Шаг 07
Вноси правки короткими итерациями

Не отправляй сразу двадцать замечаний. Двигайся слоями: сначала структура, потом текст, затем визуал и только после этого мелочи.

• «Сократи первый экран: один заголовок, одно пояснение, одна кнопка».
• «Сделай основной текст крупнее на телефоне, минимум 17 px».
• «Убери всё, что выглядит шаблонно или не помогает принять решение».
• «Проверь контраст текста и кнопок».
• «Не меняй рабочие ссылки и тексты в других блоках».

После каждой важной правки проси повторно открыть страницу и проверить desktop + mobile. Именно так я собираю рабочие сайты: не одним «идеальным промптом», а короткими контролируемыми шагами.

Шаг 08
Опубликуй сайт

Для простой статической страницы подойдёт GitHub Pages. Это бесплатный вариант без собственного сервера. Если у тебя уже есть домен или хостинг, способ подключения будет зависеть от провайдера.

1. Создай аккаунт на github.com.
2. Создай новый публичный репозиторий с названием проекта.
3. Загрузи файлы сайта в основную ветку main.
4. Открой Settings → Pages.
5. В разделе публикации выбери ветку main и корневую папку.
6. Сохрани настройки и дождись появления публичной ссылки.

Если Claude предлагает выполнить команды Git самостоятельно, сначала прочитай список действий. Не вставляй в чат пароль, токен GitHub или данные оплаты. Для первого проекта безопаснее пройти публикацию вручную по экрану.

Пять ошибок, которые портят первый сайт

• Слишком большая задача. Начни с одной страницы, а не с маркетплейса.
• Нет реальных материалов. AI не должен придумывать отзывы и кейсы вместо тебя.
• Десять кнопок. Оставь одно главное действие для посетителя.
• Проверка только на ноутбуке. Большая часть людей увидит страницу с телефона.
• Правки без границ. Говори, какой блок изменить и что нельзя трогать.