Vibe Coding 實戰課 — Stage 1 · 用 AI

AI 聊天
做作品

從指令品質到產出品質的因果關係

M1-1 3 小時 6 輪循環帶走作品

按 → 或空白鍵開始

六輪循環，逐層遞進

Round 1

裸做

Round 2

指令結構

Round 3

介面設計

Round 4

風險與平台

Round 5

互動產品

Round 6

回顧定位

每一輪的節奏
操作 → 觀察 → 分析 → 升級 → 驗證
每一輪新增一層能力，前一輪的方法持續使用

ROUND 1 · 0:00–0:20

先操作
後分析

目前的能力水位，就是後續升級的基準線

操作指令

打開 Claude 或 ChatGPT
輸入一句指令，請 AI 產出一個個人網頁

操作條件

用你現在想得到的方式描述需求
不需要任何技巧 — 這一輪的目的是建立基準，不是追求品質

7 min

操作時間

常見起點（剛才若卡住可參考）

以下三個是常見起點，下次可以嘗試
Round 1 結束後再回來看

A：幫我做一個自我介紹網頁
B：做一個我的作品集頁面
C：做一個活動報名頁

差距會在後續輪次中被量化

操作計時

7

分鐘

完成後取得分享連結

取得連結的方式

Claude → 按「Publish」取得連結
ChatGPT → 按「Preview」取得連結
或將程式碼存成 .html 檔案，直接在瀏覽器開啟

分享與觀察

1

連結貼到群組

Publish / Preview 連結或 .html 檔案皆可

2

打開三位同學的作品

瀏覽版面、配色、內容完整度

3

記下你注意到的差異

不排名、不比較好壞，只觀察差異本身

同樣的工具、同樣的時間

產出品質為什麼不同？

版面結構

清晰的區塊分隔
資訊層次是否可辨

視覺一致性

配色是否統一
字級是否有層次感

內容完整度

資訊是否齊備
有無明顯遺漏

Round 1 小結

指令的精確度，直接決定產出的品質
這個因果關係會在下一輪被驗證

ROUND 2 · 0:20–0:50

指令結構
決定產出品質

從 Round 1 的差異中提取可複製的方法

從好案例中提取結構特徵

Round 1 中品質較高的作品，不是運氣 — 是指令結構更完整

結構不足的指令

幫我做一個網頁

AI 缺乏上下文，只能產出最基礎的框架

結構完整的指令

你是前端工程師
製作個人名片網頁，含姓名、技能標籤、聯絡方式
白色背景，現代簡約風格

角色、任務、內容、風格
四個維度都有交代

接下來的任務

拆解這四個維度，建立可複製的指令結構

Prompt 的四個構成要素

角色 Role 任務 Task 格式 Format 限制 Constraint

角色

設定 AI 的專業
決定回應的程度

任務

需求的顆粒度決定產出的完整度

格式

控制視覺呈現方式與風格方向

限制

排除不要的變數
縮小 AI 的決策空間

要素一：角色定位

角色設定改變 AI 的回應框架
同一個問題，工程師和設計師給出不同答案

無角色：「幫我做一個網頁」
→ 泛用回應，缺乏專業判斷

有角色：「你是一位有 10 年經驗的前端工程師」
→ 結構化程式碼、手機自適應、效能考量

角色設定的本質是調整 AI 的輸出分佈
指定角色 → AI 優先從該領域知識取樣回應

要素二：任務描述

任務的顆粒度決定產出的完整度

模糊的指令

做一個個人網頁

AI 需要自行猜測內容、區塊、資訊架構

具體的指令

製作個人品牌網頁，包含首屏區塊、關於我、技能列表、聯絡方式

每個區塊有名稱，AI 不需猜測

用「包含：」加列點，把需要的區塊逐一列出

任務描述的具體寫法

將模糊需求轉為具體規格

