心得 - Emerging Developer Patterns for the AI Era

問題與答案 (FAQ)

Q&A 類別 A: 概念理解類

Q1: 什麼是 AI-native Git？

• A簡: 將版控焦點從程式碼轉向需求文件、prompt與測試，程式碼被視為產出物，版控記錄人類意圖與驗證。
• A詳: AI-native Git是為AI時代重構的版控思維。傳統Git精細追蹤手寫程式碼變更；在AI coding普及後，程式碼多為生成結果，真正需追蹤的是意圖來源（需求文件、設計、prompt）與驗證（測試、評估）。它強調在commit中綁定prompt、測試、生成與驗證結果，並鏈接artifact與人為審閱，讓意圖可回溯、品質可量化、產出可追蹤。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q1, B-Q2, B-Q3, C-Q1

Q2: 為何在 AI 時代要重新思考版控？

• A簡: 因AI生成程式碼成常態，需追蹤意圖與驗證，版控重心由code轉向文件與prompt。
• A詳: AI coding讓程式碼更像artifact（產出物），而不是人腦的原始輸入。工程瓶頸左移到需求、設計、評估，因此版控若仍只聚焦code就難以回溯意圖與品質來源。重構版控可保留prompt、規格、測試、生成與驗證紀錄，支持語意Diff與責任追溯，也讓CI/CD與審查更精準。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q1, B-Q2, B-Q3, C-Q2

Q3: code 與 artifact 的差異？

• A簡: code是指原始碼；artifact是編譯或生成成果。AI時代中code常是artifact而非source。
• A詳: 在傳統工程，source code是人手寫的原始輸入，artifact是build後的二進位或部署單元。AI時代，vibe coding使程式碼多半由文件+prompt生成，程式碼在意義上成為artifact（由意圖「翻譯」而出）。真正的「source」是需求、設計與prompt；artifact管理與版控邊界因此需重新界定。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q1, A-Q2, B-Q1, B-Q3

Q4: 為何需求文件與prompt成為版控主體？

• A簡: 它們承載人類意圖與規格，是AI生成與驗證的根據，變更追蹤需聚焦其語意差異。
• A詳: AI生成的輸出依賴上下文，核心是文件與prompt。若只追蹤code，難以理解改動的意義與目的。將需求、設計、prompt、測試綁到commit，並用LLM做語意Diff與變更摘要，可清楚回溯「為何改」、「改了什麼」與「如何驗證」。這使品質與責任更透明，支撐規模化AI協作。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q3, C-Q1, C-Q2, D-Q7

Q5: 什麼是 Synthesis / Generative UI？

• A簡: 依使用者當下意圖由AI動態組裝UI元件與資訊呈現，非預先固定畫面。
• A詳: Synthesis（或Generative UI）是AI驅動的動態介面。AI理解使用者意圖與上下文，選取合適的UI工具（元件/Widget），配置參數生成當下需要的視圖與操作流。相較固定UI，它降維處理多樣情境、支援人機共用資訊視圖（人與Agent），並以markdown、mermaid等可組合規格快速合成視覺與表格。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q4, B-Q6, B-Q7, C-Q4

Q6: AI-driven interfaces 的核心價值是什麼？

• A簡: 以意圖與上下文為核心，動態生成最合適的資訊與操作，降低設計時的預測負擔。
• A詳: AI-driven UI的價值在於改變設計與執行的邊界。傳統UX仰賴事前研究與固定流程；AI能在執行時掌握意圖與情境，動態組合工具與視圖，精準呈現所需資訊。它提升可用性、降低學習成本，並使少數情境也可被良好支持。UI模組化、AI主控流程（Controller+LLM）、雙通道視圖（人與Agent）是關鍵。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q5, B-Q4, B-Q7, D-Q10

Q7: Dashboard 動態生成與傳統有何差異？

• A簡: 傳統一覽式資訊密集；動態Dashboard依意圖即時過濾、聚焦、組裝必要視圖。
• A詳: 傳統Dashboard為固定設計，資訊全面但不易找到重點；AI動態Dashboard根據Q&A與上下文，選取適當元件（如表格、圖表、指標），填入即時查詢結果，生成聚焦視圖並允許操作（Action）。也能對Agent暴露結構化資訊，提供人/機雙用視圖，強化自動化與決策。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q5, B-Q6, B-Q8, C-Q4

Q8: 什麼是 Agent-ready dashboard？

• A簡: 同時為人與AI設計的介面，提供可解析的語意、標註與工具呼叫能力。
• A詳: Agent-ready dashboard在視覺外，提供機器可讀的語意結構（如ARIA、可及性樹、結構化資料），並暴露工具（actions）供Agent呼叫。它讓AI能穩定定位元素、讀取指標、執行操作，降低自動化的脆弱性。此類介面是人機協作的核心，支援雙向解讀與執行。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q7, B-Q17, B-Q18, D-Q10

Q9: 什麼是 Document as Code？

• A簡: 用寫程式方式管理文件：markdown+git+CI/CD，統一流程與工具鏈。
• A詳: Document as Code將文件視為可版本化與可部署的資產。使用markdown撰寫、git版控、CI/CD發布為靜態站或知識庫。AI時代文件承載需求、規格、指令（instructions），是context來源與Agent長期記憶。此模式提升重用與一致性，讓AI能直接「讀用」文件、生成與驗證程式碼。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q10, B-Q9, B-Q10, C-Q2

