現場試用 · 分講者逐字稿體驗站
上傳一段錄音，看看 AI 怎麼把會議變成逐字稿
掃描 QR Code 開啟體驗站
speaker-transcript-oeesmz.pages.dev
課堂提問
這個網站同時需要給人操作，也需要讓 Mac 上的轉錄程式取件、處理並送回結果。哪些部分是人看的介面，哪些部分是系統之間的溝通？
03B
從做出一個網頁，到讓人跟 AI 都好找、好讀、好用。
江江教練｜江昱德 Knowledge
有沒有人已經叫 AI 做過網頁，但最後只在自己的電腦上看得到？
人閱讀文章、課程、服務與作品。
AI 理解網站是誰、有哪些內容、資料彼此什麼關係。
在清楚的工具與授權範圍內，AI 可以查詢或執行操作。
人、工作夥伴、自己的 AI 與別人的 AI，共用資訊與工作狀態。
網站也可以是操作站、工作站，是人與 AI 共同理解資訊、交換資訊、完成工作的介面。
如果網站同時要給人看、給 AI 看，甚至給 AI 使用，它還需要多準備哪些資訊、工具與權限？
網站同時服務三種訪客：
人、搜尋引擎、AI。
Cloudflare 2026 官方報告依其網路觀測資料指出，超過 50% 的網路流量為非人類流量。這裡包含一般機器人、搜尋爬蟲與 AI 爬蟲，不能全部算成 AI Agent。
深度文章：網路上一半以上的訪問已經不是人了 ↗ 官方來源：Cloudflare 2026 Agentic Internet Report ↗非人類流量、搜尋爬蟲、AI 爬蟲與 AI Agent 是同一件事嗎？它們的範圍差在哪裡？
Search Engine Optimization
搜尋引擎最佳化
整理網頁內容、結構與技術訊號，幫助搜尋引擎收錄、理解，並在相關搜尋中呈現。
AI Optimization
AI 最佳化
把資料寫得清楚、完整、可驗證，讓 AI 容易辨識重點，並把內容組成可靠的回答。
Generative Engine Optimization
生成式引擎最佳化
強化內容的可信度、可引用性與來源訊號，增加內容被生成式搜尋採用或引用的機會。
Agent Experience Optimization
AI Agent 體驗最佳化
讓 AI Agent 容易辨識網站身份、資料關係、可用功能、操作規則與權限邊界。
WebMCP API
網頁提供 AI 工具的草案介面
網站把功能註冊成帶有用途說明與結構化參數的工具，讓瀏覽器裡的 AI Agent 可以呼叫。
SEO、AIO、GEO、AXO 是看網站的四種角度；WebMCP 處理網站怎麼把功能提供給 AI 使用。它們可以同時存在，沒有固定先後。
同一個網站，為什麼可能同時需要被搜尋引擎找到、被 AI 理解、被生成式答案引用，也被 AI Agent 操作？
搜尋引擎怎麼找到並理解這個網站？
AI 怎麼從正式內容形成正確答案？
生成式 AI 為什麼採用或引用這份內容？
AI 怎麼理解網站的身份、內容、關係與邊界？
它們可以同時存在，也可以分別改善；沒有固定的第一步、第二步或成熟度順序。
同一個網站可以同時改善 SEO、AIO、GEO 與 AXO 嗎？其中一定要先完成哪一個嗎？
搜尋引擎能不能抓到、索引、理解，再把頁面放進適合的搜尋結果。
robots.txt、sitemap、清楚標題與描述、穩定網址、Search Console、原創內容。
SEO 處理搜尋引擎入口。頁面抓不到，AI 也可能少一條找到你的路。
有人搜尋「AI 做網站課程」時，你的課程頁有沒有機會出現在搜尋結果？
把名稱、價格、日期、條件、限制與更新時間寫清楚，讓 AI 能找到並核對。
AI 從店家與旅宿官網找到正確房型、價格、活動內容與適用日期，再整理成回答。
官網資料寫得越明確、完整、可核對，AI 越有機會回答正確。價格與活動會變動，也要標示更新日期。
如果有人請 AI 規劃到你的城市旅行，AI 能不能從店家官網找到正確房型、價格、活動與日期？
清楚寫出作者、日期、原始主張、實際案例與引用來源，讓 AI 知道這個觀點來自誰。
AI 回答時明確說「參考江江教練的觀點」，整理江江對網站的主張，並附上原文連結。
GEO 增加被採用的機會，不保證被引用。各家 AI 的搜尋來源與選擇方式也不完全相同。
有人問 AI「怎麼做網站」或「AI 時代的網站長什麼樣」時，它會不會引用你的名字、觀點與原文連結？
它處理的是理解，不等於取得修改或操作網站的權限。
比較容易理解這是誰的網站、有哪些服務、文章與課程，以及內容彼此的關係。
Mika 這類站內 AI，也能受益於清楚的內容結構、知識來源與回答邊界。
AXO 解決「看得懂」；能不能操作，要看 API、MCP、WebMCP 或 Computer Use。
AI 能不能辨認江江、課程、文章與 Mika，並說清楚它們彼此的關係與回答邊界？
| SEO | 搜尋「AI 做網站課程」時，有機會看到這一頁。 |
| AIO | AI 能從正式課程頁正確回答日期、對象、費用與限制。 |
| GEO | AI 討論怎麼學做網站時，引用江江的教學觀點。 |
| AXO | AI 能理解這是江江的正式課程頁、內容與其他文章的關係，以及哪些資訊不能自行推論。 |
同一頁可以同時從四個角度檢查，但四個概念沒有固定先後。
把表格裡的「課程頁」換成你的網站後，SEO、AIO、GEO、AXO 分別會檢查什麼？
課程介紹、個人品牌、活動頁，還是作品集？
這個網站主要要給誰看？
你有哪些真實文字、圖片與連結要放？
希望對方看完之後做什麼？
請幫我做一個＿＿網站，主要給＿＿看，要放＿＿，看完希望他＿＿。只使用我提供的資料。
如果現在要請 AI 幫你做網站，你要做哪一種網站、給誰看、放什麼內容，又希望對方看完做什麼？
使用前請向江江取得體驗碼。請用一般練習音檔，不要上傳機密錄音。
開啟分講者逐字稿體驗站 ↗
掃描 QR Code 開啟體驗站
speaker-transcript-oeesmz.pages.dev
這個網站同時需要給人操作，也需要讓 Mac 上的轉錄程式取件、處理並送回結果。哪些部分是人看的介面，哪些部分是系統之間的溝通？
睡眠、斷網或關機，網站就消失。
自由度高，維護、更新、安全都要處理。
照平台規則，把網站放上去就有網址。
把網站放到能公開連線的主機，就是部署。今天比較 GitHub Pages、Vercel、Cloudflare Pages 三種託管方案。
網站只存在自己的電腦裡，和放進一間全天營業、任何人都能抵達的百貨公司，有什麼差別？
文字、圖片、按鈕、作品集、活動介紹。訪客打開就看得到。
檢查密碼、記錄表單、存照片、呼叫 AI。訪客看不到，但網站要執行。
只有展示，選擇很多；需要登入、資料與程式，平台能力就會拉開。
你的網站只需要展示內容，還是也需要登入、存資料、上傳檔案或處理付款？
| 正式名稱 | 平台類型 | 最適合扮演的角色 |
|---|---|---|
| GitHub Pages | GitHub 的靜態網站託管服務 | 公開作品、文件、Demo 與教材 |
| Vercel | 前端應用部署與託管平台 | 現代前端、快速部署與版本預覽 |
| Cloudflare Pages | Cloudflare 的前端網站部署服務 | 公開正式站，再逐步接運算、資料與安全功能 |
課堂與對外文件都直接使用產品正式名稱，不另外創造平台簡稱。
GitHub 與 GitHub Pages 有什麼不同？哪一個負責保存版本，哪一個負責發布網站？
一句話：GitHub 管版本與備份，GitHub Pages 把公開內容展示出來。
官方文件：GitHub Pages limits ↗公開商業介紹頁、線上交易網站與商用 SaaS，在 GitHub Pages 的使用限制上有什麼差別？
一句話：Vercel 強在部署、預覽與現代前端開發流程。
官方文件：Vercel Hobby Plan ↗如果每次修改都能先得到一個獨立預覽網址，對團隊審稿與確認版本有什麼幫助？
Pages 放網站；Workers 跑程式；D1 存表格資料；R2 存大檔案。Cloudflare 現行文件建議新專案也從 Workers 開始，既有 Pages 仍可繼續使用。
江江深度文章：Cloudflare 免費版到底能做什麼？ ↗ 官方文件：Cloudflare Pages getting started ↗新的 Cloudflare 專案應該從 Pages 還是 Workers 開始？既有 Pages 專案又該怎麼處理？
| 問題 | GitHub Pages | Vercel | Cloudflare Pages |
|---|---|---|---|
| 公開靜態展示 | 適合 | 適合 | 適合 |
| 版本預覽與前端框架 | 基礎 | 主場 | 可做 |
| 商業正式站的免費起點 | 用途受條款限制 | Hobby 限非商業 | 免費方案未見同類非商用限制 |
| 運算、資料與檔案整合 | 外接 | 可接服務 | Workers、D1、R2 |
平台政策會變。幫客戶報價或正式上線前，要重新讀官方方案與條款。
江江深度文章：三家免費額度、商用限制與功能差異 ↗公開文件、團隊預覽、商業公開站三種需求，分別會讓你優先評估哪一個平台？
先排除不符合商用條款的免費方案。
要登入、存資料、上傳檔案，就需要後端。
知道網址不等於有鎖；敏感內容要真的做權限。
回答完，通常只剩一到兩個合理選項。
江江深度文章：託管平台決策樹 ↗你的網站是自己使用還是商業用途？只展示還是需要執行功能？公開還是限制特定對象？
「幫我把這份課程資料做成 Google 簡報。」
我只需要說清楚想完成什麼，不需要知道 CreateImageRequest 是什麼。
江江的課程型簡報，第二頁固定放講師介紹。這是我的經驗與 SOP。
Skill 管我的做事方法，也說明為什麼第二頁要放講師介紹。
「第二頁固定放講師介紹」是 Google 的規則，還是江江自己的工作方法？
找到江江的講師照片。
放入「江昱德」。
加入職稱與介紹文字。
決定圖片、文字的位置與大小。
Agent 負責理解目標、拆解任務，並決定下一步需要什麼工具。
如果只收到「做講師介紹」這句話，Agent 還需要判斷哪些內容與版面？
我要放講師照片、加入姓名與介紹文字，再調整版面。
有哪些工具可以建立投影片、插入圖片、建立文字、更新文字、移動與縮放元素，以及每個工具需要哪些參數。
MCP 管 AI 怎麼找到並使用正確工具。
上面的工具名稱是概念示例，實際名稱依 MCP Server 的實作而不同，並非 Google 官方固定工具名稱。
MCP 本身在做投影片，還是在告訴 Agent 有哪些工具、各自怎麼使用？
建立新的投影片。
指定頁面、圖片來源、尺寸、位置與縮放。
建立文字框，再放入姓名、職稱與介紹。
文字樣式可用 UpdateTextStyleRequest，元素位置與縮放可用 UpdatePageElementTransformRequest。這些更新可透過 presentations.batchUpdate 一起送出。
Google 官方：Request 類型 ↗ Google 官方：新增圖片 ↗一張講師照片真正插入第二頁時，API 至少需要知道哪些資料？
知道江江為什麼要把講師介紹放在第二頁。
讓 Agent 找到插圖、文字與版面工具，並讀懂參數。
收到精確 Request，真的修改 Google Slides。
在這條翻譯鏈裡，哪一層知道江江的做事方法？哪一層真的修改 Google Slides？
第二頁、照片網址、座標、尺寸都已經寫死，程式可以直接呼叫 Google Slides API。
固定指令 → API → 完成
需求會變，Agent 必須先判斷要做什麼，再從多個工具中找到適合的一個並填好參數。
需求 → Skill → Agent → MCP 工具 → API
Skill 管我的做事方法；MCP 管 AI 怎麼找到並使用正確工具；API 負責真的把事情做掉。
如果頁面、圖片、尺寸與座標都已確定，直接呼叫 API 是否已經足夠？
MCP Server 可以把 Google Slides 這類服務的能力整理成 Agent 能理解與呼叫的工具。
WebMCP 的方向，是讓網站直接註冊工具名稱、用途與參數，交給瀏覽器裡支援的 Agent 使用。
網站不只讓 AI 看懂，也可以清楚告訴 AI：這裡有哪些工具，以及怎麼使用。
WebMCP 目前仍是社群草案，支援環境有限。工具仍需設計唯讀、授權與人工確認等安全邊界。
江江深度文章：官網接上 WebMCP ↗如果你用 Live Coding 做了一個小網站，最想先把哪一個安全、明確的功能交給 Agent 使用？
| 概念 | 主要對象 | 核心問題 | 網站要準備什麼 |
|---|---|---|---|
| SEO | 搜尋引擎 | 搜尋時找不找得到？ | 清楚標題、頁面結構、內部連結、技術可讀性 |
| AIO | 回答問題的 AI | AI 能不能讀懂並正確作答？ | 明確定義、完整上下文、可核對的事實與更新日期 |
| GEO | 生成式搜尋與答案引擎 | AI 會不會採用或引用？ | 原始資料、作者與品牌身份、證據、引用來源 |
| AXO | 會規劃與執行的 AI Agent | Agent 看不看得懂網站與操作邊界？ | 結構化資料、狀態、規則、權限與回傳結果 |
| WebMCP | 瀏覽器裡的 AI Agent | AI 要怎麼確定地呼叫網頁功能？ | 工具名稱、自然語言用途說明、結構化參數與執行函式 |
簡單操作可以直接串 API；當網頁要把多個功能交給瀏覽器裡的 AI 使用時，WebMCP 才更有價值。
WebMCP 目前是 Web Machine Learning Community Group 的草案，尚未成為 W3C 標準。
如果網站只有一個很單純的查詢功能，直接串 API 是否已經足夠？什麼情況才需要 WebMCP 來說明工具規格？
拖 Mika、改時間軸、換表情、調鏡頭。
理解「延後半秒」，再透過工具修改動畫資料。
人改成 X＝420，Agent 看得到；Agent 改成 X＝380，畫面也立即更新。
以前教人怎麼操作軟體。
現在也要教軟體怎麼讓 AI 操作自己。
如果人與 Agent 都能修改動畫，兩邊怎麼知道 Mika 現在的位置？真正需要共同維護的本體是什麼？
另一篇〈Cloudflare 免費方案夠用嗎？每天十萬次很寬，每一輪五十件事很緊〉仍在官網看板排隊，尚未公開上線。
你現在最需要查的是平台選擇、三家免費額度與商用限制，還是 Cloudflare 各項服務的用途？
GitHub Pages、Vercel、Cloudflare Pages。
沒有固定先後，也不是成熟度階梯。
看得懂不等於能操作。
API、MCP、WebMCP 與 Computer Use 各有用途。
遇到一個新需求時，你會先問它解決什麼問題、是否需要 AI 判斷，以及系統有沒有正式工具介面嗎？
