How to preserve family history with AI: the experience of a Ukrainian designer who created a genealogy website without Figma or code over the weekend

The idea to create a family resource arose spontaneously during a family meeting.

“It all started when my mom came over for the weekend, and we decided to write down all of our family lineage. I started doing it in FigJam (don’t do that, it’s hell, especially when your great-grandmother has 11 brothers and sisters). And only then did the idea come to me to create a family tree that the whole family could use,” Vitalina says on LinkedIn.

The main feature of this case is the complete rejection of the usual design tools in favor of AI agents.

"In the end, it took 10 hours, and Figma didn’t open even once. This is my first case where I didn’t create the design by hand, everything was completely taken over by AI. At first, I resisted, because I wanted to at least draw some kind of wireframe myself," the designer shares.

Tool stack and implementation stages

To create the site, Vitalina used links from the specialized genealogical service and tools Anthropic:

1. Family Echo — for building the family tree itself. The service is free, allows you to quickly add new people and export data in the standard GEDCOM format, which is basic for genealogy.

2. Claude Design — for UI concept generation. Vitalina started with a basic conversational prompt without details, gradually finding the desired visual style through iterations.

3. Claude Code + Cloudflare — for development and deployment. The code was generated by an AI agent, and the finished site was published via Cloudflare with access closed to search engines.

In total, the work took between 10 and 15 hours, of which the actual construction of the tree took about two hours.

“When I started working at Claude Design, after 2–3 iterations I had a sensible interface that could be transferred to Claude Code for development. But I spent a little more time to bring it to a state that I liked. Implementing the design in Claude Code took 20 minutes, but here perfectionism kicks in again and I want to tweak various things,” Vitalina notes in a comment for dev.ua.

A separate challenge was adapting to mobile devices, as a large family tree is difficult to perceive on a smartphone screen, although it is from them that most relatives will view the site. Thanks to several iterations with Claude Code, it was possible to create convenient mobile navigation.

According to the designer, creating a basic version of the site takes a maximum of 4–5 hours, and the rest of the time is spent on refining the UI, animations, and new features.

Tips

Regarding text queries for AI, Vitalina admits that she did not use any special prompt engineering techniques: "The prompts are mostly formulated very simply, in colloquial language, without any "correct" techniques. But the agent somehow understood me."

Based on her own experience, the designer highlights several important tips for those who plan to repeat a similar experiment:

• you shouldn’t build a tree in graphic editors like FigJam or Figma — specialized platforms specifically for creating a family tree will save you time;

• save AI limits: in Claude Code it is better to immediately set clear technical tasks so as not to waste requests on minor fixes;

• Since the site contains personal data of living people (names, dates of birth, family ties), it must be password-protected from public access. When publishing screenshots online, it is better to blur out the names and dates.

“I have a Pro subscription for Claude. Recently, Claude Design and Claude Code started sharing a limit, meaning both draw from the same ‘weekly budget.’ Because of this, you might run out of usage sooner than expected. Building the site took around 50–60% of the limit. In my opinion, that’s quite a lot, but as I mentioned, it was because I spent a lot of time tweaking the design and refining features,” the tech specialist adds.

So far, Vitalina has managed to recreate about 2/3 of her kind. In future updates, she plans to add personal stories of each family member.

Summing up her experience, the designer emphasizes the importance of recording family history during the war: "If you have thoughts of doing something like this — even if it’s not a separate website, but simply recording the history of the family — definitely do it. Especially now, when a Russian missile can burn family albums or take the lives of relatives who remember your ancestors. Just 5 years ago, I could directly ask my grandmother about my ancestors, but now I have to collect this information bit by bit from the memories of other relatives."

QA Engineer launches Family_tree — a free tool for creating a family tree without risk to personal data

On the topic

QA Engineer launches Family_tree — a free tool for creating a family tree without risk to personal data

Read the country’s main IT news in our Telegram

On the topic

Read the country’s main IT news in our Telegram