Как создать сайт, используя одни нейросети

6. Replit Agent — автономный работяга

Кто это.

Нейросеть внутри платформы Replit. Вы говорите, что хотите сделать, а агент сам создаёт проект, устанавливает библиотеки, запускает сервер, исправляет ошибки — без вашего участия.

Что умеет для сайта.

Вы пишете: «Сделай сайт-портфолио для фотографа с галереей и формой связи». Агент создаёт папки, файлы, пишет код, запускает сервер и выдаёт вам ссылку на работающий сайт через 2—3 минуты.

Сильные стороны.

Полная автоматизация. Вы не сохраняете файлы, не запускаете локальный сервер — ничего. Результат сразу в интернете.

Слабые стороны.

Ограниченный контроль. Если агент сделал не так — переделывать сложнее. Без платной подписки код принадлежит Replit (вы не сможете скачать его и перенести к себе).

Цена.

Бесплатно — очень слабые модели и очередь. Платная подписка — от $15 в месяц.

Для каких сайтов.

Очень простые проекты «для себя». Или для быстрой проверки идеи.

Вердикт.

Красивая демонстрация будущего, но сегодня ещё сыровато. Не полагайтесь на него для серьёзных проектов.

Какую выбрать? Чёткая схема

Вот простой алгоритм для новичка:

Шаг 1. Зарегистрируйтесь в ChatGPT (GPT-4o). Бесплатной версии достаточно для первых 10 глав. Но если есть $20 в месяц — возьмите платную, она того стоит.

Шаг 2. Если ChatGPT не справляется (например, выдаёт кривой код или врёт про документацию) — попробуйте Claude. Скопируйте тот же промт туда.

Шаг 3. Если вам нужно что-то очень свежее (API, новый браузерный стандарт) — подключите Gemini.

Шаг 4. Когда сделаете 3—4 сайта вручную через чат и вам надоест копировать код в файлы — установите VS Code + Copilot. Это следующий уровень скорости.

Шаг 5. v0 и Replit Agent — оставьте на десерт. Попробуйте, когда вам станет скучно.

А что насчёт Midjourney и DALL-E?

Вы заметили: я не включил сюда генераторы картинок. Почему?

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

Midjourney, DALL-E 3, Kandinsky — это отдельная история. Вы просите: «создай фон для сайта кофейни в тёплых тонах», получаете картинку и вставляете её в код, который написал GPT-4o.

Мы подробно разберём генерацию изображений в главе 19. Пока просто знайте: картинки и код — разные инструменты, и это нормально.

Главная идея третьей главы

Нет одной лучшей нейросети.

Есть лучшая нейросеть для вашей конкретной задачи.

Новичок начинает с GPT-4o. Профи переключается между GPT-4o, Claude и Gemini как перчатками.

Вы не обязаны пользоваться всеми. Но вы обязаны знать, какая что умеет. Потому что в какой-то момент GPT-4o скажет: «Я не знаю», а Claude — «Сейчас сделаю».

И вы будете готовы.

ПРАКТИКУМ К ГЛАВЕ 3

Задание 1 (5 минут).

Зарегистрируйтесь в ChatGPT (chat.openai.com) и Claude (claude.ai) — оба имеют бесплатные тарифы.

Задание 2 (3 минуты).

Напишите один и тот же промт в обе нейросети:

«Напиши HTML и CSS для трёх карточек товаров в ряд. Товары: кофе, чай, круассан. Цены: 150, 120, 90. Сделай современно, с тенями и скруглёнными углами»

Задание 3 (5 минут).

Сравните результаты. Чей код красивее? Чей понятнее? У кого карточки лучше выглядят на мобилке (сузьте окно браузера)?

Сохраните оба варианта. В следующих главах вы научитесь улучшать и тот, и другой.

Задание 4 (по желанию, 10 минут).

Попробуйте v0 (v0.dev). Напишите: «сделай форму подписки на новости с полем email и кнопкой». Посмотрите, как результат появляется мгновенно. Почувствуйте разницу между «чатом» и «визуальным редактором».

ГЛАВА 4. Ограничения: чего ИИ НЕ сделает за тебя

К этому моменту вы уже, наверное, почувствовали эйфорию.

«Вау! Я могу просто попросить — и нейросеть напишет код! Зачем тогда вообще учить программирование? Зачем платить разработчикам? Я теперь всё сделаю сам!»

Стоп. Выдохните.

Я обожаю нейросети. Я сам пишу эту книгу с их помощью. Но если я скажу вам, что ИИ может всё — я солгу. А ложь на старте убивает проекты быстрее любой ошибки в коде.

