程式設計 x AI：自己動手寫一個健康管理網頁！

減重這件事真的很重要吧？但說真的，要 精準計算和記錄卡路里 其實不容易！

市面上有一堆 減重 APP 和營養顧問，但大多數最後都變成了 推銷工具，而我們真正需要的，只是個 簡單又好用的工具，能幫助我們自己計算 BMI 和 每日所需熱量，不用每次都去 Google 查公式。

現在 AI 程式設計 這麼強，我開始思考：能不能自己寫一個？

所以我用 AI 來打造一個 輕量但實用的健康管理工具，希望它不僅能計算 BMI，還能模擬運動消耗熱量，甚至加入 30 天健康挑戰、積分與獎勵，讓減重這件事變得更有趣！

目前我用 HTML、CSS、JavaScript（GSAP.js），做了一個 BMI 與卡路里計算器，能追蹤健康狀態，未來也希望把它變成 一個完整的網頁或 APP，甚至讓 AI 來協助計算與個人化建議！

我把這個 與 AI 共同開發的過程 分享給大家，讓我們一起看看，如何透過 程式設計 讓夢想中的計畫變成現實。

文章目錄：

一. AI 程式設計 在健康應用領域的發展

1. AI 如何改變健康管理？

2. AI 在健康管理的應用

3. AI 健康應用的未來發展

二. 用 程式設計 x AI 打造健康管理網頁怎麼做？

1. 專案需求

2. 主要功能

3. 視覺與互動升級

4. 功能升級

5. 個人化提升

三. 程式設計 x AI技術選擇與實作

1. 我的 AI 夥伴 1 - ChatGPT PLUS - 每月20美金

2. 我的 AI 夥伴2 - Gemini - 免費

3. 我的 AI 夥伴 - GROK - 免費

3. 我的 AI 夥伴 - Cursor - 免費

4. Claude 3.7（部分功能免費）

5. Windsurf（搭配 Claude 使用）

四．AI 與人類協作 程式設計 的價值

1. 構思與規劃 

2.  程式設計 與技術實作

3. 介面設計 UI 與使用者體驗 UX

4. 與 AI 一起合作的時間

5. AI 如何加快 程式設計 的速度?

6. BMI 計算器 下一步計畫？

五. AI 介面設計與使用者體驗

1. Figma + Magician AI（推薦）

2. Uizard

3. Relume

4. Galileo AI 

5. Canva AI

六．AI 在程式設計與 UI 設計的角色與限制

1. AI 在 程式設計 上的優勢

2. AI 在 程式設計 上的劣勢

3. AI 在 UI / UX 設計上的限制

4. AI 與人類的最佳合作方式

5. 未來的發展方向

七. 結論：AI 是開發者的助手，而不是取代者

一. AI 程式設計 在健康應用領域的發展

1. AI 如何改變健康管理？

隨著 AI 程式設計 的進步，健康管理已從傳統的「被動監測」轉變為「主動優化」。

過去我們需要手動計算 BMI與每日熱量，

而現在AI 能透過 機器學習、大數據分析與計算機視覺，提供更精準的個人化健康建議。

2. AI 在健康管理的應用

• BMI 與熱量計算

  • AI 透過 身高、體重、年齡 計算 BMI，並分析每日所需熱量。

  • 動態數據分析可提供健康建議，幫助使用者設定減重或增肌目標。
    
    

• 運動建議與卡路里消耗模擬

  • AI 根據 BMI 提供 運動計畫，計算不同運動（跑步、游泳、跳繩）的熱量消耗。

  • 透過 即時數據追蹤，讓使用者了解達成目標所需的運動時間。
    
    

• 營養攝取與健康挑戰

  • 影像識別 AI 可分析食物熱量，幫助使用者記錄飲食。

  • 30 天健康挑戰與積分系統，鼓勵使用者培養良好習慣。
    
    

3. AI 健康應用的未來發展

未來 AI 程式設計 在健康管理領域將更智能化：

• 即時健康監測：結合穿戴裝置，自動追蹤心率、熱量消耗。

• 疾病預測：AI 透過數據分析，預測慢性病風險，提供早期預防措施。

• 個人化健康 AI 顧問：依據使用者的飲食與運動數據，生成專屬健康計畫。

二. 用 程式設計 x AI 打造健康管理網頁怎麼做？

