← → 翻页 · ESC 索引
Vol.03 · Part Three
01 / 22
Gemini 零代碼 AI 實戰課 · Part 3

讓數據動起來的視覺魔法

把 Excel 截圖丟掉,
學會用一句話,讓 AI 生出可 hover、可縮放、會動的 SVG 互動圖表

Keyword·SVG Interactive Chart ·Prompt Recipe ·Data Storytelling
Duration·3 小時授課 ·6 單元
弄一下工作室 Gemini 零代碼 AI 實戰課 · Part 3 Part 3 of 4
Opening · Manifesto
02 / 22
Why Part 3 opens here
老闆問「這個數字能點開看嗎」,
你只能說「那只是一張圖」。
這堂課之後,你的圖會說話
—— Part 3 · 從靜態截圖到互動圖表

同樣的數字,互動呈現的說服力,
遠比靜態報表強。

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

三件事,下週簡報就能用

不用學 D3.js,不用會寫程式,只用一段對話

Outcome 01
01
看懂 SVG 與截圖的根本差異,認得辦公室常用的 4 種互動圖表類型。
Outcome 02
02
掌握 SVG 圖表 Prompt 的 5 個關鍵要素,做出可互動的路徑圖與漏斗圖。
Outcome 03
03
完成 3 個演練工具:雷達圖、甘特圖、KPI 儀表板,下週直接上工。
Part 3 · 6 Units 3hr · CH3-1 / 3-2 / 3-3 + PRAC3-1 / 3-2 / 3-3
Act I · Unit 3-1
04 / 22
Chapter 3.1 · SVG Interactive Chart 101

什麼是 SVG 互動圖

為什麼你需要它,
而不是一張 JPG 截圖

5 Slides·Concept + Recipe ·~40 min
Act I · SVG 入門 Unit 3-1
3-1 · JPG vs SVG
05 / 22 講義 · 3-1
Step 01 · 截圖的天花板

同一張圖,兩種命運

JPG / PNG · 靜態截圖
一次性
放大就糊、改數字要重截、只能看不能點。老闆要細節,你只能說「等一下查」。
Result·會議卡關
SVG · 向量互動圖
會說話
無限縮放永遠清晰、改數字即時更新、hover 顯示明細。老闆問什麼直接 hover 給他看。
Result·當場成交

把互動圖表 HTML 直接開在瀏覽器簡報——比 PowerPoint 的靜態圖更有說服力

Unit 3-1 · 截圖 vs 互動 JPG → SVG
3-1 · What is SVG
06 / 22 講義 · 3-1
Step 02 · 一句話理解

SVG = 用數學描述的圖形

JPG 用像素點構成 → 放大就糊。
SVG 用數學公式構成 → 放多大都銳利。

SVG 是文字格式
所以 CSS 能控樣式、JS 能加互動。
這就是為什麼 AI 能「寫」一張圖出來。
向量
無限縮放永遠清晰,印刷品質、4K 投影都不糊。
vector
文字
每個元素都能被選中、被改色、被綁事件。
selectable
活的
CSS 加進場動畫、JS 加 hover/click——數據會說話
interactive
Unit 3-1 · SVG 本質 Math + Text + Interactivity
3-1 · 5 Prompt Elements
07 / 22 講義 · 3-1
Step 03 · 告訴 AI 做 SVG 圖的 5 個要素

少寫一個,圖就死了

01 · 類型
幾個節點?幾條資料?橫軸是時間還是類別
type + structure
02 · 互動
hover 顯示什麼、點擊做什麼,不寫就是純靜態
hover · click
03 · 動畫
進場動畫的方向與時序,例:由下往上長 + 0.1s 延遲
enter motion
04 · 編輯
數字寫死還是讓使用者輸入框改?圖即時跟著變
data-editable
05 · 風格
SVG 色彩獨立於 HTML,要另外指定主色與調性
color · style
必加禁用條款:「不引入 D3.js / Chart.js 等外部套件,只用原生 SVG + JS」。
Unit 3-1 · 五要素速查 ★ 開講義對照
3-1 · Four Chart Types
08 / 22 講義 · 3-1
Step 04 · 辦公室最常用的四種互動圖

本 Part 各教一種核心做法

Flow · 流程路徑圖
3-2
節點 + 連線。專案計畫、SOP、決策樹。hover 看每個節點細節。
Funnel · 轉換漏斗
3-3
由上而下漸縮。行銷報告、業務追蹤、電商分析。流失感最直觀。
Radar · 能力雷達
P1
多維度雷達。個人能力、團隊評估、產品比較。一眼看出短板。
Gantt · 時程甘特
P2
橫向時間軸。專案管理、產品路線圖。可看哪段是關鍵路徑。

