Як зберегти сімейну історію за допомогою ШІ: досвід української дизайнерки, яка за вихідні створила сайт родоводу без Figma та коду

Ідея створити родинний ресурс з’явилася спонтанно під час сімейної зустрічі.

«Все почалось з того, що на вихідні приїхала мама, і ми вирішили записати всі родові лінії нашої сімʼї. Я почала робити це у FigJam (не робіть так, це пекло, особливо коли в твоєї прабабусі 11 братів та сестер). А вже потім прийшла ідея створити родове дерево, яким могла б користуватись вся родина», — розповідає Віталіна у LinkedIn.

Головна особливість цього кейсу — повна відмова від звичного дизайнерського інструментарію на користь ШІ-агентів.

«В підсумку пішло 10 годин, а Figma не відкривалась жодного разу. Це мій перший кейс, де я не створювала дизайн руками, все повністю забрав AI. На початку я пручалась, бо хотілось ну принаймні якийсь вайрфрейм накидати самій», — ділиться дизайнерка.

Стек інструментів та етапи реалізації

Для створення сайту Віталіна використала зв’язку зі спеціалізованого генеалогічного сервісу та інструментів Anthropic:

1. Family Echo — для побудови самого генеалогічного древа. Сервіс безкоштовний, дає змогу швидко додавати нових людей і експортувати дані у стандартному форматі GEDCOM, який є базовим для генеалогії.

2. Claude Design — для генерації UI-концепту. Віталіна почала з базового розмовного промпту без деталей, поступово шукаючи потрібний візуальний стиль через ітерації.

3. Claude Code + Cloudflare — для розробки та деплою. Код був згенерований ШІ-агентом, а готовий сайт опублікований через Cloudflare із закритим доступом від пошукових систем.

Загалом на роботу пішло від 10 до 15 годин, із яких безпосередньо побудова дерева зайняла близько двох годин.

«Коли почала працювати в Claude Design, то вже після 2–3 ітерацій мала притомний інтерфейс, який можна було передавати в Claude Code на розробку. Але я витратила ще трохи часу, щоб довести його до стану, який подобається саме мені. Реалізація дизайну в Claude Code зайняла хвилин 20, але тут знову вмикається перфекціонізм і хочеться докрутити різні штуки», — зазначає Віталіна у коментарі для dev.ua. 

Окремим викликом стала адаптація під мобільні пристрої, оскільки велике генеалогічне дерево складно сприймається з екрана смартфона, хоча саме з них більшість родичів і переглядатиме сайт. Завдяки кільком ітераціям із Claude Code вдалося створити зручну мобільну навігацію.

За словами дизайнерки, створення базової версії сайту займає максимум 4–5 годин, а решта часу йде на допрацювання UI, анімації та нові фічі.

Поради

Щодо текстових запитів для ШІ, Віталіна зізнається, що спеціальних технік промпт-інжинірингу не використовувала: «Промпти переважно сформульовані дуже просто, розмовною мовою, без жодних "правильних" технік. Але агент якимось чином мене розумів».

Спираючись на власний досвід, дизайнерка виділяє кілька важливих порад для тих, хто планує повторити подібний експеримент:

• не варто будувати дерево в графічних редакторах на кшталт FigJam чи Figma — спеціалізовані платформи саме для створення родинного дерева збережуть час;

• економте ліміти ШІ: у Claude Code краще одразу ставити чіткі технічні завдання, щоб не витрачати запити на дрібні виправлення;

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

"У мене підписка Pro в Claude. Віднедавна Claude Design і Claude Code мають спільний ліміт, тобто обидва витрачають один і той самий «тижневий бюджет». Через це ліміт може закінчитися трохи раніше, ніж ви очікуєте. На створення сайту пішло десь 50–60% ліміту. Як на мене, це багато, але це через те, що я багато правила дизайн та допрацьовувала фічі", — додає айтівиця. 

Наразі Віталіні вдалося відтворити близько 2/3 свого роду. У майбутніх оновленнях вона планує додати персональні історії кожного члена родини.

Підсумовуючи свій досвід, дизайнерка наголошує на важливості фіксації сімейної історії під час війни: «Якщо є думки зробити щось подібне — нехай навіть не окремий сайт, а просто записати історію родини — обов’язково робіть. Особливо зараз, коли російська ракета може спалити сімейні альбоми чи забрати життя рідних, які пам’ятають про ваших предків. Ще 5 років тому я могла напряму запитати бабусю про предків, а тепер цю інформацію доводиться збирати по крупинках зі спогадів інших родичів».

QA Engineer запустив Family_tree — безплатний інструмент для створення родинного дерева без ризику для персональних даних

По темi

QA Engineer запустив Family_tree — безплатний інструмент для створення родинного дерева без ризику для персональних даних

Читайте головні IT-новини країни в нашому Telegram

По темi

Читайте головні IT-новини країни в нашому Telegram