← → 翻页 · ESC 索引
Vol.04 · Session Four
01 / 22
AI Workshop · 18hr · Session 4

零代碼工具開發(上)

三小時,把腦袋裡的工作流程變成能點擊使用的個人工具
不寫程式、不裝環境,當場做出第一個

Keyword·No-Code Tool ·Spec → HTML ·Iteration Loop
Duration·3 小時授課 ·3 單元
弄一下工作室 AI 實務全攻略|從高效辦公到自建數位工具 · 18hr Session 4 of 6
Opening · Manifesto
02 / 22
Why this session matters
不是讓 AI 幫你做一次
是讓 AI 幫你做出能用一輩子的工具。
前者是消耗,後者是累積
—— Session 4 · 從消費者變成製造者

每天用 AI 處理同一件事十次,
不如花一小時做成工具,從此打開就用。

Session 4 · Opening AI Workshop 18hr
This Session · Outcomes
03 / 22
Learning Outcomes · 三小時帶走

三件事,離開教室手上有工具

不求做完,求第一個工具能跑、能交給同事

Outcome 01
01
學會分辨工具 vs AI 回答,知道哪些工作值得花一小時做成工具。
Outcome 02
02
四維度框架把需求說清楚,產出 AI 能直接生成 HTML 的指令。
Outcome 03
03
完成第一個能用的工具,存成 .html,雙擊就能在瀏覽器跑。
Session 4 · 3 Units 3hr · CH4-1 / WS4-A / PRAC4
Act I · Unit 4-1
04 / 22
Chapter 4.1 · Build Loop Foundations

零代碼開發循環

把腦袋裡的判斷邏輯說清楚,
讓 AI 幫你把它變成可重複用的工具

6 Slides·Concept + Framework ·~50 min
Act I · Build Loop Unit 4-1
4-1 · Tool vs Answer
05 / 22 講義 · 4-1
Step 01 · 工具的定義比你想的嚴格

工具AI 回答的差別

很多人以為讓 AI 寫一份表格就算「做工具」,其實只是得到一次性回答

AI 回答(一次性)
・每次要用都要重新問
・要記住怎麼下指令
無法傳給不會用 AI 的同事
・輸出格式每次可能不同
數位工具(可重複用)
・打開就能用,不需要每次下指令
・介面固定,任何人都會操作
・可以傳給同事、存檔、版本控制
・輸出格式穩定可預期
Unit 4-1 · Tool vs Answer 消費 vs 累積
4-1 · The Essence
06 / 22 講義 · 4-1
Step 02 · 把工具的本質寫一次
工具的本質是:
把你的判斷邏輯封裝起來,
未來的你或別人
不需要重新思考就能執行
—— CH4-1 · 工具觀的起點

本 session 教的不是「做出一個 demo」,
是學會把判斷邏輯固化的這個動作。

Unit 4-1 · Essence Encapsulate · Reuse · Hand-off
4-1 · Three Tests
07 / 22 講義 · 4-1
Step 03 · 不是所有工作都該工具化

工具化判斷三問

三題都過才動手,少於三題先用 AI 直接回答就好。

問題一 · 重複性
這件事這個月做了幾次?少於三次先別做,三次以上才考慮工具化。
≥ 3 / month
問題二 · 邏輯固定
處理邏輯每次都不同就不適合;邏輯固定、只有資料變才強烈建議。
Logic locked
問題三 · 交接需求
只有自己用省時間就划算;要讓不同人做則工具化是必須。
Hand-off

通過三問 = 你今天的工具建造候選清單——Session 4 結束前至少做完一個。

Unit 4-1 · Three Tests Repeat × Lock × Hand-off
4-1 · Four Dimensions
08 / 22 講義 · 4-1
Step 04 · 把需求拆成四塊,AI 才生得出來

需求拆解四維度框架

Dim 01 · Input
輸入
使用者要填什麼?例:下拉選單、數字、文字、檔案上傳。
Dim 02 · Logic
邏輯
要做什麼運算或判斷?此維度最關鍵,AI 做不了你不講的。
Dim 03 · Output
輸出
結果長什麼樣?要不要附「複製」按鈕、表格、條列。
Dim 04 · Interaction
互動
使用者怎麼操作?即時計算還是按按鈕、能否重置。

