20251101 DevFest 2025 - 如何以 Angular AI 工具來提升網頁開發效率與品質

GDG Taoyuan - DevFest 2025

1. Taoyuan
Kun-Neng Hung 洪堃能
Sr. Frontend Engineer
如何以 Angular AI 工具來提
升網頁開發效率與品質
2025

2. ●AI 在前端開發現況
●LLM：於 Copilot 使用客製化指示
●MCP Server：智慧後端助理
●Google AI Studio -- Build

3. 00
AI 在前端開發現況

4. Editable Location
為什麼「AI 輔助開發」在
Angular 生態特別重要？

5. Angular 專案相較於其他框架或函式庫
●基礎知識與技術較多，如強型別、依賴注入（ DI ）、 RxJS 等

●專案架構龐大、規範嚴謹，開發時需要遵守結構與命名慣例

●維護與升級（新技術的學習成本）成本較高

●CLI 與 Schematics 雖強，但仍需人工思考邏輯
AI 能自動分析資料流並建議最合適的函式，以自然語言就能修正可能的錯誤
AI 能自動產生符合 Angular 結構規範的樣板，減少樣板撰寫與命名錯誤
AI 能輔助版本升級、重構、 Lint 檢查與文件生成，讓大型專案維護更輕鬆
可根據需求以 prompt 產出功能邏輯完整的元件與服務

6. 框架或函式庫 自由度標準化學習曲線 適合 AI 輔助的程度
React 高 低 中
★★☆☆☆
AI 可生成 UI 與邏輯，但結構不固定
Vue 中 中 低
★★★☆☆
AI 可生成模板與組件，但應用簡單
Angular 中低 高 高
★★★★★
AI 最能減少樣板與邏輯複雜度

7. 在沒有 GenAI 輔助時，需要解決的痛點
開發初期的架構設計
邏輯與型別推斷
測試撰寫成本
樣式與 UI 一致性維護
文件撰寫與知識移轉
專案規模擴大後的維護

8. 01
LLM
於 Copilot 使用客製化指示

9. LLM
●大型語言模型（ large language model, LLM ）
●改變了＂軟體如何開發＂與＂開發者如何工作＂
●指示（ instruction ）和提示（ prompt ）是一種新興
的標準，用於生成支援具有特定領域細節的現代程
式碼

10. 根據 Angular 最佳實踐生成符合規範的程式碼
You are an expert in TypeScript, Angular, and scalable web
application development. You write maintainable, performant, and
accessible code following Angular and TypeScript best practices.
## TypeScript Best Practices
- Use strict type checking
- Prefer type inference when the type is obvious
- Avoid the `any` type; use `unknown` when type is
uncertain
## Angular Best Practices
- Always use standalone components over NgModules
- ...

11. Copilot 指示（ instruction ）
●幫助我們客製化與 LLM 的對話，來滿足程式碼的最
佳實踐與專案需求
●經由撰寫一致配置檔，可以自動將我們偏好的上下
文（ context ）、工具和指南套用至每一次的對話，
以節省時間並確保回應的一致性，而不需要在每個
聊天請求中，手動提供相同的資訊

12. 客製化與 LLM 的對話
1.於專案根目錄下建立 Angular.instructions.md
2.將內容寫入指示

若有多個指示資料夾，可以在工作區設定
chat.instructionsFilesLocations

13. 替 Angular 提供客製化的 Copilot 指示

14. Editable Location
隨著技術更迭，
使用相同的 指示還能讓 LLM 產生
符合最新、最佳實踐 的程式碼？

15. 02
MCP Server
智慧後端助理

16. MCP (Model Context Protocol)
●想像一個 AI 模型要跟外部世界（如資料庫、 API
、檔案系統、甚至公司 內部系統等）互動，但不同
系統的介面和規則都不一樣
●如果要讓 AI 模型連接不同的工具或資料來源，需
要寫一堆客製化程式（如設計 API 、格式轉換、錯
誤處理等），耗時且不易共享

17. MCP (Model Context Protocol)

18. Angular MCP
●Angular CLI 20.1.0 加入 MCP Server

19. Angular MCP
●主動查詢 Angular 文件、搜(?4E&?'&([j?
步官方最佳實踐，而無需依賴可能過時的訓練資料
○降低整合難度 ：只要大家都用 MCP ，模型就能更輕鬆地接取不同工具
○可移植性 ：一個 MCP 工具可以同時使用在不同的 AI 模型，減少重工
○安全性：MCP 定義了明確的存取規範，避免 AI 模型隨便存取敏感資料

20. 在 Angular 使用 MCP
1.建立一個 Angular 20.1.0 版本（或以上）的專案
npx @angular/[email protected] new angular-cli-mcp
2.使用指令來 啟動 MCP 伺服器
ng mcp

21. 在 Angular 使用 MCP
3.在專案根目錄建立 .vscode/mcp.json 檔案
{
"servers": {
"angular-cli": {
"command": "npx",
"args": ["-y", "@angular/cli", "mcp"]
}
}
}

22. 在 Angular 使用 MCP
4.啟動 MCP 伺服器（在 mcp.json 檔案操作）

23. 在 Angular 使用 MCP
4.啟動 MCP 伺服器（在延伸模組中的 MCP 伺服器選
取 angular-cli 後，點選＂ 啟動伺服器＂）

24. 測試 MCP
●在 agent 模式下，
以 prompt 進行設
定檢查
○search_documentation
○list_projects
○get_best_practices

25. Angular CLI MCP 介紹 Angular MCP 實作範例

26. 03
Google AI Studio
Build

31. 總結
●AI 在前端開發現況
●LLM
●MCP Server
●Google AI Studio -- Build