← → 翻页 · ESC 索引
Vol.18 · D18 / 20
Build & Ship
生成式 AI 職訓 140hr · Module 18

把 v0 跑通、
把 v1 送上線

測試找洞、UX 修順、發表把話講清楚 ——
D18 是把專題從「自己能跑」推到「別人能用」的一天。
8–10 小時授課·D18 / 20·CH7-3 + CH7-4 + PRAC7-1/2/3
Contact·sky8697@gmail.com
弄一下工作室 · Lecturer Decks
D18 · 01 / 38
D18 · Opening
02 / 38
為什麼今天這 8 小時最關鍵
「修不完，不是工具不夠， 是測試做得太少。 v0 你自己能跑、v1 別人能用 —— 中間那條線，叫做使用者試。」
D18 · Build & Ship
弄一下工作室 · Build & Ship
02 / 38
D18 · Learning Goals
03 / 38
結束今天你會帶走的三樣東西

D18 · 三個交付物

Deliverable A
10案例
4 正常 + 4 邊界 + 2 錯誤的測試紀錄表，PRAC7-4 驗收用
Deliverable B
4:30逐字稿
五段 Demo 結構，PRAC7-5 發表當天直接念
Deliverable C
v1已部署
UX 修好、錯誤友善、成本控管 —— v1 是準備發表的版本
D18 / 20 · 8–10 小時
03 / 38
Act I · CH 7.3
04 / 38 講義 · CH7-3
Chapter 7.3 · 2 hr

測試與
UX 優化

工具能跑，不代表好用。
測試讓你找到問題，UX 修正讓非技術朋友也能順暢用。
Part 7 · 專題衝刺與成果發表
Act I / V
CH 7.3 · 測試案例
05 / 38 講義 · CH7-3
不是隨機輸入，是刻意設計的場景

10 個案例 · 4 / 4 / 2

正常 ×4
教科書式輸入 · 短輸入（≤100 字）· 長輸入（≥1000 字）· 中文
Normal
邊界 ×4
剛好到字數上限 · 含特殊字元（標點 / Emoji / 換行）· 一個關鍵字 · 不相關但合法
Edge
錯誤 ×2
空白 / 純空格（應擋下不送 API）· 超長（應截斷或提示）
Error
把測試結果記下來。一張四欄表（輸入 → 期待輸出 → 實際輸出 → 通過/失敗）就夠，PRAC7-4 驗收會用到。
CH 7.3 · 測試三類
05 / 38
CH 7.3 · UX 修正
06 / 38 講義 · CH7-3
四個 v0 一定有的洞

UX 四問，逐一修

i
沒有 Loading
點了沒反應 → 重複點擊。修：按鈕變灰 + 文字「處理中…」，或 streaming 逐字輸出。
ii
空值 undefined
送出前 if(!input.trim()) 驗證；回應用 msg?.content?.[0]?.text ?? ''。
iii
輸出太長沒切
加「複製全文」按鈕 · 多版本用分頁 / 卡片 · 只顯示前 300 字 + 展開。
iv
錯誤訊息不友善
把錯誤碼轉人話 —— 429 → 請稍等再試；500 → 系統忙碌；401 → 服務暫不可用。
CH 7.3 · UX 四問
06 / 38
CH 7.3 · Error Messages
07 / 38 講義 · CH7-3
錯誤碼對照人話

把 HTTP 狀態 翻成使用者語言

429
Too Many Requests → 「請稍等一下再試」
Rate Limit
500
Internal Server Error → 「系統忙碌，請重新整理後再試」
Server
401
Unauthorized → 「服務暫時無法使用」
Auth
空輸入
前端攔截，提示「請貼上履歷與職缺」 —— 不送 API
Validate
CH 7.3 · Error UX
07 / 38
CH 7.3 · Think-Aloud
08 / 38 講義 · CH7-3
讓不熟的人試一次，UX 問題會自己冒出來

放聲試用 · 4 步