製作個人品牌網頁，包含：
- 首屏區塊（姓名 + 一句話定位）
- 關於我（150 字簡介）
- 技能列表（5 個標籤）
- 聯絡方式（Email + LinkedIn）

機制

每一條列點就是一個產出規格
列點越明確，AI 的決策空間越小，可預測性越高

要素三：格式規範

格式指令控制視覺呈現
沒有格式指令，AI 套用預設的樸素樣式

無格式 vs 有格式

無格式：AI 預設灰底白字，無間距
→ 功能正確但視覺不可用

有格式：「白色背景，現代簡約風格
主色用深藍綠漸層（#0B3C5D 到 #0F9D8A）
卡片式排版，圓角 16px 帶陰影」
→ AI 產出有品牌感的視覺方案

格式指令的三個面向

配色

色碼 > 色系 > 不指定
縮小決策空間

版型

卡片式、左右分欄、全螢幕滾動 — 定義空間結構

風格參照

「類似 Apple 官網」「極簡科技感」— 用案例錨定方向

原則

格式指令越具體
AI 自行決定的空間越小
產出與預期的偏差越低

要素四：限制條件

限制的功能是排除變數
沒有限制，AI 可能引入你不需要的框架或依賴

限制指令範例

單頁式設計，不要分多個頁面
手機也能正常看（響應式設計）
中文介面
不使用外部圖片或 CDN
CSS 全部寫在 <style> 裡，不要外部框架

機制

每多一條限制，AI 的自由度下降，但可預測性上升
限制是「用確定性換取控制權」

四要素組合的完整指令

角色 + 任務

你是一位專業的前端工程師

製作個人簡介網頁，包含：
- 姓名 + 職稱
- 自我介紹（50 字內）
- 技能標籤（3–5 個）
- Email 聯絡方式

格式 + 限制

設計要求：
- 白色背景，現代簡約風格
- 主色深藍綠（#0B3C5D）
- 漸層圓形代替大頭照

限制：
- 完整 HTML，不用外部框架
- 手機版要排版良好

角色 ✓ 任務 ✓ 格式 ✓ 限制 ✓

升級操作

10

分鐘

用四要素重新撰寫指令，重新產出網頁

寫結構化指令

→

貼給 AI

→

取得第二版

→

與第一版對比

操作要點

把 [ ] 中的內容替換成你的真實資訊
真實內容產出的作品可以直接使用

對比你的兩個版本

1

把第二版連結貼到群組

Publish / Preview 連結或 .html 檔案

2

並排對比 Round 1 與 Round 2

觀察版面結構、配色、內容完整度的變化幅度

3

觀察同學的升級幅度

哪些指令結構產出了最大的品質差距？

指令結構化不是技巧，是工作方法

你剛才親身驗證了指令結構與產出品質之間的因果關係

ROUND 3 · 0:50–1:20

產出品質的
第二層：介面設計

五個判斷點，從「能用」升級到「好用」

兩個核心概念的區分

使用者介面（UI）

使用者看到的所有視覺元素

顏色、字體、按鈕樣式
排版、圖片、間距
視覺風格與一致性

餐廳的空間設計 — 決定第一印象

使用者體驗（UX）

使用者操作時的整體感受

資訊是否容易找到？
操作流程是否順暢？
下一步動作是否明確？

從入座到結帳的動線 — 決定回訪率

UI 是視覺線索，UX 是任務完成路徑

判斷點一：打開網頁的第一眼

訪客在 3 秒內決定去留 — 首屏（Hero Section）要在這 3 秒傳達核心資訊

無效的首屏

塞滿文字，沒有視覺焦點

看不出這個頁面的用途

→ 3 秒後離開

有效的首屏

一句話定位 + 一個行動按鈕

乾淨背景，視覺焦點

→ 繼續往下看

指令：「首屏要有一句標語（20 字內）和一個『聯絡我』按鈕」

經典首屏範例

stripe.com

Financial infrastructure
for the internet

一句話說清定位 + 兩個行動按鈕

