Свой сайт с Claude Code за вечер, без программиста

Что получишь

Свой сайт в интернете со своей ссылкой. Визитка, страница услуги, меню кафе, портфолио, страничка мастер-класса. Ты описываешь словами, что нужно, а Claude Code сам пишет файлы, сам открывает и сам правит. Ты смотришь в браузере и говоришь, что поменять.

Я 10 лет работала бухгалтером и экономистом, программированию не училась. За июль и август 2026 собрала с Claude несколько сайтов, некоторые с приёмом оплат.

Что нужно до старта

• Установленный Claude Code. Как поставить на Windows или Mac, по шагам и с картинками: установка Claude Code по шагам. Пройди её до конца, до момента, когда Claude Code ответил тебе в окне. Без этого дальше не начать
• Платная подписка Claude. По документации Anthropic Claude Code работает на тарифах Pro, Max, Team и Enterprise, на бесплатном его нет. Pro на странице цен Anthropic стоит 20 долларов в месяц (проверено 04.10.2026, claude.com/pricing). Лимиты общие с обычными чатами Claude. Из России сайт Claude открывается через VPN, а российской картой не оплатить. У меня Claude Pro выходит около 1 900-2 000 ₽ за аккаунт
• Компьютер на Windows или Mac. С телефона этот путь не пройти
• Тексты и фото для сайта. Хотя бы черновиком: кто ты, что делаешь, сколько стоит, как связаться. Фото лучше свои, без чужих людей в кадре
• Вечер. Часа три, если всё в первый раз

Шаги

Шаг 1. Собери всё в одну папку

1. На рабочем столе создай папку moy-sayt. Название латиницей и без пробелов, так меньше сюрпризов
2. Внутри создай папку foto и сложи туда фотографии для сайта. Назови их понятно: ya.jpg, rabota-1.jpg, rabota-2.jpg
3. Тексты положи в файл tekst.txt в той же папке. Пиши как есть, хоть кусками, хоть с ошибками. Claude Code их причешет

Пример, что может лежать в тексте:

Кто я: Марина, шью шторы на заказ в Казани, 12 лет.
Что делаю: шторы, римские шторы, покрывала, подушки.
Цены: от 3 000 рублей за окно, замер бесплатно по городу.
Как работаю: приезжаю на замер, показываю ткани, через 7-10 дней вешаю готовые.
Контакты: Телеграм @marina_shtory, телефон не указываем.
Отзывы: [вставь 2-3 настоящих отзыва клиентов, с их разрешения]

Шаг 2. Открой Claude Code в этой папке

1. Открой терминал. На Windows это PowerShell или Командная строка, на Mac Терминал. Как именно, есть на странице установки
2. Перейди в папку и запусти Claude Code:

cd Desktop/moy-sayt
claude

На Windows путь может быть длиннее, например cd C:\Users\Имя\Desktop\moy-sayt. Проще всего набрать cd, поставить пробел и перетащить папку мышкой прямо в окно терминала, путь вставится сам.

3. Появится приветствие Claude Code и строка для ввода. Если в первый раз, он попросит войти в аккаунт Claude через браузер

Всё, теперь с ним можно говорить обычными словами, по-русски.

Шаг 3. Первая просьба

Вставь целиком, в квадратных скобках подставь своё.

Привет. Я не программист, объясняй просто и коротко.

Сделай мне одностраничный сайт в этой папке. Тексты лежат в файле tekst.txt, фотографии в папке foto.

Что за сайт: [визитка мастера по пошиву штор / страница моего мастер-класса / портфолио]
Для кого: [женщины 30-55 из Казани, которые делают ремонт]
Что человек должен сделать на сайте: [нажать кнопку и написать мне в Телеграм]

Блоки сверху вниз:
1. Первый экран: кто я и что делаю одной фразой, моё фото, кнопка «Написать в Телеграм»
2. Что я делаю, коротко, карточками
3. Цены
4. Как я работаю, по шагам
5. Фото работ
6. Отзывы
7. Контакты и та же кнопка

Требования:
- обычные файлы HTML и CSS, без сборщиков и без установки программ, чтобы сайт открывался двойным щелчком по index.html
- нормально выглядит на телефоне, большинство откроет с телефона
- спокойные цвета [например: светлый беж и тёмно-зелёный], крупный читаемый шрифт
- тексты из tekst.txt поправь, чтобы читались легко, но смысл и цифры не меняй и ничего не выдумывай
- фото сожми, чтобы сайт быстро грузился
- никаких форм для ввода телефона и имени, связь только кнопкой в Телеграм

Когда закончишь, скажи, какой файл открыть.

Claude Code начнёт работать: создаёт файлы, показывает, что делает. Иногда спрашивает разрешения, например создать файл или запустить команду. Читай, что он предлагает, и соглашайся, если это про твою папку. Через несколько минут он скажет, что готово.