不要解釋、不要救援 —— 只聽。
01
只給 URL
不附說明，問「你覺得這是做什麼的？」猜不出來 → 頁面文案要改。
02
放聲思考
「現在想什麼？」「這按鈕你預期做什麼？」「會困惑嗎？」 —— 只問、不解。
03
三問收尾
最有用 / 最困惑 / 只能改一件事會改哪 —— 三題，不超過 3 分鐘。
04
排優先序
先修「卡住核心路徑」的問題，美觀延後 —— 接到 PRAC7-3。
不要在試用時幫使用者解釋。口頭解釋本身就是 UX 問題 —— 把解釋寫進介面，不要靠你坐旁邊。
CH 7.3 · Think-Aloud SOP
08 / 38
CH 7.3 · 講師示範
09 / 38 講義 · CH7-3
講師示範 · 履歷優化工具的 UX 觀察整理

原始觀察 → 修正清單

原始試用筆記
· 打開 3 秒後問「這做什麼的？」
· 沒貼職缺就按產生
· 等 5 秒沒看到 loading，按了第二次
· 「三段我要怎麼用？」
· 三問：希望按鈕有「處理中」字樣
高優先修法（先做）
① 副標：「貼上履歷+職缺，一鍵改寫三段」
② 兩欄都有內容才啟用按鈕
③ 點擊後改文字「產生中…」並 disable
④ 每段上方加小標「段落一（對應 XX 需求）」
CH 7.3 · 反饋 → 清單
09 / 38
CH 7.3 · 課堂練習
10 / 38 講義 · CH7-3
課堂練習 · 40 分鐘

P1 · 10 案例 + 1 位試用

練習 A · 20 min
為你的專題寫 10 案例
開一張表格，四欄：類型 / 輸入 / 期待輸出 / 實際 ——
依 4 / 4 / 2 配比填滿 10 列，每列「期待輸出」寫一句樣貌（不是答案）。
練習 B · 20 min
找 1 位非技術朋友放聲試用
只給 URL、不解釋，請他邊用邊說 ——
結束問三題、把問題標「核心路徑 / 美觀」，前者優先。
檢核：10 案例分三類齊全 / 試用全程沒解釋 / 失敗案例能說「Prompt 還是程式碼」問題。
P1 · CH7-3 練習
10 / 38
Act II · CH 7.4
11 / 38 講義 · CH7-4
Chapter 7.4 · 2 hr

發表敘事與
作品集頁

作品好，不代表發表好。
五段結構讓你的工具被看見、被理解、被記住。
Part 7 · 專題衝刺與成果發表
Act II / V
CH 7.4 · Demo Narrative
12 / 38 講義 · CH7-4
從問題出發，技術只是過程

5 段 Demo · 4 分 30 秒

30 s
問題
真實場景，不用技術術語。
30 s
做法
為什麼這樣做，技術點到為止。
2:30
展示
Live demo，不跳過等待，指出最有價值處。
30 s
限制
誠實說做不到什麼 —— 比隱瞞有說服力。
30 s
後續
最想繼續做的一件事，顯示你還在思考。
5 分鐘是鐵律。準備 4:30 留 30 秒緩衝。多餘的剪掉，不是找地方塞。
CH 7.4 · 5 段結構
12 / 38
CH 7.4 · Limitations
13 / 38 講義 · CH7-4
觀眾聽不到限制，會自己找 —— 比你說更尷尬

誠實 比誇大有說服力

