複製成功！
1 / 26
萬芳醫院 院內教學

Vibe Coding

實戰課

不會寫程式，也能做出東西

AI 工具應用 現場實作 HTML 宣傳信
李妍蓁
萬芳醫院 實戰分享

先問問大家，今天想帶走什麼？

今天你最想從這堂課帶走什麼？

這題沒有標準答案，只是讓我知道等等哪些地方可以多停一下。

點選一個選項，再按「確認投票」送出

開始前，先猜猜看！

你覺得「Vibe Coding」最關鍵的能力是什麼？

點選一個選項，再按「確認投票」送出

今天你會學到什麼？

  • 解密 Vibe Coding： 不會寫程式，也能做出東西
  • 實例展示： 醫院裡真實做出來的成果
  • 企劃心法： 從需求到網頁的捷徑
  • 現場實作： 15 分鐘完成你的第一封 HTML 宣傳信
  • 延伸應用： 把同樣方法變成互動教材與測驗遊戲

我們以前的痛點...

來回確認花時間

想調整活動素材的文字、顏色或版面，常需要和設計承辦同仁來回確認，時間一拉長，宣傳節奏就容易被拖慢。

資訊淹沒在文字中

全文字公告容易被略過。缺乏視覺吸引力，就無法有效傳遞。

想做精美，門檻卻很高

Canva 要熟悉介面、PPT 要自己從零排版，不擅長美編就很難做得好看。想要精美，好像只能求人或將就。

實例展示

🌱

安寧小劇場

點擊預覽

🥂

春酒邀請函

點擊預覽

🧘

正念韌性工作坊

點擊預覽

「我們不是工程師，但我們現在也可以寫程式。」

因為 Vibe Coding 的核心不是語法，是描述你要什麼。

以前用 AI
Vibe Coding 之後
請 AI 幫我寫活動公告文字
請 AI 做一封精美 HTML 宣傳信，直接寄出
請 AI 幫我整理會議重點
請 AI 做一份視覺化的會議摘要儀表板
請 AI 幫我寫衛教說明
請 AI 做一個有圖有互動的衛教小頁面

成功作品的企劃黃金公式

1

定義目標

想讓對方採取什麼具體行動？

🎯 點擊報名 📅 記下時間 📝 填寫問卷
2

準備素材

讓 AI 幫你整理成專業排版。

📍 地點連結 👨‍🏫 講者簡介 📜 活動議程
3

設定氛圍

描述想要的感覺 (Vibe)。

🎨 標準色系 ✨ 簡約現代 🖱️ 動態按鈕

現在輪到你了！(實作環節)

限時實作挑戰

10:00

1 準備你的活動素材

先把活動名稱、時間地點、對象、報名方式整理好。這些就是等一下餵給 AI 的原料。

📋 活動名稱
📅 時間 & 地點
👥 對象 / 講者
🔗 報名方式 / 注意事項

2 先跟 ChatGPT 確認內容排版

先對齊大綱，再生成代碼，避免一開始就變成一大包混亂 HTML。

3 套用防禦性 Prompt 架構

為了避免 Gmail 或 Outlook 跑版，我們需要一段特殊的「防禦性咒語」。

4 貼到 LLM 開始撰寫 Email

不知道怎麼描述版型？直接偷這張

很多時候不是 AI 做不到，而是我們還沒把「想要的畫面」講清楚。
點開每張卡片，看它長什麼樣子。

議程 / 流程

請用 vertical timeline 呈現，每個時間點是一個節點。

點擊看 DEMO

休息時間

請用 膠囊狀 capsule / pill 標籤 呈現，像中場休息提醒。

點擊看 DEMO

講者介紹

請用 speaker profile card 呈現，包含照片、姓名、職稱、簡介。

點擊看 DEMO

時間地點

請用 info card 呈現，搭配 icon，讓資訊一眼看懂。

點擊看 DEMO

報名方式

請設計明顯的 CTA button，文字要有行動感。

點擊看 DEMO

注意事項

請用 alert box / warning box 呈現，讓提醒不會被忽略。

點擊看 DEMO

常見問題

請用 accordion 可展開區塊 呈現，避免頁面太長。

點擊看 DEMO

活動特色

請用 feature cards 呈現，每個特色一張卡片。

點擊看 DEMO

成果照片

請用 gallery grid 呈現，像作品集一樣排列。

點擊看 DEMO

你不需要會寫 CSS，但你要學會描述「你想看到什麼樣的畫面」。

如果卡關了怎麼辦？（急救箱）

