Как создать сайт, используя одни нейросети
- -
- 100%
- +
Иллюстрация Шедеврум
© Дана Матрикс, 2026
ISBN 978-5-0070-0363-6
Создано в интеллектуальной издательской системе Ridero
РАЗДЕЛ 1. ФИЛОСОФИЯ НУЛЕВОГО КОДА
ГЛАВА 1. Почему «написать сайт» и «создать сайт» — разные вещи (и нейросеть сделает второе)
Вы сейчас держите в руках (или читаете на экране) книгу, которая ломает главный миф современного интернета.
Миф звучит так:
«Чтобы сделать сайт, нужно уметь программировать. Или нанять программиста. Или хотя бы разобраться в конструкторах типа Tilda или WordPress».
Неправда.
Полная, жирная, опасная для карьеры программистов неправда.
Чему вас НЕ учили в школе
Давайте сразу договоримся о терминах. Это важно, потому что 90% людей проигрывают битву с сайтами ещё до первого клика.
«Написать сайт» — это когда вы садитесь и пишете код вручную. Строчка за строчкой. HTML, CSS, JavaScript. Вы помните, что такое display: flex и почему margin: 0 auto иногда не работает. Вы гуглите «как сделать слайдер» и копируете чужой код, потом три часа отлаживаете.
Это путь самурая. Уважаемо. Долго. Скучно.
«Создать сайт» — это когда у вас есть работающий, красивый, адаптивный сайт, который открывается в браузере, принимает заявки и радует глаз. Неважно, как он появился. Важно, что он есть.
ИИ делает второе. Он создаёт, а не «помогает написать».
Разрушаем главный страх новичка
Прямо сейчас, читая эту главу, вы можете подумать:
«Но я же ничего не смыслю в коде. Я даже слово „див“ произношу с ошибкой. Как я проконтролирую нейросеть?»
Отличный вопрос. И ответ вас удивит.
Когда вы просите нейросеть сделать сайт для кофейни, она не ждёт, что вы укажете:
— display: grid с тремя колонками
— justify-content: space-between
— border-radius: 16px с вендорными префиксами
Нет.
Вы говорите:
«Сделай сайт для кофейни „Уголь“. У нас есть шапка с логотипом, меню из трёх позиций (эспрессо, капучино, раф), кнопка „Забронировать столик“ и карта проезда. Сделай красиво, современно, адаптивно под телефон. Цвета — тёмно-серый и терракотовый».
И нейросеть сама решает:
— Где использовать flex, а где grid.
— Какой размер шрифта сделать на мобилке.
— Как отцентрировать кнопку.
— Как добавить плавную анимацию при наведении.
Вы не пишете код. Вы описываете результат.
Простая аналогия
Вы когда-нибудь заказывали дизайн-проект квартиры?
Вы не говорите дизайнеру:
«Начертите мне план в AutoCAD, используя слой 3, полилинию с толщиной 0.5 мм и штриховку ANSI31»
Вы говорите:
«Я хочу, чтобы спальня была в светлых тонах, кровать стояла у окна, а розетка — с обеих сторон».
Дизайнер переводит ваши «хотелки» в чертежи.
Нейросеть — тот же дизайнер, только для кода. Вы описываете что, она делает как.
Подвох, о котором молчат
Но есть один нюанс. И если его не понять — вы всё равно провалитесь.
Нейросеть не читает мысли.
Если вы скажете «сделай сайт красиво» — она сделает стандартно. Синий градиент, белый фон, картинка счастливых людей. Скучно.
Если вы скажете «сделай сайт для юридической компании» — она нагенерирует тексты про «профессионализм и надёжность», как у всех.
Магия начинается там, где вы учитесь разговаривать с нейросетью. Говорить на её языке, но оставаться человеком.
Что вы уже умеете, даже не зная этого
У вас есть суперспособность. Вы просто не знали.
Вы умеете:
— Объяснять, как должна выглядеть страница («шапка сверху, три карточки товаров, кнопка внизу»)
— Замечать, что что-то не так («эта кнопка слишком маленькая»)
— Показывать пальцем («вот здесь, после меню, должен быть отзыв»)
Этого достаточно.
В следующих главах вы научитесь превращать эти «пальцем показал» в такие промты, от которых нейросеть будет выдавать шедевр с первой попытки.
Главная идея первой главы (вынесите её в закладки)
«Написать сайт» — это про код.
«Создать сайт» — это про результат.
Нейросеть берёт на себя код.
Вы берёте на себя результат.
В этой книге вы ни разу не откроете учебник по JavaScript. Вы откроете чат с нейросетью.
И через 80 глав вы сможете сделать сайт, который:
— Работает на телефоне, планшете и компьютере
— Принимает заявки в месенджер
— Выглядит как работа профессионала за 2000 долларов
Но при этом вы не напишете ни одной строчки кода вручную.
Честно.
ПРАКТИКУМ К ГЛАВЕ 1
Не читайте дальше, пока не сделаете это. Займёт 3 минуты.
Задание 1. Откройте ChatGPT, Claude или любую другую нейросеть (даже бесплатную версию).
Задание 2. Скопируйте и отправьте этот промт (можно заменить «кофейню» на что угодно):
*«Ты — веб-дизайнер. Опиши структуру простого сайта-визитки для кофейни „Уют“. Укажи 5 основных блоков (например: шапка, меню, о нас, контакты). Не пиши код, просто опиши словами, что где находится». *
Задание 3. Посмотрите на ответ. Нейросеть поняла задачу? Она написала по-русски? Она предложила логичную структуру?
Если да — вы только что создали первый прототип сайта через ИИ. Без единой строчки кода.
ГЛАВА 2. Главный страх новичка: «Я ничего не понимаю в программировании» — и как ИИ его убивает
Давайте признаемся честно.
Вы открыли эту книгу не потому, что хотели изучить тег
И где-то глубоко внутри сидит этот липкий, противный голос:
«А что, если нейросеть выдаст код, а я не смогу его даже прочитать? Что, если он не заработает? Что, если все вокруг поймут, что я сам ничего не умею?»
Я не буду вас утешать. Я скажу правду.
Вы действительно ничего не понимаете в программировании
И это ваше главное преимущество.
Парадокс, правда? Объясняю.
Человек, который немного знает HTML, но не разобрался до конца, будет мучиться. Он увидит код, сгенерированный ИИ, и начнёт:
— Править его вручную («тут я знаю, лучше сделать по-другому»)
— Бояться сломать то, что работает
— Тратить часы на то, чтобы «подкрутить отступы»
Абсолютный новичок делает проще:
— Скопировал код.
— Вставил.
— Проверил.
— Не работает? Скопировал ошибку → отправил ИИ → получил исправленный код.
— Всё.
У вас нет ложного чувства контроля. Вы не пытаетесь «улучшить» то, что уже сделано хорошо. Вы просто используете инструмент.
Эксперимент, который сломает ваш мозг (в хорошем смысле)
Прямо сейчас, не закрывая книгу, сделайте вот что.
Представьте, что я даю вам задание:
«Напишите письмо на английском языке генеральному директору Toyota с предложением купить ваш стартап по производству бумажных самолётиков».
Вы не знаете английский? Не беда. Вы откроете переводчик. Или ChatGPT. Или попросите друга.
Вы же не откажетесь от бизнеса только потому, что не знаете английского?
То же самое с программированием.
Код — это просто язык. Искусственный. Строгий. Но язык.
Вы не обязаны на нём говорить. Вы обязаны получать результат.
Что на самом деле нужно знать новичку (спойлер: почти ничего)
Вот полный список того, что вы обязаны уметь, чтобы создать сайт через ИИ:
— Копировать (Ctrl+C)
— Вставлять (Ctrl+V)
— Читать (чтобы увидеть, где ИИ написал «вставьте сюда ваш API-ключ»)
— Отправлять ошибку в чат (просто скопировали красный текст → отправили)
Всё.
Вы не должны знать:
— Что такое DOM-дерево
— Почему undefined — это не то же самое, что null
— Как работает всплытие событий
— Зачем нужен z-index
— Что такое «промис» (это вообще не ругательство)
Вам не нужно. ИИ знает.
Разрушаем самый главный миф
«Если я не понимаю код, я не смогу его отладить»
Отладка — это когда вы ищете ошибку.
Как вы ищете ошибку сейчас, ничего не понимая в коде?
Очень просто.
Шаг 1. Вы видите, что кнопка не работает.
Шаг 2. Вы нажимаете F12 (да, прямо в браузере), видите красную строчку.
Шаг 3. Вы копируете эту красную строчку.
Шаг 4. Вы пишете ИИ: «У меня такая ошибка: [вставить красную строчку]. Исправь код»
Шаг 5. ИИ даёт новый код.
Шаг 6. Вы вставляете. Всё работает.
Вы не поняли, в чём была ошибка. Вы не исправляли её вручную. Вы просто передоверили это ИИ.
И это нормально.
Вы же не чините двигатель своей машины, когда загорается «Check Engine». Вы едете к механику. ИИ — ваш механик, который всегда открыт и ничего не просит за диагностику.
Что происходит в голове у ИИ (упрощённо)
Когда вы даёте нейросети задание «сделай сайт», она не «думает» как программист.
Она действует как переводчик с человеческого на машинный.
Вы: «Сделай три карточки товаров в ряд»
ИИ (внутренний монолог): «Ага, пользователь хочет контейнер с display: grid, три колонки, внутри каждой — картинка, заголовок, цена и кнопка. Добавлю gap: 20px для отступов. На мобилке сделаю одну колонку через медиа-запрос».
Вы не сказали про grid. Вы не сказали про медиа-запросы. ИИ сам додумал это на основе миллионов примеров, на которых его обучили.
Вы просто описали что, а он сделал как.
Тест на профпригодность (пройдут все)
Ответьте честно на три вопроса:
Первый вопрос. Вы умеете объяснять словами, что должно быть на сайте? Например: «вверху логотип и меню, ниже — большая картинка, потом три блока с преимуществами, потом форма».
Второй вопрос. Вы умеете замечать, когда что-то выглядит некрасиво или работает не так? Например: «эта кнопка слишком бледная» или «текст налезает на картинку на телефоне».
Третий вопрос. Вы готовы копировать и вставлять текст из чата в файл?
Если хотя бы на один вопрос вы ответили «да» — вы уже можете создавать сайты через ИИ.
Если вы ответили «нет» на все три — вы либо робот, либо притворяетесь.
Секрет, который не пишут в других книгах
Вот правда, которую скрывают гуру программирования:
Программисты тоже ничего не понимают в огромных кусках кода, который они копируют из интернета.
Разница лишь в том, что они лучше притворяются.
Когда разработчик берёт готовую библиотеку или сниппет со Stack Overflow, он часто не вникает в детали. Он проверяет, работает ли это, и идёт дальше.
То же самое делаете вы. Просто ваш «Stack Overflow» — это нейросеть, которая пишет код лично под вас, а не generic-ответ на чужую проблему.
Что изменится, когда вы победите этот страх
Давайте посмотрим на разницу между «до» и «после».
Было (когда вы боялись):
«Я не могу сделать сайт».
«Нужно учить HTML, CSS, JS год».
«Найму фрилансера за 50 000 руб».
«Ошибка в коде — это катастрофа».
«Я никогда не пойму этот JavaScript».
Стало (когда страх ушёл):
«Какой сайт сделаем сегодня?»
«Нужно написать 10 промтов за час».
«Сделаю сам за вечер».
«Ошибка в коде — это ещё один промт».
«Я никогда и не буду его писать».
Чувствуете разницу? Это не преувеличение. Это опыт тысяч людей, которые прошли этот путь до вас.
Главная идея второй главы (повесьте над рабочим столом)
Вы не обязаны понимать программирование.
Вы обязаны понимать, чего хотите.
ИИ соединит эти две точки.
Страх «я ничего не понимаю» убивается простым фактом:
Вы не будете ничего писать вручную. Вы будете описывать и проверять.
Это как управлять самолётом с помощью автопилота. Вы не знаете, как работает турбина. Но вы знаете, куда лететь.
ПРАКТИКУМ К ГЛАВЕ 2
Сделайте это прямо сейчас, чтобы страх исчез навсегда.
Задание 1 (2 минуты).
Откройте любой чат с ИИ. Напишите:
*«Привет. Я ничего не понимаю в программировании. Дай мне простейший HTML-код одной кнопки, которая при нажатии показывает „Привет, мир!“. Всё объясни так, будто мне 5 лет». *
Задание 2 (1 минута).
Скопируйте код, который дал ИИ. Сохраните в файл index.html (обычный блокнот подойдёт). Откройте файл в браузере двойным щелчком.
Нажмите на кнопку.
Работает? Поздравляю. Вы только что создали работающий JavaScript, не понимая JavaScript.
Задание 3 (3 минуты).
Сломайте это специально. Удалите в коде одну кавычку или скобку. Сохраните. Откройте в браузере. Увидели ошибку? Скопируйте её в ИИ со словами:
«Вот код. Вот ошибка. Исправь»
ИИ даст исправленный код. Вставьте его. Всё работает.
Задание 4 (повторение — самое важное).
Повторите упражнение с поломкой три раза, каждый раз ломая код по-разному (удалите точку с запятой, закройте тег не с той стороны, сотрите слово function).
Когда вы сделаете это в третий раз и перестанете бояться красных ошибок в браузере — вы победили главный страх новичка.
ГЛАВА 3. Что умеют современные нейросети для веба
Вы уже поняли: ИИ — это не одна волшебная таблетка. Их много. И каждая — как отдельный инструмент в ящике столяра: молотком гвозди забивать удобно, а шурупы он не крутит.
Задача этой главы — показать вам карту. Вы узнаете, какая нейросеть для чего нужна, где брать, сколько платить (или не платить) и главное — какую использовать, когда вы делаете сайт.
Мы разберём шесть главных инструментов: GPT-4o, Claude, Gemini, Copilot, v0 и Replit Agent.
Поехали.
Знакомство с командой
Представьте, что вы открываете веб-студию. У вас есть шесть сотрудников. Каждый — гений в своём деле. Но если попросить не того специалиста не о том — результат будет так себе.
Давайте познакомимся с каждым.
1. GPT-4o — универсальный солдат
Кто это.
Нейросеть от компании OpenAI. Та самая, которую большинство людей называют «ChatGPT», хотя ChatGPT — это только интерфейс, а «мозг» внутри — GPT-4o (буква «о» означает «omni» — всё сразу).
Что умеет для сайта.
Она понимает текст, картинки (смотрит на скриншот и видит, где кнопка съехала), голос и даже может сгенерировать простые изображения. Пишет HTML, CSS, JavaScript — уверенно, быстро, понятно.
Сильные стороны.
Очень «разговорчивая». Объяснит код так, что поймёт даже тот, кто вчера узнал, что компьютеры работают от электричества. Отлично держит контекст — помнит, что вы обсуждали 20 сообщений назад. Прощает небрежные формулировки.
Слабые стороны.
Иногда «халтурит» на сложных макетах. Может сделать красивую кнопку, но если попросить сложную анимацию с несколькими условиями — начнёт выдумывать. Код не всегда идеально оптимизирован (но работает — и ладно).
Цена.
Бесплатная версия (GPT-4o mini) — есть, но с ограничениями. Полноценная — $20 в месяц (около 1800 руб). Для создания сайтов лучше брать платную — она в разы умнее.
Для каких сайтов.
Лендинги, сайты-визитки, простые каталоги, блоги. Всё, где не нужна сверхсложная логика.
Вердикт.
Лучший выбор для новичка. Начинайте здесь. Когда упрётесь в потолок — переходите к следующему.
2. Claude — вежливый архитектор
Кто это.
Нейросеть от компании Anthropic. Главный конкурент GPT-4o. Многие программисты считают Claude лучшим кодерам среди всех ИИ.
Что умеет для сайта.
Пишет очень чистый, аккуратный код. Комментирует каждую сложную строчку. Объясняет, почему он сделал так, а не иначе. Отлично понимает большие файлы (может «увидеть» весь ваш сайт целиком, если вы дадите ему код).
Сильные стороны.
Код Claude — как дорогой ресторан: красиво, понятно, ничего лишнего. Он редко выдумывает несуществующие функции. Идеально подходит, если вы хотите не просто скопировать, а ещё и разобраться, как это работает.
Слабые стороны.
Не умеет «смотреть» на картинки (пока что). Вы не можете дать ему скриншот макета и сказать «сделай так же». Только текстовое описание. Строже относится к формулировкам — не любит кашу в промтах.
Цена.
Бесплатная версия — щедрая, но с лимитом сообщений. Pro-версия — $20 в месяц.
Для каких сайтов.
Проекты, где важен качественный, поддерживаемый код. Если вы планируете дорабатывать сайт через полгода — берите Claude.
Вердикт.
Когда GPT-4o начнёт «тупить» на сложных задачах — переходите к Claude. Лучший код, но требует более внятных инструкций.
3. Gemini — поисковик с характером
Кто это.
Нейросеть от Google. Встроена во все сервисы Google (Gmail, Docs, Поиск). Огромный плюс — доступ к актуальным знаниям из интернета в реальном времени.
Что умеет для сайта.
Пишет код, но чуть хуже, чем GPT-4o или Claude. Зато отлично ищет ошибки, объясняет сложные концепции и может проверить ваш код на «современность» (соответствие последним стандартам).
Сильные стороны.
Мгновенно подтягивает свежую документацию. Если вы спросите: «Как сейчас правильно делать адаптив в 2025 году?» — Gemini даст актуальный ответ, а не советы из 2018-го. Интеграция с Google-сервисами: можно дать ссылку на Google Таблицу, и он её «увидит».
Слабые стороны.
Самый «зацензуренный» среди всех. Отказывается делать некоторые вещи «из соображений безопасности». Код может быть слишком многословным.
Цена.
Бесплатная версия — хорошая, но без доступа к самым умным моделям. Платная (Gemini Advanced) — около $20 в месяц.
Для каких сайтов.
Когда вам нужны свежие знания (например, подключаете новое API или библиотеку). Или когда работаете с Google-таблицами как с базой данных.
Вердикт.
Не первая, а вторая или третья нейросеть в вашем арсенале. Берите, если остальные не знают что-то актуальное.
4. Copilot — напарник внутри редактора кода
Кто это.
Нейросеть от GitHub (принадлежит Microsoft). Встроена прямо в редакторы кода (VS Code, PyCharm и другие). Не похожа на чат — это скорее «автодополнение с интеллектом».
Что умеет для сайта.
Вы начинаете писать код (или просто комментарий на русском), а Copilot предсказывает, что вы хотите сделать, и предлагает готовый код целиком.
Пример: вы пишете комментарий // сделать слайдер изображений — и Copilot вставляет готовую работающую функцию.
Сильные стороны.
Молниеносно. Не нужно копировать и вставлять из чата — код появляется прямо у вас в файле. Отлично понимает контекст всего вашего проекта (видит все файлы, а не только один).
Слабые стороны.
Требует установки (редактор кода + плагин). Новички пугаются интерфейса. Без хорошего начального комментария может предложить ерунду.
Цена.
Бесплатно для студентов и авторов open-source проектов. Для всех остальных — $10—19 в месяц.
Для каких сайтов.
Если вы решили всё-таки освоить базовый редактор кода (это несложно, глава 50+), Copilot ускорит работу в 3 раза. Для чистого «общения в чате» — не подходит.
Вердикт.
Инструмент для продвинутых новичков. Не начинайте с него. Сначала научитесь общаться с GPT или Claude, потом добавляйте Copilot как ускоритель.
5. v0 — дизайнер-кодер в одном флаконе
Кто это.
Нейросеть от компании Vercel. Специализируется только на создании интерфейсов. Вы не просто пишете текст — вы видите результат мгновенно, прямо в чате.
Что умеет для сайта.
Вы пишете: «Сделай карточку товара с картинкой, ценой и кнопкой „Купить“ в стиле Apple». ИИ показывает вам готовую карточку — прямо в браузере, сразу. Вы можете кликнуть на неё, подвигать, покрутить. Если что-то не нравится — говорите «сделай кнопку красной», и она меняется на глазах.
Сильные стороны.
Невероятная скорость прототипирования. То, на что вручную уходит час, v0 делает за 30 секунд. Вы сразу видите результат, не сохраняя файлы и не открывая браузер отдельно.
Слабые стороны.
Использует специфичный фреймворк React, а не чистый HTML/CSS. Перенести готовый сайт из v0 в обычный файл — чуть сложнее. Бесплатная версия сильно ограничена (лимит генераций в день).
Цена.
Есть бесплатный тариф (около 50 генераций в месяц). Pro — $20 в месяц.
Для каких сайтов.
Прототипы, быстрые макеты, демо для клиентов. Если вам нужно «посмотреть, как будет выглядеть» — идеально.
Вердикт.
Игрушка для энтузиастов и мощный инструмент для тех, кто не боится React. Новичку можно попробовать, но начинать лучше с GPT-4o.