← → 翻页 · ESC 索引
Vol.04 · Part Four
01 / 22
Gemini 零代碼 AI 實戰課 · Part 4

成果發表 ×
未來工作流

做出來的工具變成隨手可用的個人裝備,
每次的好指令累積成可以複利的數位資產。

Keyword·Tool Deployment ·Prompt Library ·20-min Hackathon
Duration·1.5 小時授課 ·3 單元 + 3 演練
弄一下工作室 Gemini 零代碼 AI 實戰課 · 6hr · 12 單元 Part 4 of 5
Opening · Manifesto
02 / 22
Why this part exists
做出來、用得到
才算真的會了
前三個 Part 是學會做,這一 Part 是學會用
—— Part 4 · 課程的最後一哩

工具放著不打開,跟從來沒做過是一樣的。

Part 4 · Opening Gemini 零代碼 6hr
This Part · Outcomes
03 / 22
Learning Outcomes · 1.5 小時帶走

三件事,下班就能開始用

儲存與部署,到個人 Prompt 庫
20 分鐘極速產出的個人黑客松節奏。

Outcome 01
01
建立工具資料夾+瀏覽器書籤+桌面捷徑,下次兩秒就能打開
Outcome 02
02
四要素公式建立可分類、可迭代的個人 Prompt 庫
Outcome 03
03
跑完一場 20 分鐘黑客松——從痛點到能用的工具,當場成形。
Part 4 · 6 Sub-units 1.5hr · CH4-1 / CH4-2 / CH4-3 + PRAC ×3
Act I · Unit 4-1
04 / 22
Chapter 4.1 · Tool Deployment

工具部署:
存下來、隨時用

純 HTML 工具的本質——
本機執行,資料不出門,資安零疑慮

4 Slides·Folder + Shortcut + Deploy ·~20 min
Act I · Tool Deployment Unit 4-1
4-1 · Local-first
05 / 22 講義 · 4-1
Step 01 · 為什麼純 HTML 是企業最安全的部署

不需要伺服器,瀏覽器就是執行環境

這堂課做出來的工具都是單一 .html 檔
雙擊打開即用、關閉即停。

薪資、報價、客戶數據,
本機 HTML 算,資料從來不離開你的電腦
沒有安裝、沒有更新、沒有訂閱費——也沒有上傳

這一條足以說服 IT 部門點頭:不上雲端、不過 API、不留 log。

Unit 4-1 · Local-first Browser = Runtime
4-1 · Folder Layout
06 / 22 講義 · 4-1
Step 02 · 給每個工具一個明確的家

整理你的工具資料夾

計算類
報價計算機、薪資試算器、匯率換算——填數字得結果
/AI工具庫/計算類/
排程類
排班生成器、跨時區會議板——有規則的排列邏輯
/AI工具庫/排程類/
視覺化類
銷售漏斗圖、專案路徑圖——給老闆看的圖
/AI工具庫/視覺化類/
其他
倒數計時器、即興工具——還在試的暫存區
/AI工具庫/其他/

命名直接用功能:「報價計算機」而不是 tool_v3_final,三個月後的你才看得懂。

Unit 4-1 · Folder Layout Function-named, not version-named
4-1 · Two-Click Access
07 / 22 講義 · 4-1
Step 03 · 不超過兩個動作就能打開

讓工具像 App 一樣好用

講師按 → 逐步點亮,三個技巧示範一次走完

Pipeline · 部署三技巧
01 · Bookmarks Bar
瀏覽器書籤列
把最常用的拖到書籤列,每次開瀏覽器都看得到,一秒點開。
02 · Desktop Shortcut
桌面捷徑
Win 右鍵 → 傳送到桌面;Mac 按 Option 拖拉建立別名。雙擊即用。
03 · Pin Tab
釘選分頁
右鍵 → 釘選分頁,常駐在左側小圖示,不佔空間又隨時可用。
Unit 4-1 · Pipeline Bookmark · Shortcut · Pin
4-1 · Deploy Options
08 / 22 講義 · 4-1
Step 04 · 本機以外的兩個選擇

三種部署方式,各有適用場景

推薦 · Default
本機執行
零成本、零帳號、資料不離裝置。敏感資料工具的唯一選擇。
選項 · Share
GitHub Pages
免費靜態托管、有公開網址。不要放含敏感資料的工具。
選項 · Team
公司內網
全團隊存取、資料留內部。需要 IT 協助、架設要點時間

