為什麼要自己做工具？

備戰 2026 台東 CT226 全超鐵（226km）的過程中，補給計畫一直是我最頭痛的環節。

騎車 180km、跑步 42.2km，總時間預計超過 11 小時，補給稍有失誤就可能在賽道上「爆缸」。我查過很多資料，也研究了 Maurten、SiS 等品牌的補給計算器，但問題很明顯：那些工具都是以國外補給品為主，台灣常用的 GA 太空膠、碳水炸彈、UP FAST 根本找不到。

每次備賽前我都要打開 Excel，手動排每小時補給什麼、幾分鐘一次，然後還要確保咖啡因不過量、鈉補給足夠。這個流程很繁瑣，而且每次改一個參數（例如調整平均功率的假設）就要全部重算。

所以我決定自己做一個。

工具介紹：三鐵補給規劃

網址：https://bike-power-calculator.web.app/nutrition.html

這個工具的核心功能是：根據你的體能數據、賽事條件、還有你手邊有哪些補給品，自動排出分鐘級的補給時間表。

輸入什麼

  • 體重、排汗率、環境溫度與濕度
  • FTP（功能性閾值功率）和預計平均功率
  • 跑步配速
  • 賽事距離（51.5、113、226 等）
  • 進階選填：每小時碳水目標（g/hr）、鈉目標（mg/hr）

輸出什麼

一張詳細的補給時間表，包含：

  • 每個補給點的時間（分鐘）
  • 補給項目名稱
  • 累積碳水攝取
  • 累積鈉攝取
  • 累積咖啡因
  • 備注（是否開放咖啡因窗口、電解質補充等）

計算邏輯

碳水需求

根據運動強度（以 FTP 百分比計算），工具會估算每小時碳水消耗量：

  • 騎車：依據平均功率與體重換算消耗
  • 跑步：依據配速估算強度

如果你已知每小時要攝取多少碳水（例如你相信自己能消化 90g/hr），可以直接在進階設定裡覆蓋自動計算值。

補給間隔計算

補給間隔用這個公式計算：

interval = 60 / (carbPerHr / leadProduct.carbs)

然後 snap 到最接近的合理值（5、10、15、20、25、30、40、45 分鐘），避免出現「18.7 分鐘補一次」這種不實際的排程。

果膠輪替

一開始我設計的版本永遠都補同一個果膠，後來發現這樣比賽中會吃到膩。改進後加入輪替機制：每次補給後 rotationOffset + 1，讓你選的所有果膠輪流出現，避免一種吃到厭。

咖啡因窗口

咖啡因不是從一開始就可以用，研究指出太早使用效果會打折扣：

  • 騎車段：完成 60% 後才開放
  • 跑步段：完成 30% 後才開放

開放後才會在排程中安排咖啡因補給品（UP 綠茶咖啡因膠囊、可樂）。

電解質動態排程

如果你設定了鈉目標（mg/hr），電解質間隔會動態計算：

elecInterval = elecProduct.sodium / sodiumTargetPerHr * 60

沒設定的話，預設固定每 60 分鐘補一次電解質。

補給品資料庫

工具內建了台灣市場常見的補給品，包含：

產品碳水鈉
GA 太空能量膠（銀膠）30.8g250mg
GA 太空能量膠MAX（小金膠）29.8g303mg
GA ULTRA 能量膠（紅膠）45g103mg
UP FAST 能量果膠30g50mg
碳水炸彈（蜂蜜）42.2g0mg
碳水炸彈（黑糖）35g250mg
坤能量膠（原味）25g0mg
WiNSPORTS 鹽味西瓜31.5g225mg
DECATHLON 葡萄粉包31g275mg
Race On 電解液0g442mg

每個補給品都有優先順序排序，可以用拖曳或上下箭頭調整；也可以勾選哪些要加入本次計畫。

技術架構

這個工具是純前端，不需要任何後端伺服器：

  • HTML + Vanilla JavaScript：全部邏輯在一個 nutrition.html 裡
  • Firebase Hosting：免費靜態網站托管，push main 自動部署
  • localStorage：記憶使用者選擇的補給品和偏好
  • html2canvas：匯出補給計畫為圖片

之所以選擇不用任何框架，是因為這個工具的使用者（包括我自己）就是偶爾賽前打開用一下，不需要複雜的狀態管理，純 JS 反而維護起來最直接。

深色模式

CSS 使用設計 token 系統，所有顏色都用 CSS 變數定義：

:root {
  --blue: #2563eb;
  --text-1: #1f2937;
  --bg: #ffffff;
  --border: #e5e7eb;
}

[data-theme="dark"] {
  --blue: #60a5fa;
  --text-1: #f1f5f9;
  --bg: #0f172a;
  --border: #334155;
}

切換主題只需要在 <html> 加上 data-theme="dark"，配色全部自動切換，不會有某個角落還是白底的問題。

開發過程的幾個技術決策

為什麼不用現有的計算器？

Garmin、Polar、甚至 TrainingPeaks 都有補給功能，但都不支援自訂台灣補給品。我要的是「我手邊有這些膠，幫我排出最優補給順序」，這個需求現有工具做不到。

補給間隔的 snap 邏輯

原本計算出來的間隔可能是 13.5 分鐘這種值，比賽中很難執行。所以加了 snap 到固定清單 [5, 10, 15, 20, 25, 30, 40, 45]，往最近的整數靠，確保排出來的計畫是可以實際遵守的。

左面板收合

賽前確認排程時，不需要一直看輸入面板，所以加了橫向收合功能。收合後只剩一條細邊，不佔螢幕空間，點擊可以重新展開。

結語

這個工具從想法到可用版本大概花了幾個下午的時間，主要靠 Claude AI 協助寫 JavaScript 的計算邏輯和 CSS 排版。整個過程讓我更確信一件事：對工程師來說，AI 最大的價值不是幫你寫你不會的東西，而是讓你能更快把腦袋裡的設計落實成程式碼。

補給計畫只是工具，更重要的是訓練有沒有到位。

CT226，4/28 見。

工具連結：三鐵補給規劃