← → 翻页 · ESC 索引
生成式 AI 職訓 140hr · 弄一下工作室
Vol.08 · D08 / 20 講義 · Part 4
Day Eight · 10 hours · Part 4 開場

工具生成

把 AI 從「會回答」推到「會做事」

Part 1-3 把資料整理好、流程接起來。
Part 4 起，AI 不只回答你，它直接幫你做出能跑的工具——今天 10 小時，把第一個能用的工具做出來。

Vol.08·CH4-1 · CH4-2 · PRAC4-1 · PRAC4-2·2026
Duration · 10 小時授課 · D08 / 20 · Part 4 開場
Contact·sky8697@gmail.com
D08 為 Part 4「零代碼工具工坊」第一份 deck
— D08 / 20 —
Part 4 · 主張
02 / 38 講義 · Part 4
Why Now · 為什麼現在做這段
不是學寫程式， 是學把需求說清楚。

Part 1-3 練的是「跟 AI 說話」。
Part 4 起，每次說話都要產出一個能跑的工具——這是把 AI 從「對話框」變成「生產線」的關鍵轉折。

— Part 4 核心主張·零代碼工具工坊
Page 02 · The Premise
Part 4 · 開場金句
Part 4 · Map · 全景地圖
03 / 38 講義 · Part 4
The Map · Part 4 全景 / 今日落點

33 小時 / 3 章 + 4 PRAC，今天先吃前三段

D08 · 今天
工具生成
CH4-1 + CH4-2 + PRAC4-1 + PRAC4-2 · 10hr。三段結構、UX 升級、報價試算器、學習追蹤器。
D09 · 下次
部署上線
CH4-3 + PRAC4-3 + PRAC4-4 · 7.5hr。GitHub Pages / Vercel、摘要工具、完整工具上線。
Part 4 總量
33hr
課堂 20hr + 自學 13hr。Part 4 結束 = 你有第一個能上線的 AI 工具。
Today · D08
10hr
2 章 + 2 個 PRAC，每段都要交出一份能跑、能改、能給人試用的 HTML 檔。
節奏建議：CH4-1 約 2.5hr 概念與示範、CH4-2 約 3hr 含 UX 練習，PRAC4-1 / PRAC4-2 各 2.5hr 動手。中午與下午各留 1 個收束點，把當段產出的 HTML 存進個人作品集。
Page 03 · Today's Map
D08 / Part 4 · 4 段
第一幕 · CH4-1 · 讓 AI 生出能跑的工具
Act I · 04 / 38
Act I · CH4-1 · 約 2.5 hr

三段結構

輸入 · 運算 · 輸出

任何 HTML 工具頁都拆成三段。
把這三段講清楚，AI 就能直接生出能跑的工具。

Act I 開幕
— CH4-1 —
Tool Anatomy · 三段結構
05 / 38 講義 · CH4-1
The Anatomy · 一張圖記住

三段結構：輸入 → 運算 → 輸出

01 · INPUT
輸入區
文字框、下拉、滑桿、勾選——每欄三件事：名稱、預設值、驗證。
02 · PROCESS
運算邏輯
加減乘除、條件判斷、單位換算——或把輸入組成 prompt 送給 AI。
03 · OUTPUT
輸出區
純文字、卡片、表格——加複製鈕，含空狀態 / 載入中 / 錯誤三種狀態。
講師強調：不要說「用 flex 還是 grid」，要說「左邊輸入、右邊顯示結果」。描述行為，讓 AI 決定怎麼實作。
Page 05 · Anatomy
CH4-1 · 1 / 4
Bad vs Good · 需求轉指令
06 / 38 講義 · CH4-1
From Requirement to Prompt · 怎麼說 AI 才聽得懂

模糊 vs 精確，差在哪？