字數限制
「目前有一些限制」（模糊）
「超過 800 字品質下降，是 token 限制，下一步加截斷提示」
沒做的功能
「還在開發中」（聽起來像藉口）
「登入刻意不做，MVP 只驗證核心，帳號會讓開發時間 ×3」
輸出不穩
沉默（最糟）
「已記錄測試案例，下一步加 output validation」
只能中文
「英文版還沒做」（暗示缺陷）
「使用者都是中文使用者，這是刻意的選擇」
CH 7.4 · 高分說法
13 / 38
CH 7.4 · The 4:30 Rule
14 / 38
口說每分鐘約 150 字 · 4:30 ≈ 675 字
「超時不只是禮貌問題， 也代表你沒有清楚理解什麼最重要。 多餘的部分剪掉， 不是找地方塞。」
5 minute live demo · golden rule
CH 7.4 · 4:30 Rule
14 / 38
CH 7.4 · Portfolio Card
15 / 38 講義 · CH7-4
把專題加進你 PRAC5-3 那張作品展示頁

作品集卡片 · 四個元素

A
四基本欄
名稱 · 一句話說明（≤30 字） · 技術標籤（≤3 個） · 部署網址
B
10 秒 GIF
Loom / 螢幕錄影 → 比文字更快讓人理解工具長什麼樣。
C
學到的一件事
具體經驗，禁「學到很多」「收穫滿滿」 —— 例：第一版把 Key 放前端，上線前一小時才發現。
D
GitHub Repo
公開 repo 顯示願意被看見。確認 .gitignore 擋住 .env。
CH 7.4 · Portfolio
15 / 38
CH 7.4 · Audiences
16 / 38 講義 · CH7-4
同一個作品，三類人在乎不同面向

確保 三者都看得到

★
技術面試官
看 GitHub repo · 測試紀錄 · commit message —— 確認你能寫、會驗、留得住歷史。
●
潛在合作者
看 live demo · 一句話說明 · 限制段 —— 判斷能不能解他的問題。
▶
招募者 / HR
看敘事 · 學到的一件事 · 解決什麼問題 —— 30 秒判斷要不要往下看。
CH 7.4 · Three Eyes
16 / 38
CH 7.4 · 課堂練習
17 / 38 講義 · CH7-4
課堂練習 · 35 分鐘

P2 · 逐字稿 + 作品集

練習 A · 20 min
寫 4:30 逐字稿並計時朗讀
照五段結構分段寫，不要即興、不要只列大綱 ——
展示段把實際操作步驟寫進去，計時朗讀一次 ——
超過 4:30 就砍，不是加速念過去。
練習 B · 15 min
把專題加進 PRAC5-3 作品集頁
打開 PRAC5-3 那頁，加新卡片：
四元素 + 10 秒 GIF + 一句學到的事 ——
作品集現在加才算真正收尾。
檢核：五段都有 / 計時 4:00–4:30 / 第一句講「使用者的具體問題」 / 作品集卡片四元素 + 一句學到的事完成。
P2 · CH7-4 練習
17 / 38
Act III · PRAC 7.1
18 / 38 講義 · PRAC7-1
Practice 7.1 · 4 hr

開發衝刺
第一輪

4 小時，目標一個：讓主要使用路徑跑通。
不需要完美，需要可以讓人用。
Part 7 · 衝刺第一輪
Act III / V
PRAC 7.1 · Sprint Plan
19 / 38 講義 · PRAC7-1
4 小時切五塊，照表操課

v0 · 5 步 / 4 hr

15 min
專題定義器
填欄位生 v0 規格書 —— 填不出 = 沒想清楚。
45 min
HTML 骨架
不美化，先跑通：topbar + 輸入 + 輸出 + 按鈕。
90 min
串接 AI
靜態前端直呼 / 後端代理擇一，先把核心路徑跑通。
30 min
三案例測試
正常 / 邊界 / 空白 各一，截圖存 —— PRAC7-4 要用。
15 min
Push GitHub
v0 first working version。確認 .env 在 .gitignore。
PRAC 7.1 · 4hr Roadmap
19 / 38
PRAC 7.1 · v0 Spec
20 / 38 講義 · PRAC7-1
填不出來的欄位 = 還沒想清楚

專題定義器 · 7 欄位

