我要在我們開始之前非常清楚一件事。
保留這句 :)
我不是開發者。我從來都不是開發者。我沒有電腦科學學位。我沒有參加過任何程式設計訓練營。我無法看懂大多數程式碼並告訴你它在做什麼。
但上個週末，我成功將一個能運作的網頁應用程式發佈到網路上。真實的使用者註冊了。真實的資料被儲存了。真實的功能正常運作了。
我完全用 Claude Code 在兩天內建構了整個東西。而我將告訴你這個經歷的真實樣貌。不是經過精心編排的版本。而是混亂、令人沮喪、卻又充滿突破的現實。
因為網路上每個「我用 AI 打造了一個 app」的故事聽起來都毫不費力。它一點都不輕鬆。但它非常、非常有可能做到。
週六早上：點子
我想建立一個簡單的工具。一個內容行事曆，讓你可以跨平台規劃你的貼文、在日子之間拖放它們，並標記為已發布。沒什麼革命性的。但這是我自己的工作流程中實際需要的東西。
我在週六早上 9 點第一次在終端機打開 Claude Code。
到了 9:15，我已經犯了第一個錯誤。
錯誤 #1：沒有計畫就開始
我給 Claude Code 的第一個提示是：
幫我建立一個內容行事曆應用程式
Claude 產生了一堆檔案。畫面上出現了某個東西。它看起來像是一個由從未見過行事曆的人設計的內容行事曆。
這就是 90% 的人放棄的地方。 他們輸入模糊的提示，得到模糊的結果，然後斷定「氛圍編碼」（vibe coding）行不通。
問題不在 Claude。問題在我。我沒給它任何可以著手的方向。
我應該做的是：
我應該先從計劃模式（Plan Mode）開始。在 Claude Code 中按下 Shift + Tab，從執行模式（Act Mode）切換到計劃模式。在計劃模式下，Claude 會在建立之前先思考。它會問問題。它會規劃出架構。它會向你展示它計劃要建立的東西。
我回去正確地做了這件事：
我想建立一個內容行事曆網頁應用程式。在寫任何程式碼之前，我們先來規劃。
這個應用程式需要：
- 一個每週檢視，有 7 個欄位（週一到週日）
- 能夠新增帶有標題、平台（Twitter、LinkedIn、Instagram）和狀態（草稿、已排程、已發布）的貼文
- 拖放功能，在日子之間移動貼文
- 使用 Tailwind CSS 的簡單、乾淨設計
- 資料儲存在本地資料庫中，以便在會話之間持久保存
我們應該使用什麼技術棧？資料夾結構是什麼？在建立任何東西之前，先帶我了解架構。
Claude 回傳了一個詳細的計劃。Next.js 作為框架。SQLite 作為資料庫。Tailwind 作為樣式。一個乾淨的資料夾結構，逐個檔案列出。
學到的教訓：永遠從計劃模式開始。永遠詳細描述你想要的東西。花 5 分鐘規劃可以節省你 2 小時的重建時間。
錯誤 #2：試圖一次建立所有東西
計劃之後，我很興奮。我告訴 Claude 一次把整個東西建立起來。
結果是一團糟。有些功能正常運作。其他則是半成品。拖放功能壞了。資料庫沒有正確儲存。我完全不知道從哪裡開始修。
我應該做的是：
一次建立一個功能。這是「氛圍編碼」的金科玉律。
我重新開始，按照這個順序：
會話 1：只有基本的頁面佈局。七個欄位。沒有任何功能。
會話 2：新增建立貼文的能力（只是一個簡單的表單）。
會話 3：顯示已儲存的貼文在正確的日期欄位中。
會話 4：新增拖放功能。
會話 5：新增狀態功能（草稿/已排程/已發布）。
會話 6：讓它看起來好看。
每個功能都有自己的對話。 新的上下文。清楚的任務。乾淨的結果。
當我一次建立一個功能時，每個功能都完美運作。當我試圖一次建立所有東西時，什麼都無法運作。
學到的教訓：每個功能一個對話。永遠不要在同一個 Claude Code 會話中混合多個功能。
錯誤 #3：沒有建立 CLAUDE.md 檔案
到了週六下午，我已經有了一個能運作的基本佈局，我很興奮。但我一直遇到同樣的問題：
Claude 不斷增加不必要的複雜性。它會建立複雜的錯誤處理系統，而我只要一個簡單的 try-catch。它會加入動畫函式庫，而我只要一個乾淨的過渡效果。當我要求一個小改變時，它會重組我整個資料夾系統。
我一直在重複修正同樣的事情。
然後我回想起讀過關於 CLAUDE.md 的資訊。
我在專案根目錄建立了一個檔案：
CLAUDE.md
專案規則
- 這是一個簡單的內容行事曆。保持一切極簡。
- 使用 Next.js 14 搭配 App Router
- 使用 Tailwind CSS 進行所有樣式設定。不使用其他 CSS 框架。
- 使用 SQLite 搭配 Prisma ORM 作為資料庫
- 保持簡單。不要不必要的抽象化或設計模式。
- 當我說「讓它看起來好看」時，我的意思是：乾淨的間距、可讀的字型、微妙的懸停效果、圓角
- 未經我同意，永遠不要新增依賴套件
- 在重構任何現有程式碼之前先問我
程式碼風格
- 簡單、可讀的程式碼。初學者應該能夠理解。
- 清楚的變數名稱。不要縮寫。
- 只在非顯而易見的邏輯處加上註解
建立這個檔案之後，體驗戲劇性地改變了。Claude 不再過度設計。它不再隨意加入函式庫。它不再重組我沒有要求它觸碰的東西。
每次 Claude 做了我不想要的事，我就新增一條規則到 CLAUDE.md。 到了週日晚上，這個檔案已經有 30 多條規則，而 Claude 完美地遵循了所有規則。
學到的教訓：在第一天就建立 CLAUDE.md。不斷更新它。它是 Claude Code 中唯一最強大的工具。
錯誤 #4：沒有使用螢幕截圖
週六傍晚。應用程式功能上能運作，但看起來很醜。我輸入了：
讓設計更現代化、更專業
Claude 改變了一些東西。它們看起來不一樣了。並非更好，只是不一樣。
我試著用文字描述視覺問題。這效率極低。
相反地，我開始拍攝我喜愛的網站設計的螢幕截圖。我直接把它們貼到 Claude Code 中：
[一個乾淨行事曆 UI 的螢幕截圖]
我希望我的行事曆看起來像這樣。具體來說：
- 背景用這個確切的灰色色調
- 每個貼文用這種圓角卡片
- 元素之間的這個間距量
- 活躍日期以藍色高亮顯示的方式
Claude 幾乎完美地匹配了設計。第一次就成功。
然後當某些東西看起來不對時，我不再描述它，而是拍下螢幕截圖，圈出問題區域，貼進去，然後說「這個間距不對」或「這個字型太小」。
學到的教訓：對於視覺反饋，螢幕截圖比文字好 10 倍。永遠貼上圖片，而不是描述你看到的東西。
週日：一切整合在一起
到了週日早上，我有一個能運作的應用程式，具有乾淨的設計、拖放功能、持久化資料和一個正常運作的資料庫。我在不完全理解大部分程式碼的情況下建立了整個東西。
但它只存在於我的筆電上。是時候部署了。
錯誤 #5：害怕部署
部署聽起來很可怕。伺服器。網域。DNS。設定檔。
我差點停下來。我差點決定「能在本地執行就夠好了」。
但我撐過去了，並問 Claude：
我想把這個應用程式部署到網路上讓它上線。我想用 Vercel，因為我聽說它最簡單。一步步帶我走過確切的步驟。
Claude 給了我七個步驟：
- 將程式碼推送到 GitHub（Claude 幫我設定 Git）
- 註冊 Vercel（免費）
- 將 Vercel 連接到我的 GitHub 儲存庫
- 設定資料庫的環境變數
- 點擊部署
- 等待 90 秒
- 取得我的線上網址
我照著步驟做。三分鐘後我的應用程式就上線了。我把網址發給五個人。他們打開了。它正常運作。
學到的教訓：部署不可怕。它只是一個檢查清單。Claude 會帶你走過每一步。
我希望在開始前就知道的 12 條規則
我在兩天內學到的一切，濃縮成規則：
規則 1： 每次都在計劃模式開始。Shift + Tab。先思考再建立。
規則 2： 每個功能一個對話。新的上下文是更好的上下文。
規則 3： 在第一天建立 CLAUDE.md。每次修正都變成永久規則。
規則 4： 對每個視覺問題使用螢幕截圖。圈出問題。直接貼上。
規則 5： 先建立最簡單的版本。只有在簡單版本能運作之後才增加複雜性。
規則 6： 詳細描述你想要的東西。提示越具體，輸出越好。「建立一個登入頁面」得到垃圾。「建立一個帶有電子郵件和密碼欄位的登入頁面，下方有一個『忘記密碼』連結，一個藍色提交按鈕，成功時重新導向到 /dashboard」會得到你要求的確切結果。
規則 7： 當對話變長時使用 /compact。當上下文填滿時，Claude 的品質會下降。
規則 8： 在每個功能運作後提交到 Git。Claude 可以幫你做這件事。如果東西壞了，你可以回滾。
規則 9： 當東西壞了時，複製錯誤訊息並貼到 Claude 中。說「在修正任何東西之前，先診斷根本原因。」Claude 幾乎總是立即找到問題。
規則 10： 不要試圖理解每一行程式碼。理解每個檔案做什麼以及它們如何連接。這足以有效地指導 Claude。
規則 11： 當 Claude 陷入循環，反覆修復同一件事時，停下來。開始一個新的對話。只貼上相關的檔案和問題的清楚描述。
規則 12： 在它完美之前就發布。第一版不需要漂亮。它需要能運作。你總是可以讓它在第二版變得更好。
那個週末之後我建立了什麼
那是三週前的事了。從那時起，我建立了：
- 一個客戶入職入口網站，具有登入和檔案上傳功能
- 一個追蹤我內容指標的內部儀表板
- 一個簡單的發票產生器，從表單建立 PDF 發票
- 一個書籤管理器，按主題儲存和整理連結
我仍然無法閱讀大多數程式碼。我仍然不理解檔案中 80% 的內容在做什麼。但我可以清楚描述我想要的東西，讓 Claude 建立它。我可以透過向 Claude 顯示錯誤來除錯問題。我可以將能運作的產品部署到網路上。
這就是「氛圍編碼」 (vibe coding)。你不是程式設計師。你是產品經理。Claude 是程式設計師。你的工作是知道要建立什麼，並清楚地傳達它。
大多數人會繼續告訴自己，在他們能建立任何東西之前，他們需要先學會寫程式。
而那些在這個週末打開終端機的人，會在週一早上之前擁有一個能運作的應用程式。我知道，因為那正是發生在我身上的事。
追蹤我 @eng_khairallah1 以獲得更多 AI 課程、工具和工作流程。每週新內容。
希望你覺得這有用，Khairallah ❤️
