← → 翻页 · ESC 索引
Vol.04 · Part Four
01 / 26
生成式 AI 工作應用班 · 36hr

零代碼 AI 工具開發

把腦中那個「應該有人做過吧」的小工具——今天，你自己做出來。

Part 4 / 7·8 小時 · 4 單元 + PRAC·弄一下工作室
Input·Logic·Output·Artifacts·Pages
gen-ai-36h · Part Four
Cover
Opening
02 / 26
Why Part 4

過去你以為「要找工程師」才能做的東西—— 現在你只需要 30 秒畫三層、 30 秒寫 prompt，AI 10 秒給你成品。

Input · Logic · Output·三層架構是 Part 4 的全部基礎
Opening
02
Outcomes
03 / 26
本 Part 結束後你會

從使用工具的人，變成做工具的人

04
Lessons
方法論 → 商務工具 → 視覺化 → 風格與部署，120min × 4 + PRAC。
03
Tools Online
PRAC4 帶走 3 件作品，掛在 GitHub Pages 上、可分享連結。
80%
Daily Coverage
能在「一個 HTML 檔內跑完」的工具，已涵蓋上班族 80% 的個人生產力需求。
Outcomes · Part 4
03
Act I · Method
04 / 26
CH 4.1 · 120 分鐘

所有 web 工具
都是同一個結構

輸入、邏輯、輸出。三層。
過去這三層要會 HTML / CSS / JS——現在只要中文描述清楚。

Act I · 零代碼方法論
04
Act I · CH 4.1
05 / 26 講義 · CH 4.1
Three-Layer Architecture

先畫三層，再打字

Layer 01
輸入

使用者要填 / 選 / 上傳什麼？
欄位幾個 · 類型 · 預設值 · 限制。

每多一個欄位 → 流失 10% 使用率

Layer 02
邏輯

輸入怎麼變成輸出？
用「如果 X 就 Y」白話寫，AI 自己翻成程式。

這層放你的 know-how，工具差異化關鍵

Layer 03
輸出

使用者看到什麼？怎麼呈現？
數字 · 顏色 · 按鈕（複製 / 重置 / 分享）。

輸出爛 = 還要使用者「自己解讀」

CH 4.1 · 三層架構
05
Act I · CH 4.1
06 / 26
網路上明明有現成工具——為什麼還要自己做？

現成工具 vs 你自己的工具

現成工具
為「全部人」設計
  • · 功能太多，你只用到 10%
  • · 輸出格式不對，你要手動改
  • · 想加功能 → 等開發者
  • · 你的業務 know-how 進不去
你做的工具
剛好到你的情境
  • · 符合你的工作流，不多不少
  • · 輸出可直接貼 email / 列印 / 加日曆
  • · 想改？追問 AI 10 秒搞定
  • · 你的 know-how 寫進邏輯層 = 核心價值
CH 4.1 · 為什麼自己做
06
Act I · CH 4.1
07 / 26
Layer 01 · Input

輸入：每個欄位都要標清楚類型

Example · BMI 試算器
  • · 身高（數字，cm，必填，120-220）
  • · 體重（數字，kg，必填，30-200）
  • · 性別（下拉，男 / 女，預設男）
Example · 報價試算器
  • · 客戶名稱（文字）
  • · 方案類型（下拉 3 種）
  • · 期間（下拉 3/6/12 月）
  • · 折扣（滑桿 0-30%）
  • · 付款（單選：月 / 季 / 年）

「身高」寫成文字框？使用者打「175 公分」就壞了。改數字框 + 範圍驗證，不合理值直接被擋。每個設計決定都在減少「使用者犯錯」的機會。

CH 4.1 · Layer 01
07
Act I · CH 4.1
08 / 26
Layer 02 · Logic

邏輯：用「如果 X 就 Y」白話寫

BMI 的邏輯
  • BMI = 體重 / (身高/100)²
  • if BMI < 18.5 → 偏瘦（黃）
  • if 18.5 ≤ BMI < 24 → 正常（綠）
  • if 24 ≤ BMI < 27 → 過重（橘）
  • if BMI ≥ 27 → 肥胖（紅）