四維度缺一不可——少寫一塊 AI 就會自己亂猜,第一版就走偏。

Unit 4-1 · Four Dimensions Input · Logic · Output · UX
4-1 · Build Loop
09 / 22 講義 · 4-1
Step 05 · 從想法到能用,走一遍五步

第一個工具的完整循環

講師按 → 逐步點亮,每步說一次卡關點

Pipeline · 從零到能跑
01
選場景
用三問選一個,第一個建議計算或判斷型,比流程型容易成功。
02
寫四維度
逐一寫清楚,讀一遍確認每維度都夠具體,不能寫「算一些數字」。
03
請 AI 生成
套標準指令貼給 Claude,要求單一 HTML 檔、純 JS、不引函式庫
04
存檔測試
複製程式碼存 .html,雙擊用瀏覽器打開,逐一測輸入情境
05
迭代修
同一個對話裡指出「輸入 X 應該是 Y、結果是 Z」,比重問有效。
Unit 4-1 · Build Loop Pick · Spec · Generate · Test · Iterate
4-1 · Prompt Template
10 / 22 講義 · 4-1
Step 06 · 直接照抄、把空格填上就能跑

第一版標準指令範本

請幫我建立一個 HTML 單頁工具

【輸入】{使用者要填什麼,含格式}
【處理邏輯】{工具要做什麼運算或判斷,含特例規則}
【輸出】{結果格式 + 是否含複製按鈕}
【互動方式】{怎麼操作 + 是否即時計算}

請在單一 HTML 檔案內完成,純 JavaScript不引入外部函式庫,中文介面 UTF-8。

填四個花括號就行——填得越具體,第一版就越接近能用,少改三輪

Unit 4-1 · Prompt Template Copy · Fill · Paste · Run
Act II · Workshop
11 / 22
Workshop 4-A · First Tool, 90 min

第一個工具實作

從六種職能模板選一個,
用 Claude 從需求描述到能點擊使用,當場做完。

4 Slides·90 min ·Solo + Show
Act II · Workshop WS 4-A
WS · Six Job Templates
12 / 22 講義 · WS4-A
選題 · 六選一、最貼近你工作的

六種職能選題模板

01 · 行銷
活動企劃
評分器
輸入活動方案,AI 評分並給改善建議。
02 · 業務
客戶提案
客製化工具
根據客戶背景生成差異化提案重點。
03 · HR
面試題目
生成器
根據JD 關鍵要求自動生結構化題。
04 · 管理
會議紀錄
摘要器
貼入原始記錄,輸出決議+待辦分配
05 · 教育
學習目標
分解工具
輸入課程主題,拆可評量子目標
06 · 財務
費用類別
分類器
貼費用清單,自動分類+占比統計。
WS 4-A · Six Templates Pick one · Don't browse all
WS · Three Steps
13 / 22 講義 · WS4-A
核心循環 · 不要跳過任何一步

開發循環三步驟

講師按 → 逐步點亮,每步喊一次時間

Pipeline · WS4-A 心法
01
寫需求描述
用一段話講清楚輸入、處理、輸出,具體到不認識你的人也懂
02
請 Claude 生成
指令必含單一 HTML、純 JS、不引函式庫、中文介面四項要求。
03
測試並迭代
列出「什麼不對」逐項修,一輪只描述一個問題不要堆疊。
核心心法:寫需求 30 分鐘+生成測試 60 分鐘,而不是反過來
WS 4-A · Three Steps Spec · Generate · Iterate
WS · 90-min Timetable
14 / 22 講義 · WS4-A
Schedule · 90 分鐘怎麼分配

工作坊時間表

0–15 min
選題 + 寫需求描述草稿。先寫草稿,不需要完美
Spec draft
15–45 min
第一版生成 + 初測。存 .html 打開瀏覽器跑。
v1 + smoke
45–70 min
迭代修改至少 3 輪,每輪修完重新測一次
≥ 3 rounds
70–85 min
小組展示 1 分鐘——「解決什麼問題、輸入什麼、輸出什麼」。
1 min · show
85–90 min
整理心得 + 把好用的 Prompt 截圖存檔,下次直接套。
Save prompt
WS 4-A · Timetable Spec · Build · Iterate · Show · Save
WS · Facilitator Cues
15 / 22 講義 · WS4-A
Facilitator · 講師三個必須出現的時刻

