— NIGHT 04 · 第四堂 —

Vibe Coding I:
生成與修改

Vibe Coding I: Create & Modify

今晚用您上堂完成的企劃書,在 POE 和 Google AI Studio Build mode 生成 App 初稿。你會比較兩個工具的結果,學會用自然語言要求 AI 修改介面、文字和功能。

今晚帶走📱 App 初稿 + 修改紀錄 + 選定工具繼續
成人在夜間用 AI 工具生成並修改應用程式介面
Tools · 今晚兩個工具

POE vs Google AI Studio Build mode

同一個企劃 Prompt,分別輸入兩個工具,看看哪個更適合你的 App 初稿和修改方式。

POE 🤖
對話式生成與修改
  • 可以選擇不同 AI 模型(Claude、GPT 等)
  • 對話式修改,一步步調整
  • 適合需要文字內容較多的 App
  • 適合先生成完整 HTML / CSS / JavaScript 初稿
⚠️ 需要 POE 基本訂閱才能使用較強模型
VS
Google AI Studio ✏️
Build mode + Live preview
  • Google 官方 Gemini app building 工具
  • 可以用 Prompt 直接開始 vibe coding
  • 生成 code 和 files 後可即時預覽
  • 適合快速測試互動功能和修改方向
✅ 免費開始 · 需要 Google 帳戶 · aistudio.google.com
How To · Google AI Studio Build mode

第一次用 Build mode 生成 App

Google AI Studio 的 Build mode 適合用 prompt 快速建立、預覽和修改 App 初稿。

— STEP 01 —

1. 開啟 Google AI Studio

用瀏覽器開啟 aistudio.google.com,用 Google 帳戶登入。確認 VPN 已開啟,然後進入 Build mode。

⚡ 30 秒完成
— STEP 02 —

2. 貼入 App 企劃 Prompt

在 Build mode 的輸入框貼入上堂完成的 App 企劃,清楚說明目標用戶、三個功能、風格、顏色和頁面結構。

🎯 企劃越清楚,初稿越準
— STEP 03 —

3. 生成並檢查 Live Preview

按 Run 之後,AI Studio 會生成需要的 code 和 files,並顯示 App 預覽。先檢查:是否能開、是否像企劃、是否有主要功能。

🚀 先看能否運作
— STEP 04 —

4. 修改與迭代

用具體句子要求修改:「請把主色改成深綠」「請把三個功能做成卡片」「請修正按鈕沒有反應」。每次只改一兩件事。

🔄 小步修改最穩
90-min Flow · 課堂流程

今晚的 90 分鐘

1
10′
OPEN

展示企劃書,說出目標

每人說一句:「我的 App 叫______,是做給______用的」。確認大家帶備了企劃書截圖。

2
15′
DEMO

導師示範:同一 Prompt,兩個工具

導師即場用兔仔食品 App 的企劃 Prompt,先在 POE 生成 HTML 初稿,再在 Google AI Studio Build mode 生成可預覽 App,現場對比兩個結果的差異。

🐰 兔仔 App Demo
3
25′
DO

Round 1 + Round 2

Round 1(12 min):把企劃 Prompt 輸入 Google AI Studio Build mode,生成可預覽初稿,截圖。
Round 2(13 min):同一 Prompt 輸入 POE,生成 HTML 初稿,截圖或保存代碼。
完成後對比:哪個更接近你的企劃?哪個更容易修改?

截圖和代碼都要存好
4
15′
PEER

同學互看兩個版本,給反饋

給同學說一句:「我覺得______版本更適合你,因為______」。幫助對方選定繼續用哪個工具。

5
15′
REMIX

選定工具,修改一個元素

選定一個工具,修改一個具體的地方:文字、顏色、排版或按鈕功能。學習把「不喜歡的地方」重新說給 AI,讓它修改。

💡 一次只改一兩件事
6
10′
SHARE

存好截圖與代碼,預告第五堂

存好修改後的截圖、AI Studio project 或 POE 產生的代碼。預告:第五堂將完成 App 並發佈上網,生成你的專屬 QR Code!

Prompt Card · Vibe Coding 生成卡

今晚的 Vibe Coding Prompt

Vibe Coding 生成卡 · Night 04
我想做一個【App 名稱】的單頁網站。
目標用戶:【用戶描述】。
共 5 個部分:
1. Hero — 【標題】、一句介紹、【CTA 按鈕文字
2. 三大好處 — 【好處1】、【好處2】、【好處3】(用圖示卡)
3. 主要內容 — 【內容描述】(簡單列出)
4. 使用指南 — 【步驟描述
5. 聯絡 / CTA — WhatsApp 按鈕

風格:【可愛/專業/簡潔】,主色:【顏色】和白色。
字體用 Noto Sans TC。
請生成完整單頁 HTML 網站。如果使用 Google AI Studio Build mode,請同時生成可預覽、可修改的 App 初稿。
💡 把每個【】換成自己企劃書的內容,然後貼入 Google AI Studio 或 POE。

第四堂完成!🚀

App 初稿已生成!下堂我們把它完善、發佈上網,生成你的專屬 QR Code,讓任何人都可以掃碼看到你的作品!

← 第三堂 第五堂:發佈上網 →