01 · 先玩
打開這個小工具，先畫一筆
像打開電腦裡的檔案一樣，點「開啟小畫家」。畫一筆、換個顏色，再下載 PNG，就知道今天要做出什麼了。
可操作的小工具
迷你小畫家.html
打開就能畫圖、換色，還能下載自己的圖片。
不需要安裝。關閉工具視窗後，可以接著閱讀教學。
如果工具視窗無法開啟，可在新分頁使用小畫家。手機可用手指畫。
02 · 拆開看
把「小畫家」說成五個具體需求
要請 Codex 製作，不必先講程式語法。從剛才的體驗出發，說出你看到的功能就好。
還要補一句：手機也能用，存成一個 index.html，直接用瀏覽器打開。這些條件會幫 Codex 知道要交付什麼。
03 · 交給 CODEX
開一個資料夾，把需求貼給 Codex
在 Codex 裡開啟一個空資料夾，例如「我的小畫家」。把下面這段指令貼進對話。這個資料夾就是成品要住的地方。
① 開啟專案 在左側選「我的小畫家」資料夾。若還沒有，先建立一個空資料夾，再讓 Codex 開啟它。
畫面依你提供的 Codex 截圖整理，已移除私人對話與資料；版本不同時，按鈕位置可能略有差異。
請在目前的專案資料夾建立一個 index.html，做成可以直接用瀏覽器開啟的「迷你小畫家」。 讀者是第一次做網頁的設計師。請用繁體中文介面，不用外部套件，也不用伺服器。 功能： 1. 可用滑鼠、手機手指和觸控筆畫線；手機畫圖時頁面不要跟著捲動。 2. 有黑、紅、紫、綠、黃五種筆刷顏色，能看出目前選了哪色。 3. 可調整筆刷粗細。 4. 有清空畫布與下載 PNG 按鈕。畫布與下載圖片都要是白底。 5. 桌機與手機都要能使用；調整視窗大小時，已畫內容不要消失。 完成後，請告訴我檔案位置、如何開啟、你測了哪些操作，以及哪些操作還沒有實際測到。程式碼加入簡短註解，先不要增加圖層、帳號或雲端功能。
你可以先看 Codex 準備建立的檔案，再允許它修改。每次生成的內容可能不同；下方的檢查步驟因此很重要。
04 · 打開成果
找到 index.html，用瀏覽器打開
Codex 完成後，打開剛才的資料夾，應該會看到 index.html。雙擊它，用瀏覽器開啟。如果只有一段程式碼、資料夾裡沒有檔案，就貼給 Codex：「請把剛才的完整程式實際建立為目前資料夾的 index.html。」
你現在看到的，是自己電腦裡的版本。要讓別人用網址看到，還需要另外上傳網站。
05 · 真正測試
看到畫面還不夠，動手試六件事
- 用滑鼠畫線；在手機上用手指畫線。
- 點另一個顏色，下一筆真的變色。
- 調整粗細，畫出一細一粗兩筆。
- 按清空，畫布恢復白色。
- 下載 PNG，打開檔案確認有剛才的畫。
- 把視窗縮窄再放大，已畫的內容還在。
遇到問題，直接描述「我做了什麼、實際發生什麼、希望怎樣」，再請 Codex 修正。例如：「我在手機畫圖時整頁跟著捲動。請修正觸控操作，保留目前畫面與其他功能，並告訴我怎麼重新測試。」
06 · 改成自己的
不用找程式碼，說出你想改的地方
先選一項修改就好。把對應文字貼回同一段 Codex 對話的輸入區，完成後重新開啟或整理頁面，看看改動是否真的出現。輸入區的位置可以回到上面的互動畫面，點「② 貼上指令」再看一次。
① 改名字
請把小畫家的標題改成「我的靈感畫板」，其他功能維持原樣。
② 改主色
請把主要按鈕與選取外框改成我喜歡的紫色 #5C63EF，並確認文字清楚可讀。
③ 加顏色
請新增一個天藍色 #4EC7EE 筆刷，保留原本五個顏色與選取標示。