驗證中…

GTW AI Hub

這個站只給 Gamania 內部使用。
請用你的公司 Google 帳號登入。

這個帳號沒有權限

只有 @gamania.com 的帳號可以進入。
你剛才用的是 。

請用瀏覽器開啟

你現在是從別的 App 內建的瀏覽器打開這一頁(Telegram、LINE、Facebook 這類)。
那種瀏覽器會擋住登入,轉一圈回來就失敗。

做法:按這個頁面的「⋯」或分享鈕,選「在 Safari 開啟」或「用瀏覽器開啟」。

登入失敗

錯誤代碼:
把這個代碼給平台處,不要自己重試很多次。

二十分鐘,
做出第一個會動的東西。

  • 不用裝任何軟體
  • 不用會寫程式
  • 不用部署

跟著做完,你的電腦裡會多一個檔案,點兩下就會跑。這一頁是手冊四個步驟的實作版——每一步都會標它對應手冊的哪一段。

這一頁的方法,來自 Andrew Ng

整套流程蒸餾自 Andrew Ng 在 DeepLearning.AI 的免費課程 《Build with Andrew》。 五個提示詞積木、「先下載打開再說」的做法、以及「壞了就直接描述現象」都是他的教法,我們換成遊戲產業的題目重寫。想看原版強烈建議去上,免費、半小時。

STEP 00

先看你等一下會做出什麼

一個今日運勢模擬器:填五個欄位,按一下,算出你今天的運勢分數、宜與忌,還有一段可以貼群組的廢話。

它的骨架只有三個東西

  • 三到五個輸入欄——使用者要填的東西
  • 一顆按鈕——按下去會發生事情
  • 一個顯示區——結果出現的地方

幾乎所有小工具都是這個形狀。學會做這一個,換個題目就是換個內容。

為什麼先照著做一次

你八成已經有自己想做的東西了,那很好。但先做完這一個,你會知道要怎麼講 AI 才聽得懂——之後做自己的題目會快很多。

Andrew 的原話大意:先練這個,是在養「怎麼引導 AI」的直覺。

STEP 01

五個積木:把想法變成看得懂的需求

不用學怎麼寫提示詞。把這五塊填一填就好。

GOAL 目標

你要做什麼。一句話講完,這塊一定要有。

INPUT 輸入

使用者要填什麼。直接把欄位名稱列出來。

OUTPUT 輸出

你要它吐出什麼。一段文字?一張表?一個分數?

LAYOUT 版面

什麼東西放哪邊。左邊填、右邊顯示,這樣講就夠。

FEATURES 功能

其他你想要的。複製按鈕、隨機填、換顏色。

規則只有三條

  • 從目標開始,其他四塊順序隨便
  • 不用每塊都寫,想不到就跳過
  • 可以一次寫完,也可以一塊一塊加,兩種都行

講得越具體,結果越可預測

這不是道理,是可以自己驗證的現象。到食物餐車說「給我一個三明治」,你不知道會拿到什麼;說「素食三明治、多穀麵包、加一杯飲料、外帶」,就幾乎不會出錯。

你怎麼講同一句話跑三次,會發生什麼
「做一個今日運勢的網頁」三次拿到三個完全不一樣的東西,欄位、版面、風格全都不同。
五個積木都填好的那一段三次都很接近,只有細節有差。差異縮小,你才有辦法往下改。
這一步 = 手冊 STEP 01需求確認 ↗
STEP 02

貼進去,先拿到第一版

開一個新對話(ChatGPT、Gemini、Claude 都可以),把下面整段貼進去。

五個積木填好的樣子
# GOAL
做一個網頁,幫我算今天的運勢,可以貼到群組。

# INPUT
使用者填五個欄位:名字、星座(下拉選單)、
今天最想搞定的一件事、起床時的心情(下拉選單)、幸運物。

# OUTPUT
一個 0 到 100 的運勢分數、今天的「宜」和「忌」各一句,
再加一段三到四句的運勢短評,語氣輕鬆一點,要好笑。

# LAYOUT
左邊放輸入欄位,右邊顯示結果。

# FEATURES
算過的結果往下累積不要蓋掉,每一則旁邊有複製按鈕。

# 最後這句很重要
請做成一個單獨的 HTML 檔案,讓我可以下載下來直接打開。

最後那句是關鍵:單一 HTML 檔代表所有東西都在一個檔案裡,你不用安裝、不用設定,存下來就能用。

這一步 = 手冊 STEP 02開發 ↗
STEP 03