Поэтому эта глава — про границы. Про то, чего ИИ не сделает. И про то, где вы всё равно должны включить свой мозг.

Спойлер: этих мест не так много. Но каждое — критически важно.

Три кита, на которых держится любой сайт

Любой сайт в интернете — это три вещи:

— Код (HTML, CSS, JS) — то, что нейросеть пишет отлично.

— Доменное имя — адрес сайта (например, moy-sait.ru).

— Хостинг — компьютер в интернете, где лежат файлы сайта.

ИИ блестяще делает первое.

Второе и третье он не делает вообще. Вообще. Никак.

И это не «пока не умеет». Это не «в следующей версии добавим». Это архитектурное ограничение: нейросеть живёт внутри чата. У неё нет доступа к вашему кошельку, к регистраторам доменов и к серверам.

Но есть хорошая новость: домен и хостинг покупаются за 5—10 минут. Это не сложнее, чем заказать пиццу. Просто нужно знать, где нажимать. И мы научим вас этому в разделе 6 (главы 51—60).

А пока — давайте разберём все ограничения по полочкам.

Ограничение №1. Покупка домена

Что это такое.

Домен — это адрес вашего сайта. google.com, yandex.ru, ваша-кофейня.рф. Без домена сайт есть, но зайти на него можно только по сложной цифровой ссылке типа 192.168.1.100/~user/site. Никто по такой ссылке не пойдёт.

Что ИИ может.

Он подскажет, где купить домен (Reg.ru, Nic.ru, Beget, Timeweb, Namecheap — если нужен зарубежный). Он посоветует, какое имя придумать. Он проверит, свободно ли имя (если дать ему доступ к поиску — у GPT-4o и Gemini такая возможность есть).

Чего ИИ не сделает.

Он не зайдёт на сайт регистратора, не заполнит ваши паспортные данные, не привяжет карту для оплаты и не нажмёт кнопку «Купить». Это делаете вы. Своими руками. Потому что это ваш кошелёк и ваши персональные данные.

Сколько времени нужно вам.

5 минут, если имя уже придумано. 15 минут, если ещё думаете.

Ограничение №2. Хостинг

Что это такое.

Хостинг — это аренда места на чужом мощном компьютере, который работает 24/7. Вы кладёте туда файлы сайта (код, картинки), и эти файлы становятся доступны всем в интернете.

Что ИИ может.

Он расскажет, какой хостинг лучше для вашей задачи (бесплатный Netlify для простых сайтов, платный Beget/Timeweb для серьёзных проектов). Он напишет пошаговую инструкцию: куда нажать, что скопировать, куда вставить. Он даже объяснит, как не ошибиться с тарифом.

Чего ИИ не сделает.

Он не зарегистрирует вас на сайте хостинга. Не выберет тариф. Не привяжет карту. Не нажмёт «Оплатить». Не загрузит файлы на сервер (хотя может написать команду для автоматической загрузки, но выполнить её придётся вам — одной кнопкой в терминале).

Сколько времени нужно вам.

Первый раз — 20 минут со страхом и инструкцией. Пятый раз — 3 минуты.

Важнейшее уточнение. Есть бесплатные хостинги (Netlify, Vercel, GitHub Pages). Они не просят карту. Но регистрация и нажатие кнопок — всё равно за вами. ИИ не сделает это вместо вас.

Ограничение №3. Настройка DNS (привязка домена к хостингу)

Что это такое.

Вы купили домен mycafe.ru на одном сайте (регистраторе). Вы арендовали хостинг на другом сайте. DNS-записи — это «табличка», которая говорит интернету: «Когда кто-то вводит mycafe.ru, покажи ему файлы с хостинга».

Что ИИ может.

Он напишет точные настройки: какие значения вбить в поля A-запись, CNAME, NS. Он подскажет, где на сайте регистратора находится панель управления DNS.

Чего ИИ не сделает.

Он не зайдёт в ваш личный кабинет регистратора, не найдёт нужный раздел и не вставит туда значения. Это делаете вы. Следуя его инструкции как карте.

Сколько времени нужно вам.

10 минут с первого раза, если инструкция хорошая. 3 минуты — если уже делали.

Ограничение №4. Загрузка файлов на хостинг

Что это такое.

У вас есть папка с файлами сайта (index.html, style. css, script. js, папка с картинками). Их нужно перенести на хостинг.

Что ИИ может.

Он объяснит три способа: через панель управления хостингом (перетащить мышкой), через специальную программу (FileZilla) или через команду в терминале (git push).

Чего ИИ не сделает.