透過 HTML、CSS、JavaScript（GSAP.js），我們可以設計一個 BMI 與卡路里計算器，讓使用者輸入身高、體重等資訊，自動計算 BMI 並提供每日熱量建議。

使用 GSAP.js 動畫 讓數據顯示更流暢，加入 運動消耗熱量模擬，讓使用者知道不同運動方式所需的時間來達成健康目標。

接下來我將我與 AI 協作的步驟由淺入深分享給大家。

1. 專案需求

開發一個 網頁應用程式，能夠計算 BMI（身體質量指數） 與 每日卡路里需求，幫助使用者了解自己的健康狀態。

2. 主要功能

• BMI 計算：

  • 使用者輸入 身高、體重、性別、年齡，即時計算 BMI。

  • 透過動畫效果（GSAP.js）讓數據呈現更直覺。
    
    

• 每日卡路里需求：

  • 根據 基礎代謝率（BMR） 公式計算每日所需熱量。

  • 讓使用者了解該攝取多少卡路里以維持體重或達成目標。
    
    

• 健康建議：

  • 根據 BMI 值 提供建議，例如增加肌肉、減少脂肪或維持健康體重。

  • 讓使用者了解自身狀態，並提供改善方向。
    
    

• 運動消耗熱量模擬：

  • 讓使用者選擇 不同運動類型（跑步、游泳、跳繩）。

  • 根據 BMI 計算 運動所需時間，以燃燒額外熱量。

以上是初階的簡單功能，也是本次文章已經實作完成的網頁，大約花了我2個小時左右，

當然，它現在還不完美，外觀有點陽春，說明頁面也沒那麼詳細。

未來希望能擴充更多功能，如：

3. 視覺與互動升級

• 動態動畫效果

  • 計算按鈕可以有 3D 按壓效果。
    
    

• 主題切換

  • 深色/亮色主題自動記憶，使用 LocalStorage 記住用戶的偏好。
    
    

• 數據圖表呈現

  • 使用 Chart.js 顯示 歷史 BMI 變化曲線，讓使用者追蹤自己的體重管理進度。

4. 功能升級

• 食物熱量 AI 分析

  • 讓用戶 上傳食物照片，系統用 AI 影像辨識 API (如 Google Vision API 或 OpenAI Vision) 來分析食物名稱及熱量。
  • 計算當日飲食是否超過所需熱量。
    
    

• 社群分享功能

  • 讓使用者 分享 BMI 結果到 Facebook 或 LINE，增加互動。
    
    

• 健康挑戰 & 獎勵機制

  • 設計 「30 天健康挑戰」，讓使用者輸入每日飲食，追蹤進步。
  • 可加入積分系統，完成每日健康挑戰可獲得勳章或積分。

5. 個人化提升

• 語音輸入

  • 讓使用者可以 用語音輸入身高體重，提升便利性。
    
    

• 個性化健康建議

  • 根據 用戶年齡、體重與目標，推薦 具體的飲食計劃 和 健身計畫。
    
    

• 健康提醒功能

• 讓用戶設定 每日喝水、運動提醒通知（使用瀏覽器推播）。

三. 程式設計 x AI技術選擇與實作

我請 AI 幫我優化評比文章的時候，發現 ChatGPT 自己把我的文章全部改掉了，

它把自己的優點寫得最多，比如說它自己程式碼最嚴謹、最完整、解釋能力最強，只是不會UI。

而評論 Gemini、GROK 都是功能簡單、容易出錯、UI/UX 設計非常粗糙...

然後 Gemini、GROK 還很好意思說自己最客觀。

跟我的文章完全不一樣啊！

一度讓我懷疑 ChatGPT 裡面是不是住了人？

所以我決定讓 AI 評論其他 AI ，不要加上它們自己，

即使如此，他們的評論還是這個 AI 再好還是不如我之類的，

我只好以人工方式整理出以下客觀的評論。

AI 夥伴比較表

1. 我的 AI 夥伴 1 - ChatGPT PLUS - 每月20美金

ChatGPT 4o mini

ChatGPT 是一款通用型 AI 助手，適合需要高品質對話、創意內容生成、程式碼輔助的使用者，但在即時資訊與高精度計算方面仍有一定限制。

實作網址 - 點進去試試看，輸入你的數據，看看 ChatGPT 4o mini 怎麼幫你計算健康狀態！
https://esangtek.com/BMI/

