改用 Claude Code 就能堅持？綜合健康應用無法堅持的 UI 設計師「自製應用」開發記

大家好！我是在 Liberogic株式會社 從事 UI 設計師的 Hashy。

忽然問各位，有沒有這樣的隱藏煩惱呢？那就是「好的，今天開始！」懷著滿腔熱血安裝的習慣養成應用，卻完全無法堅持下去這樣的困擾。

開始的時候堪稱專家，但從未成功堅持過。

世界上有許多優秀又美觀的應用。

起初每天都會認真記錄。但因為工作繁忙或有聚餐，某個不經意的日子裡「連續紀錄」就斷掉了，頓時動力瞬間歸零……。

起初那麼在意的提醒通知，不知何時變成了單純的噪音，在手機畫面角落化為石化的應用。

襲來那一刻的「算了，就這樣吧」的挫折感。我相信不只我一個人品嚐過這種滋味。

有沒有人能拯救我這個什麼事都三天打魚、兩天曬網的人生呢？（沒有）

更讓我苦惱的是「應用分散」的問題。

習慣追蹤器、用藥日曆、家計簿……不斷地在各個應用之間切換，讓人更加不堪其煩。而且許多還是付費訂閱，管理不周導致忘記取消。這真是本末倒置了。

就在那時，設計師心中那份異想天開的念頭爆發了。「既然如此，何不乾脆自己動手打造一款只裝載自己需要的功能、專為自己量身定做的應用程式呢？」

就這樣，與 AI（Claude Code）聯手合作，為自己的生活量身打造的「我的習慣養成駕駛艙」應用開發計畫就此啟動了！

暫時而言，最優方案應該由 AI 來告訴我

1. 【功能介紹】用系統包裹自己的「懶散本性」、將「偷懶」系統化的執著功能

接下來，讓我為各位介紹實際上實裝了哪些功能。

我一邊汲取既有應用程式的優點，一邊針對自己的生活特點，打造了終極的「儀表板」。

為了將必要的應用程式整合在一起，首先我開始著手開發習慣養成應用程式。

由於希望在早晨和夜間分別使用不同的介面風格，我同時提供了淺色模式和深色模式。

🌱 初始畫面

初始畫面會顯示想要養成的習慣輸入畫面，使用者可以自行輸入並進行操作。

向下滾動時，下方會有一個「回答問題來建立習慣」的連結。點擊該連結後，系統會根據您的問卷回答為您推薦合適的習慣。

初始畫面整合了習慣化診斷功能

初始畫面上還為不知道想養成什麼習慣的使用者製作了「習慣導航」功能。用戶只需回答問題，系統就能為您選擇合適的習慣。

🌱 習慣追蹤器：告別非黑即白的世界

首先，為了能建立習慣，即使是小的步驟，持續累積也很重要。

製作了具備「5段階評分」功能的習慣養成應用。過去使用的應用往往只能二選一：「做到」或「沒做到」。但這個應用不同，不僅「完美達成的日子」會在日曆上著色，就算是「只稍微努力了一下」的 Lv1 等級日子也會著色。

舉例來說，運動習慣可以設定為：「Lv1: 量體重」「Lv2: 如廁時做深蹲」，一直到「Lv5: 在游泳池游1公里·拳擊訓練40分鐘」，您可以根據當天的努力程度來記錄。

偷懶的日子會顯示為空白，但搭配後面說明的「偷懶稅」系統，即使沒有堅持下去，只要在其他日子補救就沒問題。所以即使有偷懶的日子也不會感到沮喪。

第二天重新開始就行了。正因為這份輕鬆感，我現在每天至少都能做到量體重！

日曆以綠色漸層逐漸著色，視覺上能享受「色彩的積累」，看一個月的進度時，能清楚了解自己累積了多少努力，也因此提升了動力。

日曆功能實現可視化

看著日曆 UI，當你真正達成習慣時，顏色就會改變。根據等級，顏色的深淺或色調會發生變化，這樣你就能看出自己執行習慣的程度，有助於維持動力。

習慣歸檔功能和新建習慣功能也已準備好

我認為養成習慣後，一旦習慣化達到一定程度，也可以開始著手新的習慣，所以我們提供了習慣歸檔功能和新建習慣功能！點擊「習慣養成完成」按鈕就可以新增習慣。

🏛️ 逃避稅：將罪惡感轉化為存款

這是與剛才習慣追蹤器相關聯的另一項功能！

偷懶的日子就對自己徵收「稅款（預設 300日圓）」的系統。

每個人都難免會有無法堅持的時候。

因此為了約束自己，懲罰是必要的，但單純的罰款反而會令人厭煩。

你知道為什麼胖人會變胖嗎？因為他們逃向輕鬆、懶惰的方式，用食物來滿足多巴胺，依賴簡單的快樂激素。所以即使強化懲罰，對我們這些不擅長養成習慣的人也沒有意義。