一句話說明
使用者 + 問題 + 解法（給誰／痛在哪／你怎麼解）
f1
MVP 輸入欄位
列出必填 / 選填，標欄位類型與字數
f2
System Prompt
核心指令一段話 —— 角色 / 任務 / 輸出格式 / 字數
f3
模型 / 溫度 / 架構
claude-haiku-4-5 · 0.7 · 靜態前端 + Vercel（預設）
f4–f6
先不做的功能
明確邊界：歷史記錄 · 登入 · 圖片輸入 · 英文版
f7
PRAC 7.1 · 7 Fields
20 / 38
PRAC 7.1 · Spec Audit
21 / 38 講義 · PRAC7-1
步驟 1.5 · 寫程式前 5 分鐘

先讓 LLM 戳破 spec

三步審查請 LLM 跑
① 模糊偵測
原文 → 為何模糊 → 建議改寫（≥3 點）

② MVP 體檢
必做 / 可砍 / 越界 三級分類

③ GWT 驗收
給定 X，當 Y，則 Z（每個必做功能 1 行）
期待回覆會看到
· 模糊偵測表（3-5 列三欄）
· MVP 三級分類各帶 1 句理由
· GWT 驗收條件清單
· 30 字「最該優先解決」結論

若只回「整體看起來不錯」
= spec 太薄，回去重填工具欄位再來。
PRAC 7.1 · 5 min LLM Audit
21 / 38
PRAC 7.1 · DoD
22 / 38 講義 · PRAC7-1
第一輪衝刺驗收 · 5 條全勾才能往 PRAC7-2

v0 · Definition of Done

01
完成專題定義器，生成 v0 規格書
Spec
02
HTML 骨架完成：輸入區 / 送出按鈕 / 輸出區
Skeleton
03
AI 串接跑通：輸入 → 顯示 AI 回應
Wired
04
跑了三個測試案例，結果截圖存好
Tested
05
程式碼 push GitHub（.env 已在 .gitignore）
Pushed
PRAC 7.1 · DoD 5 條
22 / 38
PRAC 7.1 · Pitfalls
23 / 38 講義 · PRAC7-1
第一輪衝刺最常踩的三個坑

先講 3 個地雷，省你 1 小時

地雷 ①
API Key 放前端
第一版偷快直接寫 JS，push 後一小時 Key 已洩漏。從第一行就用 Vercel Functions 代理，不要想說「之後再改」。
地雷 ②
temperature 太高
設 0.9 → AI 編造使用者沒寫過的經歷。履歷 / 知識類工具用 0.3，創意才開到 0.7+。
地雷 ③
沒驗證就送出
空欄位點按鈕 → API 報錯 / 編資訊。送出前 3 行 if，比後面修 30 行錯誤處理便宜。
PRAC 7.1 · 三個地雷
23 / 38
Act IV · PRAC 7.2
24 / 38 講義 · PRAC7-2
Practice 7.2 · 2 hr

中期自審 +
Demo 壓測

v0 demo 完的中期驗收 ——
LLM 三人格、24h 隔離、自己壓給自己看。批評不靠別人施捨。
Part 7 · 中期自審
Act IV / V
PRAC 7.2 · Quick Audit
25 / 38 講義 · PRAC7-2
15 分鐘版 · 沒時間錄影也至少做這個

LLM 1 人格 · 15 min 快審

5 min
簡述 demo 給 LLM
3-4 句講清楚：給誰、解什麼問題、核心輸入輸出、目前的限制。
10 min
扮 1 種人格給回饋
建議「挑剔技術主管」—— 一讚 + 一疑 + 一建議，必須點到核心。
5 min
整理 v1 改動
從回饋抓出 1–2 個 v1 要先動的改動 —— 接到 PRAC7-3 高優先清單。
回饋只回「不錯，繼續努力」= 你給的 demo 描述太薄；回去把「目前限制」寫具體再問。
PRAC 7.2 · 1 人格快審
25 / 38
PRAC 7.2 · Record & Cool
26 / 38 講義 · PRAC7-2
完整版 · 2 小時做完

錄 5 min · 隔 24 hr

