你的名字，
出現在自己的面板上

1　把小麻煩縮成一顆按鈕

例如「我想記喝水次數」。第零版只要顯示暱稱、目前次數和一顆加一按鈕；先不要做登入、雲端同步或好友排行。

在下面填自己的需求。這頁只幫你整理文字，沒有接 AI，也不會把文字送到伺服器。

填好四欄，再按「整理成一張任務卡」。

離開前請下載文字。這頁不會自動保存你填的內容；範例只用暱稱，不填學號、電話或私人資料。

2　讓 AI 做出第一版

1. 用自己的帳號開 Gemini，選 Canvas。
2. 把完整任務卡貼上，送出後看預覽。
3. 如果只收到文字，補一句：「請把它做成單檔 HTML 網頁，讓我能預覽與複製完整程式碼。」

Canvas 可以依你的說明產生及修改程式；介面提供 Code 和預覽紀錄功能。操作位置可能調整，找不到就請老師協助。Google 官方 Canvas 說明（查核：2026-09-10）

帳號、年齡條件或額度受阻，就當堂使用老師提供的範例，或觀察同學的第一版與一輪修改，完成 E1。把「我親自測了什麼」和「我觀察了什麼」分清楚，沒有親測就照實記下。教師可提供既有範例檔做存檔檢查，不要求課後補跑 AI，也不繞過帳號限制。

3　按過，才知道有沒有做對

這是喝水計數的示例。你的作品做別的事，就換成自己的預期；不要直接抄這兩列當結果。

4　一次改一處

選一個很小的修改，例如把按鈕文字改清楚，或把深色字放到淺色底上。先寫「改哪裡、保留什麼」，再請 AI 動手。

請只把按鈕上的「送出」改成「記一杯」。
保留目前的暱稱、計數和按一下加 1 的功能。
改完後告訴我改了哪裡。

改完再按一次。你要記下的是改動前後的差異，以及自己重測的結果。

5　把單檔帶走

1. 到程式碼畫面複製完整 HTML，存成 my-panel.html。用記事本貼上的話，「另存新檔」時要先把存檔類型改成「所有檔案」、編碼選 UTF-8，否則它會偷偷存成 my-panel.html.txt。存完確認檔名沒有多出 .txt。
2. 用瀏覽器重新開啟檔案，測一下名字和按鈕。
3. 存到自己的雲端硬碟，或寄給自己；檔案不能只留在教室電腦的下載夾。
4. 分開確認兩件事：自己的裝置拿得到檔案；在可用瀏覽器中實測名字與按鈕。手機只顯示程式文字或不能執行時，登記卡關、請老師確認並改用其他瀏覽器。手機不必一定跑得動，也不把雲端預覽當成已測過功能。

你不需要為了這一步公開分享整段 AI 對話。

6　當堂卡與課後延伸

當堂卡記第一版、第二版和三行小表，照課堂安排繳交。需求卡和面板檔自己留著，下週接著改。

完成早了，可以打開 P6 校園活動挑選器，看一份更完整的需求與測試怎麼寫。這是延伸材料，本週先完成你的面板第零版。