Use Case · Процес розробки

Уявіть: ви хочете послухати музику,
але інтерфейсу ще не існує.

Ось як народжується застосунок — від білого екрана до повноцінного плеєра, шар за шаром. Це історія не про продукт, а про процес.

7шарів UI
1донька, яка хоче музику
0AI всередині продукту
Звідки все почалося

Sonya хоче музику.
Готові сервіси — не варіант.

Проблема

  • Spotify / YouTube Music — закриті parental control на iPad та iPhone
  • Ризик explicit-контенту — дитина не має на нього натрапити
  • Потрібен контроль батька: що потрапляє в бібліотеку

Рішення

  • Власний плеєр на домашньому сервері
  • Аудіо-тільки — відео фізично неможливе (HTML5 <audio>)
  • Доступ лише через Tailscale — приватно, не в інтернеті
  • Курований контент, який затверджує батько
Чесність про AI

AI допоміг побудувати.
Але всередині застосунку AI немає.

Це не «AI-powered feature». Це чесна відповідь на питання:

«AI працює всередині продукту — чи просто допоміг його випустити?» → Просто допоміг випустити. І ми це кажемо прямо.
AI (Hermes)

Писав код, генерував мокапи, шукав баги — за специфікацією людини.

Людина (Майкл)

Ставив критерії, обирав дизайн, тестував, приймав рішення.

Decision log

AI не просто «зробив» — він обирав.

Перше рішення: який плеєр будуємо? Три гілки, одна обрана.

Який плеєр будуємо? ✓ Мінімалістичний плеєр обрано — просто, безпечно, швидко ✗ Повний медіа-центр заскладно для 1-ї версії ✗ Тільки API без UI дитина не користується API Кожен наступний шар — теж рішення з альтернативами. Ось вони.
Крок 1 · Шар 0

Порожній екран. Просто заголовок.

Sony Player
(і більше нічого)
Що додано

Один заголовок на білому тлі. Найменший крок, який уже «працює».

Чому саме так

Почати з мінімуму, що відкривається в браузері — і від нього рости.

Альтернативи

Одразу повний дизайн — відхилено: невідомо, що потрібно, поки не побачиш перший екран.

AI vs людина

AI згенерував сторінку. Людина затвердила напрям «аудіо-тільки».

Крок 2 · Шар 1

Сторінка завантажується — з'явилась структура.

Sony Player
your little music stage
0:00 / 0:00
Що додано

HTML-скелет: заголовок, підзаголовок, місце під плеєр. Сторінка реально рендериться.

Чому саме так

Спершу «кістяк» — каркас, на який нарощуються всі наступні шари.

Альтернативи

Одразу з бекендом — відхилено: спершу побачити форму, потім підключати дані.

AI vs людина

AI написав розмітку. Людина визначила, що має бути на екрані.

Крок 3 · Шар 2

З'явився плеєр — тепер музика грає.

Кнопки play/pause, таймер. Потягніть повзунок, щоб побачити перехід.

Після: плеєр
Білий екран З плеєром
Що додано

Кнопки play/pause, таймер 0:00, прогрес-бар.

Чому саме так

Плеєр — серце. Без нього це просто список файлів.

Альтернативи

Сторонній плеєр-бібліотека — відхилено: зайва залежність, менше контролю.

AI vs людина

AI реалізував HTML5 <audio>. Людина перевірила на iPad.

Крок 4 · Шар 3

Додали список — тайлики з обкладинками.

Потягніть повзунок: плеєр без списку → з тайликами.

До: плеєр без списку Після: з тайликами
Без списку З тайликами
Що додано

Сітка тайликів: обкладинка, назва, артист. Пошук і вкладки.

Чому саме так

Обкладинки — це те, як дитина впізнає пісню. Текст вторинний.

Альтернативи

Простий текстовий список — відхилено: дитині потрібні картинки.

AI vs людина

AI зібрав сітку. Людина вирішила: обкладинки — головне.

Крок 5 · Шар 4 · Серце застосунку

Два рівні фільтрації — безпека.

2рівні фільтрації
8аудіоформатів

Рівень 1 — автоматичний

Explicit-мітка з iTunes. Якщо пісня позначена як explicit — вона не потрапляє в бібліотеку автоматично.

Рівень 2 — курований

filters.json — список, який веде батько. Дружнє пояснення + альтернативи, якщо пісню відхилено.

Чому саме так

Автоматика ловить очевидне, людина — нюанси. Два рівні = подвійна сітка.

Альтернативи

Тільки авто-фільтр — відхилено: він не розуміє контекст. Тільки ручний — занадто повільно.

AI vs людина

AI підключив iTunes API. Людина веде filters.json і приймає фінальне рішення.

