MODULE 8 — PROMPT PLAYBOOK
Prompt 兵法
本課所有 demo 是怎麼被 prompt 出來的——把方法拆開,讓你對 Claude / ChatGPT / Gemini / Codex 都能複製這個品質。
prompt 的四層結構
| 層 | 在做什麼 | demo 01 實際用法 |
|---|
| 1 角色 | 借專業視角 | 你是資深網頁設計師 |
| 2 任務+格式 | 做什麼、交什麼形狀 | 單檔網頁,CSS/JS 全內嵌 |
| 3 規格 | 內容 / 風格 / 技術 | 區塊清單;霧感+色票;零依賴+OG |
| 4 驗收+禁止 | 怎麼檢查、不要什麼 | 不要 AI 樣板腔、不要外部框架 |
缺一層,AI 就自己腦補一層——腦補的那層就是你不滿意的地方。
四個實戰心法
- 風格用形容詞 + 色票,不要只說「好看」
- 把已知的雷預先寫進 prompt(loadAll / fullScreen:false)
- 負面清單跟正面需求一樣重要:不要 emoji、不要紫色漸層、不要罐頭版型
- 之後會改的東西,要求放在好改的地方(機率表放最上方)
context 準備
同一句指令,
有沒有附對 context,
輸出是兩個世界。
品牌規格卡:一次寫好,每次都餵
品牌:山霧咖啡 SANWU COFFEE
色票:墨綠底 #10221d / 松綠 #1d4438 / 霧灰綠 #9db8ae
/ 奶油白 #f4efe4 / 銅棕 #c98f4e
字體:標題襯線(Noto Serif TC),內文黑體
語氣:沉穩、有畫面感、短句;不用驚嘆號轟炸、不用 emoji
一句話人格:把第一杯的儀式感分給你
本課三個 demo 風格一致,不是 AI 記性好,是每次開新對話都先貼這張卡。
另外三種 context
- 現有檔案 — 要改頁面就把整個 HTML 貼回去;AI 沒有「上次」
- 錯誤現場 — Console 紅字原文 + 我做了什麼 / 預期什麼 / 看到什麼
- 參照範例 — 「像 web-effects-collector 裡『星座連線』那種」比「科技感點點」精準一百倍
圖片 context:兩個方向
A. 讓 AI 生圖
- 六欄規格卡(模組 2)
- 構圖欄寫用途:「左側留白疊標題」
- 生圖時就想好它進版面哪裡
B. 拿圖片當輸入
- 截圖貼給 AI 改版面,比文字描述有效
- 參照圖定風格與配色
- 進頁面前:壓 500KB、進 canvas 考慮 base64 內嵌
聊天式 vs agent 式(Claude Code / Codex)
| 聊天式 | agent 式 |
|---|
| 檔案 | 貼進去、複製出來 | 直接讀寫你的資料夾 |
| 規格卡 | 每次對話重貼 | 存成 BRAND.md 叫它先讀 |
| 驗收 | 你自己開瀏覽器 | 叫它自己開瀏覽器驗證 |
agent 式殺手鐧:驗收清單寫進指令
做完之後你要自己驗證:
1. 起本機 server 開頁面,console 不能有紅字
2. 特效 canvas 要真的有畫東西(數非透明像素)
3. 手機寬度 390px 檢查無水平捲動
4. 互動流程(抽獎/答題)完整走一遍
驗證通過才回報,並附截圖。
demo 01 手機版兩個 bug 就是這樣被抓出來的。一次到位是迷思,一輪驗收內收斂才是實力。
迭代紀律
- 一次只改一兩件事 — 壞了才知道是誰造成的
- 重要版本先另存再改 — index-v2.html
- 改壞了別戀戰 — 貼回最後的好版本,換個說法重下
- 滿意的 prompt 存起來 — prompt 庫是資產,比成品值錢
實戰回放:demo 01 的 prompt 鏈
- 1. 四層 brief → 第一版單檔 HTML(模組 1)
- 2. 六欄規格卡 → 窗景熱拿鐵 hero.jpg(模組 2)
- 3. 點菜 → 星座連線粒子,優雅不要吵(模組 3)
- 4. 疊層指令 → 照片維持原比例,杯口 76%/60% 疊蒸氣絲
- 5. 驗收回饋 → 手機溢出、日期折行,兩輪修正收斂
沒有一步需要會寫程式。
常見坑
- prompt 寫成許願池 — 規格不寫,驗收時逐條吵
- context 只給一次 — 對話一長 AI 就忘,關鍵指令前重貼品牌卡
- 把 AI 的自信當正確 — 它寫錯時語氣一樣肯定
- 貼了不該貼的 — API key、客戶名單、內部價格表不進對話
整個 repo 就是本模組的對照成品
動手做
- 任務 — 拿一個以前不滿意的 prompt,用四層結構(角色/任務+格式/規格/驗收+禁止)重寫,新舊兩版丟給 AI 比較
- 預期 — 新版更可控、更接近你要的,廢話更少
- 卡關 — 還是不準,檢查是不是缺了「規格」層(形容詞+色票、把雷先寫進去)
← → 翻頁