Day 1 · 60 min
① 15 min · Demo 準備
講稿 + 操作清單 + 假設情境輸入

② 10 min · 限時錄影
一鏡到底 5 分鐘，不重來

③ 30 min · LLM 三人格
上傳影片摘要 → 主管 / 學員 / 投資人各跑一輪
Day 2 · 30 min（隔 24h）
自評 + 整合 4 套回饋

隔一天再看自己的影片 —— 把自己當陌生人。

整合：
① 自評（24h 後的自己）
② LLM 主管回饋
③ LLM 學員回饋
④ LLM 投資人回饋

→ 抓出 v1 高優先清單。
PRAC 7.2 · 完整版 SOP
26 / 38
PRAC 7.2 · Three Personas
27 / 38 講義 · PRAC7-2
同一份 demo 摘要 · 三種視角各跑一輪

三人格 壓測矩陣

M
挑剔技術主管
看：架構選型理由、錯誤處理、cost 控管、code review 會打回的點。
U
第一次用的學員
看：3 秒內猜不猜得到做什麼、操作流程是否直覺、輸出能不能直接用。
$
問商業價值投資人
看：解的問題夠不夠痛、誰會付錢、為什麼是你能做、規模化的路徑。
三人格不是同一個 prompt 換名字。每個人格各自有「在乎的事 / 評分標準 / 必問的 3 個問題」 —— 講義有完整模板。
PRAC 7.2 · 三人格
27 / 38
PRAC 7.2 · Synthesis
28 / 38 講義 · PRAC7-2
4 個來源 + 5 個面向 = 你的 v1 待辦表

4 套回饋 · 1 張清單

面向 1
使用流程哪一步卡？（4 套都點到 = 必修）
Flow
面向 2
輸出品質 / 可用性（學員視角優先）
Output
面向 3
技術風險 / 安全 / 成本（主管視角優先）
Tech
面向 4
敘事是否打到痛點（投資人視角優先）
Story
面向 5
24h 後的自己最想改什麼（自評視角）
Self
PRAC 7.2 · 5 面向整合
28 / 38
PRAC 7.2 · DoD
29 / 38 講義 · PRAC7-2
中期驗收 · 全勾才能往 PRAC7-3

中期 · Definition of Done

01
至少跑過 1 種 LLM 人格給回饋 · 整理 v1 要先動的 1–2 個改動
Min
02
完整版：5 min demo 一鏡到底錄完，無重錄
Record
03
三人格回饋 + 自評 = 4 套回饋齊全
4-Voice
04
五面向整合表填完 · 標出 3–5 個 v1 高優先項目
Backlog
PRAC 7.2 · DoD
29 / 38
Act V · PRAC 7.3
30 / 38 講義 · PRAC7-3
Practice 7.3 · 3 hr

開發衝刺
第二輪

依改進清單執行 v1：UX 修好、錯誤補齊、成本控管 ——
v1 是準備部署的版本。
Part 7 · 衝刺第二輪
Act V / V
PRAC 7.3 · v1 Plan
31 / 38 講義 · PRAC7-3
3 小時切五塊，重點是 UX / 錯誤 / 成本

v1 · 5 步 / 3 hr

15 min
挑高優先 3–5
從 PRAC7-2 清單篩出來 —— 影響核心路徑優先。
90 min
UX 修正
Loading 狀態、空值驗證、輸出截斷、副標說明。
45 min
錯誤補齊
429 / 500 / 401 訊息友善化 · try-catch 包好。
30 min
成本控管
max_tokens 合理值、輸入長度上限、模型選對等級。
15 min
10 案例 + commit
CH7-3 的 10 案例全跑過 → commit「v1 ready to deploy」。
PRAC 7.3 · 3hr Roadmap
31 / 38
PRAC 7.3 · Prioritization
32 / 38 講義 · PRAC7-3
不是每個問題都修 —— 篩出非修不可的

3 個篩子 · 選出 3–5 個