名稱：BMI 與熱量計算 程式設計

• 達成目標：10分/10
  欄位：名稱、年齡、性別、身高、體重、運動方式
• 計算是否正確：正確
• 說明：5分 / 10 
• 外觀：1 / 10 分 (完全沒有科技感)

2. 我的 AI 夥伴2 - Gemini - 免費

2.0 Flash Thinking Experimental

實作網址 - 點進去試試看，輸入你的數據，看看 Gemini 怎麼幫你計算健康狀態！
https://esangtek.com/BMI/Gemini.html

名稱：健康資訊計算器

• 達成目標：8分/10
  欄位：名稱、年齡、性別、身高、體重、運動方式(無)
• 計算是否正確：正確
• 說明：5分 / 10 
• 外觀：1分 / 10  (完全沒有科技感)

Gemini

優勢：

• 多模態能力強：
  可處理文字、圖像、音頻、視頻、程式碼等多種輸入，適合需要綜合分析的任務（如跨媒體研究或教育）。
  
  
• 資訊檢索與準確性高：
  受益於 Google 的搜尋技術和數據資源，在學術或專業領域表現優異。
  
  
• API 整合能力佳：
  與 Google 生態系統深度整合，支援 Google Docs、Gmail、YouTube、Workspace 等工具，適合自動化應用。
  
  
• 推理能力強：
  在高級版（如 Gemini Ultra）中，能進行結構化研究，適合學術報告與深度分析。
  
  
• 支援多種語言：
  可進行多語言翻譯與內容處理，適用於國際化應用場景。

缺點：

• 免費版功能有限：
  完整體驗需訂閱 Gemini Advanced（約 $20/月）。
  
  
• 創意性稍弱：
  在創意寫作或生成內容時，表現不如 ChatGPT。
  
  
• 對話風格偏學術化：
  有時過於正式，缺乏幽默感或較自然的互動。
  
  
• 在某些專業領域的知識可能不如 ChatGPT。

適用場景：

• 快速查詢資訊、結構化研究、學術報告
• 與 Google 服務整合（如 Gmail、Docs、API 介接）
• 多模態處理（文字、圖像、影片等）
• 不適合高要求的程式開發或錯誤排查
• 不適合需要高度創意的內容生成（如小說、詩詞等）

3. 我的 AI 夥伴 - GROK3 - 免費

實作網址 - 點進去試試看，輸入你的數據，看看 GROK3 怎麼幫你計算健康狀態！

https://esangtek.com/BMI/grok3.html

名稱：健康計算器

• 達成目標：8分/10
  欄位：名稱、年齡、性別、身高、體重、運動方式(無)
• 計算是否正確：正確
• 說明：5分 / 10 
• 外觀：2分 / 10  (完全沒有科技感)

GROK：

優點：

• 即時資訊獲取：
  與 X（原 Twitter）整合，可獲取最新資訊，提供即時回應。
  
  
• 幽默風格與個性化：
  回答風格較幽默，互動體驗更有趣，相較於其他 AI 更具個性。
  
  
• 速度快：
  適用於一般對話、簡單邏輯推理與即時回應。
  
  
• DeepSearch 模式（Grok 3）：
  可主動搜尋網路和 X 平台的數據，適合市場分析或即時資訊整理。
  
  
• 訓練數據較自由：
  受 X 社群影響，回應更貼近社交媒體趨勢。

缺點：

• 資訊準確性不足：
  由於即時資訊來源不一，可能提供不準確或未經驗證的資訊。
  
  
• 可能帶有爭議：
  與 X 平台深度整合，可能受社交媒體輿論影響，內容具有偏向性。
  
  
• 程式碼能力較低：
  產生的程式碼品質不穩定，需要大量 Debug，邏輯不嚴謹。
  
  
• 缺乏專業深度：
  在技術問題上提供的答案可能較為片面，難以應對複雜的專業需求。
  
  
• 穩定性不足：
  仍在發展階段，相較 ChatGPT、Gemini，可靠度與應用範圍仍有待提升。

適用場景：

• 快速獲取即時資訊（特別是 X / Twitter）
• 社交媒體互動、自動化應用
• 簡單邏輯推理或通用 AI 問答
• 不適合高品質程式開發或專業技術領域

