Vibe Coding 教學：不會寫程式，用四句話做出記帳小工具的完整過程

想試 vibe coding，卡在不知道第一句話該怎麼講。這篇是我實際做一次的完整紀錄，每一句話的原文、等了多久、哪裡出錯，都照實寫。

要做的東西是一個自己用的記帳網頁。日期是 2026 年 10 月 14 日，工具是 Claude Code，模型用最小的 Haiku。

Vibe coding 是什麼，在Vibe Coding 是什麼。

開始之前

你需要兩樣東西：一個能幫你寫程式的 AI 工具，和一個空的資料夾。

工具我用的是 Claude Code，它要付費方案才能用。怎麼裝在安裝教學，第一次怎麼操作在Claude Code 教學。其他工具有哪些、各自免費給多少，在Vibe Coding 工具怎麼選。

有一件事要先交代。我是用指令一次送一句話的方式下的，每一句是獨立的一次呼叫，它不記得上一句。你平常會是打開 Claude Code 的視窗，在同一段對話裡一句一句講，它記得前面講過什麼，所以你的句子可以比我的短。

第一步：先叫它講計畫，不要動手

我的第一句話：

我不會寫程式。我想要一個自己用的記帳網頁：可以新增一筆支出（日期、項目、金額、分類），列出這個月的每一筆，顯示這個月總共花多少、各分類花多少，打錯的可以刪掉。資料存在我的瀏覽器裡就好，不要帳號、不要連網。先不要寫程式，用白話告訴我你打算怎麼做、會產生哪些檔案、有哪些事情需要我先決定。請用繁體中文回答。

15 秒後它回了一份計畫。做法是一個單一的網頁檔，資料存在瀏覽器內建的儲存空間。畫面分三塊：新增的表單、這個月的清單、統計。

然後它問了我五件事：分類要哪幾個、要不要能修改已經記的帳、幣別、日期要顯示成什麼格式、要不要匯出備份。

這五個問題就是這一步的價值。我原本只想到「記帳」，沒想過分類有哪些、打錯是要改還是刪。直接叫它做的話，這些它會自己決定，做出來才發現不是我要的。

Claude Code 另外有一個計畫模式，按 Shift + Tab 可以切過去，做的是同一件事。我這次是直接用講的。

第二步：把決定講清楚，再叫它做

我把那五件事決定好，寫進第二句話。因為它不記得上一句，所以我把需求重講了一遍：

幫我做一個自己用的記帳網頁，單一檔案 index.html，資料存在瀏覽器裡，不要帳號、不要連網。功能：新增一筆支出（日期、項目、金額、分類）、列出這個月的每一筆、顯示這個月總共花多少和各分類花多少、打錯的可以刪掉、可以切換月份看以前的。我的決定：分類固定五個，餐飲、交通、購物、娛樂、其他。不用編輯功能。金額是新台幣，只收正整數。日期顯示成 2026/10/14 這種格式，預設今天。先不要匯出功能。手機上也要好按。請用繁體中文回答。

36 秒後，資料夾裡多了一個 577 行的 index.html。

用瀏覽器打開，最上面是月份和左右切換的按鈕，下面是這個月的總額和各分類的小計，再來是新增的表單，最下面是清單。長相是紫色漸層的底，跟我先前做分帳網頁時它給的風格一樣。

第三步：自己試，而且要試怪的

這一步最花時間，也最不能省。

我先照正常的用法試。記了三筆：午餐 120、捷運 35、咖啡 85。總額顯示 240，三個分類的小計都對，清單照日期從新到舊排。刪掉一筆，總額跟著變。把網頁重新整理，資料還在。切到下個月是空的，切回來資料還在。

到這裡都沒問題。如果我只試到這裡，會以為它做好了。

接著我試不正常的輸入，找到三個錯。

第一個，金額打 12.5。我跟它說過只收正整數，結果它沒有提醒，直接存成 12。打負數它倒是有擋。