報價 試算器的邏輯
  • 小計 = 單價 × 期間
  • 折扣 = 小計 × 折扣%
  • if 年付 → 再 × 0.97（額外 3%）
  • 含稅 = 折扣後 × 1.05

邏輯層是你的工具跟通用工具「不同」的地方——你的業務 know-how 寫在這層裡，就是工具的核心價值。

CH 4.1 · Layer 02
08
Act I · CH 4.1
09 / 26 講義 · CH 4.1
Layer 03 · Output

輸出：2 秒掌握重點，不要還讓人「解讀」

大字
主數字一眼看到（BMI 數值、報價合計、達成率%）
顏色
分類用顏色區別：綠 / 黃 / 橘 / 紅，不要全黑讓人猜
一句話
建議文字：「正常範圍，繼續保持」「建議改方案 B」——讓使用者不用思考下一步
按鈕
「重新計算」「複製成 email」「列印 PDF」「加到 Google Calendar」
記住
localStorage 讓工具記住上次的設定（CH 4.2 教）
CH 4.1 · Layer 03
09
Act II · Practice
10 / 26
CH 4.2 · 120 分鐘

3 個上班族真的會用的工具

會議倒數 → 跨時區會議轉換 → 報價試算 → UTM 連結。
每一個都附完整 prompt + 微調 3 輪 + 踩坑紀錄。

Act II · 商務工具實戰
10
Act II · CH 4.2
11 / 26 講義 · CH 4.1
30 秒做出第一個工具

會議倒數計時器 · 三層 → prompt → Artifact

Step 1 · 三層草稿（10 秒）
  • Input　 分鐘數（預設 30）+ 主題（選填）
  • Logic　 >5min 綠 / 5-1min 黃 / <1min 紅閃 / 0 → 音效
  • Output　大字 MM:SS + 開始/暫停/重置
Step 2 · prompt（20 秒）

請幫我做一個會議倒數計時器，HTML 單檔可即時預覽。
輸入：分鐘數（預設 30）+ 主題（選填）
邏輯：>5min 綠、5-1min 黃、<1min 紅閃、0 播提示音。
輸出：大字 MM:SS + 開始/暫停/重置 + 黑底白字現代感。
直接生成 Artifact，不要解釋程式碼。

Step 3 · Claude 5-10 秒給結果

右側 Artifact 面板生出可互動計時器：
· 黑底白字、3 顆按鈕、輸入 30 按開始 → 倒數啟動
· 第一個零代碼工具完成

為什麼這個 prompt 寫得好

三層都明確 + 邊界條件（5min / 1min）+ 互動細節（3 按鈕）+ 視覺風格（黑底白字）——AI 不需要猜。

只寫「做一個計時器」？AI 8 成猜錯，你要改 3-5 次。

CH 4.2 · 會議倒數計時器
11
Act II · CH 4.2
12 / 26
Tool 02 · Timezone

跨時區會議轉換器 · 避開 7 個踩坑

三層
  • Input　主城市時間 + 5 個目標城市
  • Logic　Intl API 換時區（含 DST）+ 工作時段判斷
  • Output　城市清單 · 顏色 · 「複製成 email」
7 個常見踩坑
  • ① DST 算錯 → 強制用 Intl 而不是 +UTC offset
  • ② 跨日不清楚 → 顯示「翌日 / 前一日」標籤
  • ③ 主城市時間被當 UTC → 明確標時區代碼
  • ④ 手機表格爆 → <768px 改卡片排列
  • ⑤ 複製按鈕沒動靜 → toast + fallback 選取
  • ⑥ 換主城市沒重算 → 監聽 onChange
  • ⑦ 城市清單寫死不能加 → 給「+ 新增城市」
CH 4.2 · 跨時區會議
12
Act II · CH 4.2
13 / 26 講義 · CH 4.2
Tool 03 · Quote Calculator

客戶報價試算器 · 邏輯層放你的商務 know-how

疊折扣
順序明確：先客戶折 → 再付款方式折 → 再四捨五入。不要讓 AI 自己決定順序。
四捨五入
每行各自 round → 合計對不上。改「合計後再 round」一次。
Email 模板
變數沒替換 → prompt 明寫「所有 {{變數}} 必須先全部代入，再 copy」。
列印 PDF
版型錯亂 → 加 @media print 規則：隱藏按鈕、字級 11pt、A4 邊界 1.5cm。
合併報價
多項方案 → 用陣列而非單一物件，讓「+ 新增方案」自動加列。
CH 4.2 · 客戶報價試算器
13
Act II · CH 4.2
14 / 26
Tool 04 · UTM Builder

