做好事前準備後，我開始著手產出第一版應用，並請 AI 夥伴協助進行開發。原本以為這只是把整理好的需求交給 AI 處理，讓它產出一個初步版本，實際操作後才發現，這個階段不僅影響整體架構的建立，也對後續的開發節奏與調整方式產生了不小的影響。

從一份功能文件開始

我第一步是與 AI 一起整理出一份「產品功能文件」，內容包含我們討論過的功能模組、畫面設計、使用情境，以及預計採用的技術。這份文件的目的，是希望 AI 能依照明確規劃，試著產出一個可執行的初步版本。

這個平台的原始名稱是 Kidventure，後來正式定名為 TaskyVenture，是一款幫助孩子規劃放學後時間、依序完成任務並獲得獎勵的兒童任務管理應用。

初版規劃涵蓋六大核心頁面：

• 首頁儀表板：以視覺化時間軸呈現當天任務與完成進度
• 我的行程：列出每日任務，點擊完成後可獲得積分與互動回饋（動畫／音效）
• 任務管理：由家長協助孩子安排每日任務
• 獎勵系統：積分可兌換實體或虛擬獎勵
• 執行報告：以圖表呈現每日任務完成狀況
• 帳號與個人設定：家長與兒童帳號管理、權限設定

第一版，不如預期

AI 雖然成功產出了一個「可以執行」的初版應用，但與我理想中的樣貌仍有明顯落差：

• UI 雖基本可用，但風格與預期有出入
• 多數互動設計未完全實作
• 許多功能僅為範例，尚未完整串接

我很快發現，這樣的結果主要來自一次丟給 AI 太多需求。雖然可以快速產出一個雛形，但後續的調整與優化反而變得更麻煩，甚至影響整體架構穩定性。我嘗試修改幾次後，最後決定打掉重練。

多次嘗試後的三大心得

為了改善結果，我針對功能文件的撰寫方式與溝通順序進行調整，最終歸納出以下三個重點：

1. 結構性描述勝過條列式清單

當我以 「故事性 + 結構化」 的方式來描述需求（例如：先說明使用者情境，再依畫面流程描述功能），AI 產出的結果會更接近實際需求，也比較穩定。與單純列出功能清單相比，這種描述方式能讓 AI 更理解功能間的邏輯關係。

例如:

設計一個名為「Kidventure」的網頁程式，讓家長可以幫助孩子規劃放學後到睡前的時間，
並能夠引導孩子依序完成任務獲得獎勵。

功能設計與頁面規劃:

儀表板（首頁）	
1. 總覽孩子的今日任務完成狀況和獲得獎勵
2. 顯示下一個推薦任務(按下後跳到今日行程頁面)
...

今日行程
1. 顯示當天的任務時間表，使用視覺化時間軸或地圖
2. 任務會有狀態變化，依序是待開始->處理中->待審核->已完成
...

行程管理	
1. 允許創建、編輯和安排每日任務，任務可分類（如作業、運動等）
2. 每個任務可以填入任務內容和達成方法
...

2. 分階段產出比一次完成更有效

將開發流程分為多個階段後，AI 的產出品質顯著提升。例如：

• 第一階段：建立 UI 架構與元件
• 第二階段：調整視覺風格與細節
• 第三階段：完成核心頁面與初步互動
• 第四階段：串接後端，整合完整模組

這種做法能讓 AI 每次專注在單一任務上，成果更貼近需求，也更容易控制與微調。

3. 搭配圖像與參考案例更有效

我提供給 AI 的第一份 UI 參考是我小孩使用的「黑嘉嘉圍棋」線上平台，因為覺得類似架構好像可以，就想說試試看。當我提供截圖與具體說明後，AI 產出的介面風格馬上更貼近我想要的方向，在搭配上一張ChatGPT設計的背景圖，就產出了整個應用的雛型。

AI 雖然不能讀心，但能理解你的邏輯與審美。

第一版完成後：立即版本控管

當我終於完成一版「還算滿意」的版本後，第一件事就是用 Git 建立版本控制。

因為接下來我需要持續優化介面與新增功能，若沒有版本紀錄就很難回溯或比較變更。良好的版本控管能讓我更安心地嘗試不同調整方式，不用擔心改壞或失去原本狀態。

接下來做什麼？當然是修！

初版雖然具備整體框架與基本互動功能，但實際使用起來仍有不少地方需要改善：

• 解決排版錯亂與縮放異常
• 調整互動細節（如頁面載入、動畫效果）
• 整體體驗一致性

以我的經驗來說，AI 在「依樣畫葫蘆」這件事上特別擅長。只要先調整出一個「符合邏輯與預期」的頁面或元件，再讓它依此擴充，其餘產出的結果也會更一致、可用性更高。

第一版的真正價值

這一篇想傳達的核心觀念是：

第一版，不只是測試，而是整個專案的地基。

與其說是「先做一版試試看」，不如說是「確立開發方向與架構的第一步」。

雖然現在的 AI 開發工具已經很強大，但 「完全不懂程式也能開發出複雜 App」 這件事，目前來說仍不太現實。當功能較多、邏輯較複雜時，仍需要具備工程背景的人，持續與 AI 合作並引導開發方向。

敬請期待下一篇《如何與 AI 有效溝通設計風格與 UI 細節》