Q10: Docs are evolving 的定義是什麼？

• A簡: 文件成為工具、索引、互動知識庫的組合，服務人與AI共同協作。
• A詳: 「文件在進化」指文件不再只是人讀的文字。它包含：工具（可被Agent執行的操作說明）、索引（檔案/知識的結構化入口）、互動知識庫（可檢索、可更新的上下文）。文件承載指令、規範、設計、任務與筆記，透過RAG/MCP按需載入到context，成為AI協作的核心基石。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q10, B-Q11, B-Q28, C-Q2

Q11: Prompt Engineering 與 Context Engineering 有何差異？

• A簡: 前者強調提問技巧；後者重視提供對的資料到context，讓AI正確推理與執行。
• A詳: 早期模型弱，Prompt寫法影響大；模型進步後，工具與文件可用，關鍵轉為「提供正確充分的上下文」。Context Engineering包含：整理需求與設計到文件、建立檢索與載入機制（RAG/MCP）、控制每步驟的context內容，讓AI能在有限視窗中準確工作。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q10, B-Q10, B-Q11, C-Q3

Q12: 什麼是 Vibe Coding？

• A簡: 以自然語言需求與文件驅動，AI生成介面、測試與程式碼的開發方式。
• A詳: Vibe Coding是「描述所需氛圍/需求→AI生成」的新型態開發。開發者提供需求文件、規範、示例與目標；AI先產生介面契約與測試，再實作程式碼，過程由人審查與驗證。相較模板，它高度客製、能快速迭代，結合TDD可提升正確性與可維護性。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q13, B-Q13, B-Q14, C-Q10

Q13: Vibe Coding 與模板（create-react-app）有何差異？

• A簡: 模板提供固定框架；Vibe Coding依需求動態組合技術棧與架構，更客製且可驗證。
• A詳: 模板以少數主流框架提供起始骨架，受限於預設技術選擇。Vibe Coding則依需求與上下文生成專案，自由混搭工具與架構，並產出契約、測試與實作，支持多版本快速對比。它讓團隊以低成本試驗不同技術棧，選擇最合適的路徑。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q12, B-Q13, C-Q10, D-Q6

Q14: 為什麼 Accessibility 會成為通用介面？

• A簡: AI以可及性樹與語意標註理解UI，才能穩定定位元素與操作，支撐人機共用。
• A詳: Agent缺乏人類視覺與觸覺，需靠OS與瀏覽器的可及性API獲取語意結構（角色、名稱、狀態）。良好無障礙設計（ARIA、替代文字、標籤）可讓AI穩定找到與操作UI元素，降低自動化脆弱性。因此，Accessibility成AI可通用的介面標準。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q17, B-Q18, C-Q5, D-Q2

Q15: 什麼是 MCP（Model Context Protocol）？

• A簡: 讓Agent以標準方式存取工具、資源與授權的通用協定，連接「大腦」與「手腳」。
• A詳: MCP是把LLM（大腦）與外部工具/資源（手腳）連起來的開放協定。它定義工具端（server）與客戶端（agent）如何交互：資源讀寫、工具呼叫、抽樣（把LLM算力委派給客端）、授權（OAuth2.1）。MCP使工具可被不同Agent重用，推動生態標準化。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q19, B-Q20, B-Q21, C-Q9

Q16: MCP 與傳統 API 有何差異？

• A簡: API供開發者調用；MCP為Agent設計，含上下文、工具、授權、抽樣等整體協作。
• A詳: API專注資源操作與資料交換；MCP面向Agent工作流，包含工具宣告、資源索引、session上下文、授權與抽樣等機制。MCP強調可被LLM理解與安全使用，讓Agent可「發現、理解、執行」工具，形成標準化人機協作。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q15, B-Q19, B-Q21, C-Q9

Q17: 為什麼需要非同步 Agent 工作？

• A簡: 模型推理與外部任務耗時，非同步可擴充並行度，降低人類等待與干預。
• A詳: 隨著思維鏈與推理增長，任務時間拉長；外部工具交互亦耗時。將Agent工作非同步化，可批量觸發、背景執行、集中在平台（GitHub/Azure DevOps）審閱成果，讓人類只在關鍵節點介入。這提升可擴展性與效率，適合大規模開發外包給Agent。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q16, C-Q8, D-Q3, D-Q6

Q18: Agentic Application 的抽象基礎元件是什麼？

• A簡: 身份驗證（auth）、計量與計費（billing/usage）、持久化儲存（storage）等。
• A詳: Agent普及後，每個Agent都需統一的基礎設施：認證授權（OAuth2.1、跨系統Access Control）、計量與計費（Token/工具呼叫/使用量），持久化存儲（文件、長期記憶、狀態）。這些抽象元件類似Cloud時代的PaaS，將被標準化供Agent平台重用。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q24, B-Q23, C-Q9, D-Q9

Q19: Beyond .env 是什麼概念？

