AI Agent Literacy 學習分析工具・NTNU・Week 1 – 16 作品集

WEEK 04

AI Agent 內建瀏覽器

AI Agent 控制瀏覽器的方法有很多種，Codex 自己就帶了一個瀏覽器。這週看它怎麼打開網頁、卡住時發生什麼事，以及它實際用 Blockbench 做出一組方塊桌椅。第二支影片介紹它還能幫你做的三件事：看、改、查。第三支影片是這週的作業「東京銀杏散步地圖網站」：只有一次機會的 Single-turn Prompting，先請 Codex 分析資料，再把需求寫成一份 BRIEF.md。第四支影片是遠端連線作業：把 Week 3 的專案放上 GitHub、用 Mermaid 畫流程、用內建瀏覽器檢查網站。補充教材介紹 GitHub：用 clone、commit、push、pull 四個指令管理版本，也可以請 Codex 幫你做。第二支補充教你用 Mermaid 以文字畫流程圖。

影片 01AI Agent 內建瀏覽器

  1. AI Agent 控制瀏覽器的方法有很多種。Playwright 適合大規模背景自動化（含測試），Chrome DevTools MCP 適合特定場景，Chrome Plugin & Extension 綜合能力高，內建瀏覽器支援多、好上手，Computer Use 效率低、是下下之選。

  2. Codex 自己帶了一個瀏覽器。輸入「打開內建瀏覽器，並隨意搜尋做測試」，右邊就會打開瀏覽器面板，由 Codex 幫你操作網頁。

  3. 卡住時，它會告訴你卡在哪裡。叫它用 Blockbench 做方塊桌椅時，它回報瀏覽器控制工具缺少 26.928.20755/browser-service.mjs，所以無法操作頁面。想一想：如果是你，會怎麼回它？

  4. 用內建瀏覽器有什麼好處？你和 Codex 在對話旁邊看同一個網頁；你可以直接在網頁上框選一塊、留言，告訴它要改哪裡；它可以自己開網頁、點按鈕、打字，確認改的東西真的有用。內建瀏覽器用的設定檔和你平常的瀏覽器分開，不會共用你現有的分頁和登入。

  5. 實際操作要花時間。從修復到做出方塊桌椅並存檔，整段工作花了 22 分 34 秒，影片裡的錄影是其中的 14 分 25 秒；錄影有快轉，畫面上標出倍數。用內建瀏覽器做 3D 建模這種複雜工作效率不高，這裡只是展示，讓你先對內建瀏覽器有感覺。

影片 02內建瀏覽器還能做的三件事：看、改、查

  1. 內建瀏覽器還能幫你做三件事：看、改、查。你和 Codex 在對話旁邊看同一個網頁，它可以自己開網頁、點、打字、截圖，確認做出來的結果。

  2. 看：讓 Codex 幫你檢查網站。請它用內建瀏覽器打開你電腦上的網站（localhost），用手機的寬度看一遍，有跑版的地方修好。它會自己點、自己截圖，只修跑版的地方，修好再點一次確認。（切換手機寬度的畫面是示意。）

  3. 改：框起來，用說的就好。按網址列右邊的標註按鈕（對話框圖示，滑鼠移上去會寫 Annotate），點一個元素或拖一塊、寫留言，例如「標題字太小」；也可以用 Adjust 先試改字體、間距、顏色，在頁面上預覽再決定。送出留言，Codex 就照著改。

  4. 查：幫你看公開網頁。它會自己開網頁、點分頁、往下捲，讀完整理到筆記檔並附上網址。網頁上寫的不一定可靠，所以要附來源，自己點開看一次。

  5. 它做不到的。不能幫你自動上傳檔案；它用獨立的瀏覽器設定檔，不共用你平常的分頁和登入（要帳號，就在裡面自己登入）；只有 Codex 桌面 app 有這個瀏覽器。要用已經登入的網頁（例如學校系統），改用瀏覽器擴充功能。

影片 03作業：東京銀杏散步地圖網站

