Vibe Coding 是什麼？用 12 道指令做出一顆課堂抽籤轉盤

• 對象：教師與行政人員，不需程式基礎
• 時間：約 3 小時
• 費用：免費，用免費帳號做得完
• 工具：Chrome ＋ Google 帳號 ＋ Gemini Canvas

Vibe Coding 是用說的把工具做出來：您負責把想做的事講清楚，程式碼交給 AI，自己一行程式都不用寫。這一堂課從頭到尾只做一件事——把一句模糊的「我想要一個抽籤轉盤」，變成一顆真的能用、貼上名單就會分格、還會自己清掉重複與空白的轉盤。

做完之後，您手上會有三樣東西：一個離線點兩下就打得開的檔案、一整套跟 AI 講話的說法（換個題目照樣用）、以及一份自己講得出來的做法——講得出來，才算真的會了。

Vibe Coding 是什麼？

Vibe Coding 是把「要做什麼」用日常語言講清楚，讓 AI 去寫程式碼的做法。提出這個詞的是 Andrej Karpathy，他當初那句話的意思是：完全交給感覺，不再去看程式碼本身。實際做起來是三件事：

• 不再逐行讀程式碼：改成看做出來的東西對不對。
• 用講的說出要什麼：不對就再講一句，請 AI 改。
• 由您負責判斷：這一段 AI 無法取代，永遠是您的。

這個詞，是這幾年才有的

差別在哪裡？以前是學會了才做得出來：先學語法、環境、工具，一個小工具要弄好幾週，出錯了還看不懂錯誤訊息，多數人學到一半就停了。現在是講清楚就做得出來：用中文把要做的事說出來，一個下午就有能用的東西，畫面不對就用講的請 AI 改。

三個最常見的誤會

• 以為隨便講講就會有東西：講不清楚規則，AI 也給不出對的結果。
• 以為可以完全取代資訊團隊：大型系統還是需要規劃、資訊安全與長期維護，這不是一個下午做得完的事。
• 以為程式碼不重要了：只是換 AI 來寫，最終程式好不好用，還是由您判斷。

學校為什麼要學這件事

• 能預覽的開發環境已經內建了：講完就看得到畫面，不必安裝任何軟體。
• 單位裡的雜事沒有人會幫您寫：為了一份只有貴單位用得到的小工具去委外，費時費力也不划算。
• 最難的那一段本來就在您手上：您比任何人都清楚那件事該怎麼做才對。

先把觀念弄懂

把「為什麼這樣講」弄懂，等一下的十二道指令才會是您自己的。今天的路只有四段：談需求（AI 一題一題問您）→ 選開發環境（另開視窗，選 Canvas）→ 長出畫面（貼上提示詞，轉盤出現）→ 接上名單（貼幾個人就有幾格）。

一顆簡單的轉盤裡，藏著一整套軟體

• 貼一份名單就開始：這叫「資料」。
• 名單再亂也不會壞：這叫「擋錯誤」。
• 按一下，挑出一個：這叫「規則」。
• 換一份名單，整個換：這叫「畫面」。

同一套邏輯換個場合就是另一個工具，中間那一欄是今天真的會做出來的東西：

想不清楚的事，AI 幫不了您

Vibe Coding 最花時間的從來不是「做」，是「講清楚要做什麼」。這件事 AI 幫不了您——但 AI 可以問您，把您沒想過的地方問出來。所以第一句話不是「幫我做」，是「先問我」：

• 您說想做什麼：一句話，還很模糊沒關係。
• AI 一題一題問您：問到您沒想過的地方。
• 您用數字回答：答不出來就說「請你建議」。
• 談定的變成提示詞：整段複製，交給第二個視窗。

AI 會問您的，大概是這五種（順序每次不同）：誰會用、在什麼場合？名單從哪來、幾個人？抽過的還要再抽嗎？有空白、有重複怎麼辦？要看到什麼才算成功？

回答的訣竅只有三條：看得懂就直接選數字；看不懂就說「請你建議」，AI 會給一個常見做法，您點頭就好；想到別的就直接補一句，例如「名單我會從 Excel 貼進來」。

沒講清楚的需求，只是一個願望——這句話回辦公室看廠商交件也適用。

一句好指令，有這四樣東西

• 要加什麼東西：「加一個大的文字輸入框」。
• 要長什麼樣子：「一行一位，高度大一點」。
• 只做這一件事：「請只完成上述要求。」
• 怎麼算做好了：「左邊會多一個輸入框」。

您按下送出之後，AI 做了這四件事

• 讀您這一句：AI 只看得到您寫出來的字。
• 整份重打一遍：不是只改您提到的那一行。
• 沒提到的自己決定：AI 以為那部分您沒有意見。
• 回一份新的給您：所以舊功能可能就不見了。