4. 我的 AI 夥伴 - cursor - 免費

這是一款專門幫你寫程式的 AI 編輯器，適合實戰開發，支援多種語言。

實作網址 - 點進去試試看，輸入你的數據，看看 Cursor 怎麼幫你計算健康狀態！

https://esangtek.com/BMI/bmi.html

名稱：BMI 健康計算器

• 達成目標：8分/10
  欄位：名稱、年齡、性別、身高、體重、運動方式(無)
• 計算是否正確：正確
• 說明：5分 / 10 
• 外觀：3分 / 10  (也是沒有科技感，但比其他3個ai好看)

Cursor
Cursor 是一款強大的 AI 程式開發助手，適合開發者提升生產力，但不適用於一般知識問答或創意性內容生成。

優勢：

• 專為開發者設計：
  Cursor 主要是一款 AI 驅動的程式碼編輯器，專注於程式碼生成、編輯與 Debug。
  
  
• 內建 AI 代碼補全：
  類似 GitHub Copilot，能提供 自動補全、即時建議、程式碼重構，提升開發效率。
  
  
• 支援 Debug 與錯誤修正：
  可以幫助開發者檢測錯誤，提供修正建議，提高程式碼品質。
  
  
• 與開發環境無縫整合：
  可與 VS Code 兼容，支援擴充功能與快捷鍵，降低學習成本。
  
  
• 適合快速原型開發：
  能夠將概念快速轉化為可執行的程式碼，適合新手和專業開發者。

缺點：

• 不是通用 AI：
  相比 Gemini 或 ChatGPT，Cursor 主要專注於程式設計，應用範圍較窄，不適合一般問答或非技術領域。
  
  
• 功能受限於底層 AI 模型：
  依賴 Claude 3.5 Sonnet 或 GPT-4o，缺乏獨立技術突破，表現受基礎模型影響。
  
  
• 免費版功能有限：
  高級功能（如更強的代碼補全與最佳化建議）需要訂閱付費版本。
  
  
• 對英文指令的依賴較高：
  對於非英語的開發環境（如中文）支援度相對較低。

適用場景：

• 軟體開發與程式碼補全
• 代碼 Debug 與優化
• 快速原型設計與程式碼自動化
• 不適合通用 AI 問答或非技術性任務

4. Claude 3.7（部分功能免費）

適合做邏輯推理、解釋程式、API 設計討論，非常像一位 AI 技術顧問。

如果你在寫程式時，常常遇到「不知道這段邏輯對不對？」、「API 要怎麼設計才合理？」或是「這段程式碼到底錯在哪？」
那你真的可以試試看 Claude 3.7。

這是由 Anthropic 推出的 AI 模型，是目前業界和 OpenAI（ChatGPT）並列的一線選擇。

Claude 的特點就是邏輯能力超強，整體風格偏向理性、清晰，很像一個冷靜的技術顧問，你可以跟它討論程式架構、API 規劃，甚至請它幫你思考資料流設計。

4.1 Claude 3.7 適合做什麼？

• 幫你「看懂程式碼」，甚至是複雜專案的整段邏輯

• 解釋 API 串接邏輯，幫你補齊 request / response 格式

• 提供技術決策上的參考建議（例如：前後端分離該怎麼處理？）

• 程式碼風格、架構改寫的建議（像是如何讓程式更模組化）

4.2 它不是 IDE，但很會「想」

跟 Cursor 那種能直接幫你寫、部署、改專案的工具不同，Claude 比較像是你身邊那個資深工程師，不一定親自下去寫，但會站在架構層次給你思路和提醒。
尤其當你陷入「我好像哪裡寫錯但不知道錯哪裡」的時候，Claude 的幫助會非常有感。

4.3 實際應用情境

• 設計一個 BMI 計算器的 API 結構

• 幫你改寫一段 if-else 混亂的邏輯成 switch case 或物件導向寫法

• 解釋 ChatGPT 回傳的代碼哪裡有問題

5. Windsurf（搭配 Claude 使用）

如果說 Claude 3.7 是一位技術顧問，那 Windsurf 就是幫這位顧問打造的專屬工作台。

Windsurf 是 Anthropic 推出的Claude 專用開發控制台，你可以把它想成一個讓 AI 更好發揮功能的操作環境。