Результат

Тестовий кейс: «Test Rap» (explicit) → rejected. Фільтр працює.

Крок 6 · Шар 5

Sonya просить пісню — батько схвалює.

Hi, Sonya!
your little music stage
🎵 Want a song
My Requests · Waiting / Added ✓ / Not this time
Що додано

Кнопка «Хочу пісню» → запит летить батьку в Telegram. Sonya бачить статус.

Чому саме так

Дитина сама вибирає, але батько контролює. Напівавтоматична черга.

Альтернативи

Повністю автоматичне додавання — відхилено: батько має бачити кожну пісню.

AI vs людина

AI збагачує повідомлення (назва, артист, ✅ Clean/⚠️ Explicit, iTunes-посилання). Людина натискає «додати».

Крок 7 · Шар 6

Темна «сцена» — фінальний вигляд.

Потягніть повзунок: Light Lavender (мокап) → Темна сцена.

До: Light Lavender мокап Після: темна сцена
Light Lavender Темна сцена
Що додано

Темна тема, SVG-іконки (не емодзі), градієнтний прогрес-бар.

Чому саме так

«Темна сцена» — як концертний зал: музика в центрі уваги.

Альтернативи

Light lavender і Sidebar — відхилено з 3 мокапів.

AI vs людина

AI зробив 3 мокапи. Соня сама обрала «Темну сцену».

Light Lavender✗ Light Lavender
Sidebar✗ Sidebar
Темна сцена✓ Темна сцена
Деталь · Базові іконки

Спершу були емодзі — потім чисті SVG.

Дрібниця, яка змінила відчуття: кнопки стали професійними, а не «іграшковими».

⏮ ⏸ ⏭ 🔁
Було: емодзі
→
Стало: SVG
Що додано

Чисті SVG-іконки: shuffle, prev, play/pause, next, repeat, lyrics, volume.

Чому саме так

Емодзі виглядають по-різному на різних пристроях. SVG — однакові всюди.

Альтернативи

Емодзі — відхилено: непослідовно. Іконковий шрифт — відхилено: зайва залежність.

AI vs людина

AI намалював SVG. Людина помітила, що емодзі «не те».

Що вміє застосунок

Це не просто плеєр — це цілий світ музики.

Функції, які ми підключили, щоб Соня сама досліджувала музику — безпечно.

🎧
Слухати музику
Аудіо-тільки, без відео. 8 форматів.
🔍
Пошук по слову
Назва, частина слова, виконавець.
▶️
Семпли
30-сек прев'ю з iTunes перед вибором.
🎵
«Хочу пісню»
Запит → батько схвалює → додається.
🛡️
Безпека
Дворівневий фільтр explicit-контенту.
📋
Статус запитів
Waiting / Added ✓ / Not this time.

Кожна функція — це рішення «чому саме так», прийняте разом: AI запропонував, людина вирішила.

Найважливіше питання

Плеєр готовий, пошук є.
А де брати музику?

Звучить тривіально. Але відповідь виявилась нетривіальною.

🎵 Spotify / YouTube Music

Закриті parental control на iPad та iPhone. Не можна.

📻 Jamendo

Безкоштовно, але немає мейджор-лейблів. Немає того, що хоче Соня.

🔞 SoundCloud

16+. API закритий. Не для 10-річної.

❓ То де ж?

Безкоштовно + легально + мейджор-лейбли + на вимогу — такого готового рішення не існує. Довелось придумати своє.

Наше рішення

Тривіальна відповідь: скачати з YouTube.

Але з розумним механізмом, який тримає все під контролем батька.

1
Соня просить
«Хочу пісню» — пошук з семплами.
→
2
Батько вирішує
Telegram: назва, артист, ✅ Clean / ⚠️ Explicit.
→
3
Hermes скачує
YouTube Music → MP3 з обкладинкою.
→
4
В бібліотеці
Соня бачить статус: Added ✓.
Що додано

Напівавтоматична черга: запит → схвалення → скачування.

Чому саме так

Батько бачить кожен трек ДО того, як він потрапить до Соні.

Альтернативи

Пряме скачування — без контролю. Піратські сайти — нелегально.

AI vs людина

AI скачує і чистить теги. Людина схвалює кожен трек.

Чому це стало можливо

Плеєр не виник з нічого.
Він зібрався з готових блоків.

Це не спонтанна ідея. Кожен елемент уже існував у платформі Pendragon — треба було лише скласти їх у повну картину.

6готових блоків платформи
0з нуля
1нова збірка
Платформа Pendragon · Що вже було

Окремі елементи, які вже працювали.

Жоден із цих блоків не створювався для плеєра — вони були частиною платформи.