Start now → Contact sales

Stripe 的首屏：一句定位 + 兩個 CTA
3 秒內讓訪客知道「這是什麼」和「下一步做什麼」

判斷點二：配色系統

規則：主色不超過三個
超過三個，視覺主線消失，使用者無法判斷重點

無規劃的配色

紅橙黃綠藍紫各處出現

每個區塊風格不一致

→ 視覺雜訊過多

系統化的配色

主色 + 輔色 + 中性色，共 3 個

全頁面視覺語言統一

→ 專業且有品牌辨識度

對應的指令

主色 #0F9D8A，輔色 #0B3C5D
背景白色，不要超過 3 個主色

經典配色範例

notion.so

Write. Plan. Organize.

黑+白+一個強調色

主色

背景

強調

Notion 全站只用 3 色：黑、白、藍
視覺極度統一，使用者注意力不被分散

判斷點三：字級與留白

標題、內文、說明文字的字級比例決定資訊層次
留白則控制閱讀節奏

密度過高

所有文字同一字級

段落之間無間距

→ 資訊層次不可辨

留白適當

標題大、內文適中、說明小

區塊之間有呼吸空間

→ 重點一目瞭然

對應的指令

標題字級 2rem 以上，段落間距充足
留白感強，字級層次至少三級

經典字級與留白範例

apple.com

iPhone 16 Pro

標題極大、留白極多、內文精簡

每個層級的字級差距明確
讓視覺自然引導閱讀順序

Apple 的設計：標題 > 副標 > 內文，三級字級
大量留白讓內容「呼吸」，不擠壓閱讀體驗

判斷點四：你希望訪客做什麼

每個頁面需要一個明確的「下一步動作按鈕」（CTA, Call to Action）

個人名片

按鈕寫
「聯絡我」

作品集

按鈕寫
「下載履歷」

活動頁

按鈕寫
「立即報名」

指令範例：「頁面底部加一個醒目的行動按鈕，顏色突出，文字為『聯絡我』」

經典行動按鈕範例

slack.com

Made for people.
Built for productivity.

GET STARTED FREE TALK TO SALES

主要按鈕（實底色）+ 次要按鈕（線框）
視覺層級清楚，引導優先行動

Slack 的 CTA：主按鈕實底色搶眼，次按鈕線框退讓
「免費開始」降低門檻，「聯繫銷售」服務進階需求

判斷點五：手機上能不能正常看

同一個網頁在電腦和手機上要都能正常閱讀
原理是根據螢幕寬度自動調整排版（響應式設計，RWD）

未考慮手機

手機需左右滑動

文字過小難以閱讀

按鈕間距不足，誤觸率高

手機自適應

自動調整為單欄佈局

文字大小適中

按鈕間距足夠，操作精準

對應的指令

手機版排版良好，768px 以下自動
切換為單欄佈局（響應式設計 RWD）

五判斷點的完整指令模板

在四要素指令後附加這段介面設計指令：

介面設計指令段落 — 加在原有指令後面

介面設計要求：
- 首屏區塊：一句標語（20 字內）
  + 一個行動按鈕
- 配色：主色 #0F9D8A，輔色 #0B3C5D，
  不超過 3 個主色
- 字級層次：標題 2rem+、內文 1rem、
  說明 0.85rem
- 區塊間距：上下 padding 至少 3rem
- 手機適應：768px 以下自動切換單欄佈局
- 行動按鈕：顏色突出，圓角，
  滑過時有動態效果

判斷點對應指令

首屏區塊

視覺焦點

配色

三色配色

字級留白

字級層次

手機適應

自動單欄

行動按鈕

引導行動

效果

將這段附加到指令後面，
產出從「內容正確」升級為「可交付成品」

升級操作

10

分鐘

在指令中加入介面設計指令，產出第三版

操作方式

開一個新對話 → Round 2 的指令 + 介面設計指令一起貼入
→ 觀察差異