模糊需求 · AI 猜來猜去
「做一個幫我算薪資的工具」
→ AI 隨便給三個欄位
→ 公式不對
→ 你來回改 5 次還沒對
精確指令 · AI 直接動手
「① 基本薪資輸入框（數字，預設 28000）
② 加班時數（數字，預設 0）
③ 加班費率下拉（1.34 / 1.67 / 2 倍）
④ 計算後顯示：時薪（薪資÷240）+ 加班費（時薪×時數×費率）
⑤ 輸出區附複製到剪貼簿按鈕」
四要素：① 每個輸入欄位（類型 + 標籤 + 預設值）② 運算邏輯（用自然語言寫公式）③ 輸出格式（要不要複製鈕）④ 驗證規則（什麼情況不能送出）。
Page 06 · Vague vs Precise
CH4-1 · 2 / 4
Mini-Prac 1 · 痛點 → 指令
07 / 38 講義 · CH4-1
Mini-Prac 1 · 約 10 分鐘 · 課堂帶做

把一個工作痛點，寫成可生成的工具指令

Step 1
用一句話寫痛點：「我每次做 ____，要手動 ____，花我 ____ 分鐘」。
Step 2
列輸入欄位：每欄寫標籤 · 類型 · 預設值三件事，至少 2 欄。
Step 3
寫運算邏輯（自然語言公式）+ 輸出格式（卡片？要不要複製鈕？）。
範例
講義有「n8n 流程成本試算器」完整 prompt（約 160 字），可先跑體感再換自己的痛點。
成果產出：一份可直接貼 Claude / GPT 的工具生成指令（150–250 字），結尾附驗證規則一行。下一段直接拿這份指令繼續加護欄。
Page 07 · Mini-Prac 1
CH4-1 · 動手 1
Guard Rails · 讓工具不怕被亂用
08 / 38 講義 · CH4-1
Error Design · 護欄三件套

重設 · 驗證 · 錯誤訊息

① 輸入驗證
「欄位不能是空的、數字必須大於 0、日期必須是今天或以後」——告訴 AI 規則，它會寫 if 判斷。
② 重設功能
「加一個清除按鈕，點下去清空所有輸入和輸出」——最簡單的功能，AI 一行就能做到。
③ 錯誤訊息
「輸入不合法時，用紅色文字顯示在欄位下方，不要彈 alert」——指定訊息位置與樣式，工具就有好 UX。
反例：不要讓工具在輸入空時輸出空白或 NaN。設計一個清楚的「必填但未填」提示，比事後解釋為什麼沒結果好用。
Page 08 · Guard Rails
CH4-1 · 3 / 4
Mini-Prac 2 · 加護欄
09 / 38 講義 · CH4-1
Mini-Prac 2 · 約 8 分鐘 · 課堂帶做

給練習 1 的指令加上護欄

三步補完
  1. 每個輸入欄位寫一條驗證規則（空值？負數？超上限？）
  2. 加上「清除所有輸入與輸出」的重設按鈕需求
  3. 指定錯誤訊息位置與樣式（紅字？欄位下方？不要 alert）
v1 已知漏洞 · 真實案例
1. 「每日次數」留空按試算 → 顯示 NaN TWD
2. 匯率填 0 → 成本變 0 元，沒提醒
3. 同一個錯誤可能多個欄位都觸發
→ 這就是該補護欄的訊號
自我檢核：每個輸入欄位都有對應驗證規則 ｜ 重設按鈕一個按鍵清光 ｜ 錯誤訊息具體可操作（不是「輸入錯誤」四個字）。
Page 09 · Mini-Prac 2
CH4-1 · 動手 2
Second Gen · 從 v1 改到可用
10 / 38 講義 · CH4-1
Second Generation · 二次生成 4 步

第一稿不可能完美——這是流程的一部分

01
先測功能
再改外觀
基礎功能跑通前改 CSS = 浪費時間。
02
精確描述
問題
不說「這個按鈕不好」，說「按鈕改全寬、霧藍底、白字」。
03
改局部
不全部重生
「只改輸出卡片，其他不動」比重新生成更穩、更省時。
04
版本備份
別讓 v1 沒了
每收到可用版先存一份，不要讓 AI 改到最後沒退路。
口頭金句：「請只改下列三處，其他完全不動」這句話，是二次生成最值錢的句型。每次修改都這樣開頭，工具就不會被改壞。
Page 10 · Second Gen
CH4-1 · 4 / 4
Mini-Prac 3 · 實跑二次生成
11 / 38 講義 · CH4-1
Mini-Prac 3 · 約 15 分鐘 · 課堂衝刺

從 v1 到 v2，跑完一輪修正

