← → 翻页 · ESC 索引
Vol.02 · Part Two
01 / 22
Gemini 零代碼 AI 實戰課 · Part 2

打造你的商務軍火庫

把每天用 Excel 的計算、排班、時區、報價
用 AI 一句話做成可以一直用的網頁工具。

Keyword·Calc Tools ·Logic Conversion ·UI Upgrade
Duration·3 章 + 3 演練 ·~3 hr
弄一下工作室 Gemini 零代碼 AI 實戰課 · 打造你的專屬高效辦公神器 Part 2 of 5
Opening · Manifesto
02 / 22
Why this part opens here
Excel 公式又被誰拉壞了
這次不修了——用 AI 直接做一個
輸入只能輸入、公式鎖在裡面,誰都拉不壞
—— Part 2 · 從計算機開始的辦公神器

不用學程式,
說的,三十秒一個專屬工具。

Part 2 · Opening Gemini 零代碼 AI 實戰課
This Part · Outcomes
03 / 22
Learning Outcomes · 三小時帶走

三件事,下班後就能用

不求學會寫程式,求下次遇到 Excel 痛點,知道怎麼換成 AI 工具。

Outcome 01
01
會用結構化 Prompt請 Gemini 做計算工具:報價機、薪資試算、工時計費。
Outcome 02
02
能描述複雜邏輯給 AI:排班規則、跨時區、條件判斷類工具。
Outcome 03
03
帶走一份UI/UX 升級指令庫,讓你做的工具看起來像花錢請人做的。
Part 2 · 3 Chapters + 3 PRAC 2.1 計算工具 / 2.2 邏輯轉換 / 2.3 UI 升級
Act I · Unit 2-1
04 / 22
Chapter 2.1 · Calculation Tools

自動化計算工具

多層次報價計算機 × 薪資試算神器——
把 Excel 拉壞、版本亂、防呆難的痛點,一次清掉

6 Slides·Pain → Anatomy → Prompt ·~50 min
Act I · Calculation Tools Unit 2-1
2-1 · Why Excel Breaks
05 / 22 講義 · 2-1
Step 01 · 不是 Excel 不好,是場景錯了

Excel 的三個致命傷

用 Excel 做「給其他人輸入資料的計算工具」,幾乎無解。

公式被拉壞
有人多拉了一格、刪了一欄,整個邏輯就崩了,當下還不會發現。
Formula Drift
版本是噩夢
「報價表_v3_最終版_確認版_0312.xlsx」——沒人知道哪個是對的。
Version Hell
防呆做不到
無法阻止別人輸入文字進數字欄位、留空白、輸負數,結果就默默錯了
No Validation

這三件事,HTML 工具一次解決——下一頁。

Unit 2-1 · Excel Pain 痛點清單先列出
2-1 · Excel vs HTML Tool
06 / 22 講義 · 2-1
Step 02 · 同一個任務、兩種載體

Excel vs HTML 工具

Excel · 試算表
公式漂移
結構不固定 · 版本散落 · 誰都能改到公式,誰都不知道誰改的。
HTML · 自製工具
結構固定
輸入框就是輸入框 · 邏輯鎖在程式碼裡 · 一個檔案永遠是最新版。
關鍵差別:Excel 是「邏輯與資料混在一起」,HTML 工具是「邏輯固定、資料流入」——後者才是「給別人用」的正確形式。
Unit 2-1 · Compare Mixed → Separated
2-1 · Quotation Anatomy
07 / 22 講義 · 2-1
Step 03 · 寫 Prompt 之前,先畫骨架

多層次報價計算機的五個區塊

把工具拆成五區,每區描述清楚,AI 一次就到位

輸入區
品項名稱 · 數量 · 單價,可動態新增多列
Input
設定區
稅率(含稅 / 未稅 / 自訂)、整體折扣百分比、幣別。
Config
計算區
各列小計 → 合計 → 稅金 → 折扣 → 最終總額即時更新
Compute
操作區
新增品項 · 刪除 · 清除全部 · 列印 / 匯出。
Action
防呆設計
數字欄位只接受數字、千分位格式、空欄不計算。
Validation
Unit 2-1 · Anatomy 骨架清楚 · Prompt 才精準
2-1 · Prompt Skeleton
08 / 22 講義 · 2-1
Step 04 · 黃金公式 · 套到任何工具都通

Prompt 的四段骨架

同樣四段、不同內容——按 → 逐步點亮

