Vibe Coding 1 小時工作坊講義

0. 這堂課要做出什麼成果

一小時結束時，每位同仁要學到兩樣東西：

• 一個「可正常開啟、手機與桌機都能看」的單頁活動頁（HTML + CSS）。
• 一份「我們單位可共用」的設計指引草案（配色、字體、間距、按鈕樣式、圖片規格），之後做新活動頁可以直接套用。

補充：講義裡用到的「Vibe Coding」指的是用自然語言引導 AI 產碼、再用你的人腦做目標、規格、測試與修正。這個詞最早是 Andrej Karpathy 在 2025 年提出的說法。

清楚定義：不是所有 AI 輔助寫程式都等於「完全不看程式碼」。我們今天採用的是「看得懂、能維護」的做法。

1. 一小時流程

2. 核心觀念先講完

2.1 目標設定：先把「誰」跟「要做什麼」搞清楚

你做的是活動頁（Landing Page），重點是「單一目標」。頁面上可以有很多資訊，但主要行動只保留一個（例如：報名、索取簡章、加入候補）。

因為：活動頁如果塞太多路徑，轉換率通常會變差。

例：給「企業主」看，從「FB/EDM」來，看完要「填表索取簡章」，填完就「拿到課表 PDF」。

2.2 CTA 文案不要太空泛

CTA 很常被 AI 寫成「立即開始」「了解更多」這種萬用詞，但 UX 研究指出這種字眼容易誤導、資訊氣味不足。

建議改成「動作 + 回饋」：

• 索取簡章（立刻寄到信箱）
• 我要報名（保留名額）
• 加入候補（開放通知我）
• 預約諮詢（15 分鐘）

2.3 先線框（wireframe）再產碼

「先做 landing page 線框/骨架，再把內容填進去」。

流程固定成：
計畫書 →（AI）網頁規格表/線框 →（AI）乾淨 HTML/CSS →（人）檢查與修正 →（AI）套用設計指引再輸出一次

2.4 RWD 與 2.5 可讀性

RWD (響應式設計)：

• 有正確 viewport 設定
• 版面會跟著螢幕寬度變化
• 圖片能縮放、不會把版面撐爆

無障礙 (可讀性)：

• 對比度是最常見的坑。
• WCAG 基本要求：文字對背景要有足夠對比（至少 4.5:1）。

3. 實作流程

Step 1：準備你的「輸入材料」

每位同仁先準備以下四樣（不完整也沒關係）：

1. 一份正在進行中的計畫書（或招生簡章文字）
2. 受眾一句話（誰）
3. CTA 一句話（要做什麼）
4. 單位/活動 Logo（沒有也先用文字版）

Step 2：建立專案資料夾

/活動頁專案/2026-xx-xx_某某課程/
    index.html
    assets/  (放圖片)
    copy/    (放計畫書文字、CTA 文案)
    spec/    (放設計指引與規格表)

目的：圖片路徑、檔案路徑會一致，之後換人接手也不會迷路。

Step 3：用 AI 先產「網頁規格表」（先不要叫它寫整頁 HTML）

你會拿到一份「可檢查、可討論」的規格表。

Step 4：把規格表壓成「4–5 段落」的單頁結構

常見的活動頁骨架（給沒有設計背景的人用）：

1. Hero 首屏：課程一句話價值 + 主要 CTA
2. 課程亮點：你為誰解決什麼問題（2–4 點就好）
3. 課程資訊：時間、地點、費用、名額、適合誰
4. 信任元素：講師/單位、學員回饋、合作單位
5. FAQ/注意事項 + 再一次 CTA

原則：首屏要清楚、CTA 要醒目、避免把人帶走。

Step 5：再叫 AI 產「乾淨 HTML/CSS」（先求能用）

Step 6：第一次檢視（這一步要用「人腦」）

請照這 4 個點檢查：