Step 1
把練習 2 的升級指令真的丟給 Claude / GPT，取得第一稿，存成 v1.html，瀏覽器打開。
Step 2
先測功能（數字對嗎？錯誤訊息出來嗎？），把第一個發現的問題寫成一句話。
Step 3
用「只改 X，其他不動」句型追加指令，跑第二輪，存成 v2.html，比對兩版差異。
產出
v1.html + v2.html 兩份檔，加一行筆記：「這次最難讓 AI 改對的是 ____」。
講師提醒：千分位用 toLocaleString()、紅字清除綁 input 不是 change、RWD 斷點 600px——這些在講義「預期輸出」段落都有對照重點，學員交件卡關時拿出來對照。
Page 11 · Mini-Prac 3
CH4-1 · 動手 3
Assignment · 30 分鐘衝刺
12 / 38 講義 · CH4-1
Class Assignment · 動手做才算

30 分鐘：從痛點到可用工具

三選一痛點
  1. 業務：每週 5 家客戶進度匯總成「健康度週報」（手動 1.5h/週）
  2. 內容：每天 3 個產品功能改寫成 4 個社群版本（手動 2h/天）
  3. 行政：每月 200 筆出差單分類報帳（手動 4h/月）
時間配比
核心 25 min（必做）
選痛點 + 寫指令 10min（mp1）
→ 加護欄 5min（mp2）
→ 實跑 + 二次生成 10min（mp3）
＋ 進階 15 min（二選一）
路線 A：在 Claude Artifacts / Canvas 真的跑出 HTML
路線 B：寫工具的「使用者測試 SOP」
不是寫文件、不是規劃，是真的做出來。30 分鐘結束時打開瀏覽器，這個工具能輸入、能算、能輸出——這就是過關。
Page 12 · Assignment
CH4-1 · 課堂作業
CH4-1 · 收束
13 / 38 講義 · CH4-1
CH4-1 · 你帶走的
不會寫程式不是問題， 不會把需求說清楚才是。

三段結構（輸入／運算／輸出）+ 護欄三件套（驗證／重設／錯誤）+ 二次生成 4 步——
這就是讓 AI 幫你做出能跑工具的全部。下一節，讓它從「能跑」變「好用」。

Page 13 · CH4-1 Wrap
→ Act II
第二幕 · CH4-2 · 從能用到好用
Act II · 14 / 38
Act II · CH4-2 · 約 3 hr

UI / UX 升級

說設計意圖，不說 CSS

AI 第一稿都是「能用」。
要讓它「好用」，靠的不是運氣，是提問方式。

Act II 開幕
— CH4-2 —
Usability Gap · 五個差距
15 / 38 講義 · CH4-2
From Usable to Delightful · 「能用」與「好用」的差距

五個最常見的差距

① 欄位
使用者不知道要填什麼 → 「每個輸入框下方加灰色說明，例：『請填稅前月薪，如：32000』」
② 按鈕
不知道按下去會怎樣 → 「按鈕文字改成動詞，例：『計算加班費』而非『確認』」
③ 輸出
結果都同樣大小，看不出重點 → 「主要數字大字深色，次要說明小字灰色」
④ 錯誤
「發生錯誤」沒指引 → 「改成具體可操作，例：『月薪不能為 0，請重新輸入』，顯示在欄位正下方」
⑤ 空狀態
未輸入時輸出區空白 → 「顯示淡灰色提示：『計算結果將顯示在這裡』」
Page 15 · 5 Gaps
CH4-2 · 1 / 4
Visual Language · 設計意圖
16 / 38 講義 · CH4-2
Don't Speak CSS · 你會說中文就夠了

說設計意圖，不說 CSS 語法

CSS 技術語言（看不懂）
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,.08);

font-size: .85rem;
color: #8a8278;
line-height: 1.7;

background: linear-gradient(135deg,…);
設計意圖語言（你能說）
「卡片要圓角，加輕微陰影像浮在頁面上」

「說明文字比正文小一點、顏色淡一點（灰色）、行距寬鬆一點」