不只是聊天，它可以幫你分析檔案、執行 Python 程式碼、跑資料、整合 prompt 模板，甚至做一些原型測試或流程驗證。

5.1 Windsurf 可以幫你做什麼？

• 上傳檔案（例如 CSV、JSON、Markdown）讓 Claude 幫你讀內容、做分析

• 執行 Python 程式（例如小工具、資料清洗、API 測試）

• 建立多階段對話（例如先問你需求，再產出後續程式邏輯）

• 設計 prompt 工作流（例如一次問多個欄位、自動套用格式）

5.2 Windsurf 比較像什麼？

它不是真的拿來寫網站的 IDE，也不是拿來畫設計稿的工具，它是 AI 應用整合的平台。

如果你想打造一個內部工具，或是設計 AI + 程式流程的原型，那 Windsurf 超級好用。

舉例來說：

• 你可以上傳一組 API 文件，請它幫你分析格式、建議串接方式

• 或丟入一份資料清單，請它幫你自動產出回應結果

• 更可以讓它變成一個客製化的 AI 技術助理，持續幫你記得上下文

5.3 適合對象

• 技術 PM、資料分析師、懂一點程式但不想開 IDE 的人

• 想建立「AI 工具 + 人工操作」混合流程的人

• 要驗證 AI 實驗性流程的創業者或產品設計人員

四．AI 與人類協作 程式設計 的價值

在這個 BMI 與熱量計算 的開發過程中，AI 幫助我完成了以下幾個部分：

1. 構思與規劃

當我想開發一個 健康管理工具 時，AI 幫助我：

• 整理需求，讓這個 BMI 計算器不只是單純的 BMI 計算，而是 結合 AI 與程式設計，提供 更完整的健康追蹤功能。
• 規劃主要功能，確定核心功能包含：
  • BMI 計算
  • 每日熱量需求計算
  • 健康建議
  • 運動模擬消耗熱量

2.  程式設計 與技術實作

在 程式設計 上，AI 提供了：

• HTML、CSS 結構建議：
  • 幫助我讓網頁架構清晰，內容有條理地呈現。
    
    
• JavaScript 邏輯設計：
  • 提供 BMI 計算公式
  • 設計 基礎代謝率（BMR）公式
  • 運動消耗熱量的計算邏輯
    
    
• GSAP.js 動畫優化：
  • 讓 BMI 計算結果能夠 流暢呈現數值變化
    
    

3. 介面設計 UI 與使用者體驗 UX

(1) UI（User Interface） 是什麼？

使用者介面設計：專注於 畫面設計、按鈕樣式、排版、顏色、字體、動畫 等視覺呈現。簡單來說，就是「畫面長什麼樣子」。

(2) UX（User Experience）

使用者體驗：專注於 流程設計、易用性、操作邏輯、行為模式，確保使用者能夠「順暢、直覺地」使用這個系統。簡單來說，就是「這個東西好不好用」。

BMI 計算器希望有

• 增加「暗色/亮色模式切換」
  • 讓使用者可以自由選擇喜歡的配色方案，提升使用體驗。
    
    
• 3D 按壓效果與動態動畫
  • 讓計算按鈕、數值顯示變得更有互動感，而不是靜態的數字。
    
    

4. 與 AI 一起合作的時間

從一開始的想法到最終完成，我們大概花了 2小時

• 前端技術
  • HTML：建立網頁結構
  • CSS：使用暗色主題與動畫美化 UI
  • JavaScript (GSAP.js)：動態顯示數據，使 BMI 計算過程更流暢
    
    

5. AI 如何加快程式設計的速度?

• 原本我需要 自己搜尋 各種 BMI、BMR 公式、運動熱量消耗計算方式，而 AI 能 快速整理 這些公式，並提供 直接可用的程式碼。
• 在 UI 設計與動畫部分可能會花更多時間找資源，AI 整理了 GSAP.js 動畫方案。

6. BMI計算器 下一步計畫？

很快我就完成了一個 基本版 的BMI計算器，接下來我希望：
(1) 優化 UI/UX（更有科技感的設計）
(2) 升級 AI 功能（讓 AI 直接分析食物熱量）
(3) 開源或開發 App 版本（讓更多人可以使用這個工具）

五. AI 介面設計與使用者體驗

根據這次實作結果，我發現 ChatGPT PLUS、Gemini、GROK 、Cursor用來寫程式速度非常快也正確，但是 UI 和 UX 非常的差強人意，