• A簡: 秘密不再靜態放環境變數，改為按需動態授權與細粒度權限管理。
• A詳: .env適合後端靜態服務；在Agent世界，工具與資源多方交互，需以動態授權（OAuth2.1）替代靜態憑證。使用者於當下同意範圍與時效，平台簽發短期Token，代理使用並可追蹤審計。這提高安全性與責任邊界清晰度，避免密鑰外洩與濫用。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q20, C-Q9, D-Q4, D-Q8

Q20: OAuth2.1 在 Agent 世界中的定位？

• A簡: 作為Agent、工具與資源之間的標準授權機制，確保安全、可審計、可撤銷。
• A詳: OAuth2.1提供基於使用者同意的三方授權：Agent代表使用者請求資源授權，授權伺服器簽發短期Token，工具檢驗與執行。它支持範圍與時效控制，事件與審計串接，符合Agent按需存取的安全需求，是MCP與ACP等標準的基石。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q19, B-Q20, C-Q9, D-Q8

Q21: 什麼是 MCP Sampling？

• A簡: 將LLM運算委派回Agent端，由Agent代用其訂閱Token計算後返回結果。
• A詳: Sampling讓工具端在需要LLM計算時，不自備模型與Token，而是把提示交回Agent，Agent用自身模型與配額執行，結果回填工具流程。它統一計費邊界，提升透明度與控制力，並避免工具端重複維護模型。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: B-Q21, B-Q19, B-Q23, D-Q9

Q22: 什麼是 Agentic Commerce Protocol（ACP）？

• A簡: 為Agent結帳生態設計的API規範，涵蓋商品供給、結帳確認與金流支付。
• A詳: ACP定義商家與支付的標準API：Product Feed提供商品；Checkout確認購物車與價格；Payment處理金流。Agent可在聊天中完成探索與購買，以統一接口與安全流程串連商家與支付方，促成Agent內嵌交易。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: B-Q22, B-Q23, C-Q9, D-Q9

Q23: 「AI-First」與「API-First」差異是什麼？

• A簡: API-First重視可調用接口；AI-First重視可被AI理解與安全使用的整體協作。
• A詳: API-First聚焦面向程式的服務化；AI-First則擴展到Agent理解與使用，包括語意規格、工具宣告、上下文管理、授權與審計。AI-First要求介面「能被AI用好」，不僅可調用，更要語意清晰、授權安全、上下文匹配。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q15, A-Q16, B-Q19, C-Q9

Q24: 為什麼 TDD 能強化 Vibe Coding？

• A簡: TDD將生成拆段驗證，降低錯誤與回溯成本，提升AI生成的可控性與品質。
• A詳: TDD以「紅–綠–重構」引導AI生成：先定義介面與測試（紅），再補實作讓測試過（綠），最後重構。它把大任務分段、讓驗證提前、用工具檢查低級錯誤，降低一次生成大量code的風險，使vibe coding可控、可回溯且品質穩定。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q13, B-Q14, C-Q10, D-Q6

Q&A 類別 B: 技術原理類

Q1: AI-native Git 如何運作？

• A簡: 在commit綁定prompt與測試，由Agent生成並驗證，再鏈接artifact與人為審閱。
• A詳: 技術原理說明：AI-native Git將「意圖」納入版控。關鍵步驟：1) gen-commit收集prompt/tests；2) Agent用repo context生成code；3) 自動跑測試驗證；4) 生成bundle（artifact）並記錄元資料；5) 必要變更進入人工review gating。核心組件：CLI擴展、生成/驗證管線、artifact管理、語意Diff與變更摘要。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q1, A-Q2, C-Q1, D-Q6

Q2: gen-commit 的執行流程為何？

• A簡: 保存prompt、連結測試→生成code→執行驗證→產出bundle→觸發審閱。
• A詳: 原理：將生成與驗證嵌入版控命令。步驟：1) git gen-commit –prompt –tests；2) 記錄prompt/tests至commit meta；3) Agent生成於工作樹；4) 自動run tests與lint；5) 打包bundle與指派審閱。核心組件：CLI、Agent、Test Runner、Artifact Store、Review Gate。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q1, B-Q3, C-Q1, D-Q6

Q3: 版控如何追蹤 prompt 與 tests？

• A簡: 以commit metadata與檔案規約記錄，並用LLM做語意Diff與摘要。
• A詳: 原理：擴展commit記錄意圖。步驟：1) 在.repo或/.ai存放prompt/tests；2) commit時打tag與鏈接；3) Diff階段用LLM比對語意差；4) pipeline保留生成與驗證結果。核心：規約目錄、metadata schema、語意Diff、審計日誌。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q4, C-Q2, D-Q7, D-Q6

Q4: AI-driven UI 的技術架構如何設計（MVC+LLM）？

• A簡: 以Controller整合LLM與Function Calling，視情境組合View與操作Model。
• A詳: 原理：MVC中Controller與LLM協作。步驟：1) Controller持續回報使用者事件給LLM；2) LLM理解意圖，用Function Calling選擇UI工具與後端；3) View模組化渲染；4) Model提供資料與操作。核心：事件回報機制、工具註冊、權限控制、上下文管理。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q5, A-Q6, C-Q4, D-Q10

Q5: Controller 如何讓 AI「感知」使用者？

