Vibe Coding 重要的準備工作：架構流程圖

在真正動手「詠唱」程式碼之前，還有一個絕對不能跳過的步驟，就是「架構與流程規劃」！這篇文章將介紹如何將腦中的「感覺 ( Vibe )」具象化為 AI 看得懂的邏輯，這也是讓 Vibe Coding 從「碰運氣」變成「精準開發」的關鍵。

更多參考：Vibe Coding 全方位開發導讀

快速導覽：

• 為什麼要規劃網站或應用程式的架構流程？
• 網站或應用程式的基本架構流程
• 規劃並繪製流程圖 ( Flowchart )
• 繪製 Wireframe ( 線框圖 )
• 讓 AI 產生第一版 Prototype
• Vibe Coding 的黃金法則：先求有，再求好 ( MVP )

為什麼要規劃網站或應用程式的架構流程？

在 Vibe Coding 的世界裡，AI 通常扮演工程師或設計師，而開發者則是擔任產品經理 ( PM ) 兼架構師，因此就像在進行一個開發會議一般，如果只告訴工程師「做一個好用的東西」，或只告訴設計師「設計一個好看的版面」，工程師或設計師所完成的東西一定不如預期。

進行 Vibe Coding 開發網站或應用程式之前，也必須要像「真人開發」先進行架構流程的規劃，最主要有三個理由：

• 減少 AI 的「幻覺」與錯誤：

  如果沒有清楚的指令，AI 就會自己進行「腦補」的動作，因此透過明確的流程圖，AI 就能鎖定範圍，大幅降低寫出錯誤邏輯的機率。

• 節省 Token 與時間：

  每個 AI 都有一個「記性上限」，這被稱為上下文視窗，而 Token 就是 AI 處理文字時的基本計算單位，決定了它能讀多少資料以及說多少話，與 AI 溝通過程中，除了來來回回非常耗時，常常會消耗大量的 Token，因此如果一開始先規劃好流程架構，也可省下寶貴的時間和 AI 的算力。

• 將感覺具象化：

  感覺是很抽象的，但流程圖是具體的，透過架構流程的規劃，可以檢視自己的想法是否邏輯通順，確保使用者體驗 ( UX ) 和想像一般順暢。

網站或應用程式的基本架構流程

雖然 Vibe Coding 不需要去鑽研複雜的微服務或分散式系統，也不用親自架設伺服器，但仍建議在提示詞 ( Prompt ) 中加入一些專業用語，例如「使用者在前端點擊後，後端要運算，並把資料存入資料庫」，如此一來，AI 也能更清楚知道需求，不過對於 Vibe Coding 新手這些專有名詞會有些難以理解，因此只要理解最經典的 「前端 - 後端 - 資料庫」 鐵三角概念，就能開始用比較專業的方式與 AI 溝通。

下方列出這些概念的簡單案例和提示詞：

• 前端 ( Frontend )：使用者看到的地方。

  • 例如：網頁的按鈕、表單、手機 App 的畫面。
  • AI 提示關鍵字：
    • UI 介面：排版位置 ( Layout )、元件 ( Component )、配色 ( Color Scheme )、RWD 響應式設計。
    • 使用者動作：點擊 ( Click )、拖曳 ( Drag )、捲動 ( Scroll )、輸入 ( Input )。
    • 常見元件：清單 ( List )、表單 ( Form )、下拉選單 ( Dropdown )、導覽列 ( Navbar )、彈出視窗 ( Modal )。

• 後端 ( Backend )：負責處理邏輯的大腦。

  • 例如：判斷帳號密碼對不對、計算購物車總金額。
  • AI 提示關鍵字：API 串接、Python 邏輯、資料處理。

• 資料庫 ( Database )：負責記憶的倉庫。

  • 例如：儲存使用者的貼文、訂單紀錄、會員資料。
  • AI 提示關鍵字：資料欄位 ( Schema )、儲存、讀取。

規劃並繪製流程圖 ( Flowchart )

流程圖 ( Flowchart ) 是與 AI 溝通最高效的語言，由於文字描述容易有歧義 ( 特別是中文 )，但「流程圖」邏輯和架構分明，可以一目瞭然知道需求，在 AI 的時代，強烈建議使用 Mermaid 語法或文字流程，甚至用手繪的流程圖與 AI 溝通，因為 AI 可以直接讀取文字或圖片並理解邏輯。

如何開始規劃使用者流程 ( User Flow ) 呢？第一步要先想像「使用者從打開應用程式，一直到到完成任務的每個步奏」，並嘗試用口語化的方式寫下每個步驟 ( 類似講故事 )，例如：

