超越網頁直覺式程式開發

1. 簡介

隨著程式碼編寫代理成為日常軟體開發不可或缺的一環，無論您是經驗豐富的工程師，還是想推出第一個應用程式的新手開發人員，建構方式和建構內容都將徹底改變。開始使用程式碼編寫代理時，通常會從「零樣本」提示開始，也就是以簡短的人類語言說明您想要執行的單一指令。這很快就會遇到問題：

  • 討好偏誤：模型通常會接受有瑕疵的限制或前提，盡快完成要求，但不會驗證所製作的內容是否符合您的意圖。
  • 驗證落差：即使是撰寫測試的代理程式，通常也不會檢查自己的工作，確保運作正常。在即時瀏覽器中使用網站時，會顯示隱藏的錯誤、版面配置問題和無法存取的控制項。
  • 技術債：由於模型的訓練和運作方式，模型編寫的程式碼會傾向於舊式和過時的模式，導致技術債增加，管理成本也隨之提高，需要更多權杖，以及更多人力和機器時間與精力。技術債甚至可能對使用者體驗造成負面影響。

4 步驟計畫

為引導程式設計代理程式產生更符合您需求的優質程式碼，建議遵循 4 步驟的產品開發生命週期：

  1. 規劃和設計：與代理程式共同撰寫產品需求文件 (PRD)，並在開始實作生產前，讓代理程式在瀏覽器中製作 PRD 的原型和設計 ，然後在開始編碼前，根據 PRD 和設計草擬架構設計文件 (規格) 。
  2. 編寫及建構程式碼：指示代理根據 PRD、設計和規格建構程式碼，而非零樣本提示，並讓代理執行其他代理來檢查工作。
  3. 重複執行：針對要新增的每個新功能，再次執行步驟 1 和 2。
  4. 部署：發布至正式環境。

本文將說明如何運用 AI 代理做為積極的合作夥伴，透過相關做法減少技術債，並提升輸出程式碼的品質。您可以使用 Antigravity 搭配 Modern Web Guidance 和 DevTools for Agents，建構休閒的單字遊戲，並運用 AI 功能強化遊戲。接著使用 Firebase 部署至 Google Cloud，與親友分享。

課程內容

  • 如何將 AI 程式設計工作視為迷你產品開發生命週期。
  • 為何應將產品需求與架構規格分開。
  • 瞭解如何協調多代理工作流程，直接在瀏覽器中製作原型並檢查程式碼。
  • 如何運用第三方技能和工具，改善開發和使用者體驗。
  • 如何使用 Firebase MCP 直接將網路應用程式部署至正式環境。

必要條件

  • 個人 Google 帳戶和 Google Cloud 或 Firebase 專案 (請參閱專案設定中的操作說明)
  • 熟悉 HTML、CSS 和 JavaScript。
  • 網路瀏覽器，例如 Chrome。
  • 已安裝 Node.js (建議使用 LTS)。

2. 專案設定

Google 帳戶

如果沒有個人 Google 帳戶，可以建立 Google 帳戶。

登入 Google Cloud 控制台

使用個人 Google 帳戶登入 Google Cloud 控制台。

啟用計費功能

如要設定個人帳單帳戶，請前往 Cloud 控制台啟用帳單功能。

建立 Firebase 專案

  1. 前往 Firebase 控制台，並登入個人 Google 帳戶。
  2. 按一下「新增專案」 (或「建立專案」)。
  3. 在專案建立精靈中：
    • 輸入專案名稱 (例如 wordup-web-app)，或重複使用您在專案設定期間設定的 Google Cloud 專案。
  4. 連結帳單帳戶
    • 在 Firebase 控制台的側欄中，找出底部的方案徽章 (顯示「Spark」)。按一下「升級」。
    • 選取「即付即用」方案。
    • 選取在「專案設定」步驟中設定的「帳單帳戶」。
    • 確認選取項目，將帳單帳戶附加至專案。(Firebase 託管提供充足的免費方案，完成本教學課程通常不會產生任何費用)。

安裝工具

  • Antigravity 2.0：您主要使用的代理程式設計架構，搭配最新的 Gemini Flash 模型，可快速完成前沿的程式設計工作。
  • 新式網頁指南：這項技能可協助程式碼代理程式編寫新式 CSS、HTML 和 JavaScript。透過 Antigravity 安裝：依序前往「Settings」>「Customization」>「Build With Google Plugins」>「Modern Web Guidance」。
  • 代理專用開發人員工具：讓代理程式驅動 Chrome、檢查即時 DOM、測試版面配置，以及在執行階段偵錯。透過 Antigravity 安裝：依序前往「Settings」>「Customization」>「Build With Google Plugins」>「Chrome 開發人員工具」，以及「Settings」>「Customization」>「Add MCP Servers」>「代理專用 Chrome 開發人員工具」。
  • Firebase MCP 伺服器：可簡化專案設定程序，並透過單一提示部署。透過 Antigravity 安裝：依序前往「Settings」(設定) >「Customization」(自訂) >「Build With Google Plugins」(使用 Google 外掛程式建構) >「Firebase and Antigravity Settings」(Firebase 和 Antigravity 設定) >「Customization」(自訂) >「Add MCP Servers」(新增 MCP 伺服器) >「Firebase」。