「背景純色不要漸層，要簡潔」
三個關鍵字就夠：大小（比正文大／小）、顏色（強調／輔助／警告）、間距（緊湊／寬鬆）。掌握這三維度，AI 就能做出你要的視覺。
Page 16 · Speak Intent
CH4-2 · 2 / 4
Layout · Card · Color
17 / 38 講義 · CH4-2
Layout / Card / Color · 讓工具像作品而不是作業

四種口頭可說的視覺指令

01 · 一欄式版型
輸入在上
輸出在下
「單欄、輸入區在上、結果區在下、中間有分隔線」——適合手機優先。
02 · 左右分欄
桌面 4 / 6
手機上下
「桌面左右分欄，手機上下排列（RWD）」——桌面體驗更好。
03 · 卡片式
白卡片
＋ 米色底
「整個工具包在白色卡片裡，卡片外是米色背景」——立刻有層次。
04 · 主色強調
主色霧藍
強調暖橘
「主按鈕霧藍 #6b7fa3，警告紅 #b5703a」——色號講出來，AI 不會調歪。
Page 17 · Layout & Color
CH4-2 · 3 / 4
Intent vs Implementation
18 / 38 講義 · CH4-2
Tell Intent, Not Implementation · 不要替 AI 做技術決定

告訴 AI 意圖，不是告訴它怎麼寫

錯誤做法 · 替 AI 做技術決定
  • 「用 flexbox 並 justify-content: space-between」
  • 「用 grid-template-columns: 1fr 2fr」
  • 「加 transition: all .3s ease」
→ 你不確定對不對，AI 可能用更好的方式被你限制掉
正確做法 · 描述要的效果
  • 「左邊輸入、右邊結果，中間留適當空白」
  • 「輸入區佔 1/3、結果區佔 2/3」
  • 「滑鼠移過去要有微微的視覺反饋」
→ AI 自己挑最合適的技術實現
口訣：說「我要的結果」、不說「實作的方式」。AI 寫程式比你熟，把選擇權留給它，你的指令會更短、結果會更好。
Page 18 · Intent First
CH4-2 · 4 / 4
Mini-Prac · UX 稽核
19 / 38 講義 · CH4-2
Mini-Prac · 約 10 分鐘 · 課堂帶做

幫 CH4-1 做的工具，做一次UX 稽核

Step 1
打開你 CH4-1 練習 3 生成的工具，對照五項差距（欄位／按鈕／輸出／錯誤／空狀態）逐項打勾。
Step 2
選「差距最明顯」的 2 個問題，每個寫一條修正指令——只說要的效果，不寫 CSS。
Step 3
兩條指令合併送 AI 跑修正，比對 v2 與 v1，存進個人作品集。
產出
UX 稽核表（5 項打勾 + 2 條修正指令）+ 修正後 v2.html。
講師強調：UX 稽核不是「美化」，是使用者會有感的改變。改完後問自己一句：「我會想把這工具給同事用一次嗎？」答案是 yes 才算過關。
Page 19 · UX Audit
CH4-2 · 動手
Common Mistakes · 三大口頭錯誤
20 / 38 講義 · CH4-2
Common Mistakes · 學員最常踩的三個坑

「不好看」三個字，AI 救不了你

❌ 模糊抱怨
「按鈕不好看」「有點怪」「感覺不對」
→ 改成具體
「按鈕太小、文字看不清，請改全寬、文字加大到 1rem」
❌ 替 AI 做技術決定
「用 position: fixed、加 z-index: 999」
→ 改說意圖
「我要這個工具列固定在畫面頂端，捲動時也看得到」
❌ 全部重生
「請重新生成這個工具，這次要更好用」
→ 改局部
「只改輸出卡片那段，主要數字放大、其他區塊完全不動」
Page 20 · Mistakes
CH4-2 · 對照
Reflection · 自己用得下嗎
21 / 38 講義 · CH4-2
Inline Reflection · 一個三選一問題

你做過最讓自己都不想用的 AI 工具，差在哪？

A · 結果不清
看不懂
輸出在說啥
→ 通常是「輸出層次」差距 ③，靠字級 + 顏色補。
B · 沒護欄
填錯就壞
不知道哪錯
→ 差距 ④（錯誤訊息）+ ⑤（空狀態）一起補。
C · 版面亂
手機打開
整個爆掉
→ 補一句「桌面左右分欄、手機上下排列」就好。
講師現場帶問：請學員口頭舉手回答 A / B / C，舉最多手的那個差距，當場示範一條修正指令——這比讀講義有感 5 倍。
Page 21 · Reflection
CH4-2 · 互動
Assignment · UX v2 升級
22 / 38 講義 · CH4-2
Class Assignment · 為 CH4-1 工具做 UX v2 升級