分享第三版

1

把第三版連結貼到群組

互相觀察介面設計層面的差異

2

對比三輪的進化

Round 1 裸指令 → Round 2 結構化指令 → Round 3 介面設計加持

三輪產出對比

Round 1

裸指令

→

Round 2

指令結構

→

Round 3

介面設計

Round 1

功能框架，不可交付

Round 2

內容到位，視覺粗糙

Round 3

可交付的專業成品

Round 3 小結

指令結構決定內容品質，介面指令決定呈現品質

兩層疊加是完整的產出控制
只控制內容不控制介面，等於只完成了一半的指令設計

ROUND 4 · 1:20–1:50

AI 的能力邊界
與平台差異

使用 AI 前，先理解可靠性模型

AI 可靠性：真實案例

2023 年美國聯邦法院案件

律師 Steven Schwartz 使用 ChatGPT 撰寫法律文件
AI 引用了六個不存在的判例，格式完整、看似真實
律師未交叉驗證即提交法院，被法官裁罰 US$5,000 並公開訓誡

核心問題

AI 會以高度自信的語氣產出錯誤內容
它的輸出是基於機率的「預測」，不具備事實驗證能力

你剛才遇到的 AI 錯誤

前三輪操作中，AI 一定做錯過什麼
— 排版跑掉、功能不能用、給了你沒要求的東西

為什麼會錯

AI 是機率生成
「聽起來合理」≠「事實正確」

你怎麼修的

描述問題 → AI 自己修
這就是迭代的一部分

更大的風險場景

做網頁只是 bug
如果是醫療、法律、財務呢

使用 AI 工具的安全邊界

做網頁的風險低，但養成好習慣
未來用 AI 處理工作時，這三條是底線

不丟機敏資料

密碼、個資、公司內部文件
不進 AI 對話框

不當作事實

AI 會自信地說錯話
重要資訊要交叉驗證

人做最後決定

AI 加速你的思考
決策權永遠在你手上

可提供 vs 不可提供

可以提供給 AI

公開資訊（官網、產品規格）
個人創意、構想、學習問題
程式碼（不含密碼金鑰）
通用性文書工作內容

不可提供給 AI

公司內部機密文件
客戶個資（姓名、電話等）
密碼、帳號、API 憑證
尚未公開的合約或財務數據
醫療診斷紀錄

跨平台比較：同一指令，三個平台

將你最完整的指令分別輸入 ChatGPT、Claude、Gemini
觀察三個維度的差異

ChatGPT

Canvas 渲染
創意發散
常自行添加元素

Claude

Artifacts 渲染
遵從度高
程式碼品質穩定

Gemini

Google 生態系
額度與限制依帳號方案變動
現場以實測為準

三平台實測操作

7

分鐘

同一個指令，三個平台各做一次

複製完整指令

→

貼入第二個平台

→

貼入第三個平台

→

三份結果並排

觀察比較的四個維度

回應速度

從提交到完整輸出的耗時差異

設計風格

平台的視覺方案
設計偏好的不同

指令遵從度

哪個平台最忠實
執行你的每項要求

自主添加的元素

哪個平台自行加功能
是加分還是干擾

三平台定位總結

ChatGPT

Canvas 渲染
創意發散
免費版
有對話次數限制
外掛生態豐富

Claude

Artifacts 渲染
遵從度高
程式碼品質穩定
免費版有次數限制

Gemini

Google 生態系
額度與限制依帳號方案變動
現場以實測為準

平台記憶機制的差異

同一指令在不同平台產生差異，常來自可讀取的上下文來源

Claude

指令

↓

Memory
Projects

↓

產出

ChatGPT

指令

↓

帳號歷史
Memory 功能

↓

產出

Gemini

指令

↓

當前對話
不讀跨對話歷史

↓

產出

差異不是誰比較聰明，是可讀取的上下文來源不同

平台選擇的核心邏輯

結論