櫻花地圖很多人做過了！這次我們做東京銀杏地圖。

  1. 任務：做一個像「櫻花地圖」的統整網站。參考 Weathernews「さくらCh.」、tenki.jp「桜開花・満開情報」，把東京各地的銀杏整理在一起：每個地點的狀態變化（青葉 → 色づき始め → 黄葉進行 → 見頃 → 落葉始め → 落葉）、好的 UI/UX（發揮想像力，自己實際用用看），再加一個功能：銀杏散步路線規劃。

  2. 資料要先請 Codex 分析。老師用 GPT-6 Pro 整理了一份東京銀杏各地點官方資料來源，而且故意多抓了一些資訊，不是每一欄、每一列都有用。哪些來源可信、哪些已經失效、哪些欄位跟網站無關，好好思考，好好跟 Codex 討論，再決定要用什麼。

  3. 把需求寫成一份 BRIEF.md。在敏捷開發裡，設計和產品領域有「需求簡報」：由「人」寫清楚要做什麼、給誰用、做到什麼程度算好，再交給執行者。這次的執行者是 AI Agent，想想看這樣做合不合理。

  4. Single-turn Prompting：只有一次機會。把 BRIEF.md 交給 AI，從零開始做完，中途不能追問、不能修改、不能補充。這個練習訓練的是我們人類的思考：動手之前先把想法想清楚，想得越多、越詳細，專案越能控制；沒想清楚，你根本不知道自己在做什麼。

  5. 規則。BRIEF.md 中英文不含符號 1500 字以內；只能用 HTML、CSS、JS 做靜態網站，不做動態網站；網站上要有地方揭露引用的資料來源，並說明是教學使用、非營利。

  6. 看看大家做出來的網站。同一份資料、同樣只跑一次，每份 BRIEF.md 做出來的網站都不一樣：作品集。

照片：Wikimedia Commons，部分經裁切。東京大學本鄉（Tokyo538，CC0）、昭和記念公園（雷太，CC BY 2.0）、旧岩崎邸庭園（Guilhem Vellut，CC BY 2.0）、銀杏葉（Yoshikazu TAKADA，CC BY 2.0）、本鄉落葉（Tokyo538，CC0）。

影片 04遠端連線作業：GitHub、Mermaid、內建瀏覽器

  1. 這次要交一個 GitHub 倉庫網址，分四步做。把 Week 3 的美術館專案放上 GitHub、用 Mermaid 在 ARCHITECTURE.md 畫流程、請 Codex 用內建瀏覽器檢查網站，最後把倉庫網址貼到課程 Discord 的交作業區。截止時間看課程 Discord 公告。還沒有 site/ 的話，先請 Codex 用 @Build Web Apps 做一個。

  2. ① 放上 GitHub：建倉庫、clone、搬檔案、push。在 GitHub 按右上角「＋」→ New repository，名字例如 firenze-museums-hw（別跟 Week 3 的資料夾 Firenze-Museums 同名，電腦不分大小寫會撞名），選 Public、打開 Add README。從綠色 Code 按鈕複製網址 git clone，把 Week 3 的檔案 mv 進來（不會搬就問 Codex），之後 Codex 也開在這個新資料夾。push 之前先檢查：Public 倉庫誰都看得到，不要放學號、電話這些個人資料。add、commit（引號裡寫一句這次做了什麼）、push，重新整理就看到檔案。

  3. ② 用 Mermaid 畫流程：在原本的圖上加菱形和有字的箭頭。Week 3 的 ARCHITECTURE.md 已經有一張 flowchart LR。至少加一個菱形（大括號 { }，例如 G{資料完整嗎？}）和一條有字的箭頭（-->|否|，例如「否，就回去補資料」）。commit、push 之後，到 GitHub 打開 ARCHITECTURE.md，確認圖有畫出來。

  4. ③ 用內建瀏覽器檢查網站：自己框出要改的地方。請 Codex 用內建瀏覽器打開 site/index.html、換成手機寬度看一遍（手機寬度的畫面是示意）。跑版就是字超出卡片、擠在一起；想改的地方用 Annotate 框起來、留一句話。Codex 說修好了，你也自己再看一次，沒問題再 commit、push，說明寫清楚，例如「修好手機上的卡片排版」。

  5. ④ 交出網址：先照清單檢查，再貼到 Discord。倉庫是公開的（Public）；至少 3 個 commit，每個都有一句說明；ARCHITECTURE.md 的圖在 GitHub 上畫得出來；網站在手機寬度不跑版。四項都打勾，再把 github.com/你的帳號/倉庫名 貼到課程 Discord 的交作業區。

