Vibe-coding: создаём первый сайт с ИИ с нуля

Новичок формулирует, для кого и зачем создаётся сайт, выбирает один измеримый результат и ограничивает первую версию. Вместо длинного «сделай мне красиво» появляется короткий brief: аудитория, пользовательский сценарий, страницы, контент, ограничения и критерии готовности. Учащийся сразу видит разницу между идеей, требованиями и реализацией и понимает, какие решения нельзя бездумно делегировать модели. Темы: • задача сайта, аудитория и один основной пользовательский сценарий; • MVP и список того, что сознательно не войдёт в первую версию; • brief для агента: цель, входные данные, ограничения и ожидаемый результат; • критерии готовности, референсы и первая карта страниц. Практический артефакт: одностраничный brief и backlog первой версии сайта.

Модуль создаёт минимальную техническую картину без академической перегрузки. Учащийся понимает роли браузера, HTML, CSS, JavaScript, сервера, домена и хостинга, учится отличать локальный файл от опубликованного сайта. Отдельно разбираются реальные возможности ИИ: генерация вариантов, объяснение и редактирование кода — и ограничения: галлюцинации, устаревшие решения, небезопасные зависимости и потеря контекста. Темы: • браузер, страница, сервер, домен и HTTPS простыми словами; • HTML как структура, CSS как оформление, JavaScript как поведение; • что агент видит, чего он не знает и почему уверенный ответ может быть неверным; • локальная среда, preview и безопасная рабочая папка проекта. Практический артефакт: схема устройства будущего сайта и настроенный локальный preview.

Учащийся вместе с агентом создаёт первую вертикальную версию главной страницы, которая уже открывается в браузере. Фокус не на запоминании синтаксиса, а на связи между пользовательской задачей, структурой документа и визуальным результатом. Вводятся базовые требования к мобильной версии, читаемости, семантике, доступности и правам на изображения. Темы: • смысловая структура страницы: заголовок, предложение, доказательства и CTA; • генерация и редактирование HTML/CSS небольшими порциями; • адаптивность, контраст, клавиатура, alt-тексты и понятные подписи; • изображения, шрифты, лицензии и оптимизация размера файлов. Практический артефакт: адаптивная главная страница, прошедшая визуальный чек-лист.

Модуль превращает спонтанный vibe-coding в контролируемую итерацию. Учащийся учится давать агенту ровно тот контекст, который нужен для одного изменения, запрашивать план перед крупной правкой, смотреть diff, принимать результат по критериям и останавливать цикл, если агент начал расширять задачу. Git вводится как практическая страховка, а не как отдельная сложная дисциплина. Темы: • один запрос — одна цель: контекст, ограничения, формат ответа и stop condition; • план, маленький patch, просмотр diff и ручная приёмка; • Git: снимок состояния, понятное сообщение изменения и безопасный откат; • журнал решений: что попросили, что изменилось, как проверили. Практический артефакт: репозиторий с последовательной историей из нескольких проверенных изменений.

Учащийся добавляет полезное поведение: меню, фильтр, небольшую форму или другой элемент, нужный выбранному сценарию. Он понимает разницу между кодом в браузере, серверной обработкой и внешним сервисом, а также почему нельзя хранить пароли и API-ключи в странице. Для первой версии выбирается минимальное решение без собственного сложного backend, если он не нужен продукту. Темы: • события и состояние интерфейса на простых примерах JavaScript; • формы, валидация, сообщения об ошибках и состояние успеха; • статические данные, внешний сервис и собственный backend: когда что нужно; • персональные данные, секреты, спам и принцип минимального сбора данных. Практический артефакт: один интерактивный пользовательский сценарий с проверенными ошибочными и успешными состояниями.

Модуль учит не спрашивать агента «всё ли хорошо», а собирать независимые свидетельства. Учащийся проходит сценарии как пользователь, проверяет разные экраны, ссылки, формы и ошибки, использует автоматические анализаторы как подсказку и фиксирует найденные проблемы. Отдельно разбирается минимальная безопасность: зависимости, секреты, внешние скрипты и недоверенные вставки. Темы: • happy path, ошибки, пустые состояния и проверка на мобильном устройстве; • семантика, доступность, скорость загрузки и базовое техническое SEO; • безопасные внешние зависимости, отсутствие секретов и проверка ссылок; • баг-репорт для агента: шаги, ожидаемое, фактическое и доказательство. Практический артефакт: QA-чек-лист, список найденных дефектов и повторная проверка после исправлений.

Учащийся публикует сайт через подходящий для новичка хостинг, подключает домен и проверяет HTTPS. Модуль объясняет, что публикация — не финальный магический шаг, а управляемое изменение с preview, production-версией, наблюдением и способом отката. Аналитика подключается только при ясной цели и с учётом приватности. Темы: • hosting, build, preview и production простыми словами; • домен, DNS и HTTPS без погружения в администрирование серверов; • проверка после публикации, мониторинг доступности и журнал изменений; • аналитика, cookies, приватность, резервная копия и rollback. Практический артефакт: опубликованная версия сайта и короткая инструкция по обновлению и откату.

Учащийся проводит проект через полный цикл ещё раз: уточняет спецификацию, делает ограниченный набор изменений, проверяет их на реальных пользователях, исправляет проблемы и документирует состояние. Финал оценивается не по объёму сгенерированного кода, а по полезности, понятности, доступности, отсутствию критичных ошибок и способности владельца продолжить работу. Темы: • заморозка scope и план финальной итерации; • пользовательская проверка на 3–5 представителях аудитории; • исправление приоритетных дефектов и финальный regression-check; • README проекта, backlog следующей версии и handoff специалисту. Итоговый проект: публичный сайт из 3–5 страниц или эквивалентный одностраничный сервис с одним интерактивным сценарием, репозиторием, README, QA-чек-листом и проверенным rollback.