繁中 EN

#AI #健身紀錄 #PWA

從個人需求出發的自主開發實驗

健身紀錄 Web App

Role

Product designer

Team

Claude code

Release

Personal Only

Intro

健身紀錄 Web App

健身紀錄是一款能精細紀錄訓練內容的 Web app，以身體各大部位為根基，可以往下自定義每個動作，分別記錄每次的訓練組數、次數與重量，並額外設計了『帶入』功能，直接帶入上次訓練紀錄，只需依當次訓練內容進行細部修改，即可完成一天的紀錄。
在填寫紀錄同時也提供組間休息計時器的功能，以突兀的大量留白跳窗進行視覺上的提醒，以確保不干擾耳機內的音樂播放。
同時也包含記錄體重/體脂、日曆熱力圖與資料輸出功能，以滿足我個人的完整訓練需求。

紀錄操作流程

選擇訓練部位

選擇訓練動作

帶入前次訓練資料

依該日狀況微調

輸入即儲存

完成紀錄

計時操作流程

點擊『計時』

進入倒數狀態

可提前終止

終止時大跳窗提示

回到紀錄頁面

Problem & Research

沒有一個看得懂，不如自己做一個

開始認真進行體態管理後，先是請 Claude AI 扮演我的健身教練，在飲食與訓練上給予執行計劃外，為了能讓成果更顯著，且有量化的資料可以讓健身教練 AI 作為後續調整或提供建議的依據，針對重量訓練就想要有更細緻的記錄方式。

但市面上多數的健身app普遍存在幾個問題，因此即使已經存在眾多健身app，我還是決定設計一套專屬於我自己的健身紀錄軟體。

功能過多介面繁雜

需年費或月費

資料匯出較麻煩

操作流程不符需求

How

對於自己，我的訓練方式與流程是如何？

基本上每週一、四訓練胸部與肩膀；每週二、五訓練背部與手臂；每週六訓練腿部，此外還有常態性的有氧與腹部訓練。
每個動作會有 3~4 組，10~12 下，另外再多加一組『降重組』，藉由較低的負重減少受傷的風險，並且完整達到力竭。

因此隨著每天的狀態不同，或是訓練計劃的調整，我希望能精確的分別計算每組的重量與次數，並將降重組獨立出來紀錄，由此得到最完整的訓練量（Volume）數據。

此外，在每組訓練的中間，希望能有一個倒數工具來避免我休息時間過長或過短，同時不干擾到耳機裡音樂的播放。

設計重點

根據部位紀錄組數次數分別計算降重組額外紀錄組間休息計時

Start from scratch

工人智慧先行，AI 只是輔助

在功能與流程構思期間，腦中已經有了產品介面與操作動線的雛形，因此直接進入資訊架構設計環節。
一邊想著自己實際的使用情境，一邊跟AI討論哪些欄位能更有助於未來的分析，以此盤點畫面上的每個欄位以及操作方式

資訊架構示意畫面

當所有欄位與重點功能皆思考完整後，為了確保後續AI產出的內容與我腦中所想的產品樣貌能準確對齊，我依然使用Figma進行Wireframe的設計，並將每個欄位、判斷、輸入指令、功能內容以及不同狀態、頁面排版等完整產出，且留下明確的頁面編碼，以利後續與AI溝通。

Wireframe 示意畫面

Vibe coding

人工智慧登場
開發事前規劃、視覺與實際開發

感謝Figma MCP，可以讓 Claude code 直接讀取 Figma 的頁面與內容。
接下來與 AI 討論實際的程式開發環節，例如Native app與Web app的效能差異、伺服器建置、*參照的UI範本，並請 AI 表列出是否有標示不清的部分，以排除幻覺、超譯或是不需要的小驚喜，確保能完整還原 WF 上的所有內容。

一切到位後，即進行開發環節、驗證與細部修正。
鑑於WF的完整性與功能簡潔，初版即完整還原約90%的內容，後續僅剩一些字體大小、icon的細部調整。
整個專案從發想到 V1.0版產出，約耗時4個小時。

＊註：此產品僅個人使用，因此請AI直接延續作品集網站的視覺元素與風格，以簡潔易讀為原則即可。

Web app （PWA）

更新及時，可加到桌面滿版顯示，且免上架

Local Storage

考量費用與安全性，不另開server 處理

版本更新自帶版號

iOS WebKit 會依 URL 快取資源，每次改動都會自動 bump

Refine