1. 能不能正常開啟（桌機 Chrome/Edge 任一個）
2. 內容順序跟段落有沒有怪怪的怪的怪的（有怪怪的怪的就回去改規格表，不要硬修 CSS）
3. 圖片預留位子看起來順不順（比例、大小、位置）
4. 手機看起來是否一致（用瀏覽器的裝置模擬即可）

注意：圖片如果會撐爆版面，通常是少了「讓圖片縮放」的做法。

4. 風格與共用設計指引

今天要做出一份「我們的共識」。

4.1 為什麼要做「資產管理」

同一個單位如果每次活動頁都長得不一樣，長期會累積兩個成本：

• 內部溝通成本（每次都要重新講喜好）
• 對外辨識成本（看不出是同一個單位）

最小可行版本：把 Logo、顏色、字體、按鈕、圖片規格訂出來。

4.2 用 AI 產出「可重複使用」的設計規格清單

4.3 合併規格，再輸出第二版 HTML

先修內容、再出排版規範、再合併重產 HTML。

5. 圖片怎麼放：兩條路都講清楚

5.1 放在同一個資料夾（相對路徑）- 最建議

assets/hero.jpg
assets/logo.png

優點：檔案小、瀏覽器快取有效、換圖容易、部署最穩。

5.2 用 Base64（data URL）內嵌

把圖片變成 data: URL 塞進 img src。

適合：很小的圖示、少量小圖（例如 icon）。

不適合：大圖、很多圖、影片（檔案會暴增、載入慢）。

6. 表單新增：Google Forms vs Sheets

如果要「最快上線」：用 Google Forms（嵌入或連結）。

6.3 Apps Script 寫入第一個工作表（範例碼）

如果你要「自訂表單寫入 Sheets」，這是比 Active Tab 更穩的做法。

const SPREADSHEET_ID = "把你的試算表 ID 放這裡";
const TOKEN = "簡單的共享密鑰，避免被亂灌";

function doPost(e) {
  try {
    const data = e.parameter; // 適合 x-www-form-urlencoded
    
    if (data.token !== TOKEN) {
      return ContentService.createTextOutput("unauthorized");
    }

    const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
    const sheet = ss.getSheets()[0]; // 不怕分頁改名
    
    sheet.appendRow([
      new Date(),
      data.name || "",
      data.email || "",
      data.phone || "",
      data.role || "",
      data.note || ""
    ]);

    return ContentService.createTextOutput("ok");
  } catch (err) {
    return ContentService.createTextOutput("error");
  }
}

注意：A) 初階用 HTML form action 直接 POST；B) 進階用 fetch 但避免 application/json (會觸發預檢)。

7. AI 變笨、變慢、甚至開始亂掰：怎麼處理

討論串太長時，模型容易「忘記前面你定過的規格」，這時候硬聊只會更糟。

標準動作：

1. 先把目前定案的東西整理成「一頁摘要」：
   • 目標受眾、來源、主要 CTA
   • 五個區塊名稱與順序
   • 設計指引（CSS tokens）
   • 不能改的規則
2. 開新對話，把「一頁摘要」貼上，然後再繼續做下一版。

如果用 ChatGPT，建議直接用 Projects 管理。

8. 附錄 A：可直接複製的 Prompt 套件

A1 網頁規格表（必用）

A2 乾淨 HTML（第一版）

A3 設計指引（CSS tokens）

A4 套版重產（第二版）

9. 附錄 B：上線前 60 秒檢核

（再三確認）

• [ ] 首屏 5 秒內看得懂「這是什麼活動」＋「我該做什麼」
• [ ] CTA 只有一個主要動作，文案一致
• [ ] 手機不爆版（字不超出、按鈕好按）
• [ ] 對比度夠（不要淡灰字配白底）
• [ ] 圖片路徑正確（建議用 assets/ 相對路徑）
• [ ] 若用 Apps Script：部署權限與風險有人負責（不確定就先用 Google Forms）

10. 附錄 C：用語快修

避免 AI/陸式語感，改成台灣常用說法：