Pipeline · 角色 → 需求 → 約束 → 輸出
01
角色設定
「你是一位熟悉商業應用的資深前端工程師」——一句話定調品質。
02
需求分區
【輸入】【設定】【計算】【防呆】分段,AI 不會漏掉任何一塊。
03
技術約束
純 HTML/CSS/JS,不引入外部套件」——避免一打開就壞。
04
輸出格式
「輸出單一 HTML 檔,不要說明文字,只給程式碼」。
關鍵提醒:「任何數值變動時即時重新計算」這句話一定要寫——否則 AI 會做一個要按「計算」按鈕才更新的版本。
Unit 2-1 · Formula Role → Need → Constraint → Output
2-1 · Quotation Prompt
09 / 22 講義 · 2-1
Step 05 · 直接抄 · 直接貼到 AI Studio

報價計算機 · 完整 Prompt

[ROLE]
你是一位熟悉商業應用的資深前端工程師。

[NEED]
請製作一個「多層次報價計算機」網頁工具:輸入區表格含品項、數量、單價,可動態新增/刪除列;設定區稅率(免稅 / 5% / 10% / 自訂)+ 整體折扣百分比;計算區每列小計、合計、折扣、稅金、最終總額,數值變動即時重算防呆數字欄只收正數、非法值欄框變紅不計入、金額千分位。

[CONSTRAINT]
只用純 HTML / CSS / 原生 JS,不引入任何外部套件或 CDN,介面以白色為主,適合商業使用。

[OUTPUT]
輸出完整可直接執行的單一 HTML 檔案,不需任何說明文字。

講義含原始未壓縮版本+三個追加防呆指令——星號連結點開即可複製。

Unit 2-1 · Full Prompt Copy · Paste · Run
2-1 · Payroll Calculator
10 / 22 講義 · 2-1
Step 06 · HR / 財務的每月固定痛點

薪資試算神器 · 三段拆解

輸入
月薪(投保薪資)· 健保眷屬人數 · 勞退自提比例(0–6%)
Input
計算
勞保 6.56% · 健保 2.35% × 眷屬加乘 · 勞退自提 · 實拿金額
Compute
呈現
明細表格列出各項扣除 · 最後一行實拿薪資加粗加底線 · 含免責聲明。
Display
實戰技巧:法規數字每年會微調——不要把費率寫死,告訴 AI「在頁面頂部加可調整的費率欄位」,明年只要改一個數字。
Unit 2-1 · Payroll 每月固定省 30 分鐘
Act II · Unit 2-2
11 / 22
Chapter 2.2 · Logic Conversion Tools

邏輯轉換工具

排班 × 跨時區——
不是讓 AI 算數字,是讓它理解規則、套用條件

5 Slides·Rule + Example + Edge ·~60 min
Act II · Logic Conversion Unit 2-2
2-2 · Logic Pattern
12 / 22 講義 · 2-2
Step 01 · 比計算更複雜的工具長什麼樣

邏輯工具的核心模式

不是「算」,是「根據一堆條件,自動產出符合規則的結果」。

INPUT
使用者提供的資料:員工名單、可排日期、班次種類、個人限制
Data In
RULE
你定義的規則:每人每週最多幾班、哪幾天需要幾人、誰不能排哪個時段。
Logic
OUTPUT
AI 根據輸入和規則自動計算的結果:完整排班表、各人班數統計
Result Out
關鍵差異:Prompt 裡不只說「做什麼」,還要把所有規則完整列出來——規則越清楚,工具越準。
Unit 2-2 · Pattern Input × Rule = Output
2-2 · Shift Scheduler
13 / 22 講義 · 2-2
Step 02 · 真實辦公室場景的需求拆解

排班自動生成器 · 四區規格

員工設定
輸入員工名單(可新增/刪除)· 每位員工標記不可排日期
Staff
班次設定
早班(08–16)· 午班(12–20)· 晚班(16–24)
Shift
規則設定
每人每週最多排班天數 · 每天各班次需要的人數 · 週末可單獨設
Rule
輸出
表格式排班表(橫列日期 / 縱列員工)· 各員工週班數統計 · 重新生成。
Output

下一頁直接看完整 Prompt——複雜邏輯也只要五段話。

Unit 2-2 · Scheduler Excel 函數做不到 · AI 一句話搞定
2-2 · Scheduler Prompt
14 / 22 講義 · 2-2
Step 03 · 規則 + 邊界 · 兩件事一起寫

排班 Prompt · 關鍵段落

【生成邏輯】
點擊「自動生成排班」後,根據規則隨機分配班次
確保每位員工的班次不超過每週上限
不在員工標記「不可排班」的日期排班;
若無法滿足全部需求,在排班表下方顯示哪幾個時段人力不足
說「規則」:「每人每週最多 5 天」「同一人不能連續排兩天晚班」——條件句越具體越好。
說「邊界」:「無法滿足時怎麼辦」——加上這句,工具在真實場景才不會閃退或亂排。
Unit 2-2 · Prompt Rule + Boundary
2-2 · Timezone Coordinator
15 / 22 講義 · 2-2
Step 04 · 遠距/跨國團隊每週固定問題

跨時區會議協調板