我理想中的介面

幸好現在也有很多能夠協作 UI / UX 的 AI 工具，如下：

1. Figma + Magician AI（推薦）

適合UI 設計 + 自動生成 UI 元素， Magician AI 是 Figma 的 AI 插件，可以根據需求自動生成 UI 設計，

例如：按鈕、圖示、版面配置，甚至可以產生設計靈感！

只要輸入：「幫我設計一個科幻感的 BMI 計算器 UI」，它就能幫你生出初步的設計稿！

優勢：支援 Figma，適合開發者與 UI 設計師使用，AI 生成 UI 快速。 

缺點：需要一些 Figma 基礎，但學習曲線不高。

2. Uizard

適合：無設計經驗者，快速建立 UI

• Uizard 是一個 AI 驅動的 UI 設計工具，可以直接輸入「設計一個健康管理 App」，它就會幫你產生一個完整的 UI 設計！
• 你可以 上傳手繪草圖，Uizard 會 自動轉換成 UI，非常適合用來快速開發原型（Prototype）。

優勢：完全不需要設計經驗，AI 幫你自動完成。
缺點：自由度較低，細節調整能力有限。

UI / UX 生成結果：他好像不了解科幻感喔

3. Relume

適合：設計網站 UI，適用於 Web App

• Relume AI 主要用來 設計網站的 UI 結構，如果要把 BMI 計算器 變成更完整的健康管理網站，它可以自動產生 網頁區塊、組件、配色建議。

優勢：適合 網站 UI 設計，生成 完整的區塊與元件，幫助你快速搭建網頁。
缺點：更適合 網站設計，如果是 App UI，Figma 會更好。

UI / UX 生成結果：他好像不了解科幻感喔

4. Galileo AI

適合：直接產生完整 UI 設計圖

• 這款 AI 直接 根據你的描述生成完整的 UI 設計圖，如果你輸入：「設計一個未來感的健康追蹤 App」，它會幫你設計 按鈕、輸入框、數據顯示面板等。

優勢：適合 App 設計，完全 AI 驅動，可以直接下載設計圖。
缺點：目前還是 Beta 版本，需要申請使用。

5. Canva AI

適合：不熟悉 UI 設計，但想快速產生視覺素材

版面設計我願稱他為最強！

demo站：
https://bmi1.my.canva.site/

2025.04.14 推出新功能，介紹請參考以下網址：
https://des13.com/news/ai/1618-webdesign.html#ai11

六．AI 在程式設計與 UI 設計的角色與限制

這次的 BMI 與熱量計算工具 開發，雖然我體會到 AI 在程式設計上的強大，但同時也發現它在 UI / UX 設計上仍然存在許多限制。

1. AI 在 程式設計 上的優勢

AI 在 程式開發 上的幫助無庸置疑：

• 加速開發：

  • AI 能快速整理 BMI、BMR 計算公式，避免了手動查找的時間。
    
    
  • JavaScript 公式與邏輯設計，AI 能夠即時提供正確的運算邏輯。
    
    
  • GSAP.js 動畫優化，AI 提供了適合數值變化的動畫方式，使計算結果顯得更流暢。
    
    

• 減少 Debug 時間：

  • 遇到錯誤時，AI 能快速分析問題點，提供修改建議，減少大量 Debug 所需的時間。
    
    

• 提供建議：

  • 在設計計算邏輯時，AI 能建議不同的方法，例如 是否使用 LocalStorage 來存儲用戶數據，提高用戶體驗。

2. AI 在 程式設計 上的劣勢

雖然 AI 在程式設計上帶來了巨大的幫助，但它並不是 萬能的，仍然有不少 限制與劣勢，開發者在使用 AI 輔助寫程式時，還是需要注意以下幾個問題：

(1) 需要不斷溝通，無法一次到位

AI 雖然能根據指令 快速生成程式碼，但通常 第一次輸出的結果並不完美，開發者仍然需要：

• 不斷調整問題描述，來讓 AI 產生符合需求的程式碼。
• 釐清 AI 理解錯誤的地方，並重新修正指令。
• 提供詳細的上下文，否則 AI 可能會產生與需求不符的解法。

問題舉例：