決策原則:工具裡有沒有公司機密?有 → 本機;沒有 → Pages 也行。

Unit 4-1 · Three Options Local · Pages · Intranet
Act II · Unit 4-2
09 / 22
Chapter 4.2 · Personal Prompt Library

個人Prompt 庫

每一條好指令都是可以複利的數位資產
三個月後的你會感謝現在這個你

5 Slides·Formula + Catalog + Iterate ·~25 min
Act II · Prompt Library Unit 4-2
4-2 · Compound Effect
10 / 22 講義 · 4-2
Step 01 · 為什麼要存 Prompt

用完就丟,永遠停在起點

大多數人每次都臨時想一個指令
進階做法是把每條好 Prompt 當「工具」對待。

5 分鐘整理一條 Prompt,
之後每次只需要 30 秒——
一年用 50 次,省下超過 4 小時
複利效果:用越多次 → Prompt 越精緻 → 輸出品質越高
Unit 4-2 · Compound Effect Save once · Reuse forever
4-2 · Four Elements
11 / 22 講義 · 4-2
Step 02 · 存進庫之前的完整度檢查

Prompt 公式:四個要素

Element 01
角色
「你是擅長…的工程師」——缺角色輸出會比較平庸。
Element 02
任務
「幫我製作…輸出…格式」——明確輸出才不用反覆改。
Element 03
限制
「不依賴 library / 單一 HTML」——缺限制結果會不穩定。
Element 04
呈現
「RWD / 指定色彩系統」——呈現規格決定第一眼觀感。
Unit 4-2 · Formula 角色 + 任務 + 限制 + 呈現
4-2 · Catalog Framework
12 / 22 講義 · 4-2
Step 03 · 依使用目的分類

建立你的分類框架

工具製作類
生成可直接使用的 HTML 工具——本課程的核心分類
計算機 / 漏斗 / 排班
文字加工類
改寫、潤稿、摘要、翻譯——每天都會用到
會議摘要 / Email 改寫
分析決策類
幫思考、拆問題、生選項——給結構不給結論
SWOT / 競品比較
視覺設計類
UI 組件、設計稿描述、配色方案——視覺即生產力
Landing / 卡片元件

分類不是越細越好——三秒內找到就夠了,太細反而不會用。

Unit 4-2 · Catalog Tool · Text · Analysis · Visual
4-2 · Template Format
13 / 22 講義 · 4-2
Step 04 · 不只存指令,還存情境與變數

Prompt 範本:三個月後直接套用

# 名稱
給這條 Prompt 一個功能化的名字——「互動式銷售漏斗生成器」。
Field 01
# 分類
對應到上一頁的四大分類——查找時用,不存就找不到。
Field 02
# 使用情境
什麼時候會打開這條?「向老闆報業績漏斗時」一句話寫清楚。
Field 03
# 變數
每次需要替換的地方標出來——下次只填新數字,不重讀指令
Field 04 · 關鍵
# 備註
上次使用日期、上次踩到的小坑——下次自動避開
Field 05

存在哪裡?Notion / Obsidian / Apple Notes 都行——放在你每天打開的地方

Unit 4-2 · Template Name · Cat · Context · Vars · Note
4-2 · V1 → V3
14 / 22 講義 · 4-2
Step 05 · 一條 Prompt 不是一次寫好的

迭代升級:從 V1 到 V3 的演化

講師按 → 逐步點亮,每版改了哪一句要喊出來

Pipeline · 三次迭代示範(銷售漏斗)
V1 · 粗胚
功能正確,細節粗糙
「幫我做一個銷售漏斗,用 HTML」——沒互動、沒色彩、沒標籤
V2 · 加規格
加入互動和視覺規格
SVG + hover 顯示人數與轉換率,鼠尾草綠由深到淺」——好很多。
V3 · 收尾
加入 RWD 和進場動畫
「tooltip 不超出邊界、各層依序淡入、資料集中於 JS 陣列」——成品。

節奏:每次用完花 2 分鐘把不夠好的補進備註——三次後大多 Prompt 就準了。

Unit 4-2 · Iteration Coarse → Spec → Polish
Act III · Unit 4-3
15 / 22
Chapter 4.3 · 20-Minute Hackathon

