Швидке прототипування із Github Spec Kit: робимо AI-клонер вірусних UGC відео за 6 годин

💡 Усі статті, обговорення, новини про AI — в одному місці. Приєднуйтесь до AI спільноти!

Привіт, я — Юрій Дзюбан, Conversational Backend-розробник компанії Master of Code Global. У цій статті поділюсь реальним прикладом швидкого прототипування із використанням Github Spec Kit — інструменту для Specification-Driven Development. Будемо робити AI-генератор UGC відео-оголошень, що клонує стиль та формат існуючих успішних відео. Тобто застосунок, у якому користувач міг би завантажити вірусне відео конкуруючого продукту, додати інформацію про свій продукт і отримати аналогічне відео у кілька кліків.

Чому ця тема

Весь мій комерційний досвід пов’язаний із чатботами та різними conversational/NLU/AI-related продуктами. Окрім робочих проектів, за останні кілька років я мав кілька пет-проєктів, пов’язаних з AI-генерацією контенту, зокрема:

• Написав дитячу ілюстровану книжку за допомогою ChatGPT та Midjourney.
• Намагався генерувати романи за допомогою LLM.
• Запускав мандрівного AI-інфлюенсера (x.com/seenbyteddy).
• Створив AI-генератор персоналізованих фото для атлетів на Strava (befitbecool.com).

Нещодавно я натрапив на zeely.ai — успішний український стартап для створення рекламних кампаній, однією із ключових фіч якого є AI-генерація статичних та відео рекламних матеріалів (у т. ч. у форматі User-Generated Content, UGC). Я спробував зрозуміти, як це працює, подивившись кілька відео на Youtube, зокрема ось це. У ньому автор описує, як створити клон успішного UGC відео за допомогою сучасних AI-інструментів, але робить це вручну. Подумав, що можна було б зробити наступний крок, автоматизувавши описані процеси — так з’явився цей проєкт, який я для зручності назвав Viral2Viral (Github).

Створення прототипу цього проєкту зайняло приблизно 6 годин роботи, головним чином завдяки використанню Github Spec Kit. Припускаю, що написання його за допомогою AI-coding асистента типу Github Copilot у більш «ручному» режимі могло б зайняти в мене кілька днів, а повністю вручну — більше тижня (проєкт на node.js/Typescript/NestJS, із React/Vite фронтендом, без БД, є інтеграція з AWS S3 і кількома LLM API).

У цій статті я поділюсь своїм досвідом роботи із Github Spec Kit. Буду вдячний за відгуки і ваші історії в коментарях. Тож, поїхали.

Час від старту: 0:00–0:30 — Думаємо над юзер флоу

Слідуючи флоу, яке описується у згаданому відео, користувач у нашому додатку повинен мати змогу:

1. Завантажити відео конкурента (існуючий успішний вірусний UGC трек), скачаний, наприклад, на TikTok One.
2. За допомогою AI транскрибувати відео і отримати опис того, що там відбувається — тут нам знадобиться здібна multimodal LLM, що приймає відео, наприклад gemini-2.5-flash. Користувач повинен мати можливість за потреби правити опис сцен і діалоги.
3. Додати назву та опис власного продукту.
4. Згенерувати text-to-video промпт на основі опису і транскрипції оригінального відео (крок 1) та інформації про власний продукт (крок 3). Потрібна можливість перевірки/правки отриманого промпту. Тут ми використаємо якусь розумну модель типу GPT-5 (на ваш смак).
5. Завантажити зображення власного продукту для використання у відео.
6. Згенерувати фінальне відео на основі промпту із кроку 4 і фото із кроку 5. Тут використаємо Sora2 від OpenAI.

Час від старту: 0:30–1:30 — Тестуємо потрібні API

