Когда говорят про создание сайтов с помощью ИИ, обычно звучат две крайности: либо магия уровня «нажал кнопку — получил готовый продукт», либо скепсис в духе «потом всё равно придется переписывать руками». А что, если проверить?

Привет! Меня зовут Кристина. Я работаю специалистом по автоматизации в Учебном центре IT-компании «Тензор». Недавно заказчик попросил меня сделать рабочий сайт максимально быстро. Четкого ТЗ и готового дизайна не было — только общее видение. Знакомая ситуация? На практике это происходит сплошь и рядом. Здесь как раз важно уметь работать в условиях неопределенности.

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

Спойлер: получится. Но не совсем так, как многие представляют.

DeepSeek vs ChatGPT: что выбрала я

Сейчас много говорят про DeepSeek, и я, конечно, не могла не попробовать. Инструмент интересный, но для моих задач оказался не самым удобным. Ответы DeepSeek были более общими, он часто терял нить диалога, и код приходилось перепроверять чаще, чем хотелось бы.

ChatGPT на этом фоне выиграл за счёт умения держать контекст и точнее попадать в запросы. Для моей итеративной работы с постоянными правками он подошёл идеально. Так что выбор был очевиден.

Старт: первый промпт и рабочий код за минуту

Дальше — техника простая: открыла ChatGPT, написала запрос, получила ответ. Старт был максимально прикладной. Вот буквально: мне нужен сайт, где:

• каждый день подставляется новая картинка;

• на экране есть фон, основная карточка и дата;

• всё должно нормально смотреться на мобильных устройствах.

В итоге первый запрос выглядил так:

Сделай скрипт, который будет каждый день подставлять определенную картинку из папки с картинками. На экране должен быть фон, картинка со скругленными краями и текущая дата внизу страницы, сделать адаптив под мобилку.

По сути, это и был весь вход. Без подробного ТЗ, без проектирования архитектуры, без макета в Figma.

ИИ выдал код — базовую HTML-страницу со стилями и JavaScript-логикой. Рабочий вариант сразу.

Но самое интересное началось потом, потому что задача была не «сгенерировать», а довести этот код до ума под динамично меняющиеся требования: «а давай еще вот так», «а теперь убери это», «а сделай, чтобы склонялось».

Эволюция запросов: от простого к сложному

Мы с заказчиком в диалоге уточняли детали, смотрели промежуточный результат прямо в браузере и тут же вносили коррективы. Я выступала в роли «переводчика» между его пожеланиями и кодом, а ИИ был помощником, который мгновенно эти пожелания реализовывал.

По мере обсуждения появлялись новые идеи:

• добавить три кнопки;

• сделать модальные окна;

• вынести тексты в JSON;

• добавить аудио с плеером;

• адаптировать страницу под мобильные устройства.

Каждое уточнение занимало буквально пару сообщений. И постепенно из простой страницы получился небольшой, но полноценный сайт «Лучший день — сегодня».

Если посмотреть на этот процесс со стороны, ИИ помогал в двух вещах.

Дал стартовую структуру. После первого же запроса у меня уже был HTML, базовые стили и логика. Это колоссальная экономия времени: даже если код не идеален, гораздо проще править существующее, чем собирать всё с нуля.

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

По итогу на сайте каждый день обновляется контент в зависимости от текущей даты.

Здесь ИИ использовался не как «генератор страницы», а как помощник в постепенной сборке интерфейса.

Тонкая настройка: что пришлось допиливать

Сайт не получился «с одной кнопки». ИИ может выдать рабочий код. Но потом начинаются нюансы:

• в Safari не так ведёт себя прокрутка;

• модалка перекрывает контент не так, как хотелось;

• JSON подключён, но данные не находятся.

И тут работает только одна связка: ИИ пишет → человек проверяет → точечное уточнение → ИИ переписывает.

Без этого цикла ни один живой проект не допилить.

Именно здесь пригодилось владение HTML/CSS/JS — чтобы увидеть, где сломалось, понять, почему, и правильно объяснить это ИИ. Если совсем не понимать, что происходит в коде, на длинной дистанции будет тяжело.

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

1. Потеря контекста в длинных диалогах
   Чем длиннее диалог, тем чаще ИИ забывал, о чем мы говорили в начале. Приходилось напоминать или переформулировать запрос

2. Мелкие несоответствия в логике
   Иногда код выглядел правильным, но ломался на практике. Например, аудио не воспроизводилось из-за несовпадения имени файла и логики в скрипте.

3. Адаптивная верстка
   ИИ отлично генерирует базовый адаптив, но тонкая настройка под мобильные устройства всё равно требует ручной проверки.

4. Переусложнение решений
   Иногда ИИ предлагал гораздо более сложную конструкцию, чем требовалось. В таких случаях достаточно было попросить его «сделать решение проще».

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

Небольшой фрагмент кода

Например, одна из задач — подставлять контент по текущей дате. В упрощенном виде логика выглядела так:

function getCurrentDateKey() {
    const now = new Date();
    const y = now.getFullYear();
    const m = String(now.getMonth() + 1).padStart(2, '0');
    const d = String(now.getDate()).padStart(2, '0');
    return `${y}-${m}-${d}`;
}

function getContentForDate(dateKey, type) {
    const dayData = appData.days?.[dateKey];
    if (!dayData || !dayData[type]) {
        return `Контент для даты ${dateKey} не найден.`;
    }
    return dayData[type];
}

А сами тексты лежали в data.json, чтобы не зашивать контент прямо в HTML:

{
  "days": {
    "2025-11-19": {
      "practice": "Текст для первого блока",
      "parable": "Текст для притчи",
      "quote": "Текст для практики"
    }
  }
}

Это несложная логика, но ИИ помог быстро довести её до рабочего вида и несколько раз переписать, когда менялись правила.

Что реально пригодилось

1. Базовое понимание HTML/CSS/JS
   Достаточно разбираться в структуре кода, чтобы объяснить ИИ, что именно и где поправить.

2. Внимательность
   Увидеть, что на телефоне кнопка уползла влево — это половина успеха.

3. Умение формулировать запрос
   Чем точнее ваш промпт, тем качественнее ответ. «Сделай красиво» — не работает. «Сделай отступ у блока .modal сверху на 20 пикселей только на экранах шире 768px» — работает отлично.

Итоги

ИИ помогает быстро получить стартовую структуру, исправлять мелкие ошибки и экспериментировать с новыми фичами без страха всё сломать.

ИИ — не волшебная палочка. Скорее это очень быстрые руки для вашей головы: код пишет он, но направление задает человек. И если у вас есть база и умение формулировать задачи, собрать небольшой сайт через ИИ действительно становится намного проще.

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