3. 預先規畫

在代理程式編碼中，常見的誘因是提交零樣本提示 (「幫我建構文字遊戲」)，然後期待能找到好內容。這幾乎都會導致邊緣情況遭到略過、程式碼庫膨脹，以及無止盡的修正錯誤週期。

而是將每項工作視為迷你產品開發生命週期。程式碼編寫代理程式具備研究和推論工具，可做為協作夥伴，協助您釐清想法，再編寫程式碼。說出自己的想法通常有助於在問題發生前找出並解決問題，這在軟體工程中稱為「橡皮鴨除錯法」。您可以將程式碼編寫代理程式當成橡皮鴨，規劃專案和功能。

您正在建構休閒文字遊戲。提示代理，協助您設計想要的遊戲。

I want to make a casual word guessing game. Go do deep research on those kinds
of games, then ask me questions to help me write a PRD for the game's features.

這是提示的基本形狀，請根據自身需求重新混音。重點是讓 AI 進行深入研究，並根據研究結果向您提問，協助您規劃工作。

請先使用這個提示，因為使用程式碼編寫代理需要大量審查。將完整的導入計畫細分成較小的重點部分，可大幅簡化審查作業、及早發現極端情況、納入代理程式訓練資料以外的知識，最重要的是，您可以在審查期間多休息。

  • 將「內容」與「方式」分開：在正式的產品需求文件 (PRD) 中定義使用者體驗和產品範圍，可將內容與方式分開，讓您一次專注於產品開發的某個層面，而非所有層面。
  • 及早找出極端情況：互動式問答活動可讓您在設計或導入作業開始前，釐清需求。
  • 主動進行代理研究：由於代理訓練會在特定日期停止，且資訊會高度摘要化，因此從即時研究中提取資訊，可帶入代理否則會錯過的新資訊。

練習 1

現在輪到您了！設定專案並建立 PRD。

  1. 在 AGENTS.md 檔案中新增指令，告知檔案將輸出內容儲存至 docs/plans/{{YYYY-MM-DD}}-{{description}}.md。
  2. 執行上述研究提示，並視需要進行調整，即可建構 PRD。
  3. [延伸目標] 更新 AGENTS.md 檔案，加入您不希望代理執行的動作，然後再次執行提示。

4. 在瀏覽器中設計

靜態 UI 設計依賴模擬，雖然通常看起來很精美，但可能無法考量極端情況、限制和實際使用者互動。與程式碼類似，要求代理程式「設計」網站應用程式時，產生的設計會趨向於一般 (通常是紫色) 設計。

如果是網頁應用程式，您可以透過代理程式專用的開發人員工具，讓代理程式控制網頁瀏覽器，並在瀏覽器中設計應用程式。無論您是設計人員，想為設計帶來更優質的保真度；還是程式碼編寫人員或建構工具，想改善專案的使用者體驗；或是兩者合作，在實際建構的媒介中工作都能產生更出色的成果。

在瀏覽器中設計時，您也可以協調多個代理程式共同作業，產生單一輸出內容。這些子代理具有特定角色和目標，可協調運作，產生比單一代理更出色的結果。設計：您可以要求視覺設計代理、使用者體驗代理和無障礙代理共同協助您設計，並直接在瀏覽器中顯示設計結果。

啟動設計代理程式面板，根據 PRD 選擇設計。

Using the PRD, start a panel of expert agents: one UX design, one web
accessibility, and one for visual design, and have them work together to design
3 different UI mockups and show them to me in-browser.

在您要建構的媒體 (本例為網頁) 中設計，而不是在靜態媒體中設計，可讓您發現難以管理的其他情況和限制，並立即取得符合實際製作情況的視覺回饋。

練習 2

現在輪到您了！設計專案。

  1. 執行上述設計提示，並視需要進行調整，即可建構設計。請提供您希望看到的各種設計方向 (例如現代、活潑、寫實等)。
  2. 選擇喜歡的設計，然後與代理人一起反覆修改。
  3. 請代理商更新 PRD，指向已同意的設計。
  4. 進階目標：針對所選設計執行無障礙測試和回應式設計測試，並根據這些稽核結果調整設計。

5. 撰寫規格

有了核准的 PRD (「要建構什麼」) 和選定的視覺設計 (「看起來如何」)，您現在需要架構方面的技術一致性 (「如何建構」)。

技術設計文件或規格 (簡稱規格) 會詳細說明檔案結構、狀態管理、元件介面、事件管道和依附元件。在編寫程式碼前建立規格，有助於及早發現不一致和不當的程式碼模式，避免這些模式變成難以推論和重構的程式碼。