第二個，我在看 10 月的畫面，新增一筆日期是 9 月 30 日的支出。按下去之後畫面完全沒變，總額也沒變。我以為沒存到。切到 9 月才看到它在那裡。

第三個是意外發現的。我測的時候是 10 月 14 日凌晨兩點多，表單上的日期預設卻是 10 月 13 日。它拿的是國際標準時間的日期，台灣比那個時間早八小時，所以每天半夜到早上八點之間，它的「今天」會是昨天。白天測不會發現。

三個錯有一個共同點：正常用的時候都不會出現。別人遇過更嚴重的，像是 AI 把正式的資料庫刪掉，我整理在Vibe Coding 翻車案例與缺點。

第四步：把看到的現象原樣告訴它

我沒有去猜原因，只講我做了什麼、看到什麼、我要什麼：

index.html 的記帳網頁我試過了，有三個問題請修。一、現在是 10 月 14 日凌晨兩點多，日期欄預設卻是 10 月 13 日，我要它預設是我這裡的今天。二、金額我打 12.5，它沒有提醒就存成 12，請改成擋下來，提醒我金額要是整數。三、我在看 10 月的時候新增一筆 9 月 30 日的支出，畫面完全沒變化，我以為沒存到，後來切到 9 月才看到；請在新增之後自動切到那一筆所在的月份。請用繁體中文回答。

32 秒後它說三個都修好了，檔案變成 590 行。

它說修好不算數，我把剛剛的測試整套再跑一次。日期預設變成 10 月 14 日。12.5 會跳出提醒。新增 9 月的支出，畫面自動切到 9 月。原本就正常的那些，新增、刪除、重新整理後資料還在，也都沒被改壞。

最後這一項很重要。修東西的時候，它有可能把原本好的地方弄壞，所以每次改完都要從頭試。

第五步：問它，我的東西放在哪

東西能用了，但我其實不知道我記的帳存在哪裡。所以最後一句是問它：

看一下這個資料夾裡的 index.html（我的記帳網頁），不要改任何東西。用白話回答我三件事：我記的帳實際存在哪裡？換一台電腦、換瀏覽器，或是清除瀏覽器資料，會發生什麼事？我現在要怎麼備份？請用繁體中文、簡短回答。

16 秒後它的回答很直接。資料只存在我現在用的這個瀏覽器裡。換電腦、換瀏覽器都看不到。清除瀏覽器資料的話，帳就全部不見。目前沒有備份的功能。

它自己的評語是這樣存很脆弱，建議我加一個匯出的按鈕。

這件事在第一步它就問過我要不要匯出，我回答先不要。到這裡我才知道那個決定的代價。真的要拿來記帳的話，下一句就該請它加匯出。這一步我沒有做。

這一次的帳

四句話，等待的時間加起來 99 秒：15、36、32、16。

兩個版本的檔案，第一版 577 行，修完 590 行。我每一版都另外存了一份，改壞了可以拿回上一版。

兩個版本我都放在站上，你可以自己打開試：修好的版本和有錯的第一版。在第一版裡金額打 12.5，或是把日期改成上個月再新增一筆，就會看到我說的情況。日期預設成昨天那個錯，要在台灣時間半夜到早上八點之間打開才看得到。你記的資料只會存在你自己的瀏覽器裡。

三個錯，全部是我自己試出來的，沒有一個是它主動說的。

花最多時間的不是等它寫，是我在瀏覽器裡一項一項試。

這篇沒有測的

真的手機。我是把瀏覽器視窗縮到手機的寬度來看，沒有拿手機實際按。

匯出和備份。它建議了，我沒有做。

放上網路給別人用。這個檔只在我的電腦裡。

長期使用。我只記了幾筆測試用的資料，沒有真的用它記一個月的帳。

比較大的模型。我用最小的 Haiku 是為了省額度，換大的模型，第一版的錯可能比較少，也可能不一樣。