存成檔案,點兩下打開

這是整個流程最爽的一步,也是最多人不知道可以這樣做的一步。

  • AI 給你程式碼後,找「下載」或「複製」。有下載鈕就直接按。
  • 沒有下載鈕的話:全選複製 → 開記事本貼上 → 存檔。
  • 存檔時檔名結尾一定要是 .html,例如 fortune.html。
    記事本要把「存檔類型」改成所有檔案,不然它會偷偷加上 .txt。
  • 到下載資料夾找到它,點兩下。它會用瀏覽器打開,然後就會動了。

到這裡為止,這個東西完全在你自己的電腦上。沒有上線、沒有網址、別人看不到。可以放心亂玩。

STEP 04

一次加一個功能

不要一口氣講五件事。講一件、下載、打開看、確認變了,再講下一件。

接著往下講,一次一句
加一顆「隨便幫我填」按鈕,按下去自動把五個欄位隨機填好,
用詞要好笑。

心情那個欄位改成下拉選單,選項給我:還算清醒、想再睡五分鐘、
已經在想下班、莫名充滿幹勁、完全不想面對人類。

配色改成橘色系,運勢分數那個數字大一點。

手機打開的時候,左右兩欄要變成上下排。

要說是「哪五個」

不要只講「加五個欄位」,要講清楚是哪五個。這是最常見的落差來源。

改了又反悔沒關係

「剛剛那個橘色我不要了,改成藍色」——直接講就好,它會照改。

沒靈感就問它

「怎麼讓這個更好玩?」讓它給幾個點子,你挑一個。這是很好用的一招。

這一步 = 手冊 STEP 02一次只做一個功能 ↗
STEP 05

壞掉了,直接講現象就好

你不需要看懂程式碼,也不需要知道哪裡壞了。你只要會描述你看到什麼。

這樣講就夠

照著改成你的狀況
我按「算今日運勢」沒有反應,什麼都沒出現。
幫我修好。

手機上打開,右邊那欄跑到畫面外面去了。

複製按鈕按了沒反應,也沒有提示。

它回一堆術語的時候

它可能會說「按鈕的 click event 沒有綁定」之類的。現在不用管它在講什麼,直接拿新的檔案下載下來,打開看好了沒有。

真的好奇再問它「你剛剛那句話是什麼意思」。但那是之後的事,不影響你現在把東西做出來。

這一步 = 手冊 STEP 02出現這些訊號就喊停 ↗
STEP 06

自己先用一遍,再拿給別人

你是第一個使用者。把 STEP 01 想的那些情況,實際點一次。

  • 五個欄位都填好按下去——結果有出來嗎?
  • 什麼都不填就按——會不會整頁壞掉?
  • 名字填一個很長的怪字串——版面會不會被撐爆?
  • 用手機開一次——排版有沒有跑掉?

然後拿給一個同事看

Andrew 在課裡花了一整段講這件事:做完就給人看。別人會給你想不到的點子,或者只是笑一下——那個笑就是你繼續做下去的動力。

這一步 = 手冊 STEP 03驗收 ↗
STEP 07

想給更多人用,才需要上線

檔案在你電腦上,傳給同事就是傳一個檔案。想變成一個大家都打得開的網址,才要多做一步——而那一步開始就有風險了。

你想做到要做什麼
給隔壁同事看直接把 .html 檔傳給他,他點兩下就能開。不用上線。
做成一個大家收藏的網址要部署。部署之前先看手冊的部署跟安全兩章,特別是「這個網址誰打得開」。
要連公司資料、要放金鑰停。金鑰不能寫在這種檔案裡,瀏覽器裡的東西所有人都看得到。

這也是這份實作跟 Andrew 課程分岔的地方:他的作品只跑在自己電腦上,所以不談這些。一旦你要給公司的人用,手冊剩下那幾章就是為了這一刻寫的。

這一步 = 手冊 STEP 04部署 + 安全 ↗
STEP 08

換你自己的題目

同一個骨架:三到五個輸入欄、一顆按鈕、一個顯示區。換掉內容就是新的東西。

尾牙抽獎轉盤

貼上名單、按開始、跳出一個人。加個「已中獎的不再出現」。

轉蛋機率模擬器

輸入機率和抽數,跑一萬次,告訴你有幾成的人會抽不到。

你手上那件麻煩事

每週都要手動算一次的那個東西。那才是最值得做的題目。

你已經是個做東西的人了

做出來、給人看、再做下一個。卡住的時候回手冊翻一下,那些坑我們都踩過了。