• A簡: 持續回報操作事件與上下文，讓LLM根據行為與規則生成合適回應與UI。
• A詳: 原理：事件驅動的上下文供給。步驟：1) 將操作序列化成事件（如加入購物車）；2) 送入LLM上下文；3) LLM依system prompt與歷史判斷回應或觸發工具；4) Controller執行結果並更新視圖。核心：事件總線、上下文同步、Function Calling、安全策略。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q4, C-Q4, D-Q10, A-Q6

Q6: Dynamic dashboards 如何生成？

• A簡: 解析意圖→選取元件→查詢資料→配置參數→渲染視圖與可用動作。
• A詳: 原理：意圖映射至視圖組裝。步驟：1) LLM抽取問題目標；2) 匹配Widget（表格/圖）；3) 觸發查詢工具（Log/Errors/Deploy）；4) 生成markdown/mermaid與參數；5) 渲染與提供操作。核心：工具目錄、資料管道、渲染引擎、權限控制。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q7, A-Q5, C-Q4, D-Q10

Q7: Agent-ready dashboards 的核心組件？

• A簡: 可及性語意、工具註冊、上下文匯聚、雙通道輸出（人/Agent）。
• A詳: 原理：同時服務人與Agent。組件：1) 語意層（ARIA/Accessibility Tree）；2) 工具層（actions與安全）；3) 資料層（context匯聚與快取）；4) 呈現層（人機雙用視圖）。流程：意圖解析→工具/資料選取→語意輸出→視圖渲染。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q8, B-Q17, B-Q18, C-Q5

Q8: Markdown+Mermaid 在生成UI中的角色？

• A簡: 作為輕量通用的結構化描述，讓AI可直接生成文字與圖表視圖。
• A詳: 原理：標準文本與圖語言。步驟：1) LLM輸出markdown文字與表格；2) 生成mermaid腳本描述流程/圖；3) viewer渲染即見視圖；4) 可內嵌多種圖形規格。核心：語言易學可生成、渲染器通用、上下文兼容性高。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q5, A-Q7, C-Q4, D-Q10

Q9: Docs-as-code 的工具鏈怎麼設計？

• A簡: markdown撰寫、git版控、CI/CD發布為靜態站或知識庫，與repo整合。
• A詳: 原理：文件可運行。步驟：1) 目錄規約（/docs,/src,/ai）；2) markdown撰寫需求/設計/指令；3) git版控與PR審核；4) CI/CD部署文檔站；5) Agent透過RAG/MCP載入。核心：格式規約、管線、檢索、審核流程。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q9, A-Q10, C-Q2, D-Q7

Q10: Context windows 與文件的「虛擬記憶體」機制？

• A簡: 以文件存放長內容，按需載入到有限context，必要時寫回文件。
• A詳: 原理：外部化上下文。步驟：1) 文檔作為長期記憶；2) 步驟前載入必要片段（RAG/MCP）；3) 執行後更新/寫回；4) 控制上下文大小與相關性。核心：分塊、檢索、會話管理、持久化。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q11, B-Q11, B-Q28, C-Q2

Q11: RAG 在文件與代碼協作中的作用？

• A簡: 檢索最相關文件片段注入context，輔助生成與驗證更準確。
• A詳: 原理：向量檢索。步驟：1) 對文件/代碼建embedding；2) 查詢時檢索相似片段；3) 注入到提示；4) 結合工具執行與驗證。核心：倒排/向量索引、召回策略、重排序、片段邊界與來源標註。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q10, B-Q10, C-Q2, D-Q5

Q12: 在IDE中 instructions.md 如何生效？

• A簡: IDE/Agent讀取約定位置的指令文件，作為持續上下文與行為規則。
• A詳: 原理：文件化指令。步驟：1) 創建/.github/instructions.md或/ai/instructions.md；2) 定義規範、風格、限制；3) IDE/Agent載入並持續應用；4) PR審查更新並生效。核心：路徑規約、載入鉤子、版本控制、審核流程。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q10, C-Q3, D-Q7, B-Q28

Q13: Vibe Coding 的標準步驟？

• A簡: 明確需求→生成介面契約→生成測試→實作通過→審查重構。
• A詳: 原理：分段生成。步驟：1) 撰寫/指派需求文件；2) 讓AI生成介面與型別；3) 生成測試（預期行為）；4) 填充實作直到綠燈；5) 重構與文件同步。核心：接口先行、測試驅動、分段審查、Artifacts與文件一致。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q12, A-Q24, C-Q10, D-Q6

Q14: TDD 與 Vibe Coding 的整合流程？

• A簡: 以紅綠重構循環引導AI，將大任務拆解並在每步進行機器化驗證。
• A詳: 原理：早驗證少返工。步驟：1) 生成介面（紅）；2) 生成測試（紅）；3) 補實作至綠；4) 重構與文件同步；5) 自動化管線核驗。核心：測試先行、工具化檢查、分段審查、可追溯。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q13, A-Q24, C-Q10, D-Q6

Q15: CLI/Server-side Coding Agent 的工作沙箱如何設計？

• A簡: 提供隔離workspace、工具鏈、依賴與基礎設施，便於自動拉取、建置與測試。
• A詳: 原理：可擴展的隔離環境。步驟：1) 佈建workspace（git拉取）；2) 安裝工具（編譯、測試、lint）；3) 提供infra（docker/k8s/DB mocks）；4) 設定權限與審計。核心：容器化、快取、最小權限、可觀測性。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: A-Q17, C-Q7, C-Q8, D-Q6

