← → 翻页 · 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
弄一下工作室 · 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