最近比較有一點時間，就來整體目前實作執行 Agentic Engineering 的資料，這次在這邊跟大家分享到目前為止在做 Agentic Engineering 的一些心得，這次用的是 gemini 產出設計跟需求文件(PRD)，最後 copilot CLI 進行開發。

在目前主要分幾個流程，如下：

0.建立 PRD 規範 (gemini GEM)、開好 github repo. & pages
1.桃園資料開放平台取資料
2.資料給 gemini 進行介面規劃及介面說明
3.需求及介面資料提供給 GEM 產生 PRD
4.PRD 資料提供給 copilot cli
5.本機介面測試
6.自動部屬至 github 及 pages

範例結果：https://ssssuuunnnn.github.io/Taoyuan_Housing_Transaction_Dashboard/

首先，先讓 gemini 產生介面相關設計及說明，一開始 gemini 給我的是用文字所畫出來的線稿跟說明。

+--------------------------------------------------------------------------------------------------+  
|  [Logo] 桃園市建物買賣不動產交易觀測儀表板                                       [最後更新: 115年1月]  |  
+--------------------------------------------------------------------------------------------------+  
|  【篩選條件】                                                                                      |  
|  年度：[ 全選 | v ]  月份：[ 全選 | v ]  行政區：[ 全選 (可複選)                       | v ]  [清除條件] |  
+--------------------------------------------------------------------------------------------------+  
|  【焦點指標 (KPI Cards)】                                                                         |  
|  +------------------------+  +------------------------+  +------------------------+              |  
|  | 最新月份交易總量 (115/1)|  | 本年度累計交易量 (115) |  | 當月交易量冠軍行政區   |              |  
|  |     3,656 棟           |  |     3,656 棟           |  |     桃園區 (639 棟)    |              |  
|  | ▲ +12.3% (按月比較)     |  | (統計至115年1月)        |  | 佔比：17.5%            |              |  
|  +------------------------+  +------------------------+  +------------------------+              |  
+--------------------------------------------------------------------------------------------------+  
|  【數據視覺化圖表區】                                                                             |  
|                                                                                                  |  
|  [圖表 A：歷月買賣棟數走勢圖 (折線圖 / 區域圖)]                                                       |  
|  棟數                                                                                            |  
|   |                                                                                              |  
|   |       /\        /\             /\                                                            |  
|   |  ____/  \______/  \___________/  \______                                                     |  
|   | /                                       \                                                    |  
|   +---------------------------------------------> 時間 (100年08月 ~ 115年01月)                   |  
|                                                                                                  |  
|  ----------------------------------------------------------------------------------------------  |  
|                                                                                                  |  
|  [圖表 B：各行政區交易量排行 (橫向柱狀圖)]         | [圖表 C：行政區交易佔比 (圓餅圖/環狀圖)]       |  
|  桃園區  [=======================] 639 棟        |               .------.                        |  
|  中壢區  [====================] 569 棟           |             /  桃園區  \                      |  
|  大園區  [=============] 517 棟                  |            |   17.5%    |                     |  
|  龜山區  [==========] 358 棟                     |             \          /                      |  
|  八德區  [==========] 355 棟                     |               '------'                        |  
|  ... (其餘行政區依序排列)                        |         (顯示所選期間各區份額)                |  
+--------------------------------------------------------------------------------------------------+  
|  【詳細數據清單】                                                         [搜尋行政區... ] [📥 匯出] |  
|  +------------+------------+----------------------+----------------------+                       |  
|  |  年度 (▼)  |  月份 ( )  |  行政區 ( )          |  買賣棟數 ( )        |                       |  
|  +------------+------------+----------------------+----------------------+                       |  
|  |  115       |  1         |  桃園區              |  639                 |                       |  
|  |  115       |  1         |  大溪區              |  45                  |                       |  
|  |  115       |  1         |  中壢區              |  569                 |                       |  
|  |  115       |  1         |  楊梅區              |  309                 |                       |  
|  |  114       |  12        |  桃園區              |  536                 |                       |  
|  +------------+------------+----------------------+----------------------+                       |  
|  | <  1  2  3  4  5  ...  46  > |                                         顯示 1-5 筆，共 2,258 筆 |  
+--------------------------------------------------------------------------------------------------+  
|  資料來源：桃園市政府開放資料庫 | 網頁免責聲明與隱私權政策                                         |  
+--------------------------------------------------------------------------------------------------+

對於文字所畫出來的線稿總感覺不夠具體，所以再次使用 nano banana 把線稿畫成圖檔，這樣看起來就具體多了。

第二，產生 PRD，在此之前己經有建立好 gemini GEM， 己經把相關規範跟內容都提供給了 GEM，所以再提供功能說明、介面的設計、串接資料、技術棧、git 位置…等等。接下來就是確認文件內容是否與想法有出入，再進行調整。

第三，將 PRD 提供給 copilot CLI

這部很簡單，直接執行即可，因為 copilot CLI 會直接依照 PRD 的內容進行開發，要做的就是等待，喝個咖啡。

最後，只需要確認內容及功能無誤，就可以讓 copilot CLI 幫你把程式碼都推上 git 並產生好網頁，結果如下。

這次比較完整的分享了，透過較符合軟體開發流程的方式，進行網頁的開發。發現到，思維改為 Agentic Engineering ，在整體都是可控的情況下去開發，把 AI 真正做為一個協作的角色，而不是採用憑感覺(Vibe)的方式進行開發。

未來軟體工程師只要確認介面及功能(API)的正確性即可，而在產生 PRD 的部分(把話說清楚)就會變的更加重要，但在工程師方面，也需要對相關技術有更多的學習跟了解才行。

以下為本次所產出的 PRD 資訊

https://docs.google.com/document/d/1rHpNj_5CLuMDC1fxHga4LsdV0SzAmBFQtk_So72nkPg/edit?usp=sharing