把能用的工具，推到同事願意用一次

三輪修正 SOP
  1. 第一輪：補輸出層次（差距 ③）
  2. 第二輪：補錯誤訊息 + 空狀態（差距 ④⑤）
  3. 第三輪：補RWD（手機 / 桌面）
每輪都用「只改 X、其他不動」句型
交件條件
v3.html，要能：
✓ 主要數字明顯比次要數字大
✓ 錯誤訊息具體含範例值
✓ 手機（375px）按鈕不擠成一團
✓ 空狀態有提示文字
30 分鐘衝刺：UX 不要追求完美，追求「同事願意用」這個門檻。下午 PRAC4-1 / 4-2 會反覆練同樣的循環——說意圖、改局部、不重生。
Page 22 · UX v2 Assignment
CH4-2 · 課堂作業
CH4-2 · 收束
23 / 38 講義 · CH4-2
CH4-2 · 你帶走的
不寫 CSS， 用大小、顏色、間距三個詞， 就能講完一個工具的視覺。

下半天進動手做——PRAC4-1 報價試算器 + PRAC4-2 學習追蹤器。
把上午學的三段結構 + 護欄 + UX 升級 + 二次生成全部串起來跑一次。

Page 23 · CH4-2 Wrap
→ Act III
第三幕 · PRAC4-1 · 報價試算器
Act III · 24 / 38
Act III · PRAC4-1 · 約 2.5 hr

報價試算器

30 分鐘衝刺 · 從規格到可用

用上午學的全部技巧，做一個真的能給客戶用的報價試算器。
規格自己定、AI 來實作、二次生成補洞——下午第一場 hands-on。

Act III 開幕
— PRAC4-1 —
5 Steps · 報價試算器流程
25 / 38 講義 · PRAC4-1
The 5 Steps · 依序完成才算過關

從定義需求到v2 完成

01
定義需求
挑業態：裝修 / 婚顧 / 補習班 / SaaS / 接案——列輸入欄位 + 計算公式 + 折扣邏輯。
02
寫指令
用 CH4-1 的「輸入 → 運算 → 輸出」三段結構寫成 prompt（含護欄）。
03
AI 第一稿
貼進 Claude / ChatGPT，存 v1.html，用瀏覽器測計算邏輯是否對。
04
提修改
用 CH4-2 的UX 五差距稽核，挑 2 條最痛的寫精準修正指令。
05
v2 完成
跑第二輪生成，存 v2.html——能輸入 / 能算 / 結果好讀 / 手機可用就過關。
Page 25 · 5 Steps
PRAC4-1 · 流程
Spec Designer · 互動規格設計器
26 / 38 講義 · PRAC4-1
Tool · 報價工具規格設計器

講義內建規格設計器，5 分鐘填完直接生 prompt

填這 5 區，自動拼出指令
  • ① 業態名稱（如：裝修估算 / 婚顧客製）
  • ② 輸入欄位清單（坪數 / 服務項目 / 屋齡 / 折扣級距）
  • ③ 計算公式（用自然語言寫）
  • ④ 輸出區欄位（金額區間 / 明細 / 免責宣告）
  • ⑤ 視覺風格（米白底 + 霧藍主色，無漸層）
點「生成 Prompt」 → 複製 → 貼 Claude / ChatGPT
為什麼要用設計器
學員自己寫 prompt 常常漏東西——不是漏驗證、就是漏輸出格式。

設計器逼你每一格都填到，prompt 才會完整。

填完直接體感「精確指令」應該長什麼樣，下次不靠設計器也寫得出來。
Page 26 · Spec Designer
PRAC4-1 · 工具
Pass Criteria · 過關 4 條
27 / 38 講義 · PRAC4-1
Rubric · 完成所有項目才算過關

四條同時達標 = 報價試算器 v2 過關