「本來應該要把偷懶的部分捐款之類的比較好吧…」我也這樣想過，但如果對自己要求這麼嚴格，我非常確定自己會完全不想開應用程式（笑）。

偷懶稅的支付對象是「存入自己的指數投資帳戶」。

也就是說，是罰金，但又不是罰金。是為了自己的罰金。

我甚至把偷懶的罪惡感也轉變成了對未來自己的資產投資。

我特別講究的是根據月度達成率的「減稅制度」。

• 「達成率 90% 以上可減免 50%」
• 「80% 以上可減免 25%」

這樣的機制融入其中。

畫面上會顯示「還差 1% 就能減免 25%！」，看到這個的時候，就會冒出一種莫名奇妙的動力，想著「今天就算只做 Lv2 也要加油」。

養成習慣最大的敵人就是「連續記錄在偷懶一天後斷掉的那一瞬間，就想放棄一切」。

不過，因為有這個減稅制度，「雖然有一天偷懶了，但還有減稅的機會！」因此能夠堅持下去。

不會因為一次失敗就放棄，而是徹底貼近懶散的自己，採用了溫柔的設計。

✨ 護膚追蹤器 ＆ 💊 用藥管理：終結應用程式的頻繁切換

✨ 護膚檢查工具正是我想要的

習慣、用藥、家計簿……用不同的應用程式分別管理這些，對懶散的人來說是「麻煩」的極致。為了消除這種「應用程式頻繁切換」，我們將日常護理和健康管理完全整合到這個駕駛艙中。

在功能上，由於能直接沿用習慣養成應用程式的功能，所以實現起來很簡單。

🧴 即使在無力的日子也能接納自己的「護膚追蹤器」

肌膚護理也是習慣的一種。打開畫面時會問「你做到哪一步了？」，我們準備了5個級別的步驟。

疲憊地下班的日子，「等級1：只洗臉（清水洗臉或用潔面產品洗臉）」就可以了。如果還有一點精力，可以選「等級2：基本護理（洗臉＋爽膚水）」「等級3：標準護理（＋乳液）」，特別的日子還可以加入精華液的「等級4：精心護理」……這樣就能根據那天的精力狀態進行記錄。

此外，各級別的名稱和護理內容（說明文）可以從「步驟設定」中自訂成自己喜歡的樣子。畫面上方還會顯示「本月平均等級」和「等級3以上連續日數」等資訊，所以能想「最近因為疲累只做等級1，今天就努力到等級3吧」，在不勉強的範圍內維持動力。

💊 徹底協助懶人進行「用藥管理」

而且，個人而言最容易放棄的就是用藥管理。

在這個應用程式中，不僅只是輸入藥物名稱，還可以細緻地、靈活地登錄「早・中・晚」的服用時間、「飯前・飯後・自由」等指定方式、各時段的錠數，甚至「每天・隔天・指定星期」等複雜的服用頻率。

當有未完成的用藥時，螢幕上方會顯示一個引人注目的紅色警告「⚠️有忘記服用的藥物。請確認。」來督促你。

螢幕下方也會呈現「本月服藥達成率」和「忘記服用次數」等真實數字（在開發中的測試畫面中曝露了服藥達成率僅5%的懶人程度……哈哈）。

但請放心。

即使有忘記服用的日子，也可以從日曆回溯後來補記的「可以事後追加」設計仍然存在，所以不用陷入完美主義的漩渦，可以按自己的節奏繼續。

隨著年紀增長，用藥也會增加，所以這個功能非常方便，看醫生時也可以分享過去服用過的藥物資訊，幫助很大（因為我經常忘記帶藥物手冊）。

🍺 飲酒聚餐管理：健康與節省開支的動力爆棚的神級功能

而且，個人而言改變我生活最多的，就是這個「飲酒聚餐管理」功能。

不只是記錄飲酒，我們融入了管理每月飲酒聚會次數上限（例如「每月最多4次」）和預算的功能，並將日常的「小小自制」轉化為視覺化的獎勵。

🍵 一鍵點擊存錢！「節酒存金」

在日常生活中

「今天就不在家喝酒了」

當你能夠忍住時，只需在主畫面上點擊一下「今天沒有晚酌」的開關。

只需這一個動作，日曆上就會出現綠色標記，500元就會作為「節酒存金」被累積。

日常的點滴自制會逐漸累積成金額，隨著月底的臨近，你會獲得「這個月已經能夠節酒3,000元（6天）了！」這種神秘的成就感和多巴胺。

你可以將這筆省下來的錢用於投資或儲蓄。

或者從願望清單的省錢中支付，這樣能讓你實際感受到因節酒而獲得的其他回報，我認為這樣能更好地堅持禁酒或節酒。

🛡️ 飲酒聚會中自律的「防止醉酒模式」

