Vibe Coding 實戰課 — Stage 1 · 用 AI
從指令品質到產出品質的因果關係
按 → 或空白鍵開始
M1-1 ・ 3 小時
同一個個人網頁,從陽春草稿長成有質感的作品
一句話先做出來
套四要素,變成完整頁面
升級質感,做出你的味道
今天不是學語法,是把一句想法變成可以展示的作品
ROUND 1 · 0:00–0:20
目前的能力水位，就是後續升級的基準線
用你現在想得到的方式，輸入一句指令請 AI 做一個個人網頁
Claude 按 Publish、ChatGPT 按 Preview，或存成 .html 直接開啟
不用修改、不用美化 — 這一輪先建立基準線，不追求品質
群組裡有你的連結，點開能看到網頁 = 完成
卡住了 — 舉手，或翻下一頁的三個常見起點
以下三個是常見起點，下次可以嘗試
Round 1 結束後再回來看
A：幫我做一個自我介紹網頁 B：做一個我的作品集頁面 C：做一個活動報名頁
差距會在後續輪次中被量化
Claude → 按「Publish」取得連結
ChatGPT → 按「Preview」取得連結
或將程式碼存成 .html 檔案，直接在瀏覽器開啟
Publish / Preview 連結或 .html 檔案皆可
瀏覽版面、配色、內容完整度
不排名、不比較好壞，只觀察差異本身
區塊分隔清晰
資訊層次可辨
配色是否統一
字級是否
有層次感
資訊是否齊備
有無明顯遺漏
ROUND 2 · 0:20–0:50
從 Round 1 的差異中提取可複製的方法
Round 1 中品質較高的作品，不是運氣 — 是指令結構更完整
幫我做一個網頁
AI 缺乏上下文，只能產出最基礎的框架
你是前端工程師
製作個人名片網頁，含姓名、技能標籤、聯絡方式
白色背景，現代簡約風格
角色、任務、內容、風格
四個維度都有交代
拆解這四個維度，建立可複製的指令結構
設定 AI 專業
決定回應程度
需求顆粒度
決定完整度
控制視覺呈現
與風格方向
排除多餘變數
縮小決策空間
角色設定改變 AI 的回應框架
同一個問題，工程師和設計師給出不同答案
無角色：「幫我做一個網頁」 → 泛用回應，缺乏專業判斷 有角色：「你是一位有 10 年經驗的前端工程師」 → 結構化程式碼、手機自適應、效能考量
角色設定的本質是調整 AI 的輸出分佈
指定角色 → AI 優先從該領域知識取樣回應
任務的顆粒度決定產出的完整度
做一個個人網頁
AI 需要自行猜測
內容、區塊、資訊架構
製作個人品牌網頁，包含
首屏區塊、關於我
技能列表、聯絡方式
每個區塊有名稱，AI 不需猜測
用「包含：」加列點，把需要的區塊逐一列出
製作個人品牌網頁，包含： - 首屏區塊（姓名 + 一句話定位） - 關於我（150 字簡介） - 技能列表（5 個標籤） - 聯絡方式（Email + LinkedIn）
每一條列點就是一個產出規格
列點越明確，AI 的決策空間越小，可預測性越高
格式指令控制視覺呈現
沒有格式指令，AI 套用預設的樸素樣式
無格式：AI 預設灰底白字，無間距 → 功能正確但視覺不可用 有格式：「白色背景，現代簡約風格 主色用深藍綠漸層（#0B3C5D 到 #0F9D8A） 卡片式排版，圓角 16px 帶陰影」 → AI 產出有品牌感的視覺方案
色碼優先於色系
縮小決策空間
卡片式、分欄
全螢幕滾動
定義空間結構
類似 Apple 官網
極簡科技感
用案例錨定方向
格式指令越具體
AI 自行決定的空間越小
產出與預期的偏差越低
限制的功能是排除變數
沒有限制，AI 可能引入你不需要的框架或依賴
單頁式設計，不要分多個頁面 手機也能正常看（響應式設計） 中文介面 不使用外部圖片或 CDN CSS 全部寫在 <style> 裡，不要外部框架
每多一條限制，AI 的自由度下降，但可預測性上升
限制是「用確定性換取控制權」
你是一位專業的前端工程師 製作個人簡介網頁，包含： - 姓名 + 職稱 - 自我介紹（50 字內） - 技能標籤（3–5 個） - Email 聯絡方式
設計要求： - 白色背景，現代簡約風格 - 主色深藍綠（#0B3C5D） - 漸層圓形代替大頭照 限制： - 完整 HTML，不用外部框架 - 手機版要排版良好
把 [ ] 中的內容換成你的真實資訊 — 真實內容的作品可以直接用
取得第二版的 Publish / Preview 連結
把第一版和第二版並排打開
兩版並排，看得出指令結構帶來的差距 = 完成
卡住了 — 舉手，或回看上一頁的完整指令，照抄後再替換內容
Publish / Preview 連結或 .html 檔案
觀察版面結構、配色、內容完整度的變化幅度
哪些指令結構產出了最大的品質差距？
你剛才親身驗證了指令結構與產出品質之間的因果關係
ROUND 3 · 0:50–1:20
五個判斷點，從「能用」升級到「好用」
使用者看到的所有視覺元素
餐廳的空間設計
決定第一印象
使用者操作時的整體感受
從入座到結帳的動線
決定回訪率
UI 是視覺線索，UX 是任務完成路徑
訪客在 3 秒內決定去留 — 首屏（Hero Section）要在這 3 秒傳達核心資訊
塞滿文字，沒有視覺焦點
看不出這個頁面的用途
→ 3 秒後離開
一句話定位 + 一個行動按鈕
乾淨背景，視覺焦點
→ 繼續往下看
指令：「首屏要有一句標語（20 字內）和一個『聯絡我』按鈕」
一句話說清定位 + 兩個行動按鈕
Stripe 的首屏：一句定位 + 兩個 CTA
3 秒內讓訪客知道「這是什麼」和「下一步做什麼」
規則：主色不超過三個
超過三個，視覺主線消失，使用者無法判斷重點
紅橙黃綠藍紫各處出現
每個區塊風格不一致
→ 視覺雜訊過多
主色 + 輔色 + 中性色，共 3 個
全頁面視覺語言統一
→ 專業且有品牌辨識度
主色 #0F9D8A，輔色 #0B3C5D 背景白色，不要超過 3 個主色
黑+白+一個強調色
Notion 全站只用 3 色：黑、白、藍
視覺極度統一，使用者注意力不被分散
標題、內文、說明文字的字級比例決定資訊層次
留白則控制閱讀節奏
所有文字同一字級
段落之間無間距
→ 資訊層次不可辨
標題大、內文適中、說明小
區塊之間有呼吸空間
→ 重點一目瞭然
標題字級 2rem 以上，段落間距充足 留白感強，字級層次至少三級
標題極大、留白極多、內文精簡
每個層級的字級差距明確
讓視覺自然引導閱讀順序
Apple 的設計：標題 > 副標 > 內文，三級字級
大量留白讓內容「呼吸」，不擠壓閱讀體驗
每個頁面需要一個明確的「下一步動作按鈕」（CTA, Call to Action）
按鈕寫
「聯絡我」
按鈕寫
「下載履歷」
按鈕寫
「立即報名」
指令範例：「頁面底部加一個醒目的行動按鈕
顏色突出，文字為『聯絡我』」
主要按鈕（實底色）+ 次要按鈕（線框）
視覺層級清楚，引導優先行動
Slack 的 CTA：主按鈕實底色搶眼，次按鈕線框退讓
「免費開始」降低門檻，「聯繫銷售」服務進階需求
同一個網頁在電腦和手機上要都能正常閱讀
原理是根據螢幕寬度自動調整排版（響應式設計，RWD）
手機需左右滑動
文字過小難以閱讀
按鈕間距不足，誤觸率高
自動調整為單欄佈局
文字大小適中
按鈕間距足夠，操作精準
手機版排版良好，768px 以下自動 切換為單欄佈局（響應式設計 RWD）
在四要素指令後附加這段介面設計指令：
介面設計要求： - 首屏區塊：一句標語（20 字內） + 一個行動按鈕 - 配色：主色 #0F9D8A，輔色 #0B3C5D， 不超過 3 個主色 - 字級層次：標題 2rem+、內文 1rem、 說明 0.85rem - 區塊間距：上下 padding 至少 3rem - 手機適應：768px 以下自動切換單欄佈局 - 行動按鈕：顏色突出，圓角， 滑過時有動態效果
視覺焦點
三色配色
字級層次
自動單欄
引導行動
將這段附加到指令後面，
產出從「內容正確」升級為「可交付成品」
新對話能排除舊上下文的干擾，看清指令本身的效果
介面設計指令照前面的模板頁，接在原指令後面
與第二版並排，觀察介面層的差異
第三版首屏有標語與行動按鈕、配色不超過三色 = 完成
卡住了 — 舉手，或回模板頁按「複製」把整段指令帶走
互相觀察介面設計層面的差異
Round 1 裸指令 → Round 2 結構化指令 → Round 3 介面設計加持
兩層疊加是完整的產出控制
只控制內容不控制介面，等於只完成了一半的指令設計
ROUND 4 · 1:20–1:50
使用 AI 前，先理解可靠性模型
律師 Steven Schwartz 使用 ChatGPT 撰寫法律文件
AI 引用了六個不存在的判例，格式完整、看似真實
律師未交叉驗證即提交法院，被法官裁罰 US$5,000 並公開訓誡
AI 會以高度自信的語氣產出錯誤內容
它的輸出是基於機率的「預測」，不具備事實驗證能力
前三輪操作中，AI 一定做錯過什麼
— 排版跑掉、功能不能用、給了你沒要求的東西
AI 是機率生成
「聽起來合理」
≠「事實正確」
描述問題
AI 自己修正
迭代的一部分
做網頁只是 bug
如果是醫療
法律、財務呢
做網頁的風險低，但養成好習慣
未來用 AI 處理工作時，這三條是底線
密碼、個資
公司內部文件
不進 AI 對話框
AI 說錯話時
語氣一樣自信
重要資訊要驗證
AI 加速你的思考
決策權在你手上
將你最完整的指令分別輸入 ChatGPT、Claude、Gemini
觀察三個維度的差異
Canvas 渲染
創意發散
常自行添加元素
Artifacts 渲染
遵從度高
程式碼品質穩定
Google 生態系
額度與限制
依帳號方案變動
現場以實測為準
用 Round 3 的第三版指令，不用重寫
ChatGPT、Claude、Gemini 湊滿三份產出
開三個視窗並排，準備進入下一頁的四個觀察維度
三個平台各有一份產出可對照 = 完成
卡住了 — 某平台額度用完就先跑兩個，兩份也能比較
從提交到輸出完成
耗時差異
平台的視覺方案
設計偏好的不同
哪個平台最忠實
執行你的每項要求
哪個平台自行添加
是加分還是干擾
Canvas 渲染
創意發散
免費版
有對話次數限制
外掛生態豐富
Artifacts 渲染
遵從度高
程式碼品質穩定
免費版次數有限
Google 生態系
額度與限制
依帳號方案變動
現場以實測為準
同一指令在不同平台產生差異，常來自可讀取的上下文來源
差異不是誰比較聰明，是可讀取的上下文來源不同
沒有最佳平台，只有最適合的場景
核心能力是指令設計，不是平台選擇 指令能力是跨平台的
AI 不是全知的工具，是高效的協作者
理解它的邊界，才能正確運用它的能力
ROUND 5 · 1:50–2:30
指令結構相同，產品複雜度提升一個量級
選簡單的 — 這一輪測的是方法，不是遊戲難度
就用前兩輪學會的結構，不用新方法
點得動嗎？分得出輸贏嗎？能重來嗎？
遊戲畫面出現、點了有反應 = 完成 卡住也是正常結果
卡住了 — 記下卡在哪裡，卡住的點就是下一頁要分析的素材
剛才的試做如果卡住，不是能力問題
卡住的原因常見三類
使用者要點哪裡
成敗如何判定
分數、倒數
翻牌次數
缺少可觀察結果
開始、進行
結束、重新開始
沒有完整交代
你是一位前端遊戲開發者 用 HTML/CSS/JS 做一個記憶翻牌遊戲： - 4×4 共 16 張牌（8 對 emoji） - 翻兩張配對，成功留著，失敗翻回 - 翻轉動畫 + 計時 + 翻牌次數 - 完成後顯示結果 + 重新開始按鈕 白色背景，卡片藍色漸層，不超過 3 主色 輸出完整 HTML，不用外部框架
貪食蛇 / 打磚塊 / 記憶翻牌 / 井字遊戲
操作規則、回饋機制、狀態轉換三類都要交代
自己先玩一輪，確認功能都有作用
遊戲能開始、能結束、能重新開始 = 完成
卡住了 — 舉手，或回上一頁按「複製」，把補強版範例換成你的遊戲
「蛇吃到食物後沒有變長」「翻牌後沒有翻回去」— 越具體，修正越精準
「請說明你修正了哪些問題」— 理解問題本質有助於後續避免
修正後的完整程式碼，重新部署並測試所有功能
「描述問題 → AI 修正 → 再測試」是 AI 協作的標準除錯循環，不是例外狀況
Publish / Preview 連結或 .html 檔案
嘗試同學的遊戲，觀察操作流暢度與完成度
計分系統、音效回饋、難度等級 — 這些是迭代的素材
觀察別人的作品後，選擇一個或多個功能升級你的遊戲：
操作時的聲音
反饋增加沉浸感
分數顯示
+ 最高紀錄記錄
簡單 / 普通
/ 困難的分級機制
完成、失敗
得分時的動態效果
音效回饋 / 計分系統 / 難度等級 / 視覺動畫擇一
「幫我的遊戲加上 [功能名稱]，請輸出完整更新後的 HTML 檔案」
確認新功能有作用，原有功能沒有壞掉
新功能實際可操作，原有功能正常 = 完成
卡住了 — 把功能改小一點，先加計分就好
迭代的本質不是一次做對，是持續改進
第一版永遠不是終點 — 這是所有軟體開發的基礎節奏
用這六個維度評估自己和同學的作品
對比自己 Round 1 和 Round 5 的作品
再對比自己和同學的差異 — 差距來自哪裡
ROUND 6 · 2:30–3:00
回顧六輪循環，釐清下一步方向
今天完成的是 Level 1 的基礎
後面每一層，都建立在今天的指令能力上
不只學了什麼，是想法怎麼變了
在工作場景中選一個需求，用指令四要素撰寫指令
產出一個可用的成品
記錄你的指令和產出結果
下堂課會用到這些素材作為進階操作的基礎
下一堂課 — M1-2
下一堂課的主題：將指令封裝成可重複調用的 AI 助手
M1-1 完成