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

解鎖 AI 開發者模式

不寫程式,說清楚需求就好。
從文字直接生出能解決工作痛點的網頁工具

Vol.01 · Part One·Prompt × AI Studio ·Zero Code
Duration·1.5 小時授課 ·3 單元
弄一下工作室 Gemini 零代碼 AI 實戰課 · 打造你的專屬高效辦公神器 Part 1 of 5
Opening · Manifesto
02 / 22
Why Part 1 opens here
寫程式是 Gemini 的工作,
把需求說清楚是你的工作。
這就是 Part 1 要交給你的核心技能
—— Part 1 · 解鎖 AI 開發者模式

大多數人把 Gemini 當聰明聊天機
但你手上握的,其實是軟體架構師

Part 1 · Opening Gemini Zero-Code Workshop
This Part · Outcomes
03 / 22
Learning Outcomes · 1.5 小時帶走

三件事,離開教室就能用

不求做完,求知道下一步該按哪

Outcome 01
01
把 Gemini 當軟體架構師用,理解 AI Studio 與一般 Chat 的差別。
Outcome 02
02
黃金公式:角色+任務+限制+呈現,每次寫出能直接用的 Prompt。
Outcome 03
03
親手做出第一個 會議倒數計時器,存成 .html、雙擊即用。
Part 1 · 3 Units · 1.5hr CH1-1 / CH1-2 / CH1-3 + 3 PRAC
Act I · Unit 1-1
04 / 22
Chapter 1.1 · Mindset Reset

顛覆認知

Gemini 不是聊天機,
是你的軟體架構師

3 Slides·Concept · Compare · Workflow ·~25 min
Act I · Mindset Reset Unit 1-1
1-1 · Use Case Compare
05 / 22 講義 · 1-1
Step 01 · 你可能一直低估了它

同樣的 AI,兩種用法

A · 多數人的用法
寫信
「幫我寫一封請假信」
翻譯
「這段英文翻成中文」
整理
「整理這份會議記錄」
分析
「這個數據的趨勢是什麼」
B · 這門課教你的用法
建工具
「做一個自動報價計算機
建工具
「做一個跨時區會議對照器」
建工具
「做一個互動式銷售漏斗
建工具
「做一個排班自動生成器」

A 的結果是文字,看完就沒了。
B 的結果是工具,存成 .html,隨時打開、傳給同事。

Unit 1-1 · Use Case Shift 從「對話」到「建造」
1-1 · Why AI Studio
06 / 22 講義 · 1-1
Step 02 · 為什麼選 aistudio.google.com

不是 Chat,是開發環境

Advantage 01
完整輸出
不只給說明,直接吐可以複製貼上、立刻能用的完整程式碼。
Advantage 02
免費夠用
一般使用量在免費方案內完全夠用,不需要先花任何錢。
Advantage 03
持續迭代
同一個對話連續調整,「按鈕改藍色」這種接續指令直接能跑。

入口:aistudio.google.com · Google 帳號登入 · 建議用 Chrome。

Unit 1-1 · Google AI Studio 不是 Chat,是 Build
1-1 · The Core Skill
07 / 22 講義 · 1-1
Step 03 · 你不需要學程式
你需要學的,不是寫程式
是把需求說清楚的能力。
—— 換個方式理解:你不會切牆,但你要會說窗開哪

寫程式是 Gemini 的工作。
你的工作是需求描述力——這就是核心技能。

Unit 1-1 · The Core Skill 需求描述力 · Requirement Articulation
Act II · Unit 1-2
08 / 22
Chapter 1.2 · Golden Formula

溝通心法

角色+任務+限制+呈現,
讓 AI 每次都聽懂你要的

6 Slides·Bad → Good · Formula · Templates ·~30 min
Act II · Golden Formula Unit 1-2
1-2 · Why Vague Fails
09 / 22 講義 · 1-2
Step 01 · 模糊指令 → 模糊結果

同樣的需求,差距來自資訊量

A · 模糊指令
「幫我做一個計算器
AI 自由發揮 → 給最基本的四則運算,或只給說明文字,完全不是你要的
B · 用黃金公式
「你是資深前端工程師。做一個多層次報價計算機,輸入品項與單價,自動算含稅金額與利潤。只用純 HTML/CSS/JS,輸出單一 .html。」
欄位正確、邏輯正確、格式正確,直接可用

餐廳裡說「幫我做一份食物」,廚師也不知從何下手。
AI 也一樣,它需要四個資訊