• 第一步：使用者進入首頁，之後判斷使用者是否已登入？如果登入就顯示待辦清單，如果沒有就顯示登入畫面。
• 第二步：使用者登入後，輸入事項並點擊「新增」，系統將資料寫入資料庫，欄位包含：內容和時間。
• 第三部：寫入完成後，畫面更新，顯示新的事項。

除了撰寫流程，也可以嘗試將流程繪製成「流程圖」，讓整體過程更清晰，繪製開發流程圖有一些標準形狀，透過形狀進行闡述，邏輯就能更清晰，AI 也更能精準理解你的意圖，下方列出開發流程的形狀含義：

• 橢圓形 ( Start/End )：代表流程的開始與結束。
• 矩形 ( Process )：代表一般的處理步驟或是動作。
• 菱形 ( Decision )：代表判斷，通常會有「是」與「否」兩條路徑。
• 平行四邊形 ( Input/Output )：代表資料的輸入或輸出。
• 圓柱體 ( Database )：代表資料庫的讀取或寫入。
• 帶雙邊線的矩形 ( Predefined Process )：引用另一個已經畫好的流程圖。

了解流程圖的形狀含義後，可以透過下列幾種方式繪製流程圖：

• 手會流程圖：

  如果手邊有紙和筆，透過簡單的線條、箭頭和說明文字，就能完成流程圖的設計，這也是在開發會議中，最常見的做法 ( 直接把流程畫在會議室的白板上 )。

  

• 使用 Canva 或其他工具繪製：

  推薦工具：Canva、diagrams

  如果手邊 Canva 或其他繪製流程圖的工具，也可以直接在電腦中繪製流程圖，而且還可以將流程圖分享設定成協作狀態，讓參與的人都可以一起編輯這份流程圖，下圖使用 Canva 搜尋流程圖範本。

  

• 使用 Mermaid 流程圖語法 ( 最適合 Vibe Coding )：

  Mermaid 是一種可以描述圖表的簡單語法，撰寫後可以讓瀏覽器即時渲染出圖表，也是最適合 AI 讀取流程圖的方式，簡單語法說明如下：

  推薦工具：Mermaid線上編輯器、mermaid.ai

  流程圖方向：

  語法	說明
  graph、flowchart	告訴 Mermaid 這是一張流程圖。
  TD	方向是由上往下 ( Top-Down )。
  LR	方向是由左往右 (Left-Right)。

  節點形狀：

  形狀類型	語法格式	說明
  矩形 ( 預設 )	id[文字]	代表一般的處理步驟 ( Process )
  圓角矩形	id(文字)	常用於開始或結束 (Start/End)
  圓形	id((文字))	代表連接點或標記
  菱形	id{文字}	代表判斷或決策 (Decision)
  平行四邊形	id[/文字/]	代表輸入/輸出 (Input/Output)

  連線與箭頭：

  箭頭類型	語法格式
  實線箭頭	A --> B
  實線無箭頭	A --- B
  帶文字的連線	A -- 文字 --> B 或 A -->|文字| B
  虛線箭頭	A -.-> B

  Mermaid 語法裡的「縮排」不影響功能，但建議縮排，而中括號 [] 裡面的「空白」會呈現空白符號的空間，如果使用 Mermaid 語法繪製剛剛的流程，就會是下面的流程語法：

  graph TD
      A[進入首頁] --> B{是否登入?}
      B -- 是 --> C[顯示待辦清單]
      B -- 否 --> D[登入頁面]
      D --> C
      C --> E[輸入事項並點擊新增]
      E --> F[儲存至資料庫]
      F --> C
  

  如果有這段流程語法，就可以讓 AI 繪製流程圖或根據流程圖進行 Vibe Coding。

  

繪製 Wireframe ( 線框圖 )

AI 雖然可以透過流程圖理解「邏輯架構」，但它不知道開發者心中的排版規劃究竟是如何，例如「按鈕在右下角」是什麼樣的右下角呢？為了解決想法不一致的狀況，通常在開發流程中，會加入繪製 Wireframe 的步驟，讓產品經理 ( 使用者 ) 和工程師 ( AI ) 對於「空間規劃」的想法接近。

什麼是 Wireframe 呢？在設計領域中，Wireframe ( 線框圖/線框稿 ) 常被比喻為建築的「藍圖」或人的「骨架」，是在正式開始視覺設計 ( 如顏色、圖片、字體 ) 之前，用來勾勒網頁或 App 介面架構與功能佈局的草圖。

只要把握下列的核心特點，就能繪製出理想的 Wireframe：