Он не откроет ваш файловый менеджер, не выделит файлы и не перетащит их. Он не введёт пароль от хостинга. Он не нажмёт Enter.

Сколько времени нужно вам.

2 минуты, если делаете в первый раз по инструкции. 30 секунд — если уже знаете.

Ограничение №5. Оплата сервисов

Что это такое.

Почти всё хорошее в интернете стоит денег: домен (200—1500 руб в год), хостинг (100—500 руб в месяц), платные нейросети ($20 в месяц), премиум-шаблоны, API-ключи для форм.

Что ИИ может.

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

Чего ИИ не сделает.

Он не переведёт деньги из вашего кармана в карман сервиса. У него нет вашей карты, и слава богу.

Сколько времени нужно вам.

Столько, сколько нужно, чтобы ввести 16 цифр карты. Обычно 2 минуты.

Ограничение №6. Установка паролей и доступов

Что это такое.

На хостинге у вас есть логин и пароль. В панели администратора сайта — ещё один пароль. У домена — третий.

Что ИИ может.

Он научит вас создавать надёжные пароли. Он подскажет, где их хранить (менеджеры паролей типа Bitwarden, а не «записочка на мониторе»).

Чего ИИ не сделает.

Он не придумает пароль за вас (хотя может сгенерировать — но вы его не запомните). Он не введёт его при входе. Он не нажмёт «Запомнить меня». И — критически важно — он не восстановит вам доступ, если вы потеряли пароль. Это только через техподдержку хостинга.

Сколько времени нужно вам.

1 минута на генерацию пароля. 10 минут на восстановление, если забыли.

Ограничение №7. Принятие решений «на свой страх и риск»

Что это такое.

Нейросеть всегда даёт ответ, который кажется уверенным. Даже когда не права. Она не скажет: «Я не уверена, проверьте в трёх источниках». Она скажет: «Вот лучшее решение».

И если вы выберете неправильный хостинг, купите ненужный домен (слишком длинный, с тире, с цифрами) или настроите DNS с ошибкой — сайт не будет работать. ИИ не понесёт за это ответственность. Вы — да.

Что ИИ может.

Он предупредит, если его совет может быть устаревшим. Он покажет альтернативы.

Чего ИИ не сделает.

Он не возьмёт на себя ответственность за ваш выбор. Вы всегда остаётесь капитаном корабля. ИИ — штурман, который показывает карту. Но руль — в ваших руках.

Сколько времени нужно вам.

Время на то, чтобы включить критическое мышление. 30 секунд на вопрос себе: «А точно ли я доверяю этому совету? Может, проверить в другом источнике?»

Что ИИ всё-таки делает, и делает отлично

Чтобы вы не расстроились — вот огромный список того, с чем ИИ справляется на 10 из 10:

— Пишет любой код на HTML, CSS, JavaScript

— Объясняет, что означает каждая строчка

— Находит и исправляет ошибки

— Адаптирует дизайн под мобильные телефоны

— Добавляет анимации, слайдеры, формы

— Создаёт тексты для сайта (SEO-оптимизированные)

— Генерирует структуру сайта (сколько страниц, какие блоки)

— Подбирает цветовые схемы и шрифты

— Пишет инструкции для любых действий (как купить домен, как залить файлы)

— Делает код чистым, комментированным, готовым к публикации

То есть 95% умственной работы ИИ берёт на себя.

Оставшиеся 5% — это механические действия, которые требуют ваших рук, вашего кошелька и вашего здравого смысла.

Аналогия, которая всё прояснит

Представьте, что вы хотите приготовить ужин по рецепту от шеф-повара.

ИИ — это шеф-повар. Он пишет рецепт: какие продукты купить, в какой последовательности их резать, сколько жарить, когда солить.

Но ИИ не сходит в магазин за продуктами. Не включит плиту. Не помоет посуду. И не съест за вас ужин.

Вы делаете это сами. Но без рецепта шефа у вас получилась бы каша.

То же самое с сайтом. ИИ даёт рецепт (код и инструкции). Вы идёте в магазин (покупаете домен, регистрируетесь на хостинге) и готовите (загружаете файлы, нажимаете кнопки).

Без ИИ вы бы сварили кашу. Без вас ужина бы не случилось.

Самый частый вопрос новичков

«Но я слышал, что есть нейросети, которые сами публикуют сайты! Replit Agent, например!»

Да, есть. Они создают временную ссылку на своём поддомене (что-то вроде ваш-проект.replit. app). И это здорово для тестирования.

Но:

— Такая ссылка обычно живёт недолго или работает медленно.

— Вы не сможете привязать свой красивый домен без ручных действий.