這就是為什麼每一段指令的結尾都要加那三句護欄，也是為什麼一次只加一件事，加完就試一次。一次要求做完所有功能，壞了您會找不到是哪裡壞的。

另外一件要先知道的事：AI 每次回的都不太一樣，這是正常的。同一句話問兩次，說法與排版都可能不同。所以「做完會看到什麼」要自己先講出來——有這一句，做對做錯您自己看得出來；跟旁邊的人做出來不一樣也不用緊張，今天比的是能不能用，不是像不像。

先把東西準備好

先確認這四件事

• 用 Chrome 瀏覽器：其他瀏覽器畫面會不一樣。
• Google 帳號已登入：個人或學校帳號都可以。
• 指令從這一頁複製：整段選起來複製，不要自己一行一行打。
• 不用準備任何名單：等一下讓 AI 幫您生一份假的。

全程只開兩個視窗，各做各的事

開視窗之前先做三件事：左上角點「開始新的對話」，不要接在舊對話後面；確認輸入框是空的，乾淨的視窗 AI 才只看今天講的話；第一句話就把語言講定——「以下全部用繁體中文（台灣）回答我，按鈕上的字也請用繁體中文」。

什麼是 Gemini Canvas？

Canvas 是 Gemini 內建的「做東西的地方」，選了它右邊才會出現一塊可以預覽的畫面。一般聊天時 AI 只回文字，右邊什麼都沒有；在輸入框旁點「＋」選 Canvas 之後，畫面會分成左右兩半：左半是您說話的地方，右半是成果。所有指令一律貼左邊，貼錯邊畫面會完全沒有反應。

⚠️ Canvas 有年齡限制，建立 Canvas 內容需年滿 18 歲，所以這份講義適合教師與行政人員自己操作，不適合直接規劃成 K-12 學生的課堂活動。詳細說明見 用 AI 做簡報：Gemini Canvas 與 Google 簡報 AI 功能。

每一句指令的結尾，都是這三句

• 請只完成上述要求。不要順手多做，也不要少做。
• 不要動其他程式碼。沒提到的地方一個字都別改。
• 保持原本功能正常。加了新的，舊的不能壞掉。

十二道指令全文

從這裡開始一路動手。每一道都是整段複製、貼上、等畫面變了再貼下一段。指令旁邊的按鈕可以直接複製整段。

我想要做一個幸運轉盤，用在課堂上抽籤。
開發環境是 Gemini Canvas。
在你開始寫任何東西之前，請先問我 5 個問題，
把我沒講清楚的地方問出來，特別是「什麼情況算例外」。
一次問一題，等我回答完再問下一題。
所有問題請附上數字選項，讓我用選的就好。

很好。請把剛才談定的內容，整理成一段可以直接交給你做的提示詞，
包含：什麼情況下用、要做哪些功能、這次刻意不做什麼。
寫成一整段，不要有程式碼，
我要整段複製到另一個視窗去用。

接下來換第二個視窗。左上角點「開始新的對話」開第二個視窗（談需求那一串不要關掉），在輸入框旁點「＋」選 Canvas，確認兩個視窗都還開著：一個談需求，一個做畫面。

請幫我開啟一個可預覽的空白 Gemini Canvas，
命名為「課堂抽籤大轉盤」。

（回到第一個視窗，把剛才那一整段提示詞複製起來，貼在這裡）
請依照上面這段提示詞，把畫面做出來。
先做出大致的樣子就好，細節等一下再調。
請只完成上述要求。

轉盤出現了。從頭到尾您只做了一件事：把想清楚的話講出來。程式碼是 AI 寫的，決定它長什麼樣的是您。

整個頁面請用深藍黑底 #020617、文字用柔和白 #F5F7FA，
重點色用香檳金 #F0D399，
字體用 Noto Sans TC。
請只完成上述要求。
不要動其他程式碼。
保持原本功能正常。

請把版面分成左右兩欄：
左邊四成寬是「名單設定區」，右邊六成寬是「轉盤顯示區」，
中間跟四周都要留白，文字不要貼齊螢幕邊緣。
最上方加一列標題，寫「課堂抽籤大轉盤」。
各區塊請加上圓角與一條很細的暗藍色邊框。
請只完成上述要求。
不要動其他程式碼。
保持原本功能正常。

請在左側「名單設定區」加一個大的文字輸入框，
以及一顆「載入名單」按鈕。
輸入框請一行一位，預設高度大一點，方便貼整份名單。
請只完成上述要求。
不要動其他程式碼。
保持原本功能正常。