第五張長條與折線已經會了——本 Part 直接上路徑圖、漏斗、雷達、甘特,外加 KPI 儀表板。

Unit 3-1 · 四種圖表 Flow · Funnel · Radar · Gantt
Act II · Unit 3-2
09 / 22
Chapter 3.2 · Dynamic Project Path

動態專案路徑圖

每個節點都能 hover 展開、
讓複雜流程一眼看清楚

4 Slides·Prompt + Pipeline ·~40 min
Act II · 流程視覺化 Unit 3-2
3-2 · Static vs Dynamic Flow
10 / 22 講義 · 3-2
Step 01 · 為什麼要做成互動的

PowerPoint 的流程圖,禁不起一句話

PPT 靜態流程圖
一句話破功
畫一小時、改一節點重畫、節點細節全擠在小字裡。老闆問「這步驟可以點開看嗎」就破功。
Pain·畫的累、看的累
SVG 動態路徑圖
會回答問題
每個節點 hover 展開說明、點擊切換狀態(待辦/進行/完成)。複雜流程一眼看清楚。
Win·主畫面乾淨、細節隨叫隨到

這是「資訊密度分層」——主畫面只放骨架,細節藏在 hover 裡。

Unit 3-2 · 為什麼要互動 Static → Dynamic
3-2 · Path Diagram Prompt
11 / 22 講義 · 3-2
Step 02 · 路徑圖 Prompt 範本(照抄即可)

5 要素填進這個骨架

請用原生 SVG + JS做一個 HTML 檔,內容是「新產品上市流程」的動態路徑圖
5 個節點橫向排列:發想 → 設計 → 開發 → 測試 → 上線,節點間用箭頭連接。
hover 任一節點時,顯示 tooltip 卡片(含節點名稱、負責人、預計天數)。
點擊節點切換狀態:未開始(灰)→ 進行中(黃)→ 完成(綠)。
進場動畫:節點依序由左至右淡入(每個延遲 0.15s)。
⑤ 主色 #0a1f3d,背景米白 #f1f3f5。
不引入任何外部套件(D3 / Chart.js 都禁),整段程式 inline 在單一 HTML。

這份 Prompt 每行都對應一個關鍵要素——少寫一行,圖就少一個能力。

Unit 3-2 · Prompt Recipe ★ 講義含完整版 + 自訂指南
3-2 · Build Pipeline
12 / 22 講義 · 3-2
Step 03 · 從 Prompt 到上線的五步

30 分鐘做出第一張可互動路徑圖

01
列骨架
在紙上畫 5 個節點 + 連線,先決定主流程,不管細節。
02
填細節
每個節點寫 標題 / 負責人 / 預計天數——這就是 hover 內容。
03
套 Prompt
把上面骨架填進路徑圖範本,丟給 Gemini,等 30 秒。
04
存 HTML
把 AI 給的程式碼存成 .html,雙擊開啟在瀏覽器試 hover 與點擊。
05
追加微調
同一個對話追問:「加上完成度百分比進度條」—— AI 直接改檔。
Unit 3-2 · 五步流程 骨架 → 細節 → Prompt → HTML → 追加
Act III · Unit 3-3
13 / 22
Chapter 3.3 · Sales Funnel Dashboard

互動式銷售漏斗

同樣的數字,
互動呈現的說服力遠比 Excel 強。

4 Slides·Funnel + KPI ·~40 min
Act III · 數據儀表板 Unit 3-3
3-3 · Why Interactive Funnel
14 / 22 講義 · 3-3
Step 01 · Excel 表格 vs 互動漏斗

會議桌上,誰先開口問細節

老闆問「這個月成交率多少?」——
是切到 Excel 找儲存格,還是直接 hover 漏斗階段

流失感
漏斗的視覺漸縮,比表格的數字更直接讓人看到流失。
visual loss
轉換率
hover 任一階段,立刻顯示該階段轉換率與流失量。
hover stats
說服力
「會動」這件事本身,就是「我們真的有在追蹤這件事」的訊號。
credibility
客製化
同一份程式,改數字不用改圖——下個月直接套用。
reusable
Unit 3-3 · 為什麼要互動 Visual + Hover + Credible + Reusable
3-3 · Funnel Prompt
15 / 22 講義 · 3-3
Step 02 · 漏斗圖 Prompt 範本(照抄即可)

銷售漏斗四階段標準骨架

