Vol.12 · D12 / 20
01 / 32
生成式 AI 職訓 140 小時 · Part 5 收束
自由演練庫
八個小工具 · 一個下午 ship 完
4 小時授課·D12 / 20·Part 5 收束
VENUE MAP · 八個工具一張地圖
今天要 ship 八個小而完整的工具
PRAC 5-8
Markdown 報表
秒變列印頁
PRAC 5-12
個人 Kanban
三欄任務板
Vol.12 · D12 / 20
03 / 32
OPENING NOTE
短小、快、
立刻 ship。
八個工具 · 三十分鐘一個 · 不追求完美。
TASK · 題目
專案進度紅綠燈看板
開會報告不需要複雜的甘特圖。用紅黃綠三色即時傳達每個專案的健康度，點一下就切換，5 秒完成週報更新。
情境
每週一早上要報十個專案進度，主管只想知道：哪個正常、哪個要救。
交付
一張可點擊切換顏色的清單卡片，紅黃綠三狀態，瀏覽器關掉再開資料還在。
STEPS · 步驟
三步把它跑起來
01
交辦清單與資料結構
告訴 AI：要十張專案卡片，每張有名稱、負責人、狀態（red/yellow/green），存 localStorage。
02
點擊切換的互動
點卡片就在三色之間循環切換，色塊明顯、文字對比夠強，列印也看得清楚。
03
新增 / 刪除 / 匯出
能加新專案、刪掉舊的，匯出 Markdown 摘要直接貼進週報信。
ACCEPT · 驗收
三條過關條件
紅
點卡片可在紅 → 黃 → 綠 → 紅之間穩定循環，無錯位、無延遲。
黃
關掉瀏覽器、再開回來，所有卡片狀態與內容都還在（localStorage 正常）。
綠
「匯出 Markdown」按下去能複製到剪貼簿，貼到信件即可送出，不需再排版。
TASK · 題目
面試評價橫向對比表
用結構化評分表對比多位候選人，告別散落的手寫筆記。每個維度給分、填備註、一鍵看出誰最適合這個職位。
情境
面完五個候選人，筆記散在五張紙、兩個 Notion、一個 Google Doc，做決定時翻不到。
交付
一張對比表：欄是候選人、列是評分維度，每格有分數+備註，最後一列自動算總分。
STEPS · 步驟
三步把對比跑出來
01
定義評分維度
告訴 AI：先讓使用者輸入 3-6 個維度（如表達 / 經驗 / 文化），再開新增候選人欄位。
02
每格分數 + 備註
點格子可選 1-5 分，旁邊小欄填一句備註，總分自動加總顯示在最下一列。
03
高亮最高分
總分最高的那一欄自動高亮一行，方便會議討論時一眼鎖定首選。
ACCEPT · 驗收
三條過關條件
紅
能新增 / 刪除候選人欄位與評分維度，欄寬不爆版、手機橫向也讀得到。
黃
每格分數即時加總、總分列自動更新，不需手動按計算。
綠
最高分欄高亮顯示，存進 localStorage，列印 PDF 排版不破損。
TASK · 題目
站立會議發言抽籤器
晨會從此不無聊。輸入團隊名單，按下抽籤，下一位報告者隨機揭曉——直到所有人都發言完畢。
情境
每天 stand-up 都是固定順序，講到後面大家都不在狀況內，發言品質越來越差。
交付
輸入名單、按下抽籤鈕，每按一次出下一位，已抽過的人灰掉，全員抽完顯示「結束」。
STEPS · 步驟
三步做出抽籤邏輯
01
名單輸入框
告訴 AI：textarea 一行一個名字，存 localStorage，下次打開不必重輸。
02
不重複的隨機
每次抽都從未抽過的人裡隨機挑一個，已抽過的灰掉並標記「已發言」。
03
大字當下名字
當下被抽中的名字用 Big Display 字型放大顯示，遠處螢幕也看得清楚。
ACCEPT · 驗收
三條過關條件
紅
同一人不會被抽到第二次，所有人抽完顯示「全員到齊」並可重置。
黃
名字大字顯示、3 公尺外可讀，名單關掉再開不丟失。
綠
手機開也不爆版，整個會議室共用一個畫面，主持人按一下就跳下一位。
Vol.12 · D12 / 20
13 / 32
INTERLUDE · 半場提示
三個跑完了。
剩下五個 — 同一個節奏。
題目 → 步驟 → 驗收，不換套路、只換題目。
TASK · 題目
Markdown 轉專業報表
把 AI 生成的 Markdown 文字，秒變適合列印給長官的精美報告。不需要 Word，不需要排版——貼進來就完成。
情境
AI 出的 Markdown 摘要要交給長官看，但長官只開 PDF / 列印紙，不懂為什麼字前面有星號。
交付
左邊貼 Markdown、右邊即時渲染成 A4 排版，列印按鈕直接出 PDF，不破版。
STEPS · 步驟
三步做出渲染頁
01
左右分欄編輯器
告訴 AI：左邊 textarea 輸入 Markdown，右邊即時渲染預覽（用 marked.js CDN）。
02
A4 列印樣式
右側套 print CSS：A4 頁面、邊距 2.5cm、襯線字型、表格邊框清楚。
03
列印按鈕
按下「列印」直接觸發 window.print()，瀏覽器列印對話框存 PDF 即可寄出。
ACCEPT · 驗收
三條過關條件
紅
標題、清單、表格、引言、程式碼塊都正確渲染，emoji 和中文不破版。
黃
列印預覽是 A4 直式、邊距合理、頁碼自動加在右下，不會切到字。
綠
輸入內容存 localStorage，下次打開還在；可上傳 .md 檔載入。
TASK · 題目
活動倒數與進度壓力牆
把目標日期輸入進去，看著秒針一秒一秒地倒數——進度條讓你立刻感受到「時間真的不多了」的壓迫感。
情境
活動截止日寫在月曆上沒人記得，看到大字秒針倒數時才會真的緊張。
交付
輸入活動名稱+目標日期，主畫面巨型倒數+進度條，可放大投影或當辦公室桌布。
STEPS · 步驟
三步做出壓力牆
01
日期輸入與起算點
告訴 AI：input type=datetime-local 設目標、現在當作起算，存 localStorage。
02
秒級更新顯示
setInterval(1000) 算剩餘 D / H / M / S，巨大字型顯示在畫面中央。
03
進度條變色提示
剩 ＞50% 綠 / 25-50% 黃 / ＜25% 紅，過期時整片變灰並顯示「已截止」。
ACCEPT · 驗收
三條過關條件
紅
秒數正確倒數、不會因切換分頁而停擺，跨日 / 跨月 / 跨年都正確。
黃
F11 全螢幕後字夠大，3 公尺外清晰可讀，色彩警示對色弱也分得出。
綠
關掉再開資料還在、可改目標日期；過期顯示「已截止」並不再倒數。
TASK · 題目
文字敏感詞過濾器
貼文發出前的最後防線。設定你的敏感詞清單，把文章貼進來，工具自動標出所有問題詞彙並統計次數。
情境
公司禁字（競品名 / 內部代號 / 法規敏感詞）多到背不起來，發文前怕漏掉。
交付
設一份禁字清單，貼文章進去，所有禁字會被高亮並列出統計表，一眼確認。
STEPS · 步驟
三步做出過濾器
01
禁字清單管理
告訴 AI：左欄輸入禁字清單（一行一個），存 localStorage 下次自動載入。
02
文章高亮替換
右欄貼文章後即時掃描，將禁字用 mark 標籤包起來、紅底白字明顯標示。
03
統計表 + 匯出
下方列禁字 → 出現次數的表，按下「複製清理後文字」自動把禁字換成 □□□ 後複製。
ACCEPT · 驗收
三條過關條件
紅
能正確標出全部禁字（含中英文混合、含標點），不誤標其他相似字。
黃
統計表即時更新、按禁字 → 跳到文章該位置，方便定位修改。
綠
禁字清單與文章同時存進 localStorage，可匯出 / 匯入清單與其他人共用。
Vol.12 · D12 / 20
23 / 32
TURN · 視覺工具登場
剩下兩個是
視覺密度與個人化
PRAC 5-11
排班熱點圖 — 把抽象「忙碌」變成顏色深淺。
PRAC 5-12
個人 Kanban — 三欄拖拉，最低限度的任務管理。
TASK · 題目
團隊排班熱點圖
用顏色深淺標示一週的忙碌程度，一眼看出哪個時段最適合開會。點格子就能調整，資料自動存進瀏覽器。
情境
每次找空檔開會都要傳 LINE 問四個人，最後找出來的還是早就被佔掉的時段。
交付
7 天 × 12 時段的表，每格點一下加深一階忙碌色，主管一眼挑出最淺色的時段約會。
STEPS · 步驟
三步做出熱點圖
01
7 天 × 12 時段表格
告訴 AI：橫軸週一到週日，縱軸 8:00~20:00 每小時一格，CSS Grid 排版。
02
點擊加深一階
每點一下從 0 → 1 → 2 → 3 → 0 循環，每階對應更深的牛皮紙橘色。
03
localStorage + 重置
所有格子狀態存 localStorage，提供「重置全部」與「下載截圖」按鈕。
ACCEPT · 驗收
三條過關條件
紅
7×12 = 84 格全部可點、四階顏色明顯有區別、不錯位。
黃
關掉瀏覽器再開資料還在；切到手機橫向也讀得到時段標籤。
綠
支援多人版本：頂端切換「自己 / 全員疊加」，疊加版顏色由全員平均決定。
TASK · 題目
個人化 Kanban 任務板
最輕量的個人任務管理。新增卡片、在三個欄位間移動、關閉瀏覽器再打開資料還在——沒有多餘功能，只有你需要的。
情境
Trello / Notion 對個人來說太肥，想要的只是「待辦 / 進行中 / 完成」三欄而已。
交付
三欄式看板，可拖卡也可按箭頭移動，雙擊卡片改文字，關掉再開資料還在。
STEPS · 步驟
三步做出看板
01
三欄結構
告訴 AI：CSS Grid 三欄「待辦 / 進行中 / 完成」，每欄可放任意卡片。
02
新增 / 編輯 / 移動
每欄頂端「+」加新卡，卡片雙擊改文字，左右箭頭按鈕移到上 / 下一欄。
03
localStorage 持久化
所有卡片內容與所屬欄位即時存 localStorage，下次打開狀態完全還原。
ACCEPT · 驗收
三條過關條件
紅
三欄齊全 · 可加卡 · 可改字 · 可移動 · 可刪除，五個基本動作都通。
黃
關掉瀏覽器再開所有卡片狀態還在，多分頁開不會互相覆蓋。
綠
支援匯出 JSON 備份、可匯入到其他電腦，一個檔案搬家整個任務板。
TOOL CARD · Part 5 一頁工具卡
Part 5 學完該帶走什麼
前端基本功
HTML 結構 · CSS Grid / Flex · JS 事件 · localStorage — 五個 API 撐起八個工具。
AI 協作節奏
先講「題目→步驟→驗收」三件事，再讓 AI 出 code，比直接「幫我寫個工具」快十倍。
Git + 部署
commit early / push often / Vercel auto deploy — 寫完當天就有公開連結可用。
Ship 心法
完成優先於完美 · 三條驗收就放行 · 真的用過再迭代，不要事先想完所有功能。
NEXT · 下一站地圖
從前端工具走向 API 串接
D10~D12
前端 + 部署 + 自由演練 — 你已經能做出「能跑、能存、能看」的工具。
D13 · 下一站
API 基礎與呼叫流程 — 把 OpenAI / Claude API 接進你的工具，工具開始有「腦子」。
D14~D16
Function Calling / Streaming / RAG / Evals — 從串 API 到做 Agent，能力疊上去。
D17~D19
專題衝刺 + 畢業展 — 把這 140 小時學到的東西，凝聚成一個完整作品。
Vol.12 · D12 / 20
32 / 32
TO BE CONTINUED
八個工具
八個成就。
明天 D13 — 把 API 接上去，工具開始有自己的判斷力。
D12 · 自由演練庫·End·Next : D13 API 基礎