遇到以下狀況時：

  • 代碼貼到預覽器後，畫面全白或排版大亂。
  • AI 偷懶，代碼中間出現 「...（略）」 或 「原有程式碼」，導致內容不見。

👉 別慌！把鍋甩回給 AI 即可。

複製急救咒語

「這段代碼跑出來的畫面有問題 / 你沒有把代碼寫完。請幫我修正，並且『一次給我完整可以直接複製的 HTML 代碼』，不要省略任何標籤。」

最後一哩路：把 HTML 信貼進 Gmail

1

存成網頁檔

將 AI 給的程式碼貼到「記事本」，存檔時將副檔名改為 .html

點擊觀看演示
2

瀏覽器開啟

在該檔案上點兩下，讓電腦用 Chrome 或 Edge 瀏覽器打開它。

點擊觀看演示
3

複製並貼上

在網頁上全選複製，接著打開 Gmail 撰寫新郵件，直接 Ctrl+V 貼上！

點擊觀看演示

常見雷區 ①：為什麼貼進去排版歪到左邊了？

錯誤：滑鼠反白拖曳

拖曳常常會漏掉最外層負責「置中」與「背景色」的隱形表格，導致貼上後整個歪掉也沒有底色。

正確：鍵盤全選 (Ctrl + A)

請直接按 Ctrl + A (Mac 是 Cmd + A) 全選複製。這樣才能完美捕捉所有隱形框架！

看一看「滑鼠拖曳」的災難

沒選到外框，貼上後排版全毀！

點擊觀看錯誤示範

常見雷區 ②：為什麼貼進去圖片變成「破圖」？

為什麼會這樣？

AI 給的程式碼中，圖片路徑通常是「你電腦裡的檔案名稱」（例如：BgSub_朱智邦.jpg）。
直接貼上 Gmail 時，Gmail 抓不到你電腦裡的圖，就會顯示破圖。

神救援補救法！

  1. 先照常 Ctrl+V 貼上整份 HTML 到 Gmail。
  2. 點擊那張破掉的圖片，選擇 「移除」。
  3. 游標留在原地，將要插入的圖片拖曳進來。
  4. 上傳原本那張照片，大功告成！

圖解：移除破圖與重新插入

一分鐘學會神救援技巧！

點擊觀看補救示範

小測驗：把整個流程拖曳排成正確順序

從「想清楚目標」到「貼進 Gmail 寄出」，這五個步驟被打亂了！試著用滑鼠拖曳，把它們排回正確的先後順序。

將 AI 給的程式碼貼到「記事本」，存檔副檔名改為 .html，再用瀏覽器開啟
先想清楚目標：想讓對方採取什麼具體行動？（點擊報名、記下時間…）
先跟 AI 確認內容排版架構（大標題、內文、按鈕位置），對齊大綱再生成代碼
用「防禦性 Prompt」請 AI 產出完整 HTML 代碼（table 佈局、inline style）
在網頁上全選複製（Ctrl+A），打開 Gmail 撰寫新郵件，Ctrl+V 貼上寄出

小測驗：你能分辨對錯嗎？（點卡片翻面看答案）

情境一
複製 HTML 內容時，我用「滑鼠反白拖曳」整個畫面範圍。
點擊查看這樣對嗎？
錯誤做法
滑鼠拖曳容易漏掉最外層的隱形表格框架。正確做法是按 Ctrl + A（Mac 為 Cmd + A）全選複製，才能完整保留排版與底色。
情境二
貼到 Gmail 後，發現某張圖片變成「破圖」叉叉，我選擇直接刪除整段內容重做。
點擊查看這樣對嗎？
錯誤做法
不需要重做！破圖是因為 AI 給的圖片路徑是你電腦裡的檔名。只要點掉那張破圖選「移除」，把游標留在原地，再把照片拖曳上傳進去即可。
情境三
AI 給的代碼裡出現「...（以下省略，與前面相同）」，我直接複製貼上整段。
點擊查看這樣對嗎？
錯誤做法
這樣貼上去內容會「不見」！要回覆 AI：「請給我完整可以直接複製的 HTML 代碼，不要省略任何標籤」，讓它重新輸出完整版本。
情境四
畫面預覽時排版全亂、變成一片空白，我直接告訴 AI「畫面有問題，請幫我修好」。
點擊查看這樣對嗎？
正確做法
這是對的方向！只是可以更精確：請補上「並且一次給我完整可以直接複製的 HTML 代碼，不要省略任何標籤」，這樣 AI 修正後才不會又斷掉。
其實這份簡報，也是用 Vibe Coding 做出來的
不只能做宣傳信，
也能做出互動的簡報
先讓 AI 幫你搭出簡報骨架，再把拖曳、翻牌測驗這些小機關放進去。