例如，我讓 AI 產生一個「科幻感的 BMI 計算器 UI」，結果它產生的 UI 只是普通的綠色按鈕和黑色背景，完全沒有科幻感，還需要額外溝通與修改。

(2) AI 產生的程式碼可能有錯誤

AI 產生的程式碼 不一定 100% 正確，可能會有：

• 語法錯誤（Syntax Error）
• 邏輯錯誤（Logic Error）
• 未考慮邊界情況（Edge Cases）

問題舉例：

AI 幫我寫的「運動消耗熱量計算」邏輯，結果它忘記考慮「當 BMI 低於正常範圍」的情況，導致運動建議不合理，必須手動修正。

解決方法：

• AI 生成的程式碼仍然需要開發者審查與測試
• 不能完全依賴 AI，應該自己懂程式碼，能手動 Debug

(3) 無法理解複雜的業務邏輯

AI 雖然能產生「標準的程式碼」，但當程式涉及 複雜的業務邏輯（例如 特定公司內部的數據處理、客製化 API、特殊演算法）時，AI 很難產出正確的解法。

問題舉例：

假設我希望 AI 幫我寫一個「根據 BMI、每日熱量消耗，預測 30 天後的體重變化」，AI 可能會產生一個「標準」的熱量計算公式，但無法考慮 個人體質、代謝速率、肌肉比例等變因，導致計算結果偏差。

解決方法：

• AI 適合處理「標準問題」，但複雜業務邏輯仍需開發者手動設計
• 對於關鍵計算邏輯，應該使用「測試數據」來驗證 AI 產出的結果是否準確

(4) 缺乏創意與個性化

AI 主要是基於 現有資料 來生成程式碼，它的解法通常是「常見的標準解法」，但如果開發者希望 設計獨特的功能、加入創意，AI 可能無法滿足需求。

問題舉例：

AI 產生的 UI 設計過於「標準」，沒有個性，當我請 AI 設計一個「科幻感的 BMI 計算器」，它生成的 UI 只是「黑底白字」的普通風格，完全沒有真正的科幻感。

解決方法：

• 開發者應該先有「自己的設計概念」，再讓 AI 幫助實作
• 不能單純依賴 AI，應該加入「人類的創意與美感」來讓產品更有特色

(5) 無法長期維護與最佳化

AI 只能 根據當下的需求產生程式碼，但它不會考慮：

• 可維護性（Maintainability）：
  程式碼是否容易後續擴展？
  
  
• 效能優化（Performance Optimization）：
  這段程式碼是否寫得更高效率？
  
  
• 版本控制（Version Control）：
  如何確保長期開發不影響舊功能？

問題舉例：

AI 產生的程式碼可能能夠「正常運作」，但它可能忽略了「長期擴展」的需求，導致日後難以維護。需增加新功能，它會將程式碼全部重新編輯，導致某些舊功能被刪除

解決方法：

• 開發者仍然需要負責「程式架構設計」，不能完全讓 AI 決定
• 對於長期維護的專案，應該自己建立版本控制，確保開發流程穩定

(6) 依賴 AI 可能會降低程式設計能力

如果過度依賴 AI，開發者可能會：

• 失去解決問題的能力，因為所有問題都交給 AI 來解決。
• 無法 Debug，當 AI 產生錯誤時，不知道如何修正。
• 忽略最佳化與效能考量，因為 AI 產生的程式碼只是「能動」但不一定「高效率」。

問題舉例：

有些開發者直接複製 AI 產出的程式碼，結果出錯時完全不知道問題在哪裡，因為他們沒有真正理解 AI 產生的程式碼。

解決方法：

• 使用 AI 來加速開發，但仍然要保持學習與思考能力
• 每次讓 AI 產生程式碼時，先自己理解邏輯，不要直接複製貼上

3. AI 在 UI / UX 設計上的限制

而我開始嘗試 讓 AI 幫助設計 UI / UX，就發現了它的極限：

(1) 缺乏「設計感」：

ChatGPT、Gemini、GROK、Cursor在 程式碼編寫 上都很準確，但在 視覺設計 方面，生成的結果都很「機械化」，缺乏真正的設計感。

AI 設計出的 UI 可能會過於簡單，缺乏美感與層次感，並且常常 無法理解「科幻感」或「現代感」的需求。

(2) 無法真正理解「人性化設計」：