常見卡關點與處理

最常見 · 需求太模糊
第一版完全不對 → 不要繼續 prompt,回頭把需求寫具體
Cue 01
次常見 · 一次提太多
同時要 AI 修五件事 → 逐項修,一輪只描述一個問題。
Cue 02
易忽略 · 沒實際存檔測
在對話框看程式就以為好了 → 強制每組存檔雙擊跑一次
Cue 03

散場前最低標:每人說得出工具解決什麼問題、輸入什麼、輸出什麼

WS 4-A · Cues Vague · Stack · Skip-test
Act III · Practice
16 / 22
Practice 4 · Refine + Plan Next

把工具留下來

完善今天做的工具、整理可複用指令,
順手規劃下一個趁熱打鐵。

3 Slides·3 Tasks ·~30 min
Act III · Practice PRAC 4
PRAC · Task 01
17 / 22 講義 · PRAC4
Task 01 · 別讓工具停在 demo 狀態

完善工作坊工具

對應 PRAC4 任務一。把工作坊那一版從能跑變成能交

記錄 · 工具名稱
寫下工具名 + 對應的選題,未來找得回來。
Name + Type
記錄 · 最終需求
把最終可用版本的需求描述存下來,當下次的範本。
Final spec
驗收 · 不熟悉的人能用
一位不在現場的同事試用——能用,才算完成。
Outsider test
PRAC 4 · Task 01 Refine · Record · Hand-off
PRAC · Task 02
18 / 22 講義 · PRAC4
Task 02 · 把今天的對話精煉成範本

四維度精煉與可複用指令

反覆迭代後那個能跑的版本,回頭整理成乾淨的四維度

原始狀態
・對話散落在很多輪訊息
・需求邊做邊改,沒寫成一頁
下次想做新工具要重來一遍
・隊友看不懂當初為什麼這樣寫
精煉之後
・四維度各一段清楚分開
・產出可複製的標準指令一段
下次套個新主題就能再生一個
別人讀完能直接接手修
PRAC 4 · Task 02 Distill · Standardize · Reuse
PRAC · Task 03
19 / 22 講義 · PRAC4
Task 03 · 趁思路熱、規劃下一個

下一個工具五題自評

五題全勾就值得做;少於三題先別開工,繼續用 AI 直接答就好。

① 重複性
這件事每月做 3 次以上
≥ 3 / month
② 邏輯固定
處理邏輯固定,只有輸入資料會變
Locked logic
③ 可交接
做好之後可以讓別人也用
Hand-off ready
④ 輸入明確
已經說得出要接受什麼輸入
Input clear
⑤ 輸出明確
已經說得出要輸出什麼格式
Output clear
PRAC 4 · Task 03 5/5 → Build · < 3 → Wait
Session 4 · Toolkit Card
20 / 22
Map · 一頁帶走所有零件

Session 4 工具卡

三問
重複性 · 邏輯固定 · 交接需求——三題都過才動手
CH4-1
四維度
輸入 · 邏輯 · 輸出 · 互動——邏輯維度最關鍵,AI 做不了你不講的。
CH4-1
五步循環
選場景 → 寫四維度 → 請 AI 生 → 存檔測 → 同對話迭代
CH4-1
六選題
行銷 / 業務 / HR / 管理 / 教育 / 財務——選最貼近自己工作的那一個。
WS4-A
標準指令
「請建 HTML 單頁工具 + 四維度 + 單檔純 JS 不引函式庫」照抄填空
CH4-1 ★
Session 4 · Toolkit 3 · 4 · 5 · 6 · Template
Session 4 · Wrap
21 / 22
Three hours · One tool in your hand
三小時,一個工具帶回家:
一份四維度需求描述
一段可複用的標準指令
一個能跑的 .html
—— Session 4 收束

從今天起,重複的工作不再每次重頭問
而是打開那個 .html就能跑。

Session 4 · Done Spec · Prompt · .html
Up Next · Session 5
22 / 22
To Be Continued · Session 5 of 6

進階工具
× 數據視覺化

下週把今天的工具升級——
加入計算邏輯、條件判斷、互動圖表,能呈現 KPI 與分配。

S5·CH5-1 進階計算 ·CH5-2 數據視覺化 ·WS5-A 三層維護
See you·Same time · Same place