Що таке «vibe coding» і чому для тесту вибрали розширення Chrome

«Vibe coding» зараз просто повсюди. Більшість уявляє це як створення стандартних CRUD-додатків або звичних портфоліо-сайтів з однаковим геро-секціїй та градієнтними фонами. Але першою спробою в цьому стилі був не сайт і не додаток, а розширення для Chrome. Це дуже логічно, адже для такого тесту не треба думати про хостинг, бекенд, бази даних чи інші традиційні складнощі.

Розширення Chrome — це набір кількох файлів, таких як manifest.json, HTML, JavaScript та CSS, які можна швидко завантажити у браузер. Вони ідеально підходять для швидких експериментів, адже мають чітку мету і не вимагають складної інфраструктури. Саме тому автор взяв на тестування три великі мовні моделі (LLM) — Claude, ChatGPT та Gemini — щоб дізнатися, хто з них найкраще впорається з завданням.

Ідея для розширення: пошук серед переглядачів історій в Instagram

Ідея проста, але зручна: мати можливість швидко шукати серед тих, хто переглянув Instagram-історію. Це досі неможливо зробити напряму в самому Instagram. Коли ваші переглядачі налічують сотні чи навіть тисячі людей, знайти конкретного користувача — справжній біль.

Тож у тесті було три важливі моменти:

• Дуже розпливчасте завдання — мінімум деталей у запиті.
• Перевірка, наскільки добре модель може сама сформувати робочий продукт.
• Фокус на простоті використання та функціональності.

ChatGPT: працюючий прототип із кількома обмеженнями

Як створювали розширення і що вийшло

Для створення коду використовувався стандартний чат-інтерфейс GPT-5.5 з платною підпискою. За пару хвилин отримали ZIP-файл із manifest.json, стилями і скриптами. І хоча початкова версія спочатку не реагувала на кліки, після патчу з’явилася панель пошуку.

Проте розширення працювало тільки з обмеженою кількістю переглядачів. Instagram використовує «ліниве» завантаження списку, що внесло складнощі.

Щоб розв’язати цю проблему, в новій версії додали:

1. Кнопку «Автоіндексація всіх» — яка мала прокручувати список і створювати індекс, але виявилася нестабільною через захист Instagram.
2. Режим «Живий збір» — який відслідковує і зберігає імена під час вручну прокрутки списку.

Таким чином функціональність працювала, але все було далеке від ідеалу: дублікати, неправильні розпізнання і великий загальний рахунок переглядів.

Gemini: замість готового коду — довгі пояснення та багато помилок

Несподіваний досвід роботи з Google-моделлю

Замість конкретного розширення Gemini спершу запропонував розгорнутий план дій і навіть досить об’ємний текст для вставки у спеціалізоване середовище розробки. На жаль, це не те, що очікували.

Потім, після прохання про повноцінний код, Gemini розділив код на окремі файли і попросив створити папку вручну. Проте отримане розширення не працювало взагалі. Пошук так і не з’явився в інтерфейсі Instagram, а початок роботи вимагав численних безрезультатних спроб і виправлень.

Claude: трішки спочатку не вийшло, але результат вражає

Найшвидше створене повноцінне розширення, що дійсно працює

Після двох неідеальних спроб, перший варіант від Claude теж не запустився. Але вже другий підхід виявився дуже розумним: замість простого парсингу DOM інтерфейсу Instagram розширення використовує внутрішні API Instagram, на які вже є авторизація користувача.

В результаті у панелі з’явився працездатний пошук по всіх переглядачах, хоч спочатку й без поділу за конкретними історіями. Після уточнень було реалізовано:

• Візуальну смугу з ескізами історій.
• Функцію вибору окремої історії для пошуку по ній.
• Показ часу і кількості переглядів.

Ця версія не потребувала подальших чотирьохрудних доопрацювань, що свідчить про доволі якісний початковий код.

Підсумки тесту: що і коли краще вибирати

Результати були такими:

1. Claude показав найшвидшу і найдосконалішу реалізацію з мінімумом циклів виправлень і повною робочою версією.
2. ChatGPT створив робочий, але дещо сируватий прототип із численними обмеженнями по роботі зі списком і потребою ручного прокручування.
3. Gemini так і не зміг надати робочий код, запропонувавши радше навчальні матеріали та потребував довготривалих і марних правок.

Цікаво спостерігати, як сучасні мовні моделі справляються з практичними задачами розробки — і що, попри потужності, користувачу важливо бачити не лише правильний код, а й надійний і зрозумілий результат, який можна відразу запустити.