想做互動簡報，可以這樣開始

1 先決定簡報用途

是課程講義、互動教材、活動宣導，還是測驗遊戲？

📚 課程講義
🎮 互動教材
📣 活動宣導

2 先請 AI 產生簡報架構

先自己試著寫寫看，再點開參考答案。

請先不要寫程式碼，請幫我規劃一份 HTML 互動式簡報的大綱，包含每一頁標題、重點內容，以及可以加入的互動設計。

3 再請 AI 生成完整 HTML

確認架構後，再請它打包成可開啟的 HTML。

請依照上面的簡報大綱，幫我製作一份完整的 HTML 互動式簡報，包含頁面切換按鈕、進度條、RWD 排版，以及可以直接開啟使用的完整程式碼。

先不要急著做機關，先讓簡報有骨架；有了骨架，互動才加得進去。

揭密：拖曳排序測驗怎麼做出來的？

互動不是從程式開始

剛剛的拖曳排序，不是先寫程式，而是先把互動規則說清楚。

適合：SOP、急救流程、報名流程、交班流程、表單送審流程

互動教材的關鍵不是「我要寫什麼程式」，而是「我要學員怎麼操作」。

小補充：HTML 是內容骨架、CSS 是外觀樣式、JavaScript 是互動功能。你不用會寫，但可以請 AI 一次打包成可開啟的 .html 檔。

可直接複製改題目

幫我做一個「拖曳排序小測驗」互動： 1. 題目是：「請把以下流程排成正確順序」 2. 下方有 5 個可以拖曳的卡片，每張卡片是一個步驟 3. 使用者可以用滑鼠拖曳卡片上下排序 4. 下方有「檢查答案」按鈕 5. 按下後，正確的卡片顯示綠色與 ✅，錯誤的卡片顯示紅色與 ❌ 6. 如果全部正確，顯示「太棒了，你已經掌握流程！」 7. 風格請使用簡潔現代的藍色系，適合放在教學簡報或課程網頁中 8. 請輸出一份完整、可以直接存成 .html 打開使用的程式碼，包含畫面樣式與拖曳互動，不要省略任何內容

除了「拖曳排序」，還可以做哪些互動設計？

這些不是要大家今天全部做完，而是讓你知道：下次設計教材時，可以怎麼讓學員「動手參與」。點卡片看小 DEMO。

🔗 配對題

名詞解釋、角色職責、疾病與症狀、藥物與副作用

點擊看 DEMO

🃏 翻牌卡

常見錯誤、重點複習、術語記憶、迷思破解

點擊看 DEMO

🧭 情境選擇

溝通技巧、倫理案例、OSCE、臨床決策

點擊看 DEMO

🔍 找錯題

病歷紀錄、表單填寫、感染管制、品質稽核

點擊看 DEMO

🎯 Bingo

課堂破冰、關鍵字複習、活動暖場

點擊看 DEMO

🏆 闖關任務

新人訓練、資安教育、病安課程

點擊看 DEMO

🎫 刮刮樂

公布答案、抽獎、課堂驚喜、重點揭曉

點擊看 DEMO

🫥 模糊馬賽克

圖片辨識、案例揭曉、前後對照、猜答案

點擊看 DEMO

先不要問：「我要怎麼寫程式？」
先問：「我希望學員怎麼參與？」

結語與任務

今天真正帶走的，不是一段程式碼

1
說清楚需求
對象、目的、內容、風格
2
做出第一版
宣傳信、頁面、互動教材
3
反覆修到可用
卡關就回問 AI，逐步修正

🚀 課後的小任務

「把你近期要發的活動通知，試著做成一封 HTML 宣傳信，
或一個小小的互動教材。」

Vibe Coding 不是要你變成工程師

而是讓你的想法，有能力自己長成作品。

課程設計與製作｜李妍蓁・萬芳醫院教學部

課後回顧（本機示範） 1 / 5

今天這堂課後，你覺得自己有比較知道怎麼開始使用 Vibe Coding 嗎？

課後回顧（本機示範） 2 / 5

這堂課中，哪一個部分對你最有幫助？

可複選

課後回顧（本機示範） 3 / 5

你最想把今天學到的方法用在哪裡？

可複選

課後回顧（本機示範） 4 / 5

如果之後有進階課，你最想學什麼？

可複選

課後回顧（本機示範） 5 / 5

公開教材互動示範：不填寫部門或職稱，不會送出或儲存資料。

☆☆☆☆☆

公開教材版：所有互動僅供本機體驗，不會傳送投票或回饋。