手繪草圖變成網頁小遊戲：四個步驟與提示詞範本（可直接複製）

AI 遊戲製作 · 2026-10-08

你在紙上畫幾筆，就可以做出一個真的能玩的小遊戲？外國有創作者示範過一個做法：兩個 AI 工具分工，一個負責寫遊戲程式，另一個負責把手繪草圖變成遊戲美術。你不用自己寫程式。

寫程式的部分，你可以用 ChatGPT Astra，也可以用 Claude，你在兩個工具中選一個就可以。美術的部分，你用 Higgsfield 插件。這篇文章附上四步流程、兩個版本的提示詞範本，以及這個做法的三個限制。

文章用「貓咪接魚」做例子：玩家左右移動貓咪，接住從上面掉下來的魚。

一、四步流程圖

① 畫草圖 → ② 寫程式 → ③ 變美術 → ④ 放進去

畫草圖：你在紙上畫出主角、對手和場景，然後拍照。
寫程式：你把提示詞貼給 ChatGPT Astra 或 Claude，AI 會寫出一個 HTML 檔（網頁檔）。
變美術：你用 Higgsfield 插件，把草圖變成去背的角色圖。
放進去：你把角色圖放進遊戲，再用瀏覽器打開 HTML 檔。

二、兩個 AI 工具怎樣分工

ChatGPT Astra 或 Claude：寫遊戲程式。例如 AI 會寫出「貓咪左右移動、魚隨機掉下來、接到魚就加分」的遊戲規則。
Higgsfield 插件：生成角色和場景美術。例如 Higgsfield 會把手繪的貓咪和魚，變成遊戲裏的角色圖。

第一步和第三步，兩個版本的做法一樣。第二步和第四步，ChatGPT Astra 版和 Claude 版的做法不同，下面分開說明。

三、第二步（ChatGPT Astra 版）：用提示詞寫出遊戲

你在 ChatGPT 上載草圖相片，再貼上下面這段提示詞，把方括號裏的字換成你的主角和目標：

我上載咗一張手繪草圖。請使用 ChatGPT Astra 幫我編寫一個簡單嘅 HTML5 2D 遊戲。
遊戲主角係草圖中嘅 [貓咪]，目標係 [接住掉落嚟嘅魚]。
請使用 Canvas API 寫出完整代碼，並預留圖片路徑給 Higgsfield 生成的美術素材。

第一個方括號：你草圖裏的主角，例如「貓咪」。
第二個方括號：玩家要做的事，例如「接住掉落嚟嘅魚」。

提示詞裏有三個技術名詞，你不懂也可以照用：

HTML5：網頁使用的格式。AI 寫出來的遊戲是一個網頁檔。
Canvas API：網頁裏用來繪畫和移動畫面的功能。遊戲畫面就是靠它畫出來。
圖片路徑：HTML 檔裏寫明「圖片放在哪裏、叫甚麼名字」的位置。這段提示詞叫 AI 預留這個位置，你在第四步再把圖片放進去。

AI 會寫好完整的 HTML 檔，你把它儲存到電腦就可以。

四、第二步（Claude 版）：用提示詞寫出遊戲

你把下面這段提示詞貼給 Claude，把方括號裏的字換成你的主角和目標：

請你幫我寫一個 HTML5 接嘢小遊戲，全部放喺一個 HTML 檔。
玩家用左右方向鍵移動主角 [貓咪]，去 [接住跌落嚟嘅魚]。主角接到一個加 1 分，漏 3 個就 Game Over，玩家撳空白鍵再玩過。
主角圖叫 cat.png，跌落嚟嘅圖叫 fish.png，兩張圖同 HTML 檔放喺同一個資料夾。

第一個方括號：你草圖裏的主角，例如「貓咪」。
第二個方括號：玩家要做的事，例如「接住跌落嚟嘅魚」。

這段提示詞是我們實測時使用的版本，你照抄就可以，只需要換方括號裏的字。提示詞已經寫好兩張圖片的檔名：主角圖叫 cat.png，掉下來的圖叫 fish.png。就算你的主角不是貓，你也照用這兩個檔名，第四步再把圖片改名就可以。

Claude 寫好之後，你把它寫的 HTML 檔儲存到電腦，放進一個新的資料夾。

我們用這段提示詞實測過一次。Claude 寫出的 HTML 檔我們沒有再修改，只是跟兩張圖片放在同一個資料夾，再用 Mac 電腦的 Chrome 瀏覽器打開：圖片正常顯示，方向鍵可以移動主角，接到魚會加分，漏掉三條魚會出現 Game Over，按空白鍵可以重新開始。

五、第三步：用 Higgsfield 插件把草圖變成角色圖

你在 ChatGPT 裏使用 Higgsfield 插件，上載草圖相片，再從下面兩款風格選一款，輸入對應的句子。你要把句子裏的「貓咪」換成你草圖裏的主角。

2D 像素風：

參考我張草圖，生成一個 2D 像素風、去背嘅貓咪角色。

3D 建模風：

將草圖中嘅貓咪，生成為 3D 建模風格、去背嘅遊戲 Sprite。

「去背」即是圖片沒有背景，只剩下角色。Sprite 即是遊戲裏的角色圖。

Claude 版需要兩張圖：一張是主角，一張是掉下來的東西（例子裏是魚）。

六、第四步：把圖片放進遊戲

ChatGPT Astra 版

你把生成好的圖片，放進 ChatGPT Astra 寫好的 HTML 檔裏，即是替換 HTML 檔預留的圖片路徑。
你用瀏覽器打開 HTML 檔，就可以開始玩。

Claude 版

你把主角圖改名為 cat.png，掉下來的那張圖改名為 fish.png。
你把兩張圖放進 HTML 檔所在的資料夾。資料夾裏要有齊三個檔：HTML 檔、cat.png 和 fish.png。
你雙擊 HTML 檔，瀏覽器就會打開遊戲。你用左右方向鍵移動主角；Game Over 之後，你按空白鍵就可以再玩一次。

圖片本身是 JPG 格式也可以：我們實測時把 JPG 圖片改名為 .png，Chrome 瀏覽器一樣讀得到。

如果你打開 HTML 檔之後畫面一片空白，即是遊戲找不到圖片。你要檢查兩張圖是否和 HTML 檔放在同一個資料夾，以及檔名是否正好是 cat.png 和 fish.png。

七、遊戲出錯的時候

程式出錯叫 Bug。你不懂寫程式也可以處理：你把程式碼交回給 AI，問它「哪裏出錯」，請它找出錯處再改好。這個過程叫 Debug。

八、開始之前要知道的三個限制

只適合簡單的小遊戲：接東西、彈珠、簡單網球這類小遊戲做得到。複雜的角色扮演遊戲（RPG）或 3D 大型遊戲，這個做法暫時做不到。
Debug 需要耐心：遊戲出現 Bug，你就要把程式碼交回給 AI，問它哪裏出錯，再慢慢修改。
工具權限：你要有 Higgsfield 相關插件，才做得到第三步；你選 ChatGPT Astra 版的話，還要有 ChatGPT Astra 的使用權限。

這個做法適合做社群互動小遊戲。你不要期望用它做出大型遊戲。

返回AI 資訊及攻略