選一個時間,所有時區即時對應——並標出「適合開會」的綠色時段。

Taipei · UTC+8
15:00
基準時間 · 你輸入的會議起點
Tokyo · UTC+9
16:00
+1h · 工作時段內,亮綠。
London · UTC+0
07:00
−8h · 太早,標灰色。
New York · UTC−5
02:00
−13h · 深夜,紅標警示。

附帶「複製會議時間」按鈕——一鍵生成跨時區文字,貼到 Email 或 Slack。

Unit 2-2 · Timezone Intl.DateTimeFormat API
2-2 · Logic Description Tips
16 / 22 講義 · 2-2
Step 05 · 通用心法 · 套到任何邏輯工具

描述複雜邏輯的五個技巧

Pipeline · 從規則到邊界,按 → 逐步點亮
01
用條件句
「若 09–18 顯示綠、若 00–07 顯示灰」——明確 if-then 比模糊描述準十倍。
02
舉具體例
「台北下午 3 點,東京應該顯示下午 4 點」——給驗證用的例子。
03
說邊界
無法滿足時,顯示哪些時段缺人」——邊界處理決定真實穩定性。
04
分段落
【輸入】【規則】【輸出】段落,AI 逐段理解、不漏功能。
05
給預設值
「預設顯示 5 個時區」——一打開就能用,不用從零設定。
Unit 2-2 · Five Tips If-then · Example · Boundary · Section · Default
Act III · Unit 2-3
17 / 22
Chapter 2.3 · UI/UX Upgrade

UI/UX 美學升級

同樣功能,視覺差距決定使用率——
一句話讓陽春工具脫胎換骨

4 Slides·Style + Detail Library ·~40 min
Act III · UI Upgrade Unit 2-3
2-3 · Why Visual Matters
18 / 22 講義 · 2-3
Step 01 · 同事不打開 · 不是功能的問題

第一印象 = 使用率

Before · AI 預設生成
陽春
灰底白框 · Times New Roman · 結果用純文字顯示——同事看一眼就關掉
After · 升級指令一句話
專業
卡片 + 圓角 · Noto Sans TC · 主色強調總額——同事願意學怎麼用
真正的差別:好的視覺不是裝飾,是使用者願意打開工具的理由——尤其在「給別人用」的場景。
Unit 2-3 · Visual ROI Function = 0 if no one opens
2-3 · Four UI Styles
19 / 22 講義 · 2-3
Step 02 · 一句指令切換 · 不需自己調 CSS

四種介面風格的升級指令

Style A · Material
科技感
藍色主調 · Roboto · 陰影層次——最像 Google 產品,適合科技簡報。
Style B · Card
商業款
白底 · 細陰影 · 圓角卡片——最通用的現代商業設計。
Style C · Dark
夜間用
深色背景 · 螢光強調——數據展示、長時間用、投影環境
Style D · Minimal
低調
無彩度 · 大量留白 · 精準線條——客戶提案用,高質感。

講義含四套完整指令文字——選一個貼進 AI Studio,工具立刻換裝。

Unit 2-3 · Styles One Sentence · Total Refresh
2-3 · Detail Command Library
20 / 22 講義 · 2-3
Step 03 · 講義裡每一條都可一鍵複製

細節升級指令庫 · 四大類

色彩 / 品牌
主色換成品牌橘 #E65100、左上加公司名、底部加版權——讓工具長得像你的
Brand
字體 / 排版
Noto Sans TC、行距 1.8、金額用等寬字——可讀性立刻拉開。
Type
動態 / 互動
按鈕 hover 加深 · 結果淡入動畫 · 載入時依序 fade-in——細節決定質感。
Motion
RWD / 列印
手機改縱向、按鈕全寬 · 列印樣式隱藏按鈕——一個工具三種場景。
Adapt
建議順序:先讓工具「能用」(計算對)→ 再「好用」(防呆 / 格式)→ 最後「順手」(複製 / 列印)。一次只做一件事。
Unit 2-3 · Library Function → Usable → Polished
Part 2 · Wrap
21 / 22
Part 2 收束 · 帶走的一句話
不會寫程式,沒關係
把痛點講清楚,比寫程式還值錢。
下一次 Excel 又拉壞,換你來指揮 AI
—— Part 2 收束 · 給課後三十天的提醒

三件武器到手:計算工具 · 邏輯轉換 · UI 升級——
下一個 Part,我們做能動的圖表

Part 2 · Wrap From Pain to Tool · in One Prompt
Next · Part 3
22 / 22
To Be Continued

Part 3 · 動的圖表

把 Part 2 做的計算結果
變成會動、會回饋、會說故事的視覺工具。

Coming Up·互動圖表 ·數據視覺化 ·動畫回饋
弄一下工作室·Gemini 零代碼 AI 實戰課