Создаём красивый одностраничный сайт с помощью ИИ
Сегодня, в 2026 году, подойти к вопросу создания сайта можно несколькими способами.
Первый - можно просто использовать Codex или Claude Code. создать новую папку на диске, создать проект в Codex/Claude Code и дать команду "создай одностраничный сайт <тут пишем подробности>".
Эти инструменты хорошо программируют, но не так хорошо как человек понимают что такое "красиво".
К счастью, есть более подходящий вариант.
Используйте ИИ-сервис https://lovable.dev/
Он предоставит вам ИИ-чат, в котором русским языком надо описать, как сайт должен выглядеть и что на нем должно быть.
Если вы никогда не создавали сайтов, вам необходимо узнать названия элементов, из которых состоит сайт, чтобы затем составить конкретную инструкцию для ИИ.
Напишите запрос в google "из каких элементов состоит страница сайта", и переключитесь в "Режим ИИ".
Спустя 1 минуту, когда вы узнали 5 основных терминов для описания страницы сайта, вы готовы составить грамотный запрос для https://lovable.dev/
Например, такой:
нужен одностраничный сайт. В мобильной версии дизайна должно быть так: вверху логотип "Продаю Гараж в Сибири". Затем 3 раздела (своя строка для каждого): "Гараж из дерева", "Гараж изо льда", "Гараж из железа". В каждом разделе должно быть фото с примером гаража.
Затем раздел "обратная связь" (кнопка для вызова формы обратной связи - заказать звонок),
затем "контакты".
И в самом низу - адрес, ИНН и т.п.
Спустя несколько минут вы будете удивлены тому, насколько качественный сайт получился. Специально не буду добавлять тут фото - попробуйте сами, научитесь это делать и получите истинное удовольствие 🙂
И затем перед вами встает следующий вопрос - как теперь этот сайт забрать из https://lovable.dev/ и сделать "своим"? То есть перенести файлы сайта на свой хостинг и домен.
На этом этапе удобство заканчивается, если вы не купили платную подписку на https://lovable.dev/. Но и для полностью бесплатного тарифа способ есть - о нем пойдет речь ниже.
Забираем файлы своего сайта через github.com
Делается это в несколько этапов.
Шаг первый - Создаем аккаунт на GitHub (https://github.com/signup)
если вы не понимаете английский язык - воспользуйтесь встроенным в браузер переводчик, щелкнув на странице правой кнопкой мыши и выберите "перевести на русский"
Шаг второй - устанавливаем связь между сайтами
В поле ввода ИИ-чата https://lovable.dev/ нажимаем на плюсик и выбираем GitHub
Откроется страница, которая выглядит примерно вот так:
На ней мы создадим связь между аккаунтами на https://lovable.dev/ и https://github.com/, нажав кнопку "Add account".
Откроется окно для установки соединения и разрешите доступ к вашему аккаунту на https://github.com/.
- В чате снова нажмем на плюсик и затем на Github, и снова переходим на ту же страницу с настройками, но теперь она будет выглядеть немного иначе:
В разделе Account добавился ваш аккаунт и справа от него кнопка "Connect".
Жмем на нее и через несколько секунд справа внизу страницы видим сообщение об успешной синхронизации проекта с github.com:
Шаг третий - забираем файлы сайта с GitHub
После синхронизации страница будет выглядеть примерно так
На ней важно то, что выделено красными квадратами. А именно - ссылка вида https://github.com/<ваш_логин_на_github>/название_проекта_с сайтом.git
Нажмите на кнопку "копировать", выделенную на скриншоте маленьким красным квадратом и вставьте (нажатием Ctrl+V) скопированную ссылку в адресную строку браузера.
На открывшейся странице вам нужна только зеленая кнопка "Code":
Нажмите её, и затем нажмите Download ZIP. Произойдет загрузка ZIP-архива с кодом вашего сайта.
Преобразуем код сайта в сайт
Распаковывайте ZIP-архив в любую папку на диске. Если у вас есть Codex или Claude Code, то просто создайте новый проект и дайте доступ к папке с кодом сайта.
Дайте Codex/Claude Code простую команду:
сделай билд сайта, так, чтобы его можно было опубликовать на хостинге
И он сделает всю необходимую работу. В результате появится новая папка внутри той папки, в которую вы распаковали ZIP-архив.
У нее будет название dist или build или что-то подобное (ИИ напишет сам, в какой папке лежат файлы).
Загрузите файлы сайта на хостинг
Осталось загрузить файлы сайта на хостинг. Файлы, которые надо загрузить находятся в папке, в которой есть файл index.html.
Загрузите этот файл на хостинг, а так же все остальные файлы и папки, лежащие на диске там же, где лежит файл index.html.
Зайдите на свой сайт и оцените результат. Если надо что-то поменять - работайте через Codex / Claude Code - напишите что именно надо поменять на сайте. И затем снова дайте инструкцию
сделай билд сайта, так, чтобы его можно было опубликовать на хостинге
После чего повторите все действия из предыдущего раздела.
Если не хотите после каждого изменения загружать всё на хостинг, то просто напишите в Codex / Claude Code команду:
Запусти результат локально
И в браузере откроется страница с адресом что-то вроде http://localhost:8080 или http://127.0.0.1:4173/
(цифры после двоеточия могут отличаться)
На этом всё. Успехов!