MODULE 1

第一個活動頁:
用 AI 對話生出整頁

學完:給 AI 一段活動 brief,拿回一個完整可開啟的活動網頁,並用對話迭代到滿意。

步驟一:把企劃壓成 brief

• 活動名稱、檔期、一句話賣點
• 目標客群與他們在乎的事
• 需要的區塊 hero / 活動辦法 / 時間地點 / CTA / 注意事項
• 風格參照:兩三個形容詞 + 色系
• CTA 要使用者做什麼 填表 / 加 LINE / 到店

頁面好不好,九成取決於 brief。

步驟二:prompt 範本

你是資深網頁設計師。請為以下活動做一個單檔活動網頁
(所有 CSS 和 JS 都內嵌在同一個 HTML 檔):

【活動】山霧咖啡開幕週,6/20-6/26,買一送一
【客群】25-40 歲上班族,重視質感與儀式感
【區塊】滿版 hero、三張活動亮點卡、地圖資訊、注意事項、頁尾
【風格】沉穩、霧感、留白多;主色深墨綠,輔色奶油白
【CTA】「加入 LINE 領券」按鈕

要求:
1. 繁體中文,手機優先(大部分人從 LINE/FB 點開)
2. 不用任何外部框架,零依賴
3. 加上 og:title、og:description、og:image 三個 meta tag
4. 文案不要 AI 樣板腔,寫得像真的品牌

步驟三:存檔、開啟、驗收

• 完整 HTML 貼進記事本,存成 index.html(UTF-8),雙擊開啟
• 手機寬度看一次(視窗縮窄即可)
• 每個按鈕連結點一次
• 文案逐字讀:AI 會編造「免費停車」這種你沒說過的服務

步驟四:對話式迭代

• 修改不要自己動手改檔案,回到對話下指令
• 「hero 字再大、卡片改左圖右文、主色換 #1a3c34」
• 一次只改一兩件事,改完重存重開
• 「整頁留白再多 20%」「加置底浮動 CTA bar」都是合法指令

CTA 設計三原則(轉換的關鍵)

• 動詞明確具體 — 不要「了解更多」;用「立即報名」「加入 LINE 領券」,一看就知道按下去拿到什麼
• 放第一屏 — 訪客不一定往下捲;主 CTA 要打開就看到,長頁再加置底浮動 bar
• 一頁一個主 CTA — 四顆同樣大的按鈕=沒重點;選一個最想要的當主按鈕(顏色最跳),其他降級

驗收:打開頁面三秒內,一眼看得到「該按哪裡」嗎?看不到就是 CTA 不夠強。

常見坑

• 檔案不完整破版 → 「從頭重新給我完整單一 HTML,不要省略」
• 編造內容 → brief 沒給的資訊逐項檢查
• 連結佔位符 → 上線前全頁搜尋 # 和 example.com
• 忘了 OG tags → LINE 分享變空白卡,觸及砍半

動手做

• 任務 — 用四層 brief 生一個你自己活動的單檔 landing,存成 index.html 打開
• 預期 — hero + 主 CTA + 三個區塊,手機寬度不破版
• 卡關 — 破版多半是回覆被截斷;說「從頭給我完整單一 HTML、手機優先」