Unit 1-2 · Vague vs Precise 差距 = 資訊量
1-2 · The Golden Formula
10 / 22 講義 · 1-2
Step 02 · 把這個公式刻在腦袋裡

黃金公式

角色任務限制呈現
Role · Task · Constraint · Format

這四個欄位缺一不可
不需要寫 // 角色 標籤——只要內容包含這四向,AI 就能讀懂。

Unit 1-2 · Golden Formula Role + Task + Constraint + Format
1-2 · Four Elements
11 / 22 講義 · 1-2
Step 03 · 每個元素該寫什麼

四個元素,各管一件事

Role · 角色
它是誰
給 AI 一個專業身份。寫前端工程師 → 程式工整;寫 UI 設計師 → 注重排版。
Task · 任務
做什麼
說明功能、使用者、要解決的問題。越具體越好,避免「做個計算器」。
Constraint · 限制
不能做
這門課鐵則:只用純 HTML/CSS/JS,不引外部套件,沒網路也能用。
Format · 呈現
長什麼樣
明確說「輸出完整單一 HTML 檔案,不要說明文字」。沒說 = AI 自由發揮。
Unit 1-2 · Four Elements Role · Task · Constraint · Format
1-2 · Full Prompt Walkthrough
12 / 22 講義 · 1-2
Step 04 · 把四個元素串起來

完整 Prompt 長這樣

角色
你是一位熟悉商業應用的資深前端工程師
Role
任務
請製作一個會議倒數計時器。輸入時長 → 倒數 → 大字顯示「分:秒」 → 時間到出警示。
Task
限制
只用純 HTML/CSS/JS,不引外部函式庫。介面簡潔,白色為主。
Constraint
呈現
輸出完整可執行的單一 HTML 檔案,不要附說明文字。
Format

講師當下示範:直接複製本頁四欄串成一段 → 貼到 AI Studio → 10–30 秒得到可用工具。

Unit 1-2 · Pipeline Role → Task → Constraint → Format
1-2 · Office Templates
13 / 22 講義 · 1-2
Step 05 · 直接借走的範本

兩個範本,明天就能用

範本 A · 計算工具類
你是熟悉台灣勞動法規的前端工程師。
薪資試算工具:輸入月薪 → 算勞健保員工負擔 → 顯示實拿,每項目明細清楚。
只用純 HTML/CSS/JS,介面簡潔。
輸出單一可執行 HTML,不附說明。
範本 B · 視覺展示類
你是擅長數據視覺化的前端工程師。
互動行銷漏斗圖:曝光/點擊/詢問/成交四階段,輸入數字自動算轉換率,hover 顯示細節。
純 HTML/CSS/JS(可用 SVG),不引外部套件。
輸出單一可執行 HTML,不附說明。

每做出一個好用工具,把對應 Prompt 存起來——這就是你自己的 Prompt 庫,會在 Part 4 詳細講。

Unit 1-2 · Office Templates Calc · Visualization
1-2 · Iteration in Same Chat
14 / 22 講義 · 1-2
Step 06 · 第一次不完美沒關係

同一個對話,直接調

改顏色
「把計算按鈕改成橘色
Style
加功能
「在結果下方增加一個『複製到剪貼簿』按鈕」
Feature
調排版
「把字體放大,行距也稍微加寬
Layout
補例外
「如果輸入負數,顯示錯誤提示」
Validation
重整版
「請根據目前最新版本,重新輸出完整 HTML」
Reset

每次調整 → AI 重出整份 HTML → 你覆蓋原檔就更新了。不需要自己改任何程式碼。

Unit 1-2 · Iteration 持續修改 · Same Chat Window
Act III · Unit 1-3
15 / 22
Chapter 1.3 · First Build

暖身實作

30 秒生出第一個工具——
會議倒數計時器

4 Slides·Spec · Steps · Prompt · Iteration ·~25 min
Act III · First Build Unit 1-3
1-3 · What You'll Build
16 / 22 講義 · 1-3
Step 01 · 你會做出這個

會議倒數計時器,規格五項

Spec 01
輸入時長
使用者輸入會議時長(分鐘),預設 25 分鐘。
Spec 02
大字倒數
點開始 → 倒數,剩餘時間以大字「分:秒」顯示。
Spec 03
5 分變紅
剩 5 分鐘以內,計時器變紅色,提醒時間快到。
Spec 04
歸零提示
時間到 → Web Audio 提示音 + 顯示「時間到!」
Spec 05
暫停重設
提供「暫停」「重設」按鈕,介面簡潔白色。
Bonus
會議室友善
適合投影到會議室,無需網路、雙擊即用。
Unit 1-3 · Spec Meeting Countdown Timer
1-3 · Five Hands-On Steps
17 / 22 講義 · 1-3
Step 02 · 從 Prompt 到可用工具 · 5 步驟