Q16: Async agent 工作流在DevOps平台如何運作？

• A簡: issue觸發Agent→分支修改→自動測試與PR→人審核→迭代直至通過。
• A詳: 原理：事件驅動協作。步驟：1) 建立task/issue含prompt；2) webhook觸發Agent；3) 建分支修改與測試；4) 發PR附報告；5) 人工gate審核與合併。核心：隊列與併發、審核策略、資源彈性、審計。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: A-Q17, C-Q8, D-Q6, D-Q3

Q17: Playwright MCP 如何解析可及性樹？

• A簡: 以可及性標註精簡DOM為YAML結構，供Agent穩定定位與操作元素。
• A詳: 原理：語意優於表面DOM。步驟：1) 提取ARIA與可及性屬性；2) 精簡成YAML節點（角色、名稱、狀態）；3) 供LLM解析定位；4) 執行操作與回報。核心：ARIA正確性、語意樹完整度、渲染器配合。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q14, B-Q18, C-Q6, D-Q2

Q18: 如何以Accessibility標記提升UI自動化穩定度？

• A簡: 使用ARIA角色、可命名標籤與替代文字，提供穩定語意與定位。
• A詳: 原理：語意與可尋址性。步驟：1) 為互動元素設ARIA role與name；2) 表單配label-for；3) 圖片加alt；4) 狀態用aria-*屬性；5) 驗證可及性樹。核心：語意一致、穩定選擇器、狀態可讀、與測試整合。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q14, C-Q5, D-Q2, D-Q10

Q19: MCP 的基本架構與端點組件？

• A簡: 包含工具宣告、資源存取、會話上下文與抽樣介面，標準連接Agent與工具。
• A詳: 原理：標準化工具介面。組件：1) Tools（操作描述與schema）；2) Resources（檔案/數據存取）；3) Sessions（上下文與狀態）；4) Sampling（委派LLM運算）。流程：Agent發現→授權→執行→回報。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q15, B-Q20, B-Q21, C-Q9

Q20: MCP 的授權流程與OAuth2.1權杖交換？

• A簡: 工具端宣告需要授權→導向同意頁→回調交換Token→按範圍執行。
• A詳: 原理：三方授權。步驟：1) 工具端標示auth需求與issuer位置；2) Agent發起授權請求；3) 使用者同意並回調；4) 工具拿access token執行；5) 審計與續期。核心：scope設計、短期Token、PKCE、安全重導與失效管理。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: A-Q20, A-Q19, D-Q8, C-Q9

Q21: MCP Sampling 的回呼交互機制？

• A簡: 工具把提示回送Agent，Agent用自身模型計算，返回結果供流程繼續。
• A詳: 原理：LLM算力委派。步驟：1) 工具生成sampling請求（含prompt）；2) Agent確認與執行；3) 返回模型output；4) 工具繼續流程。核心：提示邊界、安全審計、使用量統計、錯誤回退。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: A-Q21, B-Q19, B-Q23, D-Q9

Q22: ACP 的三方API交互機制？

• A簡: 商品供給（Feed）、購物確認（Checkout）、金流支付（Payment）協同完成交易。
• A詳: 原理：標準交易流程。步驟：1) 商家提供Feed供Agent探索；2) Agent組合購物車請求Checkout確認；3) 觸發支付API完成扣款；4) 回報訂單與收據。核心：校驗、風控、授權鏈、審計與異常處理。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: A-Q22, B-Q23, C-Q9, D-Q9

Q23: Agent 平台的計量與計費設計原理？

• A簡: 以使用量（Token/工具呼叫/流量）記錄，套用費率與配額，提供預算控制與審計。
• A詳: 原理：可觀測與可控。步驟：1) 收集使用量事件；2) 聚合與歸屬（人/Agent/專案）；3) 套用費率生成帳單；4) 配額與限速；5) 警報與優化建議。核心：事件模型、計費規則、可視化、策略控制。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: A-Q18, A-Q21, D-Q9, C-Q8

Q24: Abstracted primitives（auth/billing/storage）如何封裝？

• A簡: 以服務化抽象接口提供統一能力，供多Agent與工具重用與統一治理。
• A詳: 原理：平台化與標準化。步驟：1) 定義抽象接口；2) 提供SDK與MCP橋接；3) 集中策略（安全、配額、審計）；4) 監控與滾動升級。核心：邊界清楚、可擴展、可治理與可觀測。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: A-Q18, B-Q23, C-Q9, D-Q9

Q25: Secrets broker 在Agent生態中的角色？

• A簡: 按需簽發短期憑證與範圍控制，替代靜態密鑰，提供可審計的安全管道。
• A詳: 原理：動態授權。步驟：1) 收集請求與上下文；2) 校驗與同意；3) 發放短期Token；4) 記錄使用與撤銷。核心：範圍與TTL、最小授權、審計事件、事故回應。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: A-Q19, B-Q20, D-Q4, D-Q8

Q26: Accessibility API 作為Agent感知通道的原理？

• A簡: OS提供元素語意與事件流，Agent可讀取結構與狀態，穩定理解與操作。
• A詳: 原理：系統級語意與事件。步驟：1) 取得可及性樹；2) 監聽事件（焦點、狀態）；3) 對應動作；4) 回報結果。核心：語意完整度、事件可靠性、安全沙箱與資源限制。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q14, B-Q17, C-Q6, D-Q10

