Vibe-кодування дашборду: ШІ, візуалізація та архітектура

Вступ

Протягом одного тижня було створено дашборд для візуалізації та аналізу даних Національного демографічного та медичного опитування Філіппін (NDHS) 2025 року. Це опитування, що публікується кожні три роки Філіппінським статистичним управлінням (PSA), містить великий обсяг даних про здоров'я, народжуваність, демографію та культурні особливості. Метою проєкту було зробити ці дані доступнішими для широкої аудиторії через карти, діаграми та ШІ-генеровані інсайти.

Початок роботи з ШІ-агентами: Від ідеї до перших результатів

Початкова ідея полягала у використанні кодувального агента для створення інтерактивних карт. Використовуючи репозиторій карт адміністративних кордонів Філіппін, автор поставив завдання Claude Code завантажити карту країни, розділену на регіони, з можливістю деталізації до провінцій, міст/муніципалітетів та барангаїв. Також було потрібно додати панель даних для кожного рівня. Claude Code вражаюче швидко, приблизно за годину, створив вебсайт, що відповідав початковим вимогам.

Однак, виникли складнощі з коректним відображенням міст з високим рівнем урбанізації (HUCs), які географічно є частиною провінцій, але політично незалежні. Це вимагало значного часу на налагодження та розуміння структури місцевого самоврядування, що підтвердило відомий жарт програмістів про 90% часу розробки.

Магія очищення та вилучення даних

Після створення шаблону карти, його було випробувано з різними наборами даних. Використання Claude Code для вилучення даних з Excel-таблиць (наприклад, про рівень бідності) виявилося надзвичайно ефективним. Агент зміг автоматично очистити та конвертувати дані, навіть розпізнавши ієрархію, позначену крапками у таблиці. Це значно спростило процес, який зазвичай є рутинним і трудомістким.

Гнучкість у розробці та нові ідеї

ШІ-агенти дозволили легко змінювати напрямок проєкту. Коли автор натрапив на складний набір даних NDHS з кількома аркушами та індикаторами, Claude Code бездоганно створив карту на основі одного аркуша (загальний коефіцієнт народжуваності). Згодом, для таблиці підліткової вагітності з п'ятьма вимірами, агент створив систему вкладок для навігації. Це призвело до рішення перетворити проєкт на окремий дашборд, зосереджений виключно на даних NDHS, додавши сторінку з діаграмами для негеографічних даних.

Важливість редакційних та дизайнерських рішень

Незважаючи на можливості ШІ, постійно виникала потреба у прийнятті редакційних та дизайнерських рішень. Наприклад, дані про переваги контрацепції серед жінок мали 16 різних вимірів. Щоб забезпечити зручність користувача, було вирішено розділити цю таблицю на три окремі розділи. Також довелося експериментувати з різними типами діаграм, такими як вафельні діаграми, для ефективної візуалізації складних даних. Автор також перевіряв коректність відображення на мобільних пристроях, розташування міток та інші дрібні деталі, що вимагало багаторазових ітерацій з агентом.

Архітектура: Від "vibe-кодування" до структури

Інтенсивне використання ШІ-агентів призвело до швидкого вичерпання лімітів використання та виявлення архітектурного безладу (наприклад, двох рендерерів карти на одній сторінці). Це спонукало до впровадження стандартизованої архітектури, що складається з трьох шарів:

Шар презентації: Стандартні шаблони для карт, діаграм та таблиць даних, що дозволяють швидко перевіряти точність вилучення даних та забезпечують прозорість для користувачів.
Шар вилучення: Для кожної сторінки дашборду агент створює скрипт для вилучення даних з вихідної таблиці та збереження їх у файл JSON.
Шар даних: Кожна сторінка має файл data.json, який слугує проміжним етапом між вилученням та презентацією, зберігаючи структурований вміст.

Ця структура підвищила ефективність агентів, зменшивши використання токенів та спростивши налагодження. Для більшої частини проєкту використовувалася старіша, але ефективна модель GPT-5.3-codex medium.

Цінність ШІ-генерованих інсайтів

Було проведено експеримент з використанням ШІ для генерації інсайтів з даних. Процес включав два етапи: агент генерував підказку, яка потім переглядалася вручну, а потім запускалася для отримання результату. Це дозволило перевіряти та редагувати підказки, запобігаючи "перенавчанню" агента та забезпечуючи більш цінні результати. ШІ-інсайти виявилися дуже корисними для представлення інформації, яку важко було б отримати з карт, діаграм та таблиць даних.

Забезпечення точності: Робочі процеси фактчекінгу

Для забезпечення точності ШІ-генерованих інсайтів було розроблено робочий процес фактчекінгу. Спочатку агент перевіряв окремі твердження, але це призводило до повторень. Згодом перейшли до перевірки блоків інсайтів, оцінюючи їх як повністю підтверджені, здебільшого підтверджені, частково підтверджені або непідтверджені. Були додані суворіші запобіжники: кожен доказ повинен вказувати на точний покажчик даних та значення, а скрипти-валідатори перевіряють структурну валідність та якість доказів. Це перетворило процес на суворий аудит, а не на одноразову перевірку ШІ. У підсумку, з 273 блоків фактчекер підтвердив 258, 12 були здебільшого підтверджені, 2 – частково, і 1 – непідтверджений.

Реальні застосування та майбутні можливості

Ранні тестери дашборду, включаючи лікаря, соціолога та керівника контенту, одразу побачили його потенційну цінність. Вони відзначили, що дашборд буде корисним для медичних працівників, дозволить миттєво зрозуміти дані без заглиблення в цифри та відкриває можливості для співпраці між редакціями. Серед майбутніх кроків розглядаються створення регіональних звітів, інтеграція чат-бота для запитів до даних та додавання інших наборів даних для збагачення аналізу.

Висновок

Весь дашборд, включаючи карти, діаграми, ШІ-генеровані інсайти та конвеєр фактчекінгу, був створений за тиждень однією людиною завдяки "vibe-кодуванню". Однак, цей проєкт також показав, що одних лише "vibe" недостатньо. Необхідно навчати журналістів та працівників редакцій створювати подібні продукти, надаючи їм розуміння архітектури та даних, зберігаючи при цьому їхнє редакційне судження.

Що це означає для розробників

Цей досвід демонструє, що ШІ-агенти значно спрощують рутинні завдання розробки та очищення даних, дозволяючи швидко створювати прототипи та змінювати напрямок проєкту. Однак, для публікації та масштабованості все ще потрібні навички архітектури програмного забезпечення та увага до деталей.

Ключові факти

Дашборд для візуалізації та аналізу даних Національного демографічного та медичного опитування Філіппін (NDHS) 2025 року був створений за тиждень однією людиною.
Використання ШІ-агентів (зокрема Claude Code) значно прискорило початкову розробку та очищення даних.
Попри ефективність ШІ, для коректного відображення даних та зручності користувача були необхідні значні редакційні та дизайнерські рішення, а також розуміння місцевої специфіки.
Проєкт виявив потребу в архітектурному підході (шари презентації, вилучення, даних) для ефективності агентів та підтримки коду.
Було розроблено двоступеневий процес для генерації ШІ-інсайтів та впроваджено суворі механізми фактчекінгу з прив'язкою до точних даних.