Write a detailed technical design document on how to implement the game with
the chosen design.

你為什麼要這麼做

  • 架構清楚明瞭：定義元件階層和狀態轉換流程 (例如 Idle → InGame → EvaluatingGuess → GameOver)，可避免競爭條件和脆弱的義大利麵式程式碼。
  • 符合現代標準：啟用現代網頁指南後，代理程式會參考現代標準 (例如 CSS @container 查詢、適用於模式或說明重疊的內建 元素，以及模組化 ES 模組)，而非提取舊版大型程式庫。
  • 分階段審查：將功能性 PRD 審查與技術設計文件審查分開，可讓您獨立評估架構和使用者體驗。

練習 3

  1. 請 AGENTS.md 將輸出內容儲存至目前資料夾：
    PRDs should _always_ be written to the current project's root in `docs/plans/{{YYYY-MM-DD}}-{{description}}.md` format
  2. 執行設計文件提示並檢查，確保涵蓋目錄結構、事件處理和儲存空間等層面。
  3. 進階目標：如果應用程式尚未包含 Mermaid 圖表，請加入這些圖表，說明應用程式的狀態流程。

6. 最後，建構應用程式

確立 PRD、UI 模擬和設計文件後，就可以開始建構。這三項資訊是明確的指引，可讓代理程式清楚瞭解該製作的內容。

這是使用子代理的另一個好機會。您可以在建構程式碼後執行這些測試，檢查建構內容是否與預先設計的內容相符，以及建構內容的程式碼品質。

Use the PRD, design doc, and mockup to implement the site, then send out 2
agents, one to check how closely you followed the requirements, and one to
review the code.

你為什麼要這麼做

透過規格導向開發和第一輪審查員，代理商可根據明確且預先審查過的需求條件進行建構，並在交付給您之前，由審查員確保代理商遵循計畫，進而提升品質和準確度。

  • 審查過的需求：代理人不必猜測您想要什麼，因為您已在編寫任何程式碼之前，審查過所有內容，只差實作。
  • 全新角度：在全新脈絡中產生的審查代理程式不會因建構程式碼集而產生確認偏誤，因此能有效找出未處理的極端情況、缺少的實作需求，以及其他遺漏的程式碼或產品詳細資料。

練習 4

  1. 執行建構提示，指出要審查的確切檔案。
  2. 執行時請觀察輸出內容。您會看到 AI 根據需求進行推論，並嘗試建構。如果發現有誤，可以停止並修正。
  3. 執行開發伺服器，查看最終網站並檢查其運作情形。
  4. 進階目標：再次執行這個程序，新增自動化測試。
  5. 延伸目標：選擇要用來建構網站的特定架構或技術堆疊，只要將 PRD、模擬和設計文件分開，應該就能輕鬆適應不同的架構或技術堆疊。

7. 部署至正式環境

您已完成規劃、設計和編碼，還剩下什麼？部署至正式環境。

Deploy this site to my Firebase project [YOUR_PROJECT_ID] using Firebase
Hosting.

練習 5

  1. 執行部署提示，並替換專案 ID。
  2. 複製代理程式提供的即時主持網址。
  3. 開啟線上網址，確認已部署且運作正常。
  4. 延伸目標：使用代理商的開發人員工具，對正式版網站執行 Lighthouse 稽核，進行調整以提高 Lighthouse 分數，然後發布更新。

8. [選用] AI 強化功能

現在，您的單字遊戲已可使用靜態字典完整運作。如要將靜態字典變更為動態字詞，可以使用 Prompt API 中的小型本機語言模型，每次提示一個字詞。

由於並非所有裝置都支援這項功能，因此您可以使用漸進增強，檢查 API 和模型是否可用。如果有的話，就使用這些項目；如果沒有，則改用靜態清單。

練習 6

現在就開始應用所學吧！

  1. 與專員合作撰寫 PRD，使用 Prompt API 生成有效的隱藏字。
  2. 在瀏覽器中設計下載進度列和整合 AI 的 UI。
  3. 撰寫實作規格。(提示：執行代理程式，確認這裡使用的 API 語法正確無誤)。
  4. 開發新功能。
  5. 將其部署至正式環境。

9. 收尾

恭喜！您已成功運用代理式程式設計最佳做法，建構、改良、強化及部署現代化、無障礙且採用 AI 技術的網頁應用程式。

您學到的內容

  • 以產品為導向的代理工作流程：將工作視為迷你產品生命週期 (PRD → 設計 → 規格 → 建構)，如何減少債務、審查管理負擔，以及來回溝通的摩擦。
  • 多代理專家面板：瞭解如何執行多個 AI 子代理，提升工作品質和準確度。
  • PRD 與設計文件：相較於零樣本功能提示，將功能範圍 (計畫) 與技術架構 (規格) 分開，為何是更具擴充性和準確性的程序。
  • 順暢部署：如何使用 MCP 伺服器 (例如 Firebase MCP) 簡化第三方系統的存取程序，例如部署網站。