Вайб-кодинг вебзастосунків без залежностей за допомогою ШІ
Інженер створив повноцінну офлайн-гру для вивчення математики за допомогою ШІ-агентів без жодних залежностей під час виконання. Проєкт демонструє, як використовувати модульне тестування та інтеграційні тести Puppeteer для підтримання якості згенерованого коду.
Вплив: Середній
Чому це важливо
Ви можете перейняти цю архітектуру для швидкого створення легких, приватних та високопродуктивних вебсторінок за допомогою Claude або Cursor без зайвих фреймворків.
TL;DR
- 01Впроваджуйте тестування за допомогою вбудованого ранера Node.js та Puppeteer, щоб контролювати код від ШІ.
- 02Мінімізуйте розмір бандла (~35 КБ), обираючи Vanilla JS замість важких сучасних фреймворків.
- 03Генеруйте медіаресурси на етапі розробки, щоб уникнути витрат на виклики API під час роботи програми.
Ключові факти
- Розмір ядра
- ~35 КБ
- Обсяг аудіоресурсів
- ~1.5 МБ (ліниве завантаження)
- Залежності виконання
- 0
- Збереження стану
- localStorage (повністю локально)
Архітектура без зовнішніх залежностей
Escape Run побудовано за допомогою чистого JS (Vanilla JS) та HTML5 Canvas без жодних зовнішніх бібліотек під час виконання та етапів збирання. Ядро гри важить близько 35 КБ із додатковим лінивим завантаженням аудіофайлів обсягом ~1.5 МБ. Весь ігровий прогрес зберігається локально в localStorage, що забезпечує роботу в режимі офлайн без відстеження користувачів.
Автоматизовані тести для ШІ-коду
Для контролю якості згенерованого ШІ коду розробник впровадив суворе тестування. Чиста логіка гри (генератори навичок, модель прогресу та планувальник інтервальних повторень Лейтнера) перевіряється вбудованим тест-ранером Node.js через команду node --test без залучення сторонніх інструментів. Інтеграційні тести інтерфейсу знаходяться у файлах tests/smoke.mjs та tests/nav.mjs, де використовується puppeteer-core для перевірки гри в браузері Chrome без графічного інтерфейсу.
Попередньо згенеровані ресурси
Замість надсилання запитів до зовнішніх API під час гри, озвучка та звукові ефекти були згенеровані через ElevenLabs на етапі розробки та збережені у папці assets/audio/. Скрипт tools/gen-audio.mjs автоматизує генерацію за потреби. У разі відсутності аудіофайлів ігровий рушій автоматично перемикається на процедурний синтез звуку за допомогою WebAudio API.
Спробуй за 2 хвилини
python3 -m http.server 8000
node --testbash
✓ Коли використовувати
- Для швидкого створення невеликих або середніх вебінструментів та ігор за допомогою ШІ-агентів
- При створенні приватних застосунків, які мають працювати повністю офлайн без серверних обчислень
- Коли вам потрібен повний контроль над продуктивністю та розміром бандла до 50 КБ
✕ Коли НЕ варто
- Для великих корпоративних вебсистем, що потребують складного керування станом за допомогою React або Redux
- Коли потрібна синхронізація з сервером у реальному часі та спільна робота багатьох користувачів
Що зробити сьогодні
- Клонуйте репозиторій escape-run для вивчення архітектури тестів та генерації медіафайлів.
- Запустіть `node --test` для перевірки роботи вбудованих тестів без сторонніх бібліотек.
- Спробуйте інтегрувати автоматичні тести інтерфейсу через puppeteer-core у свій поточний проект із ШІ-кодингом.
Джерела