沒有最佳平台，只有最適合的場景
核心能力是指令設計，不是平台選擇　指令能力是跨平台的

AI 工具會更新換代
但結構化描述需求的能力，適用於所有工具

Round 4 小結

能力邊界決定使用策略

AI 不是全知的工具，是高效的協作者
理解它的邊界，才能正確運用它的能力

ROUND 5 · 1:50–2:30

從靜態頁面
到互動產品

指令結構相同，產品複雜度提升一個量級

四個互動產品，各有不同的互動複雜度

🐍

貪食蛇

方向鍵控制、碰撞偵測、成長機制
互動複雜度：中

🧱

打磚塊

物理反彈、磚塊消除、計分系統
互動複雜度：中

🃏

記憶翻牌

翻牌配對、計時計步、狀態管理
互動複雜度：中

⭕

井字遊戲

輪流下棋、勝負判定、重置機制
互動複雜度：低

Round 5 觀察：哪些地方卡住？

先用 Round 2/3 已學的四要素與五判斷，做一個猜拳或翻牌遊戲（5 分鐘）
卡住的原因常見三類

操作規則不清楚

使用者要點哪裡
成功或失敗如何判定

回饋機制不足

分數、倒數、翻牌次數
沒有形成可觀察結果

狀態轉換漏掉

開始、進行中、結束
重新開始沒有完整交代

補強版範例（卡住後參考）

完整指令 — 角色 + 任務 + 規則 + 介面

你是一位前端遊戲開發者
用 HTML/CSS/JS 做一個記憶翻牌遊戲：
- 4×4 共 16 張牌（8 對 emoji）
- 翻兩張配對，成功留著，失敗翻回
- 翻轉動畫 + 計時 + 翻牌次數
- 完成後顯示結果 + 重新開始按鈕
白色背景，卡片藍色漸層，不超過 3 主色
輸出完整 HTML，不用外部框架

操作時間

10

分鐘

選一個遊戲，用完整的指令結構產出

選擇遊戲

→

撰寫完整指令

→

貼給 AI

→

測試操作

產出無法運作時的處理流程

1

描述具體問題

「蛇吃到食物後沒有變長」「翻牌後沒有翻回去」— 越具體，修正越精準

2

要求 AI 說明修正內容

「請說明你修正了哪些問題」— 理解問題本質有助於後續避免

3

取得完整程式碼重新測試

修正後的完整程式碼，重新部署並測試所有功能

正常流程

「描述問題 → AI 修正 → 再測試」是 AI 協作的標準除錯循環，不是例外狀況

分享與互測

1

連結分享到群組

Publish / Preview 連結或 .html 檔案

2

互相測試操作

嘗試同學的遊戲，觀察操作流暢度與完成度

3

記錄值得加入的功能

計分系統、音效回饋、難度等級 — 這些是迭代的素材

從同學作品中提取升級方向

觀察別人的作品後，選擇一個或多個功能升級你的遊戲：

音效回饋

操作時的聲音反饋增加沉浸感

計分系統

分數顯示 + 最高紀錄記錄

難度等級

簡單 / 普通 / 困難的分級機制

視覺動畫

完成、失敗、得分時的動態效果

迭代操作

8

分鐘

基於觀察，對遊戲下達升級指令

操作方式

在同一個對話中繼續：
「幫我的遊戲加上 [功能名稱]，請輸出完整更新後的 HTML 檔案」

版本對比：第一版 vs 升級版

第一版

基本功能可運作
無計分、無回饋
結束後需手動重整
操作體驗單薄

升級版

完整功能 + 動畫過渡
計分 + 最高紀錄
操作回饋（視覺或聲音）
「再玩一次」按鈕

核心概念

迭代的本質不是一次做對，是持續改進
第一版永遠不是終點 — 這是所有軟體開發的基礎節奏

從同學作品中反思

用這六個維度評估自己和同學的作品

1

功能完整度

2

畫面品質