— При бесплатном тарифе код часто принадлежит платформе, а не вам.

Поэтому «ИИ сам всё опубликовал» — это иллюзия для игрушечных проектов. Для настоящего сайта, которым вы будете гордиться, ручные 5—10 минут всё равно нужны.

И это нормально. Вы справитесь.

Главная идея четвёртой главы

ИИ делает всю интеллектуальную работу.

Вы делаете механические действия с кошельком и мышкой.

Без ИИ вы утоните в коде.

Без вас ИИ останется болтать в чате.

Ни одна нейросеть не купит домен, не оплатит хостинг и не нажмёт кнопку «Опубликовать». И слава богу — потому что иначе мы бы уже жили в мире, где ИИ управляет нашими деньгами.

А вот код, дизайн, структура, тексты, инструкции — это к ИИ. И он делает это блестяще.

ПРАКТИКУМ К ГЛАВЕ 4

Этот практикум отличается от предыдущих. Здесь вы ничего не будете писать в ИИ. Вы сделаете то, чего ИИ не может.

Задание 1 (5 минут).

Откройте любой регистратор доменов (для России — Reg.ru или Nic.ru; для других стран — Namecheap или GoDaddy). Проверьте, свободно ли имя мойсайт123.ru (или любой другой вариант). Не покупайте — просто проверьте.

Задание 2 (5 минут).

Зарегистрируйтесь на бесплатном хостинге Netlify (netlify.com). Подтвердите почту. Это займёт 3 минуты, остальные 2 — на преодоление страха «а вдруг что-то сломаю». Не сломаете.

Задание 3 (2 минуты).

Вернитесь в главу 2, возьмите тот самый простой файл index.html с кнопкой. Перетащите его мышкой в окно Netlify (там есть зона «Drag and drop»). Через 10 секунд Netlify даст вам ссылку вида ваш-проект.netlify. app. Откройте её. Кнопка работает? Поздравляете — вы только что сделали то, чего не умеет ИИ: опубликовали сайт вручную.

Задание 4 (запомнить).

Сделайте скриншот или запишите в блокнот фразу:

«ИИ — мозг. Я — руки. Деньги — мои. Ответственность — моя. Вместе — сайт готов».

Повесьте эту фразу над рабочим столом. Когда нейросеть начнёт «тупить» на механических вещах — вспомните, что она просто не для этого создана.

ГЛАВА 5. Принцип «Промт как конституция»: чем точнее закон, тем лучше результат

Представьте, что вы наняли гениального архитектора. Он может построить дворец, мост или космическую станцию. Но вы говорите ему:

«Сделайте красиво».

Что он построит? Ничего. Или построит что-то среднее между сараем и оперным театром, потому что «красиво» — понятие растяжимое.

То же самое с нейросетями. Они гениальны, но не читают мысли. И если вы дадите размытое задание — получите размытый результат.

Эта глава — о том, как превращать ваши «хотелки» в точные, жёсткие, недвусмысленные инструкции. Я называю этот подход «Промт как конституция».

Почему конституция? Потому что хороший закон исключает разночтения. Он не говорит «наказывать за плохие поступки». Он говорит: «за кражу — лишение свободы на срок от 2 до 6 лет».

Нейросеть любит законы. И ненавидит намёки.

Анатомия плохого промта (и почему он не работает)

Давайте сразу на примере. Вот промт, который пишет 99% новичков:

«Сделай мне сайт для цветочного магазина. Чтобы красиво и современно»

Что получит новичок?

Нейросеть сделает:

— Какой-то случайный зелёный фон (цветы же)

— Случайные картинки ромашек и роз

— Текст «Добро пожаловать в наш цветочный рай»

— Кнопку «Купить», которая ведёт в никуда

— Непонятно, есть ли телефон, адрес, корзина

Новичок расстраивается: «Нейросеть плохая, не понимает меня».

А нейросеть ни в чём не виновата. Ей дали задание, в котором нет ни одного конкретного факта. Что значит «красиво»? Что значит «современно»? Для кого сайт? Что продаём? Где находимся?

Промт без конкретики — это как заказ в ресторане: «Принесите что-нибудь вкусное». Принесут. Но вряд ли то, что вы хотели.

Анатомия хорошего промта (конституция)

А теперь посмотрим, как выглядит промт-конституция для того же цветочного магазина:

*«Сделай одностраничный сайт-визитку для цветочного магазина «Лилия» в Санкт-Петербурге.

Блоки по порядку:

— Шапка: логотип (текстом «Лилия»), меню (Главная, Каталог, Контакты), телефон [phone].

