На странице
Вайбкодинг — скользкая дорожка =)
Собираем одностраничник о себе в одном HTML-файле, меняем оформление и учимся проверять код, который написал ИИ.
Главная боль
Нейросеть выдала код. Как превратить его в работающую страницу и не потеряться в правках?
Главная мысль
Запускай каждую версию, сохраняй рабочую копию и объясняй агенту, что именно нужно поправить.
Если сайты тебе не очень интересны, выполнять эту практику необязательно. Но саму часть советую прочитать: на простом примере будет легче понять, как мы переходим от разговора с нейронкой к работе с проектом. Так в третьей части не потеряется нить повествования =)
С картинкой или текстом результат виден сразу. С кодом появляется ещё один шаг: его нужно запустить. Ты объясняешь, что должно получиться, ИИ пишет код, а дальше вы вместе его дорабатываете. Такой способ начать проект я здесь и называю вайбкодингом — термин употребляют по-разному.
С помощью нейросетей я собрал Telegram-бота, бота для Twitch и сайт-портфолио. С подсказками Gemini настроил непрерывную интеграцию и автоматическое развёртывание на сервере — чтобы изменения проходили проверку, а новая версия проекта попадала на сервер автоматически.
Малена — один из этих проектов. Ты уже видел мой образ и мем с ней. Она умеет рисовать и саму себя в разных образах: костюм и мир вокруг меняются, а чёрное каре, фиолетовая прядь и знакомые черты лица остаются.
Готовые рисунки Малены. Последний — фан-арт по Warhammer 40,000. Нажми на картинку, чтобы открыть её целиком. Здесь показаны работы бота; разбор их создания и исходные запросы в мини-курс не входят.
Посмотреть мои проекты можно здесь: Telegram-бот Malena, Twitch-канал с чат-ботом и сайт-портфолио.
А ещё я собрал игру MALENASTROM на большом и злом Unreal Engine, на C++, не написав ни строчки кода руками. Ну, почти ни строчки =)
С помощью Vacus удалось собрать её примерно за месяц, занимаясь по паре часов по вечерам. И, по-моему, получилась довольно интересная игра. Про Vacus и работу с ним будет отдельная статья.
Главное меню MALENASTROM. Оба скриншота можно открыть в полном размере нажатием на картинку.
А это уже сама игра: регионы, спутники и Малена на связи.
Местами элементы интерфейса ещё наезжают друг на друга, встречаются и другие мелкие огрехи. Такие вещи нейронке сложнее заметить самостоятельно — приходится буквально тыкать носом: «Вот здесь элементы наложились, раздвинь их». Поэтому запустить игру, посмотреть на неё своими глазами и объяснить, что нужно поправить, — тоже часть работы. Даже когда почти весь код пишет ИИ.
Мой сайт-портфолио gamepunk.ru. Ниже начнём с чего-нибудь попроще — учебного одностраничника о себе.
Перед тем как просить код для своей страницы, реши, что тебе сейчас важнее: освоить конкретный приём или собрать нужную вещь.
Как не «убить» в себе программиста
Если сейчас учишься, оставляй себе ту часть задачи, которую хочешь освоить.
Можно попросить нейросеть написать систему инвентаря, вставить код и получить работающий результат. Но если всё запустилось, это ещё не значит, что ты сможешь объяснить устройство системы, изменить правила складывания предметов или найти ошибку.
Поэтому для учебных задач я советую просить изолированные примеры и помощь небольшими порциями.
Если учишься Unreal и застрял на создании компонента, можно спросить так. Если с движком ещё не работал, переходи к универсальным запросам ниже:
Покажи минимальный пример создания моего класса компонента во время игры через NewObject. Объясни роль владельца и регистрации компонента. Версия Unreal: [моя версия]. Вот объявление класса: [мой код].
Создать объект и зарегистрировать компонент — два отдельных действия. У Epic есть документация для NewObject и RegisterComponent. Пример нужно сверить с версией движка в своём проекте.
Для любой другой темы подойдут такие запросы:
Посмотри на мою попытку и дай одну подсказку, с чего продолжить. Полное решение пока не показывай.
Предложи похожую задачу с одним изменённым условием. Я сначала решу её сам.
Проверка понимания простая: закрой готовый ответ и попробуй применить приём к изменённой задаче. Затем запусти решение и объясни, почему оно работает. Если пока не получается, теперь понятно, о чём спросить дальше.
Если цель — собрать проект, нейросети можно поручить больше работы. Но всё равно стоит разобраться, какие изменения ты принимаешь и как проверишь, что они работают. Учиться на готовом решении тоже можно, если после разбора ты пробуешь что-то сделать сам.
Практика плюс: первый одностраничник о себе
Начнём со страницы с именем, описанием и ссылками. Её можно собрать прямо через знакомый чат. Для этой практики нужен компьютер, браузер и текстовый редактор; на Windows подойдёт Блокнот.
За структуру страницы отвечает HTML, за оформление — CSS, а за поведение — JavaScript. Простой HTML-файл можно открыть с диска прямо в браузере. Так же предлагают начать и в учебнике MDN.
Скриншот страницы, собранной в Codex по заданию этой практики. Ниже можно открыть обе версии HTML. У тебя оформление может получиться другим.
Сначала свои факты, потом запрос
Подготовь имя или ник, два-три предложения о себе, интересы и ссылки. Подставь их вместо квадратных скобок:
Создай одностраничник обо мне в одном файле index.html.
Имя: [имя или ник].
Описание: [мой текст].
Интересы: [мой список].
Ссылки: [названия и полные адреса].
Сделай тёмный фон, оранжевые акценты и крупный читаемый текст. Страница должна удобно выглядеть на телефоне. Используй только указанные сведения. Стили и скрипты размести внутри файла, без внешних библиотек, чтобы страницу можно было открыть прямо в браузере. Верни полный HTML-код и отдельно объясни, как его сохранить и открыть.
Открой то, что получилось
Если чат предлагает готовый index.html для скачивания, сохрани его в отдельную папку. Если он выдал код, на Windows можно сделать так:
- Создай папку
about-meи открой Блокнот. - Скопируй в него HTML-код из ответа. Обрамляющие строки с тройными обратными кавычками и пояснения чата в файл не нужны.
- Выбери «Сохранить как», имя
index.html, тип «Все файлы» и кодировку UTF-8. - Открой файл в браузере. Если двойной щелчок открывает редактор, используй «Открыть с помощью» и выбери браузер.
Проверь полное имя файла: index.html, а не index.html.txt. Чтобы увидеть расширение в Проводнике Windows 11, открой «Просмотреть» → «Показать» → «Расширения имён файлов» и включи этот пункт. Если рядом уже стоит галочка, расширения показаны.
Включи показ расширений — так сразу будет видно, не добавилось ли к index.html лишнее .txt.
На другой системе тот же файл нужно сохранить как обычный текст с расширением .html. Если видишь исходный код вместо страницы, проверь, не получилось ли имя index.html.txt. Если на странице появились пояснения нейросети, убери их из файла.
Посмотри на результат как посетитель: понятно ли, о ком страница, легко ли читать описание, открываются ли ссылки на нужные адреса? Сузь окно браузера: помещаются ли текст и кнопки?
Внеси первое изменение
Сделай копию рабочей версии, например index-before.html. Затем попроси:
Добавь переключатель светлой и тёмной темы. В обеих темах текст должен оставаться читаемым. Сохрани мои тексты и ссылки. Верни обновлённый HTML целиком и коротко объясни, что изменил.
Замени содержимое index.html, сохрани файл и обнови страницу в браузере. Переключи тему несколько раз, проверь описание и ссылки в обоих вариантах.
Если что-то сломалось, объясни, что именно ты видишь:
После переключения на светлую тему описание осталось белым и сливается с фоном. Сделай его читаемым. Прикладываю скриншот и текущий HTML. Сохрани работающие ссылки и расположение блоков.
После исправления повтори проверку. Если запутался в версиях, у тебя осталась копия рабочего файла.
Узкое окно, светлая тема. Описание, ссылки и кнопка помещаются по ширине. Полный текст сохранился после изменения.
В готовом примере переключатель работает и на широком экране, и в узком окне. После обновления страницы возвращается тёмная тема — запоминание выбора мы не заказывали. Белый текст выше — пример возможной ошибки и запроса на исправление; в готовой странице такой ошибки нет.
После своей попытки открой первую версию и версию с переключателем, сохрани файлы и сравни код. Обе страницы работают локально, без загрузки библиотек, шрифтов или изображений из интернета. Интернет понадобится, если решишь перейти по ссылкам на проекты.
Задание выполнено, если страница открывается, переключатель работает, а ты можешь объяснить разницу между двумя версиями. Пока файл лежит только на твоём компьютере. Как опубликовать страницу, чтобы она открывалась по ссылке с другого устройства, разберём в отдельном материале о портфолио и GitHub Pages.
На этом вторая часть закончена: у тебя есть страница, которую можно открыть и изменить. Дальше разберём инструменты для работы с целым проектом. Если пока хочется поиграть с оформлением своего сайта, к продолжению можно вернуться позже.