Q27: AI UX評估：傳統追蹤 vs LLM推論機制？

• A簡: 追蹤以事件與數據推斷；LLM依上下文即時推論滿意度與原因，互補提升洞察。
• A詳: 原理：雙路評估。步驟：1) 埋點與事件分析；2) LLM在關鍵節點推論滿意度與註記；3) 交叉驗證與決策；4) 持續優化。核心：上下文質量、量化與質化結合、回饋閉環。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q6, C-Q4, D-Q5, B-Q28

Q28: 指令化文件（tasks_md/dev-notes）如何作為長期記憶？

• A簡: 以任務清單與開發筆記持久化狀態，Agent可讀取與更新，支持長期協作。
• A詳: 原理：狀態持久化。步驟：1) 在instructions規定記錄時機；2) 自動寫入dev-notes；3) 任務拆解進tasks_md；4) Agent迭代讀寫與完成標記。核心：規約、觸發邊界、讀寫一致性、追蹤審計。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q10, C-Q2, C-Q3, D-Q7

Q&A 類別 C: 實作應用類（10題）

Q1: 如何設計 AI-native Git 的 gen-commit 命令？

• A簡: 擴充git命令收prompt/tests，調用Agent生成與驗證，產出bundle並記錄元資料。
• A詳: 實作步驟：1) 建立git子命令gen-commit；2) 支援–prompt與–tests參數；3) 呼叫Agent以repo context生成；4) 自動執行測試/驗證；5) 產生bundle並附meta。程式片段或設定： 示例CLI輸出： $ git gen-commit –prompt “Add billing” –tests “billing.spec.ts” 注意事項：記錄元資料schema、失敗回退、審查gate與artifact鏈接。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q1, B-Q2, B-Q3

Q2: 如何在Repo建立docs-as-code與artifacts管理？

• A簡: 規劃/docs、/src、/ai目錄，git版控文件與code，CI/CD部署文檔與產物管理。
• A詳: 實作步驟：1) 目錄：/docs（需求/設計）、/src（代碼）、/ai（prompt/tests/instructions）；2) 設定git hooks強制文件/測試；3) CI：文檔站部署；4) AM：artifact存儲與標記。設定片段：
  • .github/workflows/docs.yml 部署靜態站 注意事項：語意Diff、來源標註、文件與code一致性檢查。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q9, B-Q10, D-Q7

Q3: 如何在VSCode配置instructions.md與Copilot？

• A簡: 在/.github或/ai放instructions.md，定義規範，讓IDE/Agent自動載入。
• A詳: 步驟：1) 建立/.github/instructions.md；2) 寫入風格、檔案規約、禁止事項；3) 安裝Copilot/Claude Code；4) 驗證載入（新會話自動遵循）。片段：

  Instructions

  • 使用TDD
  • 介面先行 注意事項：版本化審查、避免過長、分段指令以提升可讀性與可控性。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q12, B-Q28, D-Q7

Q4: 如何快速做動態Dashboard（Markdown+Mermaid+Tools）？

• A簡: 用LLM解析意圖，選工具查資料，生成markdown/mermaid渲染動態視圖。
• A詳: 步驟：1) 定義查詢工具（logs/errors/deploy）；2) LLM抽取意圖；3) 呼叫工具取得資料；4) 生成markdown與mermaid；5) viewer渲染。程式片段：

  graph TD; API-->Errors; API-->Latency;
  

  注意事項：工具權限與速率、資料來源可靠性、渲染兼容性。

• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q6, B-Q8, D-Q10

Q5: 如何為網頁加上可及性標記供Agent操作？

• A簡: 使用ARIA role/name、label-for、alt與aria-*，建立穩定語意與定位。
• A詳: 步驟：1) 按鈕設role=”button”與aria-label；2) 表單輸入用；3) 圖片加alt；4) 狀態用aria-checked/expanded等；5) 用可及性檢測工具驗證。程式片段： 登入 注意事項：避免僅靠CSS選擇器、確保語意一致、支援鍵盤操作。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q18, B-Q17, D-Q2

Q6: 如何整合Playwright MCP讓Agent操作網站？

• A簡: 安裝MCP伺服器，暴露操作端點，確保頁面有可及性語意，供Agent穩定使用。
• A詳: 步驟：1) 部署Playwright MCP；2) 註冊工具端點（導航、點擊、輸入、截圖）；3) 確保頁面ARIA語意；4) Agent連線執行操作。設定片段： mcp-server.json: { tools: [“navigate”,”click”,”fill”] } 注意事項：等待策略、錯誤回退、權限與節流控制。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q17, B-Q19, D-Q10

Q7: 如何搭建CLI/Server-side Coding Agent的工作沙箱？

• A簡: 以容器提供workspace、工具鏈與infra，支援自動拉取、建置、測試與部署。
• A詳: 步驟：1) Docker映像安裝編譯/測試工具；2) 入口腳本git拉取與依賴安裝；3) 提供docker/k8s/DB mocks；4) 審計與限權。設定片段： Dockerfile安裝node/pytest/docker-cli 注意事項：快取依賴、最小權限、資源配額與觀測。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: B-Q15, C-Q8, D-Q6

