Сайт-резюме в стиле Fallout 2 с ИИ: кейс вайбкодинга 2026 | AiManual
AiManual Logo Ai / Manual.
09 Фев 2026 • Гайд

Вайбкодинг на практике: как с помощью ИИ создать сайт-резюме в стиле Fallout 2 (разбор кейса)

Разбор реального кейса: как с помощью GPT-4.5 и Midjourney v7 создать креативное резюме-сайт в стиле Fallout 2. Промпты, код, трудности и решения.

Почему ваше резюме выглядит как все остальные? (И как это исправить)

Вы отправляете десятки резюме. Никакого ответа. Потому что ваше PDF или LinkedIn-профиль ничем не отличаются от сотни других. Решение? Сайт-резюме. Но не очередной шаблон на Bootstrap. Что-то, что запомнится. Например, стиль Fallout 2 - тот самый зелёный монитор, пиксельные шрифты, атмосфера постапокалипсиса.

Я решил сделать такой сайт. С помощью ИИ. И вот что из этого вышло.

Сразу предупреждаю: ИИ не сделает всё за вас. Он будет ошибаться, забывать контекст и предлагать странные решения. Но если знать, как им управлять, получится быстрее, чем писать код вручную.

Инструменты: что работает в 2026 году

На февраль 2026 года, GPT-4.5 Turbo - это стандарт для генерации кода. Он понимает контекст лучше, чем GPT-4, но всё ещё склонен к галлюцинациям. Для изображений я использовал Midjourney v7 - она отлично справляется с пиксель-артом и ретро-стилем.

Из новых инструментов: Claude 3.5 Sonnet тоже хорош для кодогенерации, но я остался с GPT из-за привычки. Для хостинга - Vercel, потому что деплой из GitHub за пару минут.

От идеи до первого промпта: как объяснить ИИ стиль Fallout 2

Первый промпт - самый важный. Если дать ИИ общее описание, получится каша. Нужны конкретные детали.

💡
Креативный промптинг - это не просьба, а техническое задание. Чем конкретнее, тем лучше.

Вот как НЕ надо делать:

Сделай сайт в стиле Fallout.

ИИ сгенерирует что-то расплывчатое. Вот рабочий промпт:

Создай HTML-страницу, которая выглядит как интерфейс компьютера из игры Fallout 2. Основные элементы:
1. Фон: тёмно-зелёный (#0a0a0a) с текстурой старых ЭЛТ-мониторов.
2. Шрифт: моноширинный, пиксельный, напоминающий терминал.
3. Цвет текста: зелёный (#00ff00) или янтарный (#ffb000).
4. Элементы интерфейса: рамки вокруг блоков, похожие на старые окна, с двойными линиями.
5. Анимация: мерцание курсора, как в терминале.
6. Содержимое: разделы "Персонаж" (характеристики), "Инвентарь" (навыки), "Квесты" (опыт работы).
Предоставь полный код HTML, CSS и JavaScript.

Этот промпт дал ИИ чёткое направление. Но результат всё равно потребовал правок.

Шаг за шагом: от сгенерированного кода к работающему сайту

1Первая итерация: HTML и CSS

GPT-4.5 сгенерировал базовую структуру. Код был неплох, но фон оказался просто сплошным цветом. Я хотел текстуру. Пришлось уточнить:

Добавь фоновое изображение, которое имитирует зернистость ЭЛТ-монитора. Используй CSS-паттерн или base64-изображение.

ИИ предложил SVG-паттерн. Я его использовал. Но затем столкнулся с проблемой: шрифты. ИИ предложил стандартные моноширинные, но я хотел точнее. Нашёл пиксельный шрифт на Google Fonts - "Press Start 2P". Добавил в код.

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

2Добавление интерактивности: JavaScript для атмосферы

Я хотел, чтобы при наведении на разделы появлялись звуки из игры (клики, писки). Но ИИ сгенерировал код, который не работал в браузере из-за политики автовоспроизведения.

Пришлось менять подход: звуки воспроизводятся только по клику. Это классическая проблема при работе с ИИ - он не учитывает ограничения браузеров. Подробнее о таких нюансах я писал в статье Vibe Coding для игр: как управлять контекстом и избежать краха проекта при разработке с ИИ.

Вот финальный код для звука:

const clickSound = new Audio('click.wav');
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
  button.addEventListener('click', () => {
    clickSound.currentTime = 0;
    clickSound.play();
  });
});

3Интеграция с бэкендом: форма обратной связи

Для резюме нужна форма обратной связи. Я использовал Formspree - сервис для обработки форм без бэкенда. ИИ сгенерировал форму, но не добавил атрибуты для Formspree. Я исправил вручную.

Здесь важно: ИИ не знает все сторонние сервисы. Нужно дать ему конкретные инструкции.

Трудности: когда ИИ мешал больше, чем помогал

Основные проблемы:

  • Деградация контекста: после нескольких сообщений ИИ забывал про стиль Fallout и предлагал современные элементы. Решение: периодически напоминать в промптах о ключевых требованиях. Об этом подробнее в статье Как победить деградацию контекста при «вайб-кодинге» игр.
  • Генерация небезопасного кода: ИИ предложил вставить API-ключ прямо в JavaScript. Это неприемлемо. Я использовал environment variables.
  • Непонимание дизайна: ИИ путал стиль Fallout с другими играми. Пришлось показывать скриншоты (через ссылки) и описывать детали.

Самое раздражающее: ИИ иногда генерирует код, который выглядит рабочим, но не работает. Например, CSS-анимация мерцания курсора была слишком резкой. Я исправил вручную, подкрутив timing functions.

Результат: что получилось в итоге

Сайт выглядит точно как терминал из Fallout 2. Зелёный текст на тёмном фоне, мерцание, пиксельные шрифты. При кликах - звуки. Форма обратной связи работает.

Я выложил сайт на Vercel. Домен купил на Namecheap (партнерская ссылка). Хостинг обошёлся в $10 в год.

Для тех, кто хочет попробовать, вот основные компоненты:

  1. HTML-структура с семантическими тегами.
  2. CSS с использованием CSS-переменных для цветов.
  3. JavaScript для интерактивности и звуков.
  4. Интеграция с Formspree для формы.

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

Что дальше? Вайбкодинг не заменит разработчика, но изменит его роль

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

Проблема в том, что ИИ убил документацию? Не совсем. Но теперь документация нужна для обучения ИИ, а не только людей. Как в статье Как ИИ-ассистенты убивают документацию: кейс Tailwind CSS.

Мой совет: начните с малого. Создайте сайт-визитку с ИИ. Но не ожидайте, что всё получится с первого промпта. Будьте готовы править код. И помните, что вайбкодинг - это не магия, а инструмент, который требует навыка управления.

А если хотите глубже изучить, как работать с ИИ для генерации кода, посмотрите мою статью SDD для 1С: как заставить ИИ генерировать production-ready код вместо случайного вайбкодинга.

Удачи в экспериментах! И помните: в постапокалипсисе ваш сайт-резюме должен выделяться.

←
На главную