UTM 連結產生器 · 批次產一整個 campaign

天真做法 vs 批次做法

天真：每個渠道手動填一次 source / medium / campaign，5 個渠道 = 5 倍工。

批次：給「渠道矩陣」（FB / IG / LINE / EDM / YT），AI 一次生 5 個 UTM，同時導出 QR Code 圖檔。

4 個常見踩坑
  • ① 原 URL 已有 ? → 用「? 還是 &」判斷邏輯
  • ② QR Code 空白 → 換 qrcode.js 而非外部 API
  • ③ utm_campaign 有空格 → encodeURIComponent
  • ④ 大小寫不一致 → 強制 toLowerCase()
CH 4.2 · UTM Builder
14
Act III · Visualize
15 / 26
CH 4.3 · 120 分鐘

不用學 Chart.js，
三個 Dashboard 一次到位

業績達成率 · 月度趨勢雙軸 · 客戶分群四象限。
SVG + 互動 hover，全在一個 HTML 檔內跑完。

Act III · 資料視覺化
15
Act III · CH 4.3
16 / 26 講義 · CH 4.3
Dashboard 01 · KPI Bar

業績達成率 · 水平進度條 + 顏色預警

三層
  • Input　業務員 × 5：姓名 / 目標 / 實際
  • Logic　達成 = 實際 / 目標；≥100% 綠、80-99% 黃、<80% 紅
  • Output　水平 bar × 5 + 團隊整體達成率
關鍵 prompt 句

用純 SVG畫水平 bar（不要 Chart.js）
每條 bar 顯示「實際 / 目標 (達成 X%)」
按達成率由低到高排序
hover 時顯示「差距金額」tooltip
頂端大字顯示團隊整體達成率

SVG 比 Chart.js 更好：單檔零依賴、容易客製、列印不糊掉、AI 寫得更穩。Chart.js 留給「真的需要動畫互動」的場景。

CH 4.3 · KPI Dashboard
16
Act III · CH 4.3
17 / 26
Dashboard 02 · Dual Axis

月度銷售趨勢 · 雙軸折線（金額 vs 件數）

為什麼雙軸
金額（萬元）和件數（個）單位不同，硬畫一張軸 → 件數壓成一條線看不到變化。
prompt 關鍵句
「左軸金額（萬元）、右軸件數（個），左軸實線、右軸虛線，hover 顯示同月份兩個值」
Y 軸基準
Y 軸不要從 0 開始（差異看不出來）→ 設「min × 0.95」當底，但要在標題標明，誠實告知。
手機適配
<768px 自動橫向滾動而非壓縮，避免文字疊在一起。
CH 4.3 · 雙軸折線
17
Act III · CH 4.3
18 / 26
Dashboard 03 · Quadrant

客戶分群熱力圖 · 散布 + 四象限

四象限
高頻 + 高客單
VIP，全力守		低頻 + 高客單
大鯨魚，加頻
高頻 + 低客單
回頭客，提客單		低頻 + 低客單
休眠戶，喚醒
prompt 設計

SVG 散布圖，X 軸頻率、Y 軸客單價。

「畫一條十字線當四象限分隔，X 軸中位數、Y 軸中位數，四個象限各標標籤」

hover：顯示客戶名 + 兩個值。可改用「客戶 / 任務 / 產品 / 員工」任何兩維度資料。

CH 4.3 · 四象限分群
18
Act III · CH 4.3
19 / 26
Refinement Scripts

把 dashboard 從「能看」變成「能用」· 6 個追問

01
「加一個下拉選單切換『本月 / 本季 / 本年』不重新載入」
02
「加 hover tooltip 顯示原始數據 + 與目標差距」
03
「加「複製這張圖成 PNG」按鈕（用 html2canvas）」
04
「低於 80% 的數據點閃紅，並顯示警示文字『需立即關注』」
05
「資料用 localStorage 存，下次開不用重輸入」
06
「讓我能貼一段 CSV 直接畫圖，不用一個一個輸入」
CH 4.3 · 互動微調腳本
19
Act IV · Style + Deploy
20 / 26
CH 4.4 · 120 分鐘