• 黑白灰階：Wireframe 通常不使用顏色，為了不干擾對功能的判斷，只用線框、灰色區塊和簡單符號。
• 不用注重視覺設計：不用專注視覺設計，只需強調功能位置，例如「哪裡放按鈕」、「哪裡放標題」，而非「好不好看」。
• 專注於邏輯：標示清楚頁面的資訊層級 ( 什麼東西最重要 ) 和功能操作 ( 按下去會發生什麼 )。

讓 AI 產生第一版 Prototype

當已經規劃了整體架構流程、繪製了邏輯流程圖以及繪製畫面草圖，就可以開始進行 Vibe Coding 的「第一次迭代」，透過提示詞 Prompt 的組合：

我有一個網頁的規劃，請跟我一起協作：
- 目標：待辦事項
- 功能：使用前端技術建構網頁，搭配 firebase realtime 資料庫
- Mermaid 流程邏輯：
graph TD
    A[進入首頁] --> B{是否登入?}
    B -- 是 --> C[顯示待辦清單]
    B -- 否 --> D[登入頁面]
    D --> C
    C --> E[輸入事項並點擊新增]
    E --> F[儲存至資料庫]
    F --> C
- 畫面配置：參考附圖
- 畫面風格：使用一些漂亮的套件讓畫面更好看

輸入完成後，AI 就會根據你的架構和流程，產生對應的畫面內容，從這個步驟開始，就不再是憑空想像，而是在一個具體的基礎上進行雕塑！

小提醒，通常 Vibe Coding 第一版只有 60 分 ( 看起來免強可動 )，接著就可以開始用調整細節，讓整體更完善。

Vibe Coding 的黃金法則：先求有，再求好 ( MVP )

軟體工程有一個概念叫 MVP ( Minimum Viable Product，最小可行性產品 )，意思就是：「先做出一個能動、能解決核心問題的版本」，不要一開始就想做會員註冊、忘記密碼、Email 通知、社群分享，例如上述的例子，當務之急要先專注在「新增待辦事項」和「刪除待辦事項」這兩個核心功能，其他的花俏功能，等核心功能跑起來了，再慢慢用 Vibe Coding 的方式加上去。這能讓你保持開發的熱情，避免因為程式碼太複雜而卡關。

小結

Vibe Coding 雖然強調「感覺」與「直覺」，但要充分發揮這份直覺，仍然需要有清晰的邏輯，雖然 Vibe Coding 的過程中，彷彿在追求即興演奏的快感，但有了基本的樂譜 ( 邏輯、架構、版面規劃 )，AI 這位伴奏者才能精準地跟上節奏，當這些準備工作完成，就可以真正開始從零開始打造第一個 Vibe Coding 專案！

延伸閱讀

Vibe Coding 的重點都不在於「寫程式」，而是為了配合程式的各種「準備工作」，下方列出 Vibe Coding 相關的教學，透過一系列的教學，就更能掌握正確且順暢的開發流程:

• 認識 Vibe Coding：程式不再是拼邏輯，而是拼「感覺」
• Vibe Coding 新手入門：從藍圖規劃到 AI 開發的思維轉型
• Vibe Coding 重要的準備工作：架構流程圖
• Vibe Coding 網頁必備知識：開發者的「溝通工具箱」
• Vibe Coding Python 必備知識：AI 與 Colab 開啟程式直覺
• Vibe Coding 固定網頁樣式：解決樣式不一致的惱人問題
• Vibe Coding 圖片處理心法：從雲端空間到 Base64 的完美配置
• Vibe Coding 玩家必備的 SVG 進階操作指南
• Vibe Coding 字體指南：用文字風格定義網頁靈魂
• 下載 Vibe Coding 網頁程式碼，掌握程式碼的主導權
• Vibe Coding 實戰：利用 Google Apps Script 打造免費網頁部署基地
• Vibe Coding 實戰：使用 GitHub 部署你的網頁作品
• AI 時代的輕量級後端：當 Vibe Coding 遇上 Google Sheets
• 從靈感到即時同步：Vibe Coding 遇上 Firebase Realtime Database
• 數位靈魂的存放處：Vibe Coding 串接 Firebase Firestore
• 拒絕資料裸奔！Vibe Coding 必備 Firebase App Check 安全防護指南
• Vibe Coding + Firebase Authentication 打造順暢的註冊登入體驗
• Vibe Coding 將 Google Drive 變身最強檔案後端
• 靈感即程式：用 Gemini API 開啟你的 Vibe Coding 新時代
• Vibe Coding 極速打造 LINE Bot 智慧機器人
• Vibe Coding 範例 - 英文單字卡

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～