不知道你是否也曾這樣想過：
「 寫程式好酷，我也想試試開發小 App 或 工具！」
「 但我完全沒學過，從頭開始感覺要花很多時間…」
但據說有了AI，就連程式麻瓜也不擔心學不會🤔
所以沒有程式背景的小編，這次決定直接來試試看挑戰：
用 Vibecoding（AI 協作開發）做出訂飲料小工具！
不只足夠簡單、有趣，也最適合作為「第一次體驗開發完整流程」的練習
如果你也符合以下其中一種，小編覺得你會很愛這種開發方式：
1️⃣ 想做 App/網站，但完全沒程式底子的人
想做、卻因為不會程式而遲遲沒有開始。
2️⃣ 想弄懂「前端、後端、資料到底怎麼串起來」的初學者
目標不是想成為工程師，而是想搞懂程式基礎架構。
3️⃣ 想用 AI 做出一些能提升工作效率的小工具的人
像是表單收集工具、資料統整器、自動填報工具…
只要玩過一次，你就有辦法研究出你專屬的生產力工具。
有興趣就來一起看看，身為程式小白的小編，是怎麼做出這個有趣的小工具！
🧩 1. 只說一句話，AI 就給了完整架構
挑戰的起點非常簡單。小編只丟了一句話給 AI：
「我想做一個訂飲料的小工具，但我不會寫程式，要怎麼開始？」
AI 馬上提供了：
- 前端畫面怎麼設計
- 後端負責哪些邏輯
- 資料儲存方式（Google 試算表）
因此你可以馬上理解：
原來一個 App 是由前端、後端、資料這三部分組成。
而 AI 會直接畫給你藍圖，只要跟著做就好。
🧩 2. 第一次接觸前端：AI 生成點餐頁面
小編零 HTML / CSS 基礎，但 AI 一秒就產生：
- 欄位
- 按鈕
- 訂單表單介面
小編只要貼進 Google Apps Script → 按下預覽
畫面就出現了。
第一次看到自己做出的「可以互動的介面」，成就感100分！
也因此更容易理解：
- HTML 是骨架
- CSS 是外觀
- JS 是動作
自己做一次，馬上就能理解架構！
🧩 3. 第一次接觸後端：資料真的寫進表單了！
AI 幫小編生了一段 submitOrder() 程式碼。
這段程式碼會負責把前端送出的資料寫進 Google 試算表，因此你可以理解到：
- 前端的按鈕只負責把資料送出去
- 後端負責接住、處理
- 資料庫負責存放
🧩 4. 第一次做 UX：加一個按鈕，讓使用流程變得更順
小編突然想到：
「如果同事能直接點試算表裡的按鈕開啟訂購頁面，那不是更方便嗎？」
AI 就教小編：
- 插入一張圖片
- 指派程式碼給它
結果小編成功做出了「訂飲料入口按鈕」！
第一次感受到——
UX（使用者體驗）不是工程術語，而是「好不好用」。
🧩 5. 第一次做資料處理：丟菜單圖片給 AI → 自動變表單選項
直接把飲料菜單丟給 AI，以下動作自動完成，完全不用手動輸入資料：
- 直接辨識所有品項 (OCR)
- 自動按照飲料分類整理
- 產生
<optgroup>HTML 下拉選單
🧩 6. 第一次微調 UI：像在和真人工程師協作
無論你想要的效果是：
- 「畫面太小，放大一點。」
- 「按鈕想要有光暈，就像 Uber Eats 那種 vibe。」
- 「整個 UI 想變成紫色系。」
只要打打字輸入，AI就能夠完成設計風格、尺寸調整 ：
- 幫忙調整 CSS
- 改變比例、置中
- 防止版面爆掉
- 甚至重新設計一套 UI
🧩 7. 最後進入 Debug：AI 用白話文教你修正錯誤
小編犯了很多初學者會犯的錯，例如：
- 標題留白 → 錯誤
- 按鈕沒有反應 → 綁錯事件
- 畫面偏移 → transform-origin 影響
每一次 AI 都不是直接給答案，而是解釋：
- 問題怎麼發生
- 為什麼會錯
- 怎麼判斷
這讓小編第一次真正理解：
Debug＝理解程式邏輯的起點。
🧩 8. 成果最大的價值：理解「App 的基本構成」
訂飲料 App 只是成果，
但小編覺得最重要的收穫是——
✔ 第一次理解 App 是怎麼運作的
前端：畫面、輸入欄位、按鈕
後端：接資料、存資料、處理邏輯
資料：放在哪裡、怎麼寫入、怎麼讀取
做到這一步，小編終於明白：
「只要理解這三件事，以後很多辦公小工具其實都能自己做。」
這就是小編本次 Vibecoding 挑戰最想分享的核心。
🎓 如果你也想體驗「第一次用 AI 做出自己的 App」——來試試 Vibecoding 吧
你不需要會寫程式。
不需要懂系統架構。
只需要願意像小編一樣 —— 挑戰一次。
✨ 零基礎友善：手把手帶你設定開發環境，現在加入馬上學，不用擔心跟不上直播
✨ 3 週陪跑訓練：藉由每週一次共 3 次的直播教學，讓你能有效吸收，還能回放複習
✨ 實作專屬網站：最後你會帶走 1 個屬於你的互動網站，掌握這套流程，再開發也沒問題
📅 上課資訊
🎟 早鳥 75 折優惠
👉 課程詳情：https://www.tibame.com/course/6161