整個流程不到 3 分鐘

01 開站
瀏覽器輸入 aistudio.google.com,Google 帳號登入,選 New prompt + Gemini Flash
~10s
02 貼指令
複製本部右頁的完整 Prompt,貼到輸入框,按 Enter 送出。
~10s
03 複製碼
10–30 秒後 AI 輸出 <!DOCTYPE html> 開頭整段,按右上角「複製」。
~30s
04 存檔
記事本(Win)或 TextEdit 純文字(Mac),貼上,存成 meeting-timer.html
~60s
05 雙擊
找到檔案,雙擊,瀏覽器自動開啟——你的計時器完成了。
~5s

第一次慢慢來,熟了之後,整個流程不超過 3 分鐘

Unit 1-3 · Five Steps Prompt → Code → Save → Open
1-3 · Copy This Prompt
18 / 22 講義 · 1-3
Step 03 · 直接複製這段,貼到 AI Studio

會議倒數計時器 · 完整 Prompt

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

請製作一個「會議倒數計時器」網頁工具,功能需求如下:
· 輸入會議時長(分鐘),預設 25 分鐘
· 點「開始」進入倒數,大字顯示「分:秒」
· 剩餘 ≤ 5 分鐘時,計時器變紅
· 歸零時 Web Audio API 提示音 + 顯示「時間到!」
· 提供「暫停」「重設」按鈕
· 介面簡潔白色,適合會議室投影

只用純 HTML/CSS/JS,不引外部函式庫、CDN 或框架。
提示音用 Web Audio API 產生,不依賴外部音效檔

輸出完整可執行的單一 HTML 檔案,不附任何說明文字。

這就是把黃金公式四欄串起來的成品——對應 1-2 教的結構,照公式長出來的。

Unit 1-3 · Full Prompt Copy → Paste → Build
1-3 · Iteration Challenges
19 / 22 講義 · 1-3
Step 04 · 做完了?再練四題迭代

同一個對話,四個挑戰

改視覺
改顏色
「數字改深藍,背景改米白」——練習修改視覺樣式。
加功能
+5 分
「加一個『+5 分鐘』按鈕,倒數中可延長」——練習新增功能。
加欄位
主題
「加輸入框讓使用者填會議主題,顯示在計時器下方」。
調排版
手機
「讓這個工具在手機上也能好看顯示」——練響應式。

這四題每題都用同一個對話視窗下指令——感受「持續迭代」的真實節奏,這就是你以後做工具的常態。

Unit 1-3 · Challenges Style · Feature · Field · Responsive
Closing · Part 1 Recap
20 / 22
Part 1 · 你帶走的三件事

你已經會用

正確認知 · 黃金公式 · 完整流程——
三件事到手,剩下的全是延伸

Mindset·Formula ·Workflow
Part 1 · Closing Mindset + Formula + Workflow
Map · Part 1 Toolkit
21 / 22
一頁總覽 · 你今天裝進腦袋的工具

三層工具地圖

第一層
認知 · Gemini = 軟體架構師,AI Studio = 開發環境,你 = 需求描述者。
CH 1-1
第二層
公式 · 角色 + 任務 + 限制 + 呈現。每次生指令前自問四個欄位。
CH 1-2
第三層
流程 · Prompt → 複製 → 存 .html → 雙擊。3 分鐘做一個工具。
CH 1-3
演練包
PRAC 1-1 公式組合台 · PRAC 1-2 指令品質健診 · PRAC 1-3 會議模板產生器。
3 PRAC
下一步
Part 2 · 商務軍火庫——報價計算機、排班生成器、UI 美學升級。
→ Part 2
Part 1 · Toolkit Map 3 Layers + Practices + Next
To Be Continued · Part 2
22 / 22
Next · Part 2 · 打造你的商務軍火庫

下一站,真槍實彈

多層次報價計算機排班自動生成器
還有讓工具看起來像百萬開發的 UI 升級術。
—— Part 2 · 打造你的商務軍火庫
Part 2 · Coming Up·Calc · Logic · UI Polish
弄一下工作室·sky8697@gmail.com