Раиса · AI без кода
0 / 7
Гайд · сайт через диалог с ИИ

Сайт без кода, собранный разговором

Ты описываешь словами, что хочешь. ИИ собирает. Ты смотришь и правишь. По сути у тебя под рукой быстрая веб-студия, а стоит это копейки. Показываю весь путь по шагам

⏱ Укладывается в один день 💸 Хостинг от нуля 🧠 Код понимать не нужно

С чего всё начинается

Почему именно так

Мы делаем статический сайт. Простыми словами это готовые страницы, которые просто лежат на сервере и открываются мгновенно. Они быстрые, их почти нельзя взломать, а хостинг дешёвый или бесплатный. Для портфолио, лендинга, сайта услуг или блога этого за глаза

Отмечай шаги галочкой слева, полоска сверху покажет, сколько пройдено. Прогресс сохранится, даже если закроешь страницу и вернёшься позже
Шаг 1
Поставить инструменты. Один раз

Нужно четыре штуки, всё бесплатно и ставится по инструкции с их сайтов. Понимать код не нужно, в этом весь смысл

Node.jsчтобы всё это работало. Ставь LTS-версию с nodejs.org
GitHub Desktopсохранять версии и потом публиковать сайт в один клик
VS Codeредактор, в нём мы и работаем
Claude Codeтот самый ИИ, который пишет код внутри проекта
Проверить, что Node встал
node --version

Что увидишь: номер версии, например v20.11.0. Число 18 и выше это норма

Шаг 2
Собрать папку проекта

Создаёшь проект и кладёшь в отдельную папку всё, что обычно отдают дизайнеру. Не идеально и не всё сразу, ИИ работает с тем, что есть, дополнить можно в любой момент

  • короткий текст о себе или бизнесе, живым языком
  • цвета бренда, хоть словами: тёплый белый, глубокий фиолетовый, акцентный
  • логотип, если есть
  • фото проектов и готовые тексты: слоганы, описания услуг, отзывы

Итог: папка проекта, внутри неё папка с твоими материалами. Дальше ИИ будет брать контент отсюда

Шаг 3
Первый запрос

Открываешь Claude Code и говоришь, что за сайт хочешь: портфолио, бизнес или личный, чем занимаешься и какое настроение у сайта. Он читает твои материалы и за пару минут собирает основу

Шаблон первого запроса
Собери статический сайт на Astro.
Это [портфолио / бизнес / личный] сайт для [чем занимаешься].
Настроение сайта: [спокойное, тёплое, минималистичное].
Мои материалы лежат в папке проекта.
Создай структуру и базовые страницы.

Что увидишь: сайт запустится черновым, с заглушками и минимальным оформлением. Это нормально, сейчас важна основа, а не финал

Шаг 4
Довести диалогом. Самое приятное

Ты смотришь на сайт и правишь словами. ИИ вносит, ты обновляешь страницу, смотришь, правишь снова. Так по кругу, пока сайт не начнёт ощущаться правильным

Примеры правок, просто пиши как думаешь
Сделай заголовок крупнее и добавь воздуха снизу
Закрепи меню при прокрутке
Карточки в три колонки, а на телефоне в одну
Фон слишком резкий, сделай мягкий off-white
Вылезла ошибка? Просто вставь её текст обратно в чат, и ИИ починит. Не нужно ничего гуглить
Шаг 5
Добавить нужное

Всё по одному запросу. Просто просишь словами, остальное он делает сам

  • форму обратной связи, чтобы тебе могли написать
  • тёмную и светлую тему с переключателем
  • красивые шрифты вместо системных
  • мягкие анимации при прокрутке
Пример: форма обратной связи
Добавь страницу контактов с формой: имя, почта, сообщение.
Пусть заявки уходят мне на почту через Formspree.
Добавь простую проверку полей.
Шаг 6
Опубликовать

Настраиваешь один раз автопубликацию, и дальше цикл простой: поменял сайт, сохранил, отправил в GitHub, сайт сам обновился. Никаких ручных загрузок файлов

Собрать финальную версию перед публикацией
npm run build

Что происходит: ИИ и GitHub сами собирают сайт и выкладывают его на хостинг. Каждое сохранение это публикация

Шаг 7
Подключить свой домен

Сайт на техническом адресе уже работает, но свой домен выглядит по-взрослому. Это настройка пары DNS-записей у регистратора, платформа подскажет какие

  • добавляешь домен в настройках хостинга (Netlify, Vercel и подобные)
  • прописываешь записи у регистратора домена
  • ждёшь от нескольких минут до пары часов, пока применится

Итог: живой сайт по своему адресу, быстрый, защищённый и с автоматическим HTTPS. Всё, готово

Особый случай

Переезжаешь со старого сайта?

Перенос с WordPress

Если у тебя уже есть сайт на WordPress, его можно перевезти на этот же подход, со всеми статьями и картинками. Коротко, чтобы не пугало:

  • в WordPress заходишь в Tools → Export и выгружаешь весь контент одним XML-файлом
  • отдельно скачиваешь папку с картинками
  • кладёшь и то, и другое в папку проекта
  • просишь ИИ разобрать выгрузку и собрать из неё статьи и страницы в новом формате

Маленький сайт (до полусотни статей) переносится за один диалог. Для большого в стартовом наборе есть готовый скрипт, который делает это массово. Дальше подчищаешь мелочи тем же диалогом: битые ссылки, старые вставки видео, дубли категорий

Главное при переезде: сохранить старые адреса статей или настроить переадресацию, чтобы не потерять позиции в поиске. ИИ умеет собрать список переадресаций сам

После запуска

Как развивать сайт дальше

Рабочий процесс не меняется: открыл ИИ, описал, что нужно, проверил, сохранил. Каждая следующая сессия опирается на предыдущие. Типичные следующие шаги

Вот и весь секрет

Ты не программируешь. Ты объясняешь результат словами

Всё остальное это повторения. Я показываю, как собираю сайты, приложения и ботов через AI, на живых проектах, без курсовой воды. Иду первой и набиваю шишки, а ты забираешь готовое

Забрать больше на канале