Agentic Website Studio: десять AI-агентів будують сайт у вас на очах
КейсБільшість демо у стилі «AI збудує вам сайт» ховають саму роботу: ви вводите промпт, крутиться спінер, з’являється сторінка. Найцікавіше — як ухвалюється рішення, що відкидається, хто перевіряє результат — лишається невидимим. Ця студія робить навпаки: десять агентів-спеціалістів проходять справжній продакшн-пайплайн, а інтерфейс — це живий погляд на все, що вони роблять. Можна поставити на паузу, відповісти на запитання, обрати креативний напрям і потім перемотати весь прогін назад.
Справжній прогін у записі: бриф на вході — перевірений сайт на виході, і кожне рішення агентів видно по дорозі.
незмінений результат еталонного прогону, розміщений як є
Справжній прогін від початку до кінця
Еталонний прогін створив односторінковий сайт для Nordwind — вигаданої української студії промислового дизайну: темна палітра, велика типографіка, скрол-оповідь, три кейси, команда, контактна форма. Агенти запропонували три креативні напрями зі скоркартою — Safe, Distinctive, Experimental — і оператор обрав експериментальний: From Field to Factory — сторінка як безперервний рух камери від польового спостереження до серійного виробництва.
QA-агент його завалив
Це частина, якою я пишаюся найбільше. Усі автоматичні перевірки пройшли на десктопі, планшеті й мобільному — без горизонтального переповнення, всі заявлені секції видимі, семантичний main, skip-link, розмічена навігація. Чек-лист випустив би це в продакшн. QA-агент керував справжнім браузером, подивився на те, що бачить, і все одно завалив ревізію:
- Highфіксований хедер обрізає власний текст на кількох позиціях скролу
- Highскрол-HUD і медіа-оверлеї наїжджають на читабельний контент
- Mediumкілька мобільних контролів менші за мінімум 44px для дотику
- Lowодин запит ресурсу повертає 404
Висновки йдуть із доказами — скриншоти плюс відеозапис сесії браузера, який стрімився наживо і доступний у реплеї. Робота агента — не підтвердити, що білд працює. Його робота — не погодитися з ним.
Безперервність: як змусити згенероване відео триматися купи
Згенеровані кліпи зазвичай погано монтуються — кожен існує у власному світі. Тут п’ять кліпів зв’язані keyframe-контрактом: три «занурення» на станціях плюс два конектори, в яких зафіксовані обидві межі — по сусідніх кліпах:
field-dive start ← field-still system-dive start ← system-still factory-dive start ← factory-still field-to-system start ← field-dive:last end → system-dive:first system-to-factory start ← system-dive:last end → factory-dive:first
Це тримається завдяки двом виправленням. Постер кліпа став його власним першим кадром — виміряно через ffprobe signalstats: розбіжність яскравості постера й кадру впала з 6–12.5 до рівно 0.0 на всіх п’яти кліпах. А медіа-бюджет передається агенту-плановику як проєктне обмеження, а не попередження про обрізання: до цієї правки агент запланував дев’ять сцен на два доступні кліпи й лишив сім дір; після — задум сам розмірився під бюджет.
Що я збудував
Event-sourced оркестрація
Оркестратор — скінченний автомат над append-only журналом подій у SQLite. LLM пропонує плани й рішення, але ніколи не є сховищем стану — і не може сам оголосити прогін завершеним.
Один редюсер, три режими
Живі WebSocket-оновлення, записані фікстури й перемотка реплею йдуть через той самий редюсер projectEvents. Реплей — не друга гілка коду, яка може розійтися з живою.
Десять ролей агентів з ізольованими сесіями
Кожна роль отримує обмежений контекст, дозволені інструменти, типізовані схеми входу/виходу, бюджет і сигнал скасування.
Ізольований origin для прев’ю
Згенерований агентами код ніколи не виконується в origin самої Studio — він роздається з окремого порту.
Медіа-шлюз із контрактами безперервності
Підключувані провайдери, ліміти промптів читаються з машиночитної OpenAPI-схеми провайдера, а kлипи зв’язуються keyframe-контрактами.
QA-стримінг наживо
Playwright керує справжнім браузером; кадри стрімляться по WebSocket під час роботи, а сесія записується в MP4 для реплею.
Стек
TypeScript · Node.js 22 · pnpm monorepo · Fastify · SQLite event store · WebSocket · React · Vite · Playwright · Provider-neutral agent runtime · fal.ai · Cloudflare Tunnel
Що ще допрацьовується
Чесний список станом на кінець першого тижня:
- Реплею QA бракує явної кнопки «подивитися прохід QA» на завершених прогонах
- Шви між кліпами ще мають перепад експозиції до 8.8 YAVG — імовірне рішення: короткий кросфейд
- Агенти перестраховуються: маркують згенеровані зображення навіть із вимкненим розкриттям
- Кліпи обмежені ~5 секундами поточним відеопровайдером
- Голосовий агент реального часу — надиктувати бриф і керувати прогоном голосом — спроєктований і частково збудований
Хочете прогін для свого продукту?
Демо-прогони відкриті для перегляду; нові прогони — за запитом. Якщо хочете, щоб така команда агентів будувала для вас — або всередині вашої компанії — напишіть.
Зв’язатисяСоло-проєкт, збудований 23–28 липня 2026. Архітектура, реалізація, дизайн агентів і оцінювання — все моє.