極速黑客松:
20 分鐘從無到有

把一個工作痛點
20 分鐘內變成能用的工具

5 Slides·Mindset + Pipeline + Demo + Trap ·~25 min
Act III · Hackathon Unit 4-3
4-3 · Hackathon Mindset
16 / 22 講義 · 4-3
Step 01 · 完成優先於完美
不是「完美」的工具,
「可以用」的工具。
先讓核心功能跑起來,細節之後再追加
—— Hackathon Mindset · 20-min Rule

好工具候選 = 每週至少做一次 + 步驟固定 + 大部分時間在填數字或複製貼上

Unit 4-3 · Mindset Done > Perfect
4-3 · 20-min Pipeline
17 / 22 講義 · 4-3
Step 02 · 五步走,照著做就對了

20 分鐘工作流程

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

Pipeline · 0 → 20 min
01 · 0–3m
定義痛點
一句話說清楚要解決什麼,不寫需求文件。
02 · 3–7m
套用框架
挑工具類型、從 Prompt 庫取對應框架填入需求。
03 · 7–12m
提交生成
貼進 Gemini,等待期間準備好新 .html 檔
04 · 12–17m
測試修正
最明顯的一個問題,一句話追加指令——不要一次改全部。
05 · 17–20m
存檔命名
按 4-1 規則存進工具資料夾+加到書籤列。完成。
Unit 4-3 · Pipeline 第一次 30 min · 第十次 12 min
4-3 · Live Demo
18 / 22 講義 · 4-3
Step 03 · 從痛點到工具的完整實例

實戰示範:差旅費報銷計算器

① 痛點 · 3m
出差回來要算交通 + 住宿 × 天數 + 餐費(每日上限 400),再扣備用金。
Pain
② Prompt · 4m
「你是擅長企業工具的前端工程師。輸入:天數/交通/住宿/實際餐費/備用金;輸出:總金額/小計/應補退。」
Spec
③ 修正 · 5+5m
發現餐費上限沒提示,追加一句:「超 400 元邊框變橘色 + 顯示『已截斷至上限』」。
Patch
④ 存檔 · 3m
存為「差旅費報銷計算器_2024-03.html」加到書籤——下次出差30 秒搞定報銷
Ship
Unit 4-3 · Live Demo Pain → Spec → Patch → Ship
4-3 · Three Traps
19 / 22 講義 · 4-3
Step 04 · 新手最容易踩的三個坑

爛做法 vs 好做法

Trap · 爛做法
貪多
一次做完所有功能」——輸出又長又亂。
×
含糊
「幫我做個計算機」——AI 猜你要什麼
×
重寫
小問題就要 AI 「重寫整個」——丟失已有的好東西。
×
Fix · 好做法
分階段
先做核心功能確認可用,再用追加指令加功能。
明確化
輸入欄位 / 輸出顯示 / 特殊邏輯講清楚。
局部修
每次只針對一個問題給精確修正——逐步完善。
Unit 4-3 · Trap vs Fix Stage · Specify · Patch
Practice · PRAC4-1/2/3
20 / 22 講義 · PRAC4
Workshop · 三個互動工具一次走完

下半場演練:三件套

PRAC4-1
部署清單
互動式 Checklist——逐項確認,工具上線前的品質門。
PRAC4-2
Prompt 庫
CRUD 管理器——新增/搜尋/過濾/複製,存入課程最好的 5 條。
PRAC4-3 · Final
黑客松
抽題 + 倒數 + 開做——20 分鐘從無到有,課程最終考驗。

每個 PRAC 都附「How to Replicate」——把指令複製貼進 Gemini,就能自己做出工具本身

Practice · 3 Tools Checklist · Library · Hackathon
Course · Wrap
21 / 22
Six hours · One identity
你已經是「會做工具的人」了。
不需要寫程式,
需要的是清楚的痛點Prompt 框架
20 分鐘的時間
—— Gemini 零代碼 AI 實戰課 · 收束

從今天起,每個工作痛點都是你的開發機會

Course · Done Tool · Library · Hackathon
Start Now · Your Turn
22 / 22
To Be Continued · By you

下一個工具,
做。

選一個本週讓你最煩躁的重複動作——
打開 Gemini,20 分鐘把它變成工具

Step 01·挑一個痛點 ·Step 02 · 套用框架 ·Step 03 · 存進工具庫