補充 1GitHub 入門：程式碼版的雲端硬碟

  1. GitHub 就是程式碼版的雲端硬碟。放在雲端、換電腦也拿得到、可以分享；不同的是，由你決定什麼時候存一個版本，每個版本都有一句說明，可以一直回頭看。git 是你電腦上存版本的工具，GitHub 是放版本的網站。

  2. git clone：第一次把雲端倉庫整個拿一份回家。放一個專案的地方叫倉庫（repository，簡稱 repo）；連以前的每一個版本都一起拿回來。

  3. git add＋git commit：先選要放進這個版本的檔案，再存成一個版本。-m 後面寫一句說明。存檔只是存在檔案裡；add＋commit 才是存成一個版本，而且只在你自己的電腦，還沒上雲端。

  4. git push 送上 GitHub，git pull 拿回雲端的新版本。開始做之前先 pull；做完了 add、commit，再 push。

  5. 第一次使用要準備一次：註冊 GitHub、裝好 git、設定名字和 email，再登入一次。之後也可以請 Codex 幫你 add、commit、push（預設會先問你同意）；裝了 OpenAI 的 GitHub plugin，Codex 還能直接連上你的 GitHub，查看倉庫、issue 和 PR。

補充 2Mermaid：用文字畫流程圖

  1. Mermaid：用文字寫圖表。寫幾行字，工具就幫你畫成流程圖。可以放在 .md 裡，用三個反引號加 mermaid 包起來（作業的 ARCHITECTURE.md 就是這樣）；也可以單獨存成 .mmd 檔，整個檔案只放圖。兩種選一種就好。

  2. 第一張圖。第一行 flowchart TD：畫流程圖，由上往下（LR 是由左往右）。A[收集資料] 的 A 是代號，[ ] 裡是方塊上的字；--> 是箭頭。同一個代號寫第二次，就接回同一個方塊。括號、箭頭都要用半形。

  3. 不同形狀、箭頭上寫字。( ) 圓角，習慣用來表示開始或結束；{ } 菱形，是要判斷的地方；-->|是| 在箭頭上寫字。「否」就接回前面的代號，圖會自己繞回去。

  4. 在哪裡看得到圖。放上 GitHub，.md 裡的圖和 .mmd 檔都會直接畫出來；Mermaid 官方的線上編輯器 Mermaid Live Editor 貼上就看到圖，還能存成 PNG、SVG；VS Code 新版內建的 Markdown 預覽也畫得出來。

  5. 不會寫、畫不出來，請 Codex 幫你。可以直接請 Codex 把流程畫成 Mermaid、寫進 ARCHITECTURE.md。圖出不來，常見是括號沒關、或打成全形；錯誤訊息說的行號，問題常在前一行。看不懂英文沒關係，整段錯誤貼給 Codex 修。

練習 1進入遠端電腦

這不是影片，而是一台在瀏覽器裡開啟的「遠端電腦」，和 Week 3 是同一台，換成這週的任務，有 Mac 和 Windows 兩種，選你平常用的那一種。外觀和操作都像真的電腦，但只是練習用的，弄壞了隨時重來，不會動到你自己的電腦。連線後先選一個任務（例如「clone：拿一份回家」），再照著任務卡一步一步做；要離開時，按畫面上方中間的「中斷連線」。每次進入都是一台全新的電腦；重新整理或離開後，這次的進度不會留下。

練習環境的畫面是繁體中文；需要用滑鼠和鍵盤操作，建議用電腦的瀏覽器開啟，手機的螢幕太小。

  1. 內建瀏覽器的四個任務：打開、看、改、查。請 Codex 打開瀏覽器（它會卡住一次，繼續請它修好就好）、用手機寬度檢查你的網站並只修跑版的地方、用 Annotate 框起來說一句話讓它改、看公開網頁並整理到 notes.md 附上網址。網站真的畫在面板裡，改的也是真的檔案。

  2. GitHub 的三個任務：clone、add＋commit＋push、pull。在 GitHub 網頁複製倉庫網址、拿一份回家；改一行、存成版本、送上雲端，再到網頁上看到新的版本；最後在網頁上改一行，回來 git pull。Windows 版用 PowerShell 和 Edge。

  3. Mermaid：在 Code 裡邊寫邊看圖。打開 ARCHITECTURE.md 的預覽，換方向、加方塊、加菱形、在箭頭上寫字；故意打錯一個全形符號，看錯誤訊息怎麼說。

  4. 作業三個任務：把上面全部串起來。建倉庫、clone、搬檔案、刪掉個人資料再 push；畫判斷、確認 GitHub 上畫得出圖；用手機寬度檢查網站、照清單檢查，最後複製倉庫網址。真正的作業要貼到課程 Discord 的交作業區。卡住時按任務卡上的「提示」。