① 計算正確
數字
對得上手算
範例：25 坪 ×25k ×1.15 + 浴室 24 萬 = AI 算出的數字。
② 介面清楚
欄位順
金額區間
由上往下順、按鈕明顯、顯示金額區間而非單一精準值。
③ 手機可用
375px
不擠成團
輸入框夠大、radio / checkbox 點得中、按鈕不重疊。
④ 免責說明
底部小字
實際依現場
「估算僅供參考，實際依現場丈量為準」這行不可省。
講師現場驗收：學員把 v2.html 打開，依次跑這四條——缺一條退回再做一輪。這比給分數有用，學員馬上知道哪裡沒到位。
Page 27 · Rubric
PRAC4-1 · 過關
Case Library · 3 業態示範
28 / 38 講義 · PRAC4-1
Case Library · 把報價試算器套進三種業態

同樣的三段結構，三種業態

A · 裝修估算
坪數 ×單價
＋ 屋齡加成
輸入：坪數、屋齡、加項勾選。輸出：金額區間 + 工期估計 + 免責。
B · 婚禮小物
數量級距
客製即時加
折扣自動換算，明細顯示「原價 / 折扣後 / 省多少」，不用按計算鈕。
C · 接案 / SaaS
範圍 + 時數
＋ 急件加成
輸入需求複雜度、時間壓力、追加項目，輸出三檔報價（基本／標準／加值）。
講師選 1 個示範、其他 2 個交給學員：挑一個離學員背景最遠的當示範（讓他們看「換業態邏輯不變」），剩兩個讓他們選自己最熟的，同樣 30 分鐘交件。
Page 28 · Case Library
PRAC4-1 · 延伸
PRAC4-1 · 收束
29 / 38 講義 · PRAC4-1
PRAC4-1 · 你帶走的
三段結構 + 護欄 + UX 升級， 就能做出客戶願意按下去的工具。

下一場 PRAC4-2 換主題：學習追蹤器——資料要存得住（localStorage）、
情境要切得準（4 種真實學習場景），把自己每天能用的工具做出來。

Page 29 · PRAC4-1 Wrap
→ Act IV
第四幕 · PRAC4-2 · 學習追蹤器
Act IV · 30 / 38
Act IV · PRAC4-2 · 約 2.5 hr

學習追蹤器

Prompt 庫 + 進度視覺化

第一個會用 localStorage 的工具——資料關掉瀏覽器還在。
做一個自己每天都會用的工具，比做 100 個給別人用的更難。

Act IV 開幕
— PRAC4-2 —
Two Tools · 兩個串成一個工作流
31 / 38 講義 · PRAC4-2
Tool A + Tool B · 兩段工具串成一個工作流

先存好 Prompt，再追進度

Tool A · Prompt 庫管理器
新增 / 搜尋 / 一鍵複製
用 localStorage 永久儲存
  • 欄位：標題、標籤、Prompt 內容
  • 頂部即時搜尋（標題＋內容）
  • 標籤過濾、複製 / 刪除按鈕
  • 關掉瀏覽器資料還在
Tool B · 進度追蹤器
目標 → 拆階段 → 每日打卡
視覺化進度讓自己看見堅持
  • 輸入：目標、起訖日、每日預計分鐘
  • 自動拆甘特圖（CSS grid 寫死）
  • 每日檢核 + 連續打卡 + 累計時數
  • 漏打卡標灰、不自動補
串成一個工作流：把上午練的好用 Prompt存進 Tool A → 用 Tool B 追蹤「天天打開 Tool A」這個習慣本身——這才是讓工具真的進日常的閉環。
Page 31 · Two Tools
PRAC4-2 · 1 / 4
4 Scenarios · 4 個真實學習場景
32 / 38 講義 · PRAC4-2
Scenario Library · 挑最接近你現況的試做

同一套邏輯，4 種學習目標