這個應用的隱藏必殺技就是「防止酒醉模式」。開始喝酒時，只需開啟此模式。螢幕中央就會顯示倒數計時，直到預先設定的「目標回家時間」。當然，如果「今天玩得開心，再待一下！」，可以使用「更改回家時間」或「🎉可以參加二次會！」按鈕靈活延長時間。設計上體貼懶惰的自己。

此外，螢幕上還設有「🍺酒精」「🥤軟飲」「💧清水」的杯數計數器。能即時判斷「每2杯酒配1杯軟飲」之類的飲酒速度，並以綠色「OK」的量表告訴你。這樣可以大幅減少隔天宿醉和「為什麼喝那麼多啦…」的後悔。

📊 除此之外還新增許多聚餐時方便的功能

聚餐結束後，可以記錄「鳥貴族 澀谷店」之類的店名、實際支付金額、一起去的人的備註等。更進一步，若輸入 Google Maps 的 URL，應用會自動填入相關資訊。因為月只需操作幾次，AI 告訴我 API 整合不會產生費用，所以我就實裝了。

另外，聚餐時也常忘記結帳，所以我新增了這項備註功能。

再也不用糾結誰付了誰沒付，真的很棒。

然後在月末的「月次報告」中，迴避晚酌的天數產生的「節酒儲金」與聚餐預算省下的差額（聚餐省下的金額）會加總，以「總節省額」自豪地視覺化顯示。例如一眼就能看出「這個月省了 9,000日圓！」，讓人會想「用這筆錢買那個想要的小工具吧」，是能同時獲得健康和金錢的最愛功能。

2. 開發完成：Claude 是設計師最棒的「翻譯機」

就這樣，我把所有的懶惰和任性都塞進去的應用終於成形了。開發經驗為零的我能走到這一步，完全歸功於我的搭檔 Claude。

工程師看到可能會生氣罵「有沒有搞清楚啊？」，但這次我採用了「把 HTML、CSS、JavaScript 全部塞進一個 index.html 檔案」的超粗暴單一檔案結構來推進。不過，對我們（我和 Claude）來說這是大正解。

當檔案分散在多個文件中時，每次都得費力說明「要修改哪個檔案的哪個地方」，但如果只有一個檔案，我只需要把整個程式碼丟進聊天對話中，Claude 就能瞬間掌握全部內容。

我對「想要這樣的行為」這樣抽象的想法，Claude 會將其翻譯成漂亮的程式碼。有時候確實會因為結尾標籤打錯或 JavaScript 載入順序不對而導致整個應用程式崩潰，我們會在深夜追蹤錯誤日誌，但那些時刻甚至就像電影裡的搭檔動作片一樣令人享受（笑）。

與 GitHub 和 Cloudflare 的連接等，只要在聊天對話中提及，它就會教我帳戶的註冊方法，還會直接貼上官方網站的連結，所以與 AI 聊天時，連接會在眨眼間完成。

3. 下一個高牆：設計師、安全性的深淵

藉著 Claude 的幫助，我得到了外觀和動作都融入「我的理想」的最棒玩具（應用程式）。

……但是，這裡發生了新的問題。

隨著我每天實際使用這個駕駛艙，我忽然醒悟了。「等等，這個應用程式裡裝著我的真實健康狀態、每日的服藥資料、最近的家計簿，以及我偷懶的紀錄，也就是赤裸裸的隱私資料啊」。

目前我只是暫且用簡易的 PIN 碼（密碼）來鎖定螢幕，但說實話我對安全性完全是個外行。以目前只有我和 AI 的知識所做的狀態，我無法完全消除將重要資料託付出去的不安感。

身為設計師，正因為我創造「舒適的體驗」，背後的「絕對不會洩露、不會被破壞」這樣的安心感也是重要的一部分才對。

「果然，我還是想用智慧型手機的 Face ID，或是最新的 Passkeys（密鑰），讓只有我能夠安全又聰明地快速開啟！」

我確實這樣想過，但安全性是個不能草率對待的超級專門領域。

這已經超出我的能力範圍了……。

我想和工程師討論，謹慎地推進這項工作。

我之後想導入家計簿管理工具，只要上傳信用卡使用紀錄就能自動記帳，但由於對安全性感到不安，暫時先擱置這項功能。

總結

工具都準備好了。接下來想創造的是「安心」！

原本只因為「沒有開發知識」就在腦子裡悶著的想法，多虧了 AI 這位最好的夥伴，如今得以實現，真正改變了我的生活。我停止了責備自己做得不夠完美，只要付出一點「偷懶稅」就能無數次重來。感謝這個溫柔的系統，曾經是三分鐘熱度專家的我，現在已經能每天樂在其中地養成習慣。

但是，越方便，保護它的責任也就隨之而來。

除了這篇文章中提到的，我也在逐步新增通知功能和家計簿管理功能。

但家計簿管理等功能從安全角度出發必須謹慎處理，所以目前還在開發環境中持續開發。

所以，敬請期待下一次的更新！