3

幾步完成

4

花多少時間

5

操作難易度

6

總體效果

對比自己 Round 1 和 Round 5 的作品
再對比自己和同學的差異 — 差距來自哪裡

ROUND 6 · 2:30–3:00

定位今天的學習
在整體路線中的位置

回顧六輪循環，釐清下一步方向

六輪回顧

R1

裸做

R2

指令結構

R3

介面設計

R4

風險+平台

R5

互動產品

R6

回顧

0

行程式碼自己寫

2+

可分享的作品

6

可複製的方法

四層升級路線

Level 1 — 今天

AI 對話做作品

→

Level 2 — M1-2

封裝 AI 助手

→

Level 3 — M1-3/M1-4

自動化 + 部署

→

Level 4 — M3

系統建造

定位

今天完成的是 Level 1 的基礎
下一堂 M1-2 會把對話能力封裝成可重複使用的 AI 助手

帶走清單

不只學了什麼，是想法怎麼變了

從「碰運氣寫指令」

↓

指令是可設計的工程

從「AI 給什麼我接受什麼」

↓

審美觀決定產出的質感

從「AI 不可信」或「AI 全能」

↓

認識邊界才能用得對

從「比哪個聰明」

↓

辨識每個工具的個性

從「AI 做不出來」

↓

是彼此認知落差沒對齊

從「今天學了個技能」

↓

這是基礎能力
後面每層都會用到

課後操作

實踐任務

在工作場景中選一個需求，用指令四要素撰寫指令
產出一個可用的成品

記錄要求

記錄你的指令和產出結果
下堂課會用到這些素材作為進階操作的基礎

下一堂課 — M1-2

你產出了作品
但每次都要重新描述需求

下一堂課的主題：將指令封裝成可重複調用的 AI 助手

GPTs Gems 助手架構

M1-1 完成

AI 聊天做作品

六輪循環，逐層遞進

先操作後分析

操作指令

常見起點（剛才若卡住可參考）

操作計時

分享與觀察

同樣的工具、同樣的時間

版面結構

視覺一致性

內容完整度

Round 1 小結

指令結構決定產出品質

從好案例中提取結構特徵

Prompt 的四個構成要素

角色

任務

格式

限制

要素一：角色定位

要素二：任務描述

任務描述的具體寫法

要素三：格式規範

格式指令的三個面向

配色

版型

風格參照

要素四：限制條件

四要素組合的完整指令

升級操作

對比你的兩個版本

指令結構化不是技巧，是工作方法

產出品質的第二層：介面設計

兩個核心概念的區分

判斷點一：打開網頁的第一眼

經典首屏範例

判斷點二：配色系統

經典配色範例

判斷點三：字級與留白

經典字級與留白範例

判斷點四：你希望訪客做什麼

個人名片

作品集

活動頁

經典行動按鈕範例

判斷點五：手機上能不能正常看

五判斷點的完整指令模板

判斷點對應指令

首屏區塊

配色

字級留白

手機適應

行動按鈕

升級操作

分享第三版

三輪產出對比

Round 3 小結

指令結構決定內容品質，介面指令決定呈現品質

AI 的能力邊界與平台差異

AI 可靠性：真實案例

你剛才遇到的 AI 錯誤

為什麼會錯

你怎麼修的

更大的風險場景

使用 AI 工具的安全邊界

不丟機敏資料

不當作事實

人做最後決定

可提供 vs 不可提供

跨平台比較：同一指令，三個平台

ChatGPT

Claude

Gemini

三平台實測操作

觀察比較的四個維度

回應速度

設計風格

指令遵從度

自主添加的元素

三平台定位總結

AI 聊天
做作品

先操作
後分析

指令結構
決定產出品質

產出品質的
第二層：介面設計

AI 的能力邊界
與平台差異

從靜態頁面
到互動產品

定位今天的學習
在整體路線中的位置

你產出了作品
但每次都要重新描述需求