A · 自學 Python
12 週
到能寫爬蟲
語法 3 週 → 資料結構 2 週 → 模組 2 週 → requests 2 週 → BS4 2 週 → 實戰 1 週。
B · 多益備考
8 週
750 → 900
三軌並列：聽力 20 / 閱讀 30 / 單字 10 分鐘——避免題型失衡。
C · 證照衝刺
章節進度
＋ 模考成績
章節打勾 + 每週模考分數曲線——看趨勢決定加強哪段。
D · 健身 / 減重
每日體重
＋ 訓練紀錄
體重折線 + 訓練熱圖 + 連續天數——失敗的天數標灰但保留累積。
關鍵共通設計：① 漏打卡標灰但不補，避免造假 ② 連續天數歸零、累計時數保留，鼓勵長線 ③ 視覺化讓人想打開，這是工具能不能進日常的關鍵。
Page 32 · Scenarios
PRAC4-2 · 2 / 4
Rubric · 4 點全勾才過關
33 / 38 講義 · PRAC4-2
Rubric · 自評 4 條全勾才算過關

不是能跑就好，是每天會打開

①
localStorage 真的有用
關掉瀏覽器、隔天打開 → 資料還在。沒做到這條，工具等於沒做。
②
視覺化讓人想打開
進度條 / 連續天數 / 累計時數至少有一項——讓第一眼就有成就感。
③
手機可用
375px 寬下版面不爆，能用單手打卡——這條沒做，學員會回到 Excel。
④
能說出設計選擇
為什麼漏打卡不自動補？為什麼連續天數歸零、累計保留？——這是產品思維而不只是寫程式。
Page 33 · Rubric
PRAC4-2 · 3 / 4
Recycle to Portfolio
34 / 38 講義 · PRAC4-2
AI Recycler · 把每次跑的成果收回來

3 步把AI 跑的結果存進個人作品集

Step 1
複製 prompt
到 Claude / GPT
講義內的 4 個情境每個都附完整 prompt + deeplink，一鍵帶走。
Step 2
把 AI 跑的結果
貼回講義輸入框
講義有專屬 textarea，學員的成果留在課程頁面，不會散在各處。
Step 3
寫一句反思
存到我的作品集
「這次最影響結果的是哪個要素？」——一句話，累積成可拿出去的履歷素材。
講師強調：140 小時下來會跑 50+ 次 AI——沒收回作品集，明天就忘了。每次都用這 3 步收，期末 Demo Day 直接拿出 50 個成果，履歷就寫得出來。
Page 34 · Recycler
PRAC4-2 · 4 / 4
PRAC4-2 · 收束
35 / 38 講義 · PRAC4-2
PRAC4-2 · 你帶走的
能做給別人用很厲害， 能做自己每天都打開的工具， 才是真的會用 AI。

D08 結束時你應該手上有：1 個報價試算器 v2 + 1 個學習追蹤器（含 localStorage）
+ 上午做的1 個工作痛點工具 v3——三份 HTML 檔，全部進個人作品集。

Page 35 · PRAC4-2 Wrap
→ 收束
Closing · 工具生成
收束 · 36 / 38
The Closing Frame · D08 收束

從能跑，
到有人用

D08 真正的產出不是三份 HTML，
是你開始有「工具思維」這個視角——之後每個重複的工作，都會被你問一次：「這個能不能做成工具？」

Today's Real Win·從會用 AI → 會做 AI 工具
D08 收束
— 工具生產線就位 —
Map · 接下來 D09 路線預告
37 / 38 講義 · Part 4
Up Next · D09 預告

明天進部署上線

CH4-3
部署上線 · GitHub Pages / Vercel · 把工具丟到網路上有人用
2.5 hr
PRAC4-3
摘要工具 · 讀網址或貼文 → 一鍵生 3 句話摘要 + 上線
2.5 hr
PRAC4-4
完整工具上線 · 把 D08 三份 HTML 全部部署，給 3 個人用、收回饋
2.5 hr
D08 → D09 銜接：今天做的三份 HTML，明天會被推上 GitHub Pages / Vercel——從「本機自己用」變成「同事手機點得到」。Part 4 的閉環在 D09 收口。
Page 37 · Roadmap
D08 → D09
To Be Continued · D09 見
End · 38 / 38
End of D08 · 10 hours done

To Be Continued

D09 · 部署上線 · 7.5 hr

帶著今天的三份 HTML 工具（痛點工具 v3 + 報價試算器 v2 + 學習追蹤器），
下次直接上線給真實使用者用，工具才算完成。

D08 / 20·Vol.08·弄一下工作室
End of D08
— D09 / 20 —