Шаг 4. Посмотри и поправь

Открой папку moy-sayt и дважды щёлкни по index.html. Сайт откроется в браузере. Это пока только у тебя на компьютере, в интернете его ещё нет.

Посмотри его с телефона тоже. В браузере на компьютере нажми F12 и значок телефона сверху, страница покажется в размере телефона. Или скажи Claude Code: «Как посмотреть сайт как с телефона?».

Дальше правишь словами, по одной-две вещи за раз:

Первый экран слишком пустой, сделай фото крупнее и подними кнопку выше.

Цены сделай таблицей: вид работы слева, цена справа. Шрифт в ценах крупнее.

Добавь внизу маленькую строчку: «© Марина Шторы, 2026».

После каждой правки обнови страницу в браузере (F5) и смотри. Не нравится, так и скажи: «Верни как было». Он помнит, что менял.

И ещё: если хочется переделать всё целиком, лучше начать новый разговор командой /clear и дать новую первую просьбу. Длинный разговор из сорока правок он ведёт хуже, чем свежий.

Шаг 5. Выложи в интернет

Самый простой путь, который ничего не требует ставить, это Netlify Drop. По документации Netlify он бесплатный.

1. Открой app.netlify.com/drop
2. Перетащи туда мышкой всю папку moy-sayt
3. Через несколько секунд получишь ссылку вида что-то-случайное.netlify.app. Это уже настоящий сайт, его можно открыть с любого телефона
4. Зарегистрируйся в Netlify (можно через почту) и привяжи сайт к аккаунту, тогда он останется навсегда и ссылку можно будет поменять на более понятную в настройках

Когда надо что-то поправить, правишь у себя с Claude Code, а потом снова перетаскиваешь папку в свой сайт на Netlify, раздел Deploys.

Второй бесплатный путь это GitHub Pages. Там сайт живёт по адресу имя.github.io. Нужен аккаунт на GitHub, и шагов больше. Если хочешь туда, скажи Claude Code: «Помоги выложить этот сайт на GitHub Pages, объясняй по шагам». Он проведёт.

Перед тем как отправлять ссылку людям, попроси знакомого открыть сайт со своего телефона без VPN. Если открывается, всё хорошо.

Шаг 6. Сохрани копию

Папка moy-sayt это и есть твой сайт. Скопируй её на флешку или в облако. Если что-то сломается, всегда можно вернуться к рабочей копии.

Где обычно ломается

claude не найден. Установка не закончилась или терминал открыт старый. Закрой терминал, открой новый и набери claude --version. Если всё равно не находит, вернись на страницу установки, там разобрана эта ошибка.

Фото не показываются. Обычно в названии файла пробелы, русские буквы или разный регистр: Foto.JPG и foto.jpg для сайта разные файлы. Переименуй латиницей маленькими буквами и скажи Claude Code: «Я переименовала фото, поправь ссылки на них».

На телефоне всё съехало. Скажи прямо: «На телефоне шириной 375 пикселей текст вылезает за край в блоке цен, поправь». Чем точнее описано, где и что, тем быстрее правка. Можно вставить скриншот, Claude Code понимает картинки.

Закончились лимиты. Claude Code тратит те же лимиты, что и чаты Claude, а сайт с картинками ест их заметно. У меня пятичасовое окно на рутине держалось примерно четыре часа, на исследованиях улетало за 30-40 минут. Подожди, пока лимит обновится, Claude Code сам скажет когда. Чтобы тратить меньше, проси правки пачкой по 2-3, а не по одной букве.

Хочется форму заявки с именем и телефоном. Для первого сайта лучше кнопка в Телеграм. Как только сайт собирает имена и телефоны, это уже персональные данные: нужна политика обработки и согласие человека, это требования закона. Форма с заявками это следующий шаг, его лучше делать, когда первый сайт уже работает.

Что дальше

Первый сайт собран, и дальше обычно хочется больше: свой домен, заявки, оплата, несколько страниц, чтобы Claude помнил, как устроен проект, и не надо было объяснять каждый раз заново. Всё это делается тем же способом, просьбами. Если хочется уверенно работать с Claude, с чатами, проектами и Claude Code, загляни в «Claude с нуля, 7 уроков». Там по шагам, от первого разговора до своих проектов

Источники

1. https://code.claude.com/docs/en/quickstart
2. https://code.claude.com/docs/en/overview
3. https://support.claude.com/en/articles/8325606-what-is-the-pro-plan
4. https://claude.com/pricing
5. https://docs.netlify.com/start/quickstarts/netlify-drop-quickstart/
6. https://docs.github.com/en/pages/quickstart

Ещё уроки