Запити для опису оригінального відео і генерації фінального відео недешеві. Добре, що Google AI Studio має достатній free tier для подібних пет-проєктів, тож будемо використовувати рідну API. А от ціни на OpenAI Sora2 трохи «кусаються»: 10-секундне відео від sora-2 обійдеться у $1, а для sora-2-pro — у $3–5 залежно від якості. Тож навіть десяток тестових запитів уже виглядає не дуже приємно для PoC (Proof-of-Concept) проєкту. Тому для OpenAI API ми скористаємось китайським проксі-сервісом laozhang.ai. Там 10-секундне відео від sora-2 коштує всього $0.15. До GPT-5 також звертатимемося через цей проксі. Нижче скриншот із (досить кривого) дешборду laozhang.ai, що показує вартість запитів для різних моделей (третя колонка справа):

Перед тим як заглиблюватись в імплементацію, перевіримо, чи взагалі реально отримати скільки-небудь прийнятний результат, і накидаємо прості скрипти для запитів на потрібні LLM API, на які потім будемо посилатись у нашій специфікації для GH Spec Kit.

На цьому ж етапі напишемо і протестуємо промпти, і подивимось на результат їх застосування.

Я працюю у VSCode і використовую Github Copilot, станом на листопад 2025 — в основному з моделями від Anthropic, Claude Sonnet 4.0 або 4.5. Імовірно, схожі результати можна отримати з іншими coding assistants типу Claude Code/Cursor і флагманськими LLM від OpenAI/Google.

Тож разом із Github Copilot у режимі Agent із Anthropic Claude Sonnet 4.5 під капотом та API специфікаціями від Google і Laozhang.ai я нашвидкоруч накидав кілька JS-скриптів:

1. test-gemini-understand-video.js. Генерує опис сцен у відео і транскрибує діалоги за допомогою gemini-2.5-flash. Тут довелось трохи погратись із промптами. Приклад опису відео за допомогою останньої версії промпту — на скриншоті нижче:

   

2. test-laozhang-generate-text-gpt5.js
   Генерує text-to-video промпт для Sora2 за допомогою GPT-5, використовуючи опис оригінального відео + назву/опис власного продукту. Приклад готової відповіді GPT-5 (text-to-video промпт для Sora2):

   

3. test-laozhang-sora2.js
   Генерує 10-секундне відео за допомогою Sora2, додаючи у запит, окрім промпту, також фото продукту (буде першим фреймом). За наступними посиланнями ви можете побачити оригінальне відео, що клонується, і порівняти його з отриманими клонами: 1, 2. Результат не ідеальний, але для PoC, виконаного за кілька годин, IMHO, вельми достойно, можна продовжувати.

Наш PoC-додаток буде stateless, без БД, однак запити на генерацію відео вельми вартісні, тож є сенс зберігати оригінальне і фінальне відео. Будемо робити це на AWS S3. Щоб збільшити шанси на успішну реалізацію Copilot’ом у фінальному коді, я скопіював файл s3Service.js із прикладом інтеграції з AWS S3 з іншого проєкту.

Час від старту: 1:30–6:00 — Vibe-coding із GH Copilot + GH Spec Kit

Отож, ми підтвердили можливість інтеграції з необхідними API, написали промпти, побачили можливий результат і маємо прості скрипти, на які будемо посилатись у завданні для GH Copilot’а. Час розчехлити Github Spec Kit.

Spec Kit — це, по суті, набір промптів і скриптів + каскад команд для їх застосування, які дозволяють забезпечити належний контекст для вашого AI-coding асистента.

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

1. Заповнити «конституцію» — базові загальні принципи та правила щодо розробки. Для цього у чаті з GH Copilot вводимо (або вибираємо як режим) команду /speckit.constitution і додаємо щось типу «Create principles focused on code quality, testing standards, user experience consistency, and performance requirements».

   

   Після цього читаємо і за потреби правимо згенерований .specify/memory/constitution.md файл. Я, до прикладу, прибрав низку вимог, які виглядали перебором як для PoC, наприклад, деякі Performance Requirements і створення детальної документації та тестів. Файл конституції (як і інші .md файли) можна правити вручну або за допомогою GH Copilot’a (напр., у Inline режимі).

