Vibe-кодинг: создаём PWA для ребёнка за час

Vibe-кодинг: как создать приложение для ребёнка за час и что из этого вынести

Представьте: вы можете создать полноценное приложение для своего ребёнка всего за час, используя лишь диалог с ИИ. Это не кликбейт, а реальность, которую я испытал на собственном опыте. В этой статье я расскажу, как я с помощью vibe-кодинга (создания кода через ИИ-ассистента) разработал PWA для отслеживания книг дочери, и какие выводы это позволило сделать о современной разработке.

Что такое vibe-кодинг и почему это работает

Vibe-кодинг — это подход, при котором вы описываете задачу на естественном языке, а ИИ генерирует код. Это позволяет быстро создавать прототипы и целые приложения, не тратя время на рутинное написание кода. В моём случае это стало ключевым инструментом для решения личной задачи.

Почему PWA и Chrome-расширения — идеальный старт

Когда вы хотите быстро создать приложение, PWA (Progressive Web App) и Chrome-расширения имеют ряд преимуществ:

• PWA можно бесплатно разместить на GitHub Pages, а Chrome-расширения — опубликовать в магазинах (Edge бесплатно, Chrome — с разовым взносом).
• Не нужен сервер и бэкенд — данные хранятся локально.
• Chrome-расширения обходят CORS для внешних API.
• Локальное тестирование без шагов сборки.
• Стандартные веб-технологии, которые хорошо понимают LLM.
• PWA устанавливается на устройства, как нативное приложение.

Поэтому я выбрал PWA для приложения дочери.

Постановка задачи: что хотела дочь

Моя шестилетняя дочь была в восторге от книг Rainbow Magic Fairy Books (их более 300). Она хотела видеть все книги, отмечать прочитанные, вести список любимых и получать награды за достижения. Я добавил нефункциональные требования: экспорт/импорт данных для переноса между устройствами, полную офлайн-работу (включая обложки) и геймификацию с бейджами.

Процесс разработки: от промпта до готового приложения

Мой первый промпт был таким: «Я хочу создать мобильное приложение для отслеживания чтения моей дочери. Используй PWA (HTML/CSS/JS), сохраняй данные локально, с возможностью экспорта/импорта. Тема — как книги Rainbow Princess. Добавь все книги с обложками, поиск, избранное, отметки прочитанного и бейджи за достижения». Я указал ссылки на вики и списки книг.

Первая версия сгенерировалась за пару минут, но обложки были эмодзи. Я нашёл API Open Library с обложками и биографиями, уточнил промпт, и через несколько итераций получил рабочий прототип.

Обратная связь от пользователя — это главное

Когда дочь попробовала приложение, она сразу дала фидбек: нужно сортировать избранное, отмечать книги, которые у неё есть, и показывать прочитанные в порядке чтения. Также она заметила, что при прокрутке 300 книг трудно вернуться наверх — добавил кнопку «наверх». А чтобы обложки загружались быстрее, я реализовал подгрузку порциями по 20 книг.

За час я получил приложение, которое полностью удовлетворяет капризного пользователя — и это стало для меня откровением.

Практический пример кода

Вот как выглядит базовая логика PWA для хранения и отображения книг:

// Загружаем книги из локального хранилища или API
const books = await fetch('books.json').then(r => r.json());

// Функция для отметки книги как прочитанной
function markAsRead(bookId) {
  let readBooks = JSON.parse(localStorage.getItem('readBooks')) || [];
  if (!readBooks.includes(bookId)) {
    readBooks.push(bookId);
    localStorage.setItem('readBooks', JSON.stringify(readBooks));
    updateBadges(); // обновляем бейджи
  }
}

// Фильтрация книг по поиску
function searchBooks(query) {
  return books.filter(book =>
    book.title.toLowerCase().includes(query.toLowerCase())
  );
}

// Экспорт данных
function exportData() {
  const data = {
    readBooks: JSON.parse(localStorage.getItem('readBooks') || '[]'),
    favorites: JSON.parse(localStorage.getItem('favorites') || '[]')
  };
  const blob = new Blob([JSON.stringify(data)], {type: 'application/json'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'reading-data.json';
  a.click();
}

Этот код — основа, которую ИИ сгенерировал по моему описанию, и я лишь добавил комментарии.

Выводы: как ИИ меняет процесс разработки

Главный инсайт: с ИИ мы можем быстро входить в цикл обратной связи. Пользователю легче сказать, что ему не нравится, чем объяснить, что он хочет. Поэтому процесс разработки должен строиться так:

1. Определите простую цель — какую проблему решаем.
2. Получите первое описание ожиданий (чем расплывчатее, тем лучше).
3. Сформулируйте нефункциональные требования.
4. Соберите прототип.
5. Дайте пользователю попробовать и соберите фидбек.
6. Повторяйте цикл «сборка — фидбек» до готовности.

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

Почему это противоречит Agile и почему это нормально

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

Что делать прямо сейчас

Попробуйте vibe-кодинг на практике: выберите простую задачу — например, приложение для отслеживания привычек или список покупок — и создайте его с помощью ИИ за один вечер. Покажите результат близким и соберите фидбек. Вы удивитесь, как быстро можно получить работающий продукт.

Если у вас есть дети, которым нравятся Rainbow Fairy Books, можете воспользоваться моим приложением: Lottie-the-Fairy. Код открыт на GitHub.