🎨
Скіл «веб-сайти»
html-artifact-builder — збирати HTML-сторінки та презентації.
🎵
Скіл «аудіо з YouTube»
kids-music-approval — скачати MP3 з YouTube Music.
📨
Telegram-інтеграція
Бот і сповіщення — вже підключені до платформи.
🖥️
Серверна інфра
FastAPI, systemd, Tailscale — приватний доступ.
📚
Obsidian-сховище
Документація, профілі, рішення — все в одному місці.
🌐
BrewPage-хостинг
Публікація сторінок без реєстрації.
Збірка · Як блоки склались

Кожен крок — вже готовий блок.

Плеєр — це не новий код, а нова комбінація існуючих можливостей платформи.

1
Соня просить
Веб-скіл зібрав інтерфейс плеєра.
→
2
Батько схвалює
Telegram-інтеграція платформи.
→
3
Hermes скачує
YouTube-скіл — вже працював.
→
4
Сервер віддає
FastAPI + Tailscale — приватно.
Суть

Нова цінність — не в коді, а в комбінації готових блоків.

Чому швидко

Не треба будувати інфраструктуру — вона вже була.

Чому надійно

Кожен блок уже перевірений іншими задачами платформи.

AI vs людина

AI зібрав блоки. Людина вирішила, яку картину скласти.

Приклад · Реальне перевикористання

Той самий YouTube-скіл, що вже працював.

Скачування музики — не нова фіча. Це готовий скіл платформи, який просто підключили.

# kids-music-approval — скіл платформи
yt-dlp --extractor-args "youtube:player_client=android" \
  -f 'bestaudio/best' -x --audio-format mp3 \
  -o 'ARTIST - TITLE.%(ext)s' "https://music.youtube.com/watch?v=ID"

Було: скіл для інших задач

Скачування аудіо з YouTube — вже використовувалось у платформі.

Стало: частина плеєра

Той самий скіл став механізмом «Хочу пісню» → додавання в бібліотеку.

Failure → Learning

Три баги навчили нас більше, ніж успіхи.

0:000:00
Таймер злипався: два спани без розділювача. Фікс: розділювач / + tabular-nums.
Тайлики не ховались
При перемиканні вкладок список лишався. .library{display:grid} перебивав hidden. Фікс: !important.
«Нічого не змінилося»
Браузер кешував стару версію. Фікс: піднімати ?v= при кожній зміні JS/CSS.

Кожен баг — це «ось що пішло не так → ось як знайшли → ось що змінилося». Чесні провали — найсильніший контент.

Чесний поділ

Хто що робив — без прикрас.

AI (Hermes)

  • Писав код за специфікацією
  • Генерував 3 мокапи дизайну
  • Підключав API (iTunes, LRCLIB)
  • Шукав і фіксував баги

Людина (Майкл)

  • Ставив критерії: аудіо-тільки, фільтри, контроль
  • Обирав «Темну сцену» з 3 мокапів
  • Тестував на iPad/iPhone, точні репорти
  • Рішення: «завжди перевага YouTube Music»
  • Ескалював Claude Code, коли агент застряг

Формула: AI виконує крок за специфікацією, людина перевіряє і приймає рішення.

Результат

Робочий плеєр. Приватно. Безпечно.

11треків у бібліотеці
2рівні фільтрації
1приватний сервер
0AI всередині

Що отримала Sonya

Сама вибирає пісні, бачить статус запитів, слухає без ризику негативного контенту.

Що отримав батько

Повний контроль: що додається, що відхиляється. Спокій за контент.

Головний висновок
AI допоміг побудувати. Але справжня цінність — процес: критерії, рішення, воркфлоу, інфраструктура. Коли процес відбудований — розвиток обмежує лише фантазія.

1 · Безпека

Дитина вибирає сама, без ризику негативного контенту.

2 · Чесність

AI допоміг побудувати, але продукт працює без AI — і це сказано прямо.

3 · Процес

Сила — у воркфлоу та інфраструктурі, а не в одній фічі.

Фінал · А що далі?

Далі — необмежені можливості.

Все обмежується лише баченням, потребою — і трошки фінансами.

🎤
Бібліотека артистів
Улюблені виконавці — в один дотик.
📝
Плейлисти
Свої добірки під настрій.
✨
Підбірка під смак
Що подобається — те й пропонує.
⚙️
Налаштування алгоритмів
Батько керує, що бачить Соня.
📱
Apple-додаток
З веб-плеєра — у рідний застосунок.
💡
І ще багато
Обмеження — лише фантазія.

І головне — все це коштує нічого.

Процес, воркфлоу, інфраструктура — вже відбудовані. Наступні кроки — лише питання бажання.