Q8: 如何在GitHub/Azure DevOps佈署非同步Agent工作流？

• A簡: 以issue觸發Agent，分支修改與測試，PR報告與審核合併，並行擴展。
• A詳: 步驟：1) 設webhook：issue opened→Agent；2) 建分支與提交；3) CI跑測試；4) 發PR附分析；5) 人審查合併。設定片段（GitHub Actions）： on: issues; jobs: agent-run -> test -> pr 注意事項：並發控制、秘密管理、審計與錯誤回退。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: B-Q16, A-Q17, D-Q6

Q9: 如何建立最小MCP Server並接OAuth2.1？

• A簡: 實作工具端點、宣告授權位置，導向同意頁後交換Token，按scope執行。
• A詳: 步驟：1) 建立MCP server（/tools,/resources）；2) 在規格宣告auth issuer；3) 實作OAuth回調交換Token；4) 執行時攜帶Bearer；5) 記錄審計。程式片段： POST /oauth/callback → verify code → get token 注意事項：PKCE、短期Token、錯誤處理與範圍校驗。
• 難度: 高級
• 學習階段: 進階
• 關聯概念: B-Q19, B-Q20, A-Q20

Q10: 如何以TDD引導Vibe Coding，降低迭代成本？

• A簡: 先生成介面與測試，再補實作至綠燈，最後重構並同步文件。
• A詳: 步驟：1) 明確需求文件；2) 讓AI產出介面與型別；3) 生成測試（紅）；4) 實作讓測試過（綠）；5) 重構並更新文檔；6) PR審核。程式片段： test(‘結帳總額’, expect(total).toBe(…)) 注意事項：拆小步、工具化檢查、對齊文件與代碼、避免一次生成過多。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q13, B-Q14, D-Q6

Q&A 類別 D: 問題解決類（10題）

Q1: 遇到AI產生錯誤程式碼怎麼辦？

• A簡: 強化上下文與契約，用TDD拆解驗證，加入lint與靜態分析，必要時回退重試。
• A詳: 症狀：編譯失敗、測試不過、語意偏離。可能原因：context不足、提示模糊、一次生成過大、依賴缺失。解決步驟：1) 補文件與範例；2) 介面先行；3) TDD小步迭代；4) lint/靜態分析守門；5) 失敗回退與重試。預防：instructions明確、拆任務、測試先備。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q24, B-Q13, B-Q14, C-Q10

Q2: Agent找不到登入按鈕的常見原因？

• A簡: 缺ARIA語意、DOM動態變動或選擇器脆弱，需補可及性標註與穩定定位。
• A詳: 症狀：自動化點擊失敗、元素未定位。原因：無ARIA/label、動態ID、延遲渲染。解法：1) 加ARIA role/name與label-for；2) 使用語意選擇器；3) 明確等待策略；4) 提供穩定測試ID。預防：可及性檢測、語意一致、減少動態DOM。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q14, B-Q17, B-Q18, C-Q5

Q3: 模型回應很慢或超時的原因？

• A簡: 思維鏈過長、外部工具延遲或上下文過大，需優化步驟與採非同步背景執行。
• A詳: 症狀：回應延遲、超時失敗。原因：長推理、串多工具、context冗長。解法：1) 分段任務；2) 背景async執行；3) 壓縮與摘要上下文；4) 快取工具結果；5) 選擇合適模型。預防：步驟設計、配額控制、性能監控。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q17, B-Q16, B-Q10, C-Q8

Q4: Secrets泄漏或APIKEY誤用怎麼辦？

• A簡: 立即撤銷與旋轉密鑰，審計來源，改用OAuth動態授權與短期Token。
• A詳: 症狀：費用異常、未授權存取。原因：密鑰硬編碼、廣泛可見、流程不合規。解法：1) 撤銷密鑰並旋轉；2) 審計存取路徑；3) 改用OAuth2.1；4) 引入Secrets broker；5) 建立配額與警報。預防：最小權限、不得存repo、審計強化。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q19, B-Q20, B-Q25, C-Q9

Q5: Context window溢出導致回答失真如何處理？

• A簡: 分塊與RAG檢索，按需載入；摘要與引用來源，控制上下文大小與相關性。
• A詳: 症狀：答非所問、遺漏關鍵。原因：上下文過長、噪音多。解法：1) 文件分塊與向量索引；2) 檢索相關片段；3) 加摘要與來源標註；4) 控制注入大小；5) 分步載入。預防：文件規約、檢索策略、會話管理。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q10, B-Q11, C-Q2, B-Q28

Q6: 非同步Agent提交的PR測試全紅怎麼辦？

• A簡: 檢查介面/測試一致、環境與依賴，回退重跑，用TDD分段修復。
• A詳: 症狀：CI測試失敗。原因：提示偏差、環境差異、依賴缺失、資料邊界問題。解法：1) 對齊文件與契約；2) 修環境與mock；3) 小步修正；4) 重觸發Agent迭代；5) 加入審核gate。預防：介面先行、依賴聲明、沙箱一致。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: B-Q13, B-Q16, C-Q7, C-Q8

Q7: 文件與程式碼不一致如何修正？