UI 設計 需要考量 用戶體驗（UX），例如按鈕放哪裡最直覺？數字怎麼呈現才有科技感？

AI 產出的設計雖然「功能性正確」，但往往缺少人類設計師對於用戶體驗的考量。

(3) 難以完全替代設計師：

即使使用 Figma + Magician AI、Uizard、Relume 等 AI 設計工具，它們仍然無法完全取代人類 UI 設計師的美學直覺。

4. AI 與人類的最佳合作方式

這次開發過程讓我明白，AI 適合做的是程式設計，而 UI 設計仍然需要人類的創意與審美能力。

未來開發應該：

(1) 讓 AI 負責「技術層面」的工作：

例如計算公式、數據處理、動畫優化、後端開發等。

這可以大幅減少 程式設計的時間與精力，讓開發者專注於功能開發。

(2) 讓人類設計師負責「美感與用戶體驗」：

UI / UX 設計仍然需要人類來調整細節，例如 按鈕的大小、顏色的對比度、動畫的流暢度，這是 AI 目前仍然無法做到的。

結合 AI 設計工具來輔助：

• Figma + Magician AI：可以生成基礎的 UI 設計稿，讓開發者不需要從零開始。
• Uizard：適合快速生成 App 版 UI，但需要手動調整細節。
• Relume：適合 網站 UI 設計，但對於 App 來說仍然不夠靈活。

5. 未來的發展方向

這次 BMI 計算器的開發只是個開始，接下來的計畫是：

(1) 優化 UI / UX，讓設計更具科技感：

• 透過 Figma 設計一個更有未來感的界面，而不是只靠 AI 自動生成的設計。
• 嘗試 3D UI 元素，讓介面更有科技感，而不是單純的數據顯示。

(2) 增加 AI 影像識別功能：

讓 AI 自動辨識食物熱量，而不只是計算 BMI，提供更完整的健康追蹤體驗。

(3) 開源這個工具，讓更多人參與改進：

讓程式碼公開，邀請開發者與設計師一起參與改進，結合人類設計師的創意與 AI 的運算能力，打造真正實用的健康管理工具。

七. 結論：AI 是開發者的助手，而不是取代者

這次的經驗讓我深刻體會到：

• AI 是很棒的「開發加速器」，但它無法取代人類的創意與美學判斷。
• UI 設計仍然需要人類設計師來完成，AI 只能當作輔助工具。
• 未來最好的方式，是讓 AI 幫助程式設計，而人類專注於 UX / UI，才能創造出真正好用的產品。

測試過 ChatGPT、Gemini、GROK 、Cursor之後，我發現：

1. 寫程式：AI 表現超棒，效率提升 5 倍
2. 設計 UI：AI 目前還做不到，需要人類設計師來調整

這次開發只是一個開始，接下來的目標是讓 BMI 計算器不只是數據計算，而是變成一個真正的 AI 健康管理助手！

如果你有更好的想法，或是對 AI 介面設計有興趣，歡迎一起討論！ 

相關文章：

網頁設計 新時代：如何使用 AI 設計網頁 圖片與影片

電商 網路開店：AI商品情境圖 及 AI模特兒 教學

LINE 官方帳號 行動官網 與 AI客服機器人 社群行銷 

如何使用全球熱門的 ChatGPT 提升行銷業績？

網頁設計　問與答：

SEO 及 廣告投放 問與答 https://des13.com/faq/seo.html

網站建置 報價相關　 https://des13.com/faq/quote.html

網站建置 技術相關　 https://des13.com/faq/webtech.html

購物網站 網路開店    https://des13.com/faq/e-commerce.html

B2B形象官網建置　  https://des13.com/faq/b2b.html

網站升級維護　 https://des13.com/faq/upgrade.html

推薦閱讀：omo跨境品牌電子商務購物網站 全後台模組化形象官網

簡易電子書下載：一頁式網頁設計電子書

如果您喜歡我們的文章，歡迎分享！也歡迎查看我們的其他文章。如果有任何疑問也歡迎加line和我們聯絡

全後台模組化形象官網，符合各式商業模式與需求，請參考：https://des13.com/service/rwd.html

Written by Ring
作者：益盛科技 專案經理
通過Google Ads-Measurement Assessment
15年 網站專案管理及人員管理實務經驗。 
具網站美編企劃繪製能力
具多媒體網頁設計與 RWD設計之實務經驗