用 AI 打造你的第一個簡單 App：非工程師的實作指南
沒有工程背景也能做出可用的 App。本文用一個記帳小工具為例，示範如何用 AI 從定義功能、選擇工具、產出程式碼、測試到讓手機能安裝使用，並整理新手最容易踩的坑。
非工程師做 App 的正確心態
很多人一想到做 App，腦中浮現的是 App Store 上那些功能繁複的產品，於是還沒開始就放棄了。但實際上，多數人真正需要的第一個 App 都很簡單：一個記帳工具、一份習慣追蹤表、一個計算機、或是一個給小團體用的活動報名頁。這些用 AI 輔助，非工程師也能在幾個小時內做出可用的版本。
關鍵心態有三個。第一，先做能動的最小版本，不要一開始就想做齊所有功能。第二，接受第一版一定不完美，重點是能用，之後再慢慢加。第三，把 AI 當成一個很有耐心的助教，你負責描述要什麼與判斷對不對，它負責產出與修正。
本文會以一個「個人記帳 App」為貫穿範例，帶你走完整個流程。
先搞懂 App 的三種形式
非工程師常混淆的第一件事，是 App 有不同形式，難度差很多。
| 形式 | 說明 | 難度 | 是否需上架 |
|---|---|---|---|
| 網頁 App | 用瀏覽器打開的網站型應用 | 最低 | 否，給網址即可 |
| PWA | 可加到手機主畫面的網頁 App | 低 | 否，但體驗接近原生 |
| 原生 App | 需上架 App Store 或 Google Play | 高 | 是，需開發者帳號 |
對新手來說，強烈建議從網頁 App 或 PWA 開始。它們不需要昂貴的開發者帳號、不需要通過審核，做完給網址就能用，還能加到手機主畫面像原生 App 一樣。真的有需要再往原生 App 發展。本文的範例就以網頁 App 為主。
第一步：把功能寫成一張清單
以記帳 App 為例，先不要想介面長怎樣，而是先問：這個 App 要幫使用者做到哪幾件事。把它拆成一條一條的功能。
以下是一份適合當第一版的功能清單：可以新增一筆支出，每筆包含金額、分類與日期；可以看到所有支出的列表；可以看到本月總支出；資料要能保存，關掉再打開不會消失。
這份清單就是你的規格。刻意不放的功能包括：多帳戶、圖表分析、雲端同步、匯出報表。這些都是第二版以後才加的。清單越聚焦，AI 產出的第一版越容易成功。
第二步：選工具並描述需求
適合非工程師做網頁 App 的 AI 工具，主要是能即時預覽的建站平台，例如 Bolt、Lovable、v0，或是用 Claude、ChatGPT 產出單一 HTML 檔。對第一個 App 來說，單一 HTML 檔其實非常夠用，因為它把介面、邏輯與資料儲存都放在一個檔案裡，好保存也好分享。
接著把功能清單寫成提示詞。範例如下：
「請用單一 HTML 檔做一個個人記帳網頁 App，包含 CSS 與 JavaScript，不使用外部框架。功能需求：一，頂部有輸入區，可填入金額、選擇分類（餐飲、交通、購物、其他）、選擇日期，按新增後加入紀錄。二，下方顯示所有紀錄的列表，每筆可刪除。三，最上方顯示本月總支出金額。四，資料請用瀏覽器的 localStorage 儲存，關閉頁面再打開資料仍在。介面請簡潔清爽，金額用新台幣顯示，並確保在手機上好操作。」
這裡有個關鍵字很重要，就是 localStorage。它是瀏覽器內建的儲存空間，能讓資料留在使用者的裝置上，不需要伺服器或資料庫。對新手第一個 App 來說，這是最省事的做法。
第三步：測試每一項功能
拿到成品後，不要只看畫面漂不漂亮，而要逐項對照功能清單測試。這是新手最容易略過、卻最重要的一步。
依照清單一項一項驗證：新增一筆支出，看列表有沒有出現；再新增幾筆不同分類，看總金額對不對；刪除一筆，看數字有沒有跟著減少；最關鍵的一步，把頁面關掉重開，確認資料還在。如果任何一項不對，就把具體現象回報給 AI，例如「刪除一筆後，本月總支出的數字沒有更新」，讓它針對問題修正。
這種對照清單逐項測試的習慣，就是專業開發流程裡的驗收測試，只是你用白話在做。
第四步：讓手機能安裝使用
網頁 App 做好後，部署方式和個人網站一樣，把檔案拖到 Netlify 或 Vercel，就會得到一個網址。用手機瀏覽器打開這個網址後，可以透過瀏覽器選單的「加入主畫面」功能，把它變成手機桌面上的一個圖示，點開就像原生 App。
如果你希望它更像獨立 App，例如有自己的圖示、能離線使用，可以請 AI 幫你「把這個網頁改造成 PWA，加上 manifest 與 service worker，讓它可以加到主畫面並支援離線」。這一步是進階需求，第一版不做也完全沒問題。
常見錯誤與排除方法
第一個常見錯誤是資料一關就不見。原因通常是沒有使用 localStorage，或是 AI 用了會在重整後清空的暫存變數。解法是明確要求用 localStorage 儲存，並實際測試關閉重開。
第二個錯誤是功能想做太多，導致第一版一直做不出來。解法是狠心刪減，只留最核心的三到四個功能，先讓它能動。
第三個錯誤是把記帳這類含金錢的資料當成安全無虞。純瀏覽器儲存的資料只在該裝置、該瀏覽器上，換裝置或清除瀏覽器資料就會消失，這對個人小工具沒問題，但別把它當成正式的財務系統，也不要存入他人的個資。
第四個錯誤是遇到問題只說「壞了」。AI 無法讀你的心，回報時要描述具體操作與現象，例如「輸入 100 按新增後，列表出現空白列，金額沒顯示」，這樣才修得動。
從第一版到下一步
完成第一個能動的記帳 App 後，你已經掌握了做 App 的核心流程：拆功能、寫提示詞、逐項測試、部署上線。接下來可以逐步加功能，例如加上圓餅圖看各分類佔比、加上月份切換、或是把資料改成雲端儲存讓多裝置同步。每加一個功能，就重複同一套流程：描述、產出、測試、部署。你會發現，做 App 對非工程師來說，門檻已經從學語法變成了想清楚要解決什麼問題。
常見問題
非工程師做的第一個 App 應該選哪種形式？
建議從網頁 App 或 PWA 開始，因為不需要開發者帳號、不必通過商店審核，做完給網址就能用，還能加到手機主畫面像原生 App。等真正有需求再考慮上架 App Store 或 Google Play 的原生 App。
資料為什麼一關 App 就不見了？
多半是因為沒有使用瀏覽器的 localStorage，資料只存在暫時的變數裡，頁面重整就清空。解法是在提示詞中明確要求用 localStorage 儲存資料，並實際測試關閉再打開資料是否仍在。
第一版 App 該放多少功能？
越少越好，聚焦在三到四個核心功能，先讓它能動。以記帳 App 為例，第一版只要能新增支出、看列表、看總額、資料能保存即可。圖表、雲端同步、匯出等功能都留到第二版以後再加。
用瀏覽器儲存資料安全嗎？可以拿來記帳嗎？
用 localStorage 儲存的資料只留在該裝置與該瀏覽器上，適合個人小工具，但換裝置或清除瀏覽器資料就會消失。可以拿來做個人記帳，但別當成正式財務系統，也不要在裡面存放他人的個資或敏感資訊。
遇到功能故障時要怎麼跟 AI 反映才有效？
描述具體的操作步驟與看到的現象，而不是只說壞了。例如輸入 100 按新增後列表出現空白列、金額沒顯示，這種明確描述能讓 AI 準確定位問題並修正。一次只回報並修正一個問題效果最好。