2. Наступний крок — загальний опис продукту (без технічних деталей). На наступному скриншоті — мій опис майбутнього продукту, який був введений після команди /speckit.specify.

   

   Copilot створив нову Git гілку (в моєму випадку — 001-ugc-video-generator) і згенерував файли specs/001-ugc-video-generator/spec.md і specs/001-ugc-video-generator/checklists/requirements.md. Файл spec.md містить детальний опис проєкту з позиції Product’а. Так, у мене вийшло 4 User Stories — завантаження відео для клонування і його аналіз, введення інформації про наш продукт, генерація text-to-video промпта і власне генерація фінального відео:

   

   Як і з конституцією, уважно вичитуємо всі документи і правимо їх за потреби (вручну чи просячи Copilot’a внести правки у вибрані частини). Наприклад, Copilot чомусь упустив той момент, що вихідне і фінальне відео мають зберігатись на AWS S3 — для виправлення просто задаємо це зауваження у чаті.

   

3. Після написання «продуктової» специфікації можна переходити до технічної, але перед тим можна використати одну із опціональних проміжних команд — /speckit.clarify. При цьому Copilot аналізує специфікацію на предмет ясності і повноти і задає уточнюючі питання. Для лінивих можна вибирати серед можливих опцій, вводячи просто її порядковий номер (букву).

   

4. Наступний обов’язковий і важливий крок — /speckit.plan, написання плану технічної імплементації. У моєму випадку я вказав бажані технології (node.js/Typescript/Nest.js для бекенду, React/Vite/TS/Tailwind для фронтенду) і деталізував основні ендпоінти на бекенді та їх функціонал. І ось тут ми використаємо тестові скрипти-зразки для запитів на API Google/laozhang.ai, згенеровані раніше.

   

   Copilot прочитав раніше згенеровані документи (конституцію, spec.md plan.md тощо), скрипти-приклади, вказані у запиті, і згенерував кілька нових документів, зокрема OpenAPI специфікацію (specs/001-ugc-video-generator/contracts/openapi.yaml), research.md, data-model.md, а головне — plan.md — документ із технічним описом проєкту, вимогами, планом директорій і т. д.

5. Наступний крок — /speckit.tasks, генерація тікетів (tasks) для написання коду.

   

   Результатом став файл specs/001-ugc-video-generator/tasks.md — 134 тікети, поділені на 8 фаз. Після задач нам пропонується кілька стратегій виконання цих тікетів (на які блоки їх можна поділити, що можна робити паралельно і т. д.).

   

   В одному зі своїх попередніх проєктів із Spec Kit, в якому я працював із менш знайомою мені сферою (задачею було написання Terraform-специфікацій для інфраструктури нового проєкту), я пішов досить обережним шляхом, і виконував тікети по одному, вивчаючи і перевіряючи результат після кожного завдання.

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

6. Vibecoding time. У новому чаті вводимо /speckit.implement і вказуємо номер фази. Спостерігаємо, як з’являються численні нові файли і ростуть цифри на лічильнику преміальних запитів у Copilot Usage.

   

   Після кожної фази намагаємось запустити проєкт і тестуємо доступний функціонал.

   Мушу зазначити, що не все працювало з першого разу. Імовірно, 30–40% часу із приблизно 4.5 годин, витрачених сумарно на цей vibe-coding, пішло на тестування і різноманітні правки. Найбільше проблем було із сесіями, трохи із Typescript, UI/CSS, а також усякими різними помилками, втім також нічого критичного. Вірогідно, вибери я простіший стек (V anilla JS замість Typescript, express.js замість Nest.js, статичний HTML/CSS замість React/Vite тощо), кількість правок була б значно меншою.

Підсумок

Позаду близько 6 годин роботи, близько 20% місячної квоти преміум запитів Github Copilot і кілька доларів, витрачених на API Sora-2/GPT-5.

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

Що думаєте про такий підхід до прототипування? Який ваш досвід роботи з Github Spec Kit?