AI Engineer Europe 2026 · 演講 · 2026-04-10 · 53 分
網頁開發者的 AI 新工作流
AI Didn’t Kill the Web, It Moved in! · Olivier Leplus、Yohan Lasorsa，AWS / Microsoft
兩位 developer advocate 輪流示範：用 skills 讓 agent 寫程式、用 DevTools 除錯、用瀏覽器內建模型，最後讓網站被 agent 讀懂。
概要
- 寫程式靠 skillsYohan 說現在的問題已經不是能不能用 AI 寫網頁，而是怎麼讓 coding agent 做出好結果；做法是裝 skills，再用 AGENTS.md 寫死每次改完要錄影、開 tunnel、傳網址到手機。
- Agent 可以直接操作 ChromeOlivier 接上 Chrome DevTools MCP，請 agent 開瀏覽器測首頁，再分別在 3G、2G 和快速網路下跑效能。agent 回報了各網速的指標，並指出耳機圖片太大。
- DevTools 裡也有 AIYohan 示範在 console、network、performance 面板與元素檢視裡直接問 AI。這功能要先到設定的 AI innovation 分頁自己打開，改完的 CSS 還能用 apply to workspace 寫回原始碼。
- 瀏覽器內建模型Olivier 與 Yohan 展示 Summarizer、Proofreader 和 Prompt API，模型在本機跑，不用呼叫外部 API。兩人一再提醒這些 API 還在實驗階段，一週內就有改動。
- 為 agent 準備網站llms.txt 像給 agent 的地圖，llms-full.txt 則把整站內容收成一個檔，可以餵給 agent 補足訓練資料的落差。
- WebMCP 讓網頁直接給 agent 工具網頁可以註冊有名稱、描述與 schema 的 tool，也能在現有表單上加屬性轉成 tool。Olivier 把它比成當年的響應式設計，說這個 API 十天前才又改過。
原話
▶ 01:30“It's no longer the question of can I code my web app with AI, but rather how to get the best results out of AI coding agents.”
現在的問題不再是能不能用 AI 寫網頁，而是怎麼讓 coding agent 做出最好的結果
▶ 41:23“So the websites are being designed for humans, not agents.”
所以現在的網站是為人設計的，不是為 agent
▶ 50:18“At some point, you had to adapt your website for mobile. If you didn't do it, then the competition did it.”
有一陣子你得讓網站適應手機，你不做，競爭對手就做了
延伸
- Yohan 的 skills 流程用 Telegram 傳網址，也可以換成 Slack 傳給同事。
- Olivier 說瀏覽器內建模型只會下載一次、目前約四 GB，之後每個網站都能用；儲存空間不足時 Chrome 會自己刪掉。
章節
點時碼直接跳到原片的那一段。
- 開場與議程Yohan 與 Olivier 自我介紹，說明這六個月模型品質提升，AI 已經出現在開發、除錯、效能與瀏覽器內建功能上，甚至 agent 也開始使用網頁。
- skills 是什麼Yohan 說關鍵是 skills：用文字描述、依開放規格寫的輕量外掛，用來補領域知識、新能力和可重複的流程。
- Issue 到實作的 demo用一個電商示範站，請 agent 讀 repo 的 open issue 並實作第一個（加聯絡頁），過程用 GitHub CLI skill；也講 skill.md 的 name 與 description 怎麼讓 agent 按需載入，以及 Yohan 自製的 skills 與 AGENTS.md 流程。
- Chrome DevTools MCPOlivier 把除錯交給 agent：說明 MCP server 提供工具，裝上 Chrome DevTools MCP 後，agent 能點擊、填表單、讀 console 與網路請求、跑 Lighthouse、截圖。
- 用 agent 跑效能測試agent 自己啟動應用、開 Chrome 測首頁，再依要求在不同網速下錄 trace，最後給出各網速的指標與優化建議，包括耳機圖片太大。
- 手機通知收到了回頭看前面那個 demo：一度因找不到 token 失敗，重試後手機收到影片預覽與網址，聯絡頁完成；Yohan 也說可以改傳到 Slack 給同事。
- DevTools 內建 AI先到設定的 AI innovation 分頁開啟，再在 console 解釋 CORS 錯誤、在 network 針對失敗的請求直接問 AI。
- 效能面板與改 CSS在 GitHub 網站的 trace 上問 LCP 為什麼慢，再選元素請 AI 把標題改成漸層，最後用 apply to workspace 把改動寫回原始碼。
- 瀏覽器內建 AI 與 SummarizerOlivier 介紹還在草案階段的 web AI API，示範 Summarizer：先檢查支援、設定類型與語言、監看模型下載，再把評論摘要出來。
- Proofreader對評論輸入框校正拼字錯誤，回傳的結果含修正後文字，以及每處修正的起訖位置。
- Prompt API 與實驗階段Yohan 用多模態的 Prompt API 讓使用者上傳圖片，依 JSON schema 回傳評論標題與內容；結尾提醒這些 API 變動很快。
- 讓網站對 agent 友善：llms.txtYohan 說網站不只要為人和搜尋引擎做，也要讓 agent 好用，並以 angular.dev 為例說明 llms.txt 與 llms-full.txt，後者能讓 coding agent 用最新版的寫法，不會搬出訓練資料裡的舊範例。
- WebMCP 的問題意識Olivier 說現有瀏覽器 agent 靠截圖或 DOM 模仿人操作，WebMCP 想讓網頁自己提供 agent 看得懂的工具。
- 註冊 add to cart 工具手寫工具的名稱、描述、schema 與 execute 函式，註冊後在擴充功能與 IDE 的 agent 裡都能呼叫，加入購物車。
- 把現有表單變成工具不改 JavaScript，只在表單加屬性，就自動從輸入欄位產生 schema；也示範讓工具填完表單後自動送出。
- 結論Olivier 把這波轉變比作當年網站得適應手機，建議現在就開始實驗。最後兩人總結：AI 讓寫程式與除錯都變輕鬆，開發者也要反過來讓 AI 工具用得了自己的網站；llms.txt 已經很普及，WebMCP 正在到來。
名詞
- Skills
- 用文字描述、依開放規格寫的輕量外掛，agent 依任務需要才載入，用來補領域知識與固定流程
- AGENTS.md
- 多數 coding agent 都支援的標準檔，Yohan 在裡面寫下每次改完網站要做的步驟
- Chrome DevTools MCP
- 讓 agent 呼叫 Chrome DevTools 功能的 MCP server，可以操作頁面、讀 console 與網路請求、跑 Lighthouse
- Playwright CLI
- Yohan 的流程中用來替新功能錄影的工具
- Web AI APIs
- 瀏覽器內建的 AI API，包含 Summarizer、Proofreader、Prompt API 等，模型下載到本機執行
- llms.txt
- 給 agent 的網站導覽檔，形式是帶連結的 Markdown；llms-full.txt 則把全部內容放在同一個檔案
- WebMCP
- 讓網頁向 agent 提供工具的提案，可以用 JavaScript 註冊，也可以在表單上加屬性
