今天第十天，我們可以開始「運動紀錄」這個核心頁面。前面幾天搞定登入、帳號系統，雖然還只是骨架，但今天就可以來開發重訓紀錄的相關功能了！
在開始之前，我們先來想一個問題：
「一個健身 APP 的運動紀錄頁面，使用者會想要用什麼功能？」就我一個當健身房多年股東的經驗很好回答：- 可以快速輸入今天的運動
- 可以快速找到對應的運動項目
- 能區分不同類型（重量訓練、有氧、伸展）
- 數據夠清楚，未來能用來分析進步曲線
- 手機操作要夠流暢，要直覺好用！
手機 UI 設計思路
雖然其實我做的APP是網頁，但主要是想要在手機上面使用，所以主要設計想法要貼近手機APP的操作習慣。
1. 快速新增運動
在首頁按下「+ 新增運動」就能直接新增一個運動區塊，不用跳到其他頁面。這樣可以保持在同一個 flow 裡，像是寫待辦清單一樣，邊做邊加。
2. 卡片式操作
每個運動紀錄設計成一張「卡片」：
- 標題：運動名稱（例如 Bench Press）
- 內容：可以展開/收合組數紀錄
- 操作：點一下就新增一組，輸入重量與次數
卡片式的好處是比較直覺，滑動、展開、收起都很符合手機的操作習慣，不會塞滿整個頁面。
使用情境想像
想像一下今天去健身房，打開 APP 的流程：
- 先點「+」新增一個運動 → 選擇「胸推」
- 頁面跳出一個簡單輸入框 → 輸入 50kg × 10 → 儲存
- 點「新增組」再輸入 60kg × 8
- 下一個動作 → 肩推，同樣操作
- 結束後紀錄送出，然後跳出總結畫面，今天的紀錄就完成了
整個過程不用滑來滑去，也不用跳轉很多頁面，可以使用手機在運動時候邊做邊紀錄。
實作
其實實作很簡單，相信如果這幾天有跟著看下來的你，就知道了。我們就是把想法想要的東西先打給AI請他實作頁面出來，我們再來感覺看看是否有什麼需要調整的。網路上有些人會說要把整個規格都打完整詳細再給AI實作。
但我是比較隨性的人，所以其實我就會很簡單和AI說我想要什麼。
幫我做一個健身紀錄頁面，主要是 FOR 重訓，要可以記錄不同動作，不同組數這樣。
嘿，就這樣而已。是不是想不到可以這麼隨性，對，如果你開始什麼項目也可以試著開始！我們回到主題來看看AI給我的第一版：
恩.... 確實該有的都有，不過選動作的地方是自己打字，這樣感覺有點差。看能不能做成列表，下拉式選單。
而且最厲害的是後端的API，資料庫他都開好了。CRUD確定也可以動作。真的很強！！！！
因為 Nest.js 的結構嚴謹（Controller / Service / DTO / Schema 清楚分層），AI 生成的程式碼可讀性其實不錯，CRUD 路由、驗證、型別大多一次到位，頂多我再欄位的細節。或是你可以提示一些他你想要的做法。
因為我們的的衷旨是快速開發MVP，所以就不琢磨程式碼到底寫了什麼。以功能實現為主，所以我們繼續前端UI設計的部分。
幫我把訓練的動作變成選單，然後加上一些常用的動作。
來看看下面的結果，確實多了選單，還不錯。動作也有分部位。但是就是，看起來很醜，操作也不順手。看著手上的 iPhone突然想說是不是可以做成像 iPhone每次都會出現可以用拉的那種轉盤風格。
幫我把下拉選單做成 iPhone 的風格
真的做出來了，而且也不是用套件。AI使用 Tailwind CSS 做出這個，讓我真的很意外。這個叫我自己做應該也要做一個下午之類的。
用 AI 快速迭代，先把手感做出來
今天想說的是——先把想法說清楚，讓 AI 生出第一版，接著真實去操作去感受哪裡不順，再來去修改。 我沒有一開始就寫滿滿規格，而是先給出核心意圖：「要在手機上快速記錄重訓，卡片式、可展開、可加組數、動作用選單」。AI 很快就產生了可操作的版本；不順的地方（像是動作選單），我再和他說「換成 iPhone 轉盤風格」，它也能立刻做出接近我腦中畫面的解法。這種 「想法 → 測試驗證 → 迭代」的節奏，正是 MVP 的精神。
同步發表於 2025 iThome 鐵人賽