請用原生 SVG + JS做一個 HTML 檔,內容是銷售漏斗儀表板
4 個階段由上而下漸縮:曝光 10000 → 點擊 2400 → 詢問 580 → 成交 142。
hover 任一階段,顯示 tooltip:人數、佔上層 %、佔總曝光 %。
③ 階段之間用細小數字標顯示流失人數(紅色)與轉換率(綠色)。
④ 進場動畫:四階段由上而下依序展開(每段延遲 0.2s)。
⑤ 主色 #0a1f3d,警示色 #c9963a,達標色 #5a7a5a。
⑥ 頁面頂端提供四個輸入框,使用者改數字時漏斗即時更新。

輸入框 + 即時更新是這份的關鍵——下個月你只要改 4 個數字。

Unit 3-3 · Funnel Recipe ★ 講義含追加指令版
3-3 · Advanced Tweaks
16 / 22 講義 · 3-3
Step 03 · 第一版做完之後追加這 5 招

同一個對話繼續追問,AI 直接改檔

+ 對比月份
加上上個月對照,淡灰色顯示在每階段右側」——A/B 對比一秒到位。
comparison
+ 警示色
轉換率低於 15% 的階段,數字改紅色」——問題階段自己跳出來。
threshold
+ 點擊鑽取
「點擊任一階段展開該階段細項」——主畫面乾淨、細節隨叫。
drill-down
+ 匯出資料
「右上角加『匯出 CSV』按鈕」——當場給老闆原始檔。
export
+ 行動裝置
手機螢幕下漏斗自動縮放、tooltip 改長按觸發」——平板簡報無縫。
responsive
Unit 3-3 · 追加 5 招 對比 · 警示 · 鑽取 · 匯出 · 行動
Act IV · Practice
17 / 22
Practice · 9 / 10 / 11

動手做三件套

雷達圖、甘特圖、KPI 儀表板——
每一張都有 Prompt 速查、每一張都直接帶回辦公室用

3 Practices·Radar · Gantt · KPI ·~60 min
Act IV · 實例演練 PRAC3-1 / 3-2 / 3-3
PRAC 3-1 · Skill Radar
18 / 22 講義 · PRAC3-1
Practice 09 · 技能評估雷達圖

輸入技能 + 分數,即時生成雷達圖

輸入 · Inputs
5–8 個技能名稱(中英皆可)
每項 0–10 分整數
(可選)對照標竿團隊平均
輸出 · Outputs
多邊形雷達圖(你 + 標竿同框)
hover 任一頂點顯示分數與差距
短板自動標紅(低於標竿 2 分以上)
最常見場景
個人成長追蹤、年度績效對話、團隊能力盤點、面試前自評。
use case
講師現場示範
學員自己的技能清單當場跑一張——比給範例更有感。
live demo
Practice 09 · 雷達圖 ★ 講義含完整 Prompt + 工具版
PRAC 3-2 · Project Gantt
19 / 22 講義 · PRAC3-2
Practice 10 · 專案時程甘特圖

輸入任務 + 起日 + 天數,自動畫時程

輸入 · Inputs
任務名稱清單(5–15 個)
每筆 開始日期 + 持續天數
(可選)負責人與依賴關係
輸出 · Outputs
橫向時間軸 + 任務條
hover 任務條顯示負責人與里程碑
關鍵路徑自動加粗紅框
最常見場景
產品上市計畫、活動籌備、新人 30 天 onboarding、季度衝刺。
use case
講師提示
學員第一張通常時程亂套——當場 hover 給他看哪段重疊,立刻有感。
teaching tip
Practice 10 · 甘特圖 ★ 講義含進階版(拖曳調整)
PRAC 3-3 · KPI Dashboard
20 / 22 講義 · PRAC3-3
Practice 11 · KPI 成果儀表板

多項 KPI 一頁讀完,達成狀況顏色說話

輸入 · Inputs
每項 KPI:名稱 / 目標值 / 實際值 / 單位
(可選)趨勢方向(高好 / 低好)
(可選)對照上期數值
輸出 · Outputs
卡片 + 進度條(每 KPI 一張)
達成 ≥100% 、80–99% 、<80%
hover 顯示差距 + 上期比較
最常見場景
月會、季度 review、主管早會看板、行銷活動結案。
use case
講師收尾
這張圖通常成為學員的「月報神器」——同一份程式用一年。
payoff
Practice 11 · KPI 儀表板 ★ 月報神器
Closing · Manifesto
21 / 22
What you take home
不是學「會做圖」
是學「把每張圖變成可重複用的工具」。
下個月、明年——同一份檔案還在工作
—— Part 3 · 收束

5 個 Prompt 要素 × 4 種圖表類型 × 3 個演練工具
= 下週簡報就能用

Part 3 · Closing From Screenshot to Tool
End · Vol.03
22 / 22
To Be Continued · Part 4

End of Part 3

下一站 Part 4 · 成果發表與未來工作流——
把今天做的工具部署、分享、長期維護

Next·Part 4 · Deploy & Share ·3 Units