Как создать сайт с Claude Code с нуля
Сайт с Клод Кодом: с чего начать, какой запрос отправить и что проверить перед публикацией. Готовое задание для первого лендинга и понятный план работы.
Содержание статьи
Для первого сайта с Claude Code выбери одну задачу: например, представить свой проект и дать ссылку на него. Подготовь текст и изображения, открой папку проекта, опиши нужную страницу. Затем проверь её на телефоне и опубликуй. Ниже — задание, которое можно взять за основу.
1. Собери материалы для одной страницы
Допустим, ты делаешь портфолио монтажёра. Посетителю нужно увидеть работы, понять, с какими задачами ты помогаешь, и написать тебе. Для первой версии достаточно этих трёх вещей.
Подготовь 3–5 своих работ, короткое описание и контакт. Если примеров пока нет, так и укажи. Проси AI оставлять пропуски для недостающих материалов: выдуманные клиенты и отзывы тебе не нужны.
- Кто будет смотреть сайт и что должен сделать после просмотра.
- Тексты, изображения и ссылки, которые можно публиковать.
- Один пример оформления с пояснением, что именно в нём нравится.
2. Открой Claude Code и дай первое задание
В Claude Desktop открой вкладку Code под аккаунтом с подходящим доступом. Для нового сайта выбери отдельную папку. Актуальная инструкция по подключению — в официальном источнике ниже.
Этот запрос можно адаптировать под своё портфолио или страницу продукта. Сначала посмотри предложенный план, затем разреши создание файлов.
Помоги собрать сайт-портфолио для [чем ты занимаешься].
Посетитель: [кто твой клиент].
Главное действие: [например, написать мне в Telegram].
На странице нужны: короткое описание, мои работы, условия и контакт.
Используй материалы из [папка]. Не выдумывай отзывы, цифры и клиентов.
Оформление: [опиши пример]. Крупный читаемый текст, удобная версия для телефона.
Сначала предложи структуру и задай вопросы, если данных не хватает.
После моего подтверждения создай страницу и объясни, как её открыть.
Пока не подключай оплату, базу данных и платные сервисы.3. Пройди сайт как посетитель
Открой страницу в браузере. Прочитай её с телефона: понятно ли с первого экрана, что ты предлагаешь? Помещаются ли работы? Ведёт ли кнопка на правильный контакт?
Исправления давай по одному. Например: «На телефоне заголовок занимает весь экран. Уменьши его, сохрани текст и не меняй другие блоки». Так легче заметить, что именно изменилось.
- У каждой кнопки есть настоящее действие.
- Нет горизонтальной прокрутки и текста поверх картинок.
- Ссылки и изображения открываются; личные данные не попали на страницу.
- Если появилась форма, сообщение действительно доходит до получателя.
4. Получи рабочую ссылку
Попроси Claude Code подготовить проект к размещению и объяснить варианты хостинга — сервиса, где сайт будет доступен другим людям. Уточни стоимость до подключения. Начать можно с технического адреса, а свой домен добавить позже.
После публикации открой ссылку с другого устройства и повтори проверку. Сохрани рабочую версию до следующих правок. Заявки, вход в аккаунт и оплату добавляй отдельными этапами: у каждого из них своя проверка.
Можно сделать сайт с Клод Кодом без знания программирования?
Начать с небольшой страницы можно. По ходу придётся освоить запуск проекта, сохранение версий и проверку ошибок. AI помогает с кодом, а ты принимаешь решения о содержании и проверяешь работу сайта.
Этот же запрос подойдёт для Codex?
Да, описание задачи можно использовать и в Codex. Настройки, доступ к файлам и подтверждение действий отличаются. В Академии основной маршрут с видеоуроками показан на Codex от OpenAI, с входом через аккаунт ChatGPT.
Связанные материалы
Следующие материалы помогут выбрать первый проект, показать результат и найти заказчика.
Начни с бесплатного практического маршрута
В личном кабинете можно начать бесплатно, увидеть структуру программы и перейти от чтения к собственному работающему проекту.