— Геройский блок: заголовок «Свежие цветы с доставкой за 2 часа», подзаголовок «Букеты на любой бюджет», кнопка «Заказать звонок».

— Три карточки: Розы (от 1500 руб), Тюльпаны (от 1200 руб), Пионы (от 2000 руб). Под каждой кнопка «Выбрать».

— Блок «Почему мы»: три преимущества — свежесть, быстрая доставка, подарок.

— Форма обратной связи: имя, телефон, кнопка «Отправить».

— Карта (вставь код Яндекс. Карт заглушкой).

— Футер: копирайт, ссылки на соцсети мессенджер

Цвета: белый фон, акцент — тёмно-зелёный (#2D5A27) и нежно-розовый (#F7CAC9).

Шрифты: заголовки — Playfair Display, текст — Roboto.

Адаптив: на телефоне карточки должны быть в один столбец, меню сворачивается в бургер.

Дай полный код в одном файле HTML, со стилями внутри. Без комментариев в коде (кроме моих отметок). Сделай так, чтобы работало без интернета (кроме карты и шрифтов Google)». *

Что вы видите? Конституцию из 15 пунктов. Никаких «красиво» и «современно». Только факты, цвета, последовательность, ограничения.

Нейросеть, получив такой промт, выдаст сайт, который будет на 80% похож на то, что вы хотите. Остальные 20% вы докрутите за 2—3 уточняющих промта.

Разница между первым и вторым промтом — не в магии. Разница в точности.

Почему это называется «конституция» (а не «инструкция»)

Инструкцию можно нарушить. Конституцию — нельзя.

Когда вы даёте промт как конституцию, вы устанавливаете жёсткие рамки, за которые нейросеть не может выйти. Она может творить внутри этих рамок, но не за их пределами.

Пример из реальной жизни:

Инструкция: «Пожалуйста, не делайте кнопки слишком маленькими».

→ Нейросеть сделает кнопки «нормальными» по её мнению, а вам покажется, что они всё равно мелкие.

Конституция: «Сделай кнопки высотой 48 пикселей, шириной не менее 120 пикселей, размер шрифта на кнопках — 18 пикселей».

→ Нейросеть сделает точно так. Вы можете не знать, что 48 пикселей — это стандарт для мобильных устройств. Но вы это указали, и получили идеальный результат.

Конституция не оставляет места для интерпретации. А нейросети обожают, когда им не нужно додумывать.

Пять столпов хорошего промта-конституции

Любой сильный промт строится на пяти китах. Запомните их как «Пять П» (хотя последняя не на П, но для ритма простим).

1. Роль.

Кто ты для нейросети? «Ты — веб-дизайнер с 10-летним стажем», «Ты — эксперт по адаптивной вёрстке», «Ты — фронтенд-разработчик, специализирующийся на лендингах».

→ Нейросеть включает нужный «режим». Без роли она будет отвечать в нейтральном, усреднённом тоне.

2. Формат результата.

Что именно ты должен получить на выходе? «Дай полный HTML-код в одном файле», «Напиши только CSS, без изменений в HTML», «Опиши структуру словами, кода не надо».

→ Без указания формата нейросеть может выдать кусок кода, объяснение на три страницы и пример использования — всё вперемешку.

3. Последовательность (структура).

Что за чем идёт? Для сайта это критично. Опишите блоки по порядку: сверху вниз. Если вы скажете «сделай форму и карту», нейросеть может поставить карту выше формы. Если укажете «сначала форма, потом карта» — будет чётко.

4. Ограничения (границы).

Чего нельзя делать? «Не используй JavaScript», «Не подключай внешние библиотеки, кроме шрифтов», «Сделай так, чтобы работало без интернета», «Не добавляй анимаций».

→ Ограничения так же важны, как и указания. Они сужают пространство для «творчества» нейросети в нужное русло.

5. Конкретные значения (цвета, размеры, отступы).

Цифры вместо слов. Вместо «большой заголовок» — «заголовок 48 пикселей». Вместо «светлый фон» — «фон #F5F5F5». Вместо «быстрая анимация» — «анимация 0.3 секунды».

→ Нейросеть не чувствует «большой» и «маленький» как вы. Она понимает пиксели, проценты, секунды.

Шкала точности: от намёка до конституции

Давайте посмотрим, как меняется результат при увеличении точности. Возьмём одну простую задачу: «сделать кнопку».

Уровень 1 (намёк).

Промт: «Нужна кнопка»

→ Нейросеть: стандартная серая кнопка браузера. Без стилей. Безразмерная.

Уровень 2 (пожелание).

Промт: «Сделай красивую кнопку»