VIBE CODING 方法論 · 第 8 節

把環境事實寫進 Rule

每次新開對話，AI 都不知道該調哪個模型、超時設多少、項目用什麼框架。把這些環境事實一次性寫死在 Rule 裏，相當於給 AI 一份預填好的 .env 説明書，每輪對話自動帶入。本頁兩個演示都可以真實操作。

為什麼是 Rule：把配置寫在 .env 裏讓 AI 自己讀，它不一定每次都主動讀；寫在對話裏，對話一長就被截斷遺忘。Rule 在每輪對話開始前就被載入進上下文，是最穩的注入方式。

交互體驗一 · isComposing，用中文輸入法親自試

中文輸入法確認候選詞時會觸發 Enter，只判斷 e.key === 'Enter' 的輸入框會把半段內容直接發出去。AI 訓練數據裏 isComposing 覆蓋率不高，不寫進 Rule 就一定會忘。切換到中文輸入法，在下面的輸入框裏打幾個字試試。

真實體驗區

isComposing：false（輸入法組合中會變為 true）

按鍵記錄會出現在這裏。先打一段拼音按回車選詞，再直接按一次回車，對比兩次的判定結果。英文鍵盤用戶可以直接打字回車，觀察 false 的情況。

標準寫法

const handleKeyDown = (e: React.KeyboardEvent) => {
  if (e.key === 'Enter' && !e.shiftKey
      && !e.nativeEvent.isComposing) {
    e.preventDefault()
    handleSend()
  }
}

isComposing 為 true：輸入法正在組合中，回車只確認候選詞，不觸發發送
isComposing 為 false：普通鍵盤直接輸入，回車正常發送
規則原文：禁止只判斷 e.key === 'Enter' 而不檢查 isComposing

交互練習二 · 這個場景該用什麼格式

數據格式三分法：三種格式各管一個領域，互不混用。點擊場景，再選一個你認為合適的格式。

❌ JSON 的 escape hell：字串裏再套 JSON

{
  "tool": "send_message",
  "arguments": "{\"channel\": \"dev\",
    \"payload\": \"{\\\"title\\\":
      \\\"發佈提醒\\\", \\\"body\\\":
      \\\"v1.4 已上綫\\\"}\"}"
}

✅ 同樣的內容，XML 版本

<tool_call name="send_message">
  <channel>dev</channel>
  <payload>
    <title>發佈提醒</title>
    <body>v1.4 已上綫</body>
  </payload>
</tool_call>

JSON 版每層嵌套翻一倍反斜槓，LLM 逐 token 生成時極易配錯括號和引號。XML 標籤閉合直觀，模型出錯率更低。

進度：0 / 3 個場景

模型配置：一次寫死，輪輪生效

超時

圖像生成至少 120-180 秒

圖像 API 經常因為預設 30 秒超時失敗，AI 還會反覆嘗試相同的錯誤配置。HTTP 客戶端的超時值寫進 Rule，一次解決。

代理回退

網絡失敗先掛代理重試

網絡請求失敗時必須嘗試代理重試（預設 127.0.0.1:7890），仍失敗才向用戶報告，禁止跳過代理直接報錯。

流式

前端可見響應必須流式

前端可見的所有大模型響應必須用 Streaming 返回，後端內部調用才允許非流式。

技術棧鎖定與品味規則

選型是人的決策

後端 FastAPI、前端 React + Tailwind + Vite、數據庫 SQLite、向量庫 Chroma
一旦定了就不再討論替代方案，AI 的職責是在確定的棧內把程式碼寫好
端口避開 5000，從 8000-9000 隨機分配，多項目同開也不衝突

圖標與細節規範

禁止用 emoji 做按鈕圖標，圖標必須用 SVG
看產品調性選圖標集：SaaS 用 Lucide，温暖調性用 Tabler Icons
圖標直接下載到本地使用，不依賴 CDN

補充説明：只用 GPT 系列的項目可以把工具調用改回 JSON，它的 function calling 原生就是 JSON。「Agent 用 XML」是多模型混用場景的最大公約數選擇，Claude 系模型在 XML 格式上表現更穩定。

課堂練習 · 20 分鐘

提交物：Rule 的環境配置章節。① 列出你項目的環境事實：模型、API 服務商、超時、代理、技術棧、數據庫；② 寫成 Rule 章節，敏感的 Key 放獨立的 secrets 文件並加入 .gitignore；③ 新開一個對話驗證：不做任何交代，AI 能否直接説出你的技術棧和模型配置。

素材來源：開源倉庫 itshen/xs_vibe_rules 中 rule-opensource.mdc 第一章「模型配置」、第四章「文檔與設計規範」、第五章「數據格式規範」、第六章「技術棧與框架」。