一句話換臉，
5 步上線

AI 預設 UI 一眼洩底「我是 AI 做的」。
6 種風格範本一句話覆寫 → GitHub Pages 5 步部署。

Act IV · 風格與部署
20
Act IV · CH 4.4
21 / 26 講義 · CH 4.4
Style Templates · 6 Pack

一句話全換臉 · 6 種風格範本

01 · Apple
蘋果風

SF Pro 字、超圓角、淡灰陰影、留白多

02 · Notion
Notion 風

米白底、襯線標題、emoji 圖示、輕線條

03 · Magazine
雜誌編輯

大字標、襯線、米黃底、強烈對比

04 · Terminal
終端機風

黑底綠字、Mono、bracket 框線、CRT 感

05 · Brutalist
粗野主義

高彩、粗框、不對稱、Helvetica Bold

06 · Wabi-Sabi
無印侘寂

米白底、明朝體、極淡灰線、留白為主

CH 4.4 · 風格範本
21
Act IV · CH 4.4
22 / 26
5 Required Tweaks

套完風格之後，必修 5 項微調

字級節奏
標題 / 內文 / 註解的對比要拉開（建議 1.6 倍以上），不要「全部 16px」。
行距
中文內文line-height:1.85-1.95，不要照搬英文預設 1.5（中文會擠）。
手機適配
明確要求「<768px 時單欄堆疊，按鈕全寬」，不要寄望 AI 自動處理。
焦點態
:focus-visible 要有明顯的環（鍵盤使用者看得到）。
色彩無障礙
內文對比 ≥ 4.5:1，按鈕對比 ≥ 3:1。AI 預設常踩線，明確要求即可。
CH 4.4 · 必修微調
22
Act IV · CH 4.4
23 / 26 講義 · CH 4.4
Deploy · 5 Steps

GitHub Pages · 5 步把工具掛上線

01
Download

Artifact 右上角「Download HTML」存成 index.html

02
New Repo

GitHub 開新 repo，public，命名 my-tool

03
Upload

把 index.html 拖進網頁，commit

04
Pages On

Settings → Pages → 選 main branch → Save

05
Live

2 分鐘後 username.github.io/my-tool 上線

404 排錯：① 檔名必須小寫 index.html ② Pages 開關要按 Save ③ 等 2-3 分鐘第一次部署。

CH 4.4 · GitHub Pages
23
Closing · Boundary
24 / 26
3 秒判斷法

「打開 → 用完 → 關掉」
就用零代碼。

需要登入 / 存資料庫 / 串 CRM / 多人協作 → 等 Part 5 的 Make + n8n。
邊界清楚，工具才會穩。

Claude Artifacts 涵蓋上班族 80% 個人需求·剩下 20% 留給自動化
Closing · 工具邊界
24
Closing · Map
25 / 26
Take-Home + Next

Part 4 帶走的 3 件事 · 接下去 Part 5

Take-home · 3 件事
  • ① 工具集　PRAC 4 完成 3 件作品上線（Pages）
  • ② 三層眼光　看任何工具會自動拆 Input / Logic / Output
  • ③ 部署技能　從此能把任何 Artifact 變成可分享連結

課後行動：用一天的「3 個小不便」各拆一次三層，連做 3 天 → 你會發現生活到處都是可做成工具的東西。

Next · Part 5（6h）
自動化流程設計
  • · Make.com 入門（場景 / 模組 / 過濾器）
  • · n8n Desktop + Cloudflare Tunnel
  • · 表單 → AI 處理 → 通知 / 歸檔
  • · Make & n8n 雙引擎協作

從「單一工具」進化成「連續工作流」。

Closing · Map → Part 5
25
End · Part 4
26 / 26
Part Four · End

To Be Continued
Part 5 · 自動化流程設計

你已經會做工具了。下一步——把工具串起來自己跑。

Vol.04 · Part Four·Make.com·n8n·Cloudflare Tunnel
Contact·sky8697@gmail.com
gen-ai-36h · Part Four · End
26 / 26