請在「名單設定區」加一顆「產生測試名單」按鈕。
按下去就在名單輸入框填入 8 個常見的中文姓名，一行一位，
例如：陳小明、林雅婷、黃俊傑，不要用真實的學生資料。
請只完成上述要求。
不要動其他程式碼。
保持原本功能正常。

請讓轉盤的格子數量，依照名單人數自動產生：
貼 8 個人就分 8 格，貼 20 個人就分 20 格，
每一格中間顯示那一位的姓名。
名單改了，轉盤要立刻跟著重畫。
請只完成上述要求。
不要動其他程式碼。
保持原本功能正常。

請讓「開始抽籤」按鈕按下之後，
從整理好的名單裡隨機選出一位，把那一格亮起來，
並在轉盤下方用大字顯示中選的姓名。
這一步先不要做旋轉動畫。
請只完成上述要求。
不要動其他程式碼。
保持原本功能正常。

什麼是「名單清洗」？

名單清洗是把貼進來的名單自動整理乾淨。下面這三種東西您在畫面上看不到，卻會讓轉盤抽錯人：名單中間多按了幾次 Enter，會多出看不見的空格子；同一個人被報名兩次，他被抽中的機會就加倍；名字後面多一個空格，電腦會當成兩個人。一個看不見的空格，就多出一個人——從 Excel 貼過來的名單幾乎都有這種東西。

請在「產生測試名單」旁邊再加一顆「產生亂名單」按鈕。
按下去填入同樣那 8 個人，但是中間夾三行空白、
其中一個名字重複出現兩次、
另外兩個名字的後面各多一個空格。
請只完成上述要求。
不要動其他程式碼。
保持原本功能正常。

請在按下「載入名單」時，自動整理貼進來的名單：
自動忽略空白行、自動去掉名字前後多餘的空格、
一模一樣的名字只保留第一個。
整理完請在輸入框下方顯示「原始 N 行，有效 M 人」。
請只完成上述要求。
不要動其他程式碼。
保持原本功能正常。

清完之後，把剛才那三種狀況再測一次：中間插三行空白，有效人數與格數都不變；同一個名字貼兩次，只算一個，轉盤上不會出現兩格同名；名字後面多空格，會被當成同一個人，不會多一格。

把今天收起來

下課前一定要做的三件事

• 在 Gemini Canvas 按下載：存下來的檔案改名成「抽籤轉盤.html」。
• 在檔案上點兩下打開：不用連網也能玩，才算真的存好了。
• 把實作 2 的提示詞也存著：換一個題目的時候還會用到。

您沒有寫任何程式，但東西是您做出來的——您做的是最難的那部分：決定它該長什麼樣、該照什麼規則做事。

今天的三句話，換題目照樣用

• 「先問我五個問題」：任何題目開場都用。
• 「一次只加一件事」：加完就試一次。
• 「其他的不要動」：每一句結尾都加。

同一招「整理名單」，處室裡到處用得到：各處室送來的報名表格式不一樣、重複報名一堆，貼進來就吐出乾淨的一份，兩小時的手工變成貼上就好；分組與座位表也是同一套清洗，換一句話、換一個班級只要重貼名單。

回去的第一週，做這三件事

• 今天晚上就打開一次：點兩下那個檔案，確認它真的還在。
• 換一份真的名單試：用您自己處室的名單，不要再用一到八號。
• 給一位同事看：講得出來，才是真的會了。

第一週沒有打開過的東西，第二週就不會再打開了。想不清楚的事，AI 幫不了您；想得清楚的事，程式碼再也擋不住您。

常見問題

延伸閱讀

• 用 AI 做簡報：Gemini Canvas 與 Google 簡報 AI 功能：Canvas 的年齡、授權與語言三道門檻。
• Gemini 教育版怎麼用：學校要開放給老師與學生之前，管理員該確認的四件事。
• AI 入門百科：生成式 AI、大型語言模型與 AI 幻覺的基本觀念。
• AI 融入教學實務指南：備課、課堂與行政文書三種用法，以及不該交給 AI 的三類事。
• AI 應用與客製工具開發：需求超出一個下午做得完的範圍時，可以交給我們。

參考來源

• Merriam-Webster：vibe coding（詞源與 2025 年 2 月的提出時間）
• Collins Dictionary：Word of the Year（2025 年年度代表字）
• Gemini 說明中心：使用 Canvas 建立文件、應用程式與投影片（含建立內容需年滿 18 歲的規定）

⚠️ AI 工具的畫面與功能位置變動很快。這份講義寫於 2026 年 8 月，若您看到的畫面與描述不同，指令的寫法仍然成立，找不到按鈕時直接問 AI「Canvas 在哪裡」通常最快。