必過的篩子
① 影響核心路徑嗎？（不修 = 主功能跑不通）
② 新使用者第一次就會踩到嗎？
③ 修這個會讓部署被 block 嗎？（如安全 / 帳單）
放掉的訊號
· 只有「重度使用者」才會碰到
· 美觀細節（顏色 / 字型 / 間距）
· 「以後做會更好」的進階功能
· 個人偏好型回饋（不是通用問題）
3 小時改 3–5 個 + 測試。選 6 個 = 90% 機率有 1 個來不及測，整批變成 v1.5 而不是 v1。
PRAC 7.3 · 3 篩子
32 / 38
PRAC 7.3 · v1 Focus
33 / 38 講義 · PRAC7-3
v1 一定要動的三件事

三面向 · 逐一檢查

U
UX 修正
Loading / 空值 / 錯誤訊息 / 輸出格式 ——
CH7-3 的 4 個 UX 問題逐項檢查。
E
錯誤處理
429 / 500 / 401 / Network ——
每種錯誤都顯示人話，不留 undefined。
$
成本控管
max_tokens · 輸入字數上限 · 模型等級 ——
避免一個惡意輸入燒掉一個月額度。
PRAC 7.3 · UX / Error / Cost
33 / 38
PRAC 7.3 · DoD
34 / 38 講義 · PRAC7-3
v1 部署前驗收 · 全勾才能交給 PRAC7-4

v1 · Definition of Done

01
Loading 狀態已實作（送出時按鈕禁用 + 文字變更）
UX
02
空白輸入有擋住，不會送 API
Validate
03
API 錯誤顯示友善訊息（不是技術錯誤碼）
Error
04
max_tokens 設定合理值，輸入有長度限制
Cost
05
10 個測試案例全部跑過，程式碼 commit 完成
Ship
PRAC 7.3 · v1 DoD
34 / 38
PRAC 7.3 · Commit Habit
35 / 38
commit message 是寫給 3 個月後的自己 + 面試官看

寫成 故事的一行

$ git commit -m "v1: fix loading UX + friendly error messages"
$ git commit -m "v1: add input length cap to control cost"
$ git commit -m "v1: validate empty input before API call"
$ git commit -m "v1: 10 test cases passed, ready to deploy"
不寫「fix」「update」「change」 —— 寫動詞 + 對象 + 為什麼。
PRAC 7.3 · Commit Habit
35 / 38
D18 · Wrap
36 / 38
D18 · 8–10 hr 結束

v1 上線了，
剩把話講好

明天 D19 是畢業典禮：最終發表 · 作品集 showcase · 140hr 學習地圖回顧。
今晚把 4:30 逐字稿念過一遍，明天直接上場。
D18 → D19
36 / 38
D18 · Recap
37 / 38
今天該帶走的 5 件事 · 走出教室前對一遍

D18 · Take-Home Five

① 測試表
10 案例（4 / 4 / 2）+ 實際輸出 + 通過/失敗欄
CH7-3
② 試用筆記
1 位非技術朋友的放聲試用觀察 + 修正清單分優先序
CH7-3
③ 4:30 逐字稿
五段結構齊全 · 計時通過 · 第一句講具體問題
CH7-4
④ 作品集卡片
PRAC5-3 那頁加新卡：四元素 + GIF + 一句學到的事
CH7-4
⑤ v1 已部署
UX 修好 · 錯誤友善 · 成本控管 · 10 案例全過 · git commit 完成
PRAC7-1/2/3
D18 · 5 件事帶走
37 / 38
D18 · End
38 / 38
To Be Continued

明天畢業典禮

D19 / 20 · 最終成果頁面 · 課程回顧與學習地圖
140 小時的終點 · 也是接案 / 找工作 / 自學的起點
Vol.18 · D18 / 20·Build & Ship·Next: D19 Graduation
— 弄一下工作室 · Lecturer Decks —
生成式 AI 職訓 140hr · 弄一下工作室
38 / 38