• A簡: 設定文件為事實來源，啟用一致性檢查與commit gate，必要時由AI同步生成。
• A詳: 症狀：功能與文件描述不符。原因：變更未同步、審核缺失。解法：1) 定義文件為單一事實來源；2) 啟用一致性lint與PR檢查；3) 用Agent更新文件與代碼；4) 在commit綁定prompt/tests。預防：文檔治理、審核流程、語意Diff摘要。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q3, B-Q9, B-Q28, C-Q2

Q8: MCP授權失敗（OAuth）如何診斷？

• A簡: 檢查回調URL、scope與PKCE，確認Token有效期與發行者，重試授權流程。
• A詳: 症狀：401/403、工具拒絕執行。原因：回調不匹配、scope不足、Token過期、發行者錯誤。解法：1) 校驗配置；2) 重新授權；3) 檢查PKCE流程；4) 查看審計日誌。預防：配置標準化、短期Token與刷新機制、錯誤警報。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: B-Q20, C-Q9, A-Q20, B-Q25

Q9: Token亂花導致費用暴增的原因與防範？

• A簡: 上下文過大、模型不當、抽樣濫用；需設配額、摘要快取與使用量告警。
• A詳: 症狀：帳單飆升。原因：無限制context、選高價模型、Sampling頻繁、工具反覆。解法：1) 設配額與限速；2) 適配模型；3) 摘要/快取；4) 監控使用量與告警；5) 優化步驟與資料。預防：預算治理、策略控制、審計。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: B-Q21, B-Q23, A-Q21, C-Q8

Q10: UI自動化flakiness高如何提升穩定性？

• A簡: 使用語意選擇器與明確等待，加可及性標註與穩定測試ID，減少動態DOM。
• A詳: 症狀：測試偶發失敗。原因：動態渲染、時序不穩、選擇器脆弱。解法：1) ARIA語意與label；2) 明確等待條件；3) 穩定data-testid；4) 錯誤回退策略；5) 監控失敗模式。預防：可及性規約、穩定DOM、測試設計。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q18, C-Q5, C-Q6, B-Q17

學習路徑索引

• 初學者：建議先學習哪 15 題
  • A-Q1: 什麼是 AI-native Git？
  • A-Q2: 為何在 AI 時代要重新思考版控？
  • A-Q3: code 與 artifact 的差異？
  • A-Q5: 什麼是 Synthesis / Generative UI？
  • A-Q6: AI-driven interfaces 的核心價值是什麼？
  • A-Q7: Dashboard 動態生成與傳統差異？
  • A-Q9: 什麼是 Document as Code？
  • A-Q10: Docs are evolving 的定義是什麼？
  • A-Q11: Prompt 與 Context Engineering 差異？
  • A-Q12: 什麼是 Vibe Coding？
  • A-Q14: 為什麼 Accessibility 會成為通用介面？
  • A-Q17: 為什麼需要非同步 Agent 工作？
  • B-Q6: Dynamic dashboards 如何生成？
  • B-Q9: Docs-as-code 的工具鏈怎麼設計？
  • D-Q1: 遇到AI產生錯誤程式碼怎麼辦？
• 中級者：建議學習哪 20 題
  • B-Q1: AI-native Git 如何運作？
  • B-Q2: gen-commit 的執行流程為何？
  • B-Q3: 版控如何追蹤 prompt 與 tests？
  • B-Q4: AI-driven UI 技術架構（MVC+LLM）
  • B-Q5: Controller 如何讓 AI「感知」使用者？
  • B-Q10: Context windows 與文件的「虛擬記憶體」機制？
  • B-Q11: RAG 在文件與代碼協作中的作用？
  • B-Q12: IDE instructions.md 如何生效？
  • B-Q13: Vibe Coding 的標準步驟？
  • B-Q14: TDD 與 Vibe Coding 的整合流程？
  • C-Q2: 建立 docs-as-code 與 artifacts 管理
  • C-Q3: VSCode 配置 instructions.md 與 Copilot
  • C-Q4: 動態 Dashboard 快速實作
  • C-Q5: 網頁可及性標記供 Agent 操作
  • C-Q6: 整合 Playwright MCP 操作網站
  • D-Q2: Agent找不到登入按鈕的常見原因
  • D-Q5: Context window 溢出處理
  • D-Q6: 非同步Agent PR全紅的處理
  • D-Q7: 文件與程式碼不一致修正
  • D-Q10: UI自動化穩定性提升
• 高級者：建議關注哪 15 題
  • A-Q18: Agentic Application 的抽象基礎元件
  • A-Q19: Beyond .env 的概念
  • A-Q20: OAuth2.1 在 Agent 世界中的定位
  • A-Q21: 什麼是 MCP Sampling？
  • A-Q22: 什麼是 Agentic Commerce Protocol（ACP）？
  • B-Q15: CLI/Server-side Agent 沙箱設計
  • B-Q16: Async agent 工作流在DevOps平台運作
  • B-Q19: MCP 基本架構與端點組件
  • B-Q20: MCP 授權流程與OAuth2.1
  • B-Q21: MCP Sampling 回呼機制
  • B-Q22: ACP 三方API交互機制
  • B-Q23: Agent 平台計量與計費原理
  • B-Q24: Abstracted primitives 封裝
  • C-Q9: 最小MCP Server與OAuth整合
  • D-Q9: Token費用暴增的防範策略