我一直想做一款可以整理家族資料的 App。
這個想法不是突然出現的，而是來自一個很實際的需求：我手上有家裡族譜的電子檔。
其中很多資料，是早期手寫族譜拍照後留下來的數位檔案。雖然資料有被保存下來，但閱讀、整理與分享都不算方便。
以前我曾經嘗試用 Photoshop 重新整理。
但家族成員一多，整張圖就會變得非常龐大。畫面需要不斷往左右延伸，修改關係也很麻煩。如果想輸出成紙本，還會遇到尺寸與排版問題。
這個想法一直放在心裡，只是遲遲沒有真正開始執行。
直到今年四月，我才正式把需求拿出來，開始和 ChatGPT 討論：能不能做一款可以在手機和平板上建立家族資料，並且匯出 PDF 的家族樹 App？
這就是 Rootrees 的起點。
我真正需要的，不只是一張家族樹圖片
一開始看起來，需求似乎很簡單。
只要讓使用者可以新增家族成員、設定彼此關係，然後產生家族樹狀圖就好了。
但仔細思考之後，就會發現真正需要的功能比想像中更多。
家族資料不只是姓名而已，還可能包含：
- 出生日期與離世日期
- 性別
- 照片
- 備註與生平資料
- 配偶關係
- 父母與子女關係
- 不同世代之間的排列方式
除了在 App 裡查看，我也希望資料可以匯出。
而且 PDF 不能只有一種形式。
有些時候，需要的是方便閱讀與保存的文字版本；有些時候，則需要可以一眼看出家族關係的樹狀版本。
因此，Rootrees 的 PDF 匯出功能分成兩種方向：
- 家族成員資料的文字版 PDF
- 呈現世代與親屬關係的家族樹狀 PDF
這兩種格式用途不同，也各自有不同的排版挑戰。
從規劃到上架，大約花了一個月
Rootrees 的開發時程大致如下：
- 四月第一週：開始整理需求與規劃產品方向
- 4 月 7 日：正式建立專案並進入開發
- 4 月底：完成主要功能與測試
- 5 月 7 日：上架 Google Play，正式對外開放下載
從開始建立專案到正式上架，大約是一個月。
如果只看時間，可能會覺得開發速度很快。
但這一個月並不是單純把功能列出來，然後交給 AI 自動完成。實際過程中，仍然需要不斷確認需求、測試功能、修正資料關係，並且處理許多原本沒有預想到的問題。
Rootrees 不只是一個 App
Rootrees 比較特別的地方，是它不是單一專案，而是由三個部分組成。
A. Web：行銷網站
Rootrees 有一個獨立的官方網站：
網站主要用來介紹產品功能、提供下載資訊，以及放置隱私權政策等相關內容。
目前網站使用 Vercel 架設。
B. Backend：後端服務
後端主要負責提供 API 給 App 使用，採用Digitalocean做為後端服務商。
使用者建立的家族成員資料、人物關係與相關內容，都需要透過後端進行儲存與同步。
這也表示 Rootrees 不只是一款單機工具，而是一個需要處理資料結構、帳號與雲端同步的完整服務。
C. App：雙平台應用程式
Rootrees 支援中文與英文，也同時支援 Android 與 iOS。
使用者可以在手機或平板上建立家族資料、整理人物關係、查看家族樹，並且匯出 PDF 檔案。
整體開發順序是：
Backend → App → Web
我先把後端資料結構與 API 建立起來，再進入 App 功能開發。等主要流程完成後，才補上行銷網站。
最大的挑戰，是需求和 AI 理解之間的落差
Rootrees 是我目前在 Vibe Coding 過程中，遇到最多問題的一個專案。
最大的挑戰不是單純的「程式能不能寫出來」，而是：
我腦中想要的功能，和 AI 理解到的功能，常常會有落差。
有些功能用文字描述看起來很清楚，但實際做出來後，才會發現彼此理解的畫面完全不同。
尤其是畫面流程、資料結構、人物關係與 PDF 輸出格式，不能只用一句話簡單帶過。
很多時候，必須搭配範例、使用情境，甚至像分鏡一樣，把每一個步驟說清楚，AI 才比較有機會理解真正的需求。
「PDF 顯示錯了」不是一個足夠清楚的需求
家族樹狀 PDF 是整個專案裡比較複雜的功能之一。
在 App 裡顯示的家族樹，和匯出成 PDF 後的結果，並不是完全相同的事情。
App 畫面可以讓使用者縮放、拖曳，也可以依照螢幕大小即時調整。
但 PDF 是固定尺寸的文件。
當家族成員數量增加，或某一代的兄弟姊妹、配偶與子女比較多時，就可能出現排列擁擠、節點重疊或頁面過大的問題。
遇到這種情況，不能只對 AI 說：
「PDF 顯示錯了，請幫我修正。」
因為問題可能來自很多不同地方：
- 家族成員的資料排序
- 父母、配偶與子女的關係判斷
- 不同世代的層級位置
- 兄弟姊妹之間的排列方式
- 配偶節點是否占用額外空間
- 樹狀圖節點之間的間距
- PDF 頁面尺寸與輸出方向
- 內容超出頁面時如何縮放
必須先把問題拆開，確認可能出錯的環節，再針對不同方案和 AI 討論。
有時候需要調整節點位置，有時候需要修改資料排序，有時候則必須重新思考 PDF 的輸出方式。
通常不會只靠一次對話就得到最適合的答案，而是需要經過多輪測試與修正。
表達需求，本身就是 Vibe Coding 的重要能力
開發 Rootrees 之後，我更明顯感受到一件事：
使用 AI 寫程式，並不代表只要會下指令就夠了。
真正重要的是，能不能把需求說清楚。
如果自己也沒有想清楚流程、資料關係與使用情境，AI 很容易做出一個「表面上可以執行」，但實際上不符合需求的版本。
尤其是比較複雜的產品，不能只用一句話要求 AI 完成整套功能。
比較有效的方式是：
- 先拆分功能
- 說明使用情境
- 提供具體範例
- 指出目前畫面與預期結果的差異
- 分析可能出錯的位置
- 設計幾種不同解法
- 逐步測試與修正
AI 可以協助產生程式碼，也可以協助討論方案。
但產品設計、需求拆解與結果判斷，仍然需要自己負責。
從家裡的舊族譜，變成可以持續使用的工具
Rootrees 最初只是來自一個很單純的問題：
家裡留下來的族譜資料，有沒有更方便的整理方式？
從早期手寫資料的照片，到 Photoshop 裡龐大的族譜圖片，再到可以在手機與平板上建立資料、整理關係、匯出 PDF 的 App，整個過程其實就是把一個生活中的需求，逐步轉換成產品。
目前 Rootrees 已經支援中文與英文，並且陸續上架 Android 與 iOS 平台。
它還有很多可以持續改善的地方，但對我來說，這個專案已經不只是一次技術練習。
它也是目前最能代表我使用 AI 協助開發產品的一次經驗。
AI 的確讓一個人可以更快完成過去需要多人合作的工作。
但越深入做下去，就越會發現：真正決定產品品質的，仍然是你有沒有辦法把問題想清楚。
如果想要試試這個族譜App，歡迎下載。雙平台下載：AppStore | Google Play