Claude Code · 鮮乳坊企業內訓

會用 AI
會指揮 AI

Day 1:入門 + 做一頁自己部門用的網頁
3 小時後,你手上就有一份能直接打開的成果

2026-04-21 · v2.0
3 小時後你帶走的

一份自己部門能用的儀表板網頁

🐮 鮮乳坊門市日報 · 2026-04-21
今日訂單
1,827
▲ +8.2%
出貨瓶數
4,203
▲ +5.1%
異常工單
3
▼ −2
☐ 確認豐樂 2L 庫存
☐ 回覆 3 家客戶配送詢問
☐ 更新明日送貨路線

這不是給你抄的範本。

這是你等下親手做出來的一張網頁。打開檔案就能看,像打開 PDF 那樣簡單;手機也正常顯示,可以改成你部門每天真的要盯的數字。

你學的不是寫網頁——
你學的是怎麼跟 AI 講話,它才會照你的意思做

你在哪一組

12 位學員,三種背景,同一個終點

A 組 · 3 位
AI 新手
沒用過 AI 做工作。今天請全程跟著講師節奏,有助教陪讀。允許直接複製指令範本。
B 組 · 6 位
AI 中度使用者
用過 ChatGPT 寫文字、翻譯。今天第一次用「黑底白字的對話視窗」指揮 AI(像電影裡駭客打字那種),你會發現它比聊天機器人更像一個會動手做事的同事
C 組 · 3 位
進階 IT
已有寫程式經驗。做完主線不要等,領支線卡(Day 1 進階圖表/Day 2 讓 AI 連接其他工具/自訂自動觸發小助手)。
鐵則

不管哪一組,Karpathy 4 原則是共同語言。今天末尾每個人都會用上這 4 條。

Day 1 · 180 分鐘

時間軸

10 分鐘
開場 · 分組 · 規則
15 分鐘
下指令五原則(角色 / 情境 / 限制 / 格式 / 範例)—— 第一層:對 AI 講話的心法
15 分鐘
Karpathy 四原則(想清楚 / 保持簡單 / 精準只改 / 驗收導向)—— 第二層:請 AI 動手做事的心法
70 分鐘
主線實作:儀表板/替代:部門單頁
10 分鐘
驗收 · Day 2 預告
讀法

前 40 分鐘是「心法」,後 70 分鐘是「動手做」。不要急著打字,先把心法聽進去——否則你會像我見過的多數人一樣,對著螢幕生氣:「這個 AI 怎麼什麼都不懂?」(其實是它不懂你,因為你沒講清楚。)

1
第一層 · 下指令五原則

你每一次跟 AI 講話,
都應該有這 5 件事。

先看反例

同一句話,做出完全不一樣的東西

糟糕指令 漂亮指令
幫我做個儀表板
你是資深網頁設計師。我是鮮乳坊營運主管,每天早上 9 點要看一頁儀表板。限制:一個檔案就好、不要用複雜工具、手機打開不能跑版。格式:一個能直接雙擊打開的網頁檔。風格:像 Notion / Linear 那種乾淨俐落的感覺。
糟糕指令產出的儀表板:配色雜亂、排版奇怪
AI 亂猜出來的結果——像叫裝潢師傅「弄一間房間」,他搬來健身器材和燈飾。
漂亮指令產出的儀表板:配色柔和、排版整齊、每張卡片一個關鍵數字
照需求做出的乾淨版本——把坪數、預算、風格都講清楚,師傅交出能直接住的房間。

AI 只能用猜的。猜到的多半不是你要的

這段話包含了五件事——下一頁揭曉。

下指令五原則

角色 · 情境 · 限制 · 格式 · 範例

1
角色
「你是資深網頁設計師」——先給 AI 一個身分,它就會用那個身分的專業角度回答你。就像點餐時講「我要一位會做日式料理的師傅」,而不是只說「給我食物」。
2
情境
「我是鮮乳坊營運主管,每天早上 9 點看這個」——誰在用?什麼場合?AI 需要知道。就像跟設計師說「這是要給 70 歲阿嬤看的」和「這是要給大學生用的」,結果會完全不同。
3
限制
「一個檔案就好、不要用複雜工具、手機不能跑版」——把你不要的東西明確講出來。就像去髮廊講「不要打薄、不要染」,比起只說「剪短一點」更不容易踩雷。
4
格式
「一個網頁檔,我雙擊就能打開」——你要的成品長什麼樣、怎麼用。就像叫外送時註明「幫我切塊」、「醬料分開」,而不是任憑店家發揮。
5
範例
「像 Notion / Linear 的風格」——給一個參考,讓 AI 知道「好」長什麼樣。就像你拿網美照給髮型師看,比起描述十分鐘還更到位。
2
第二層 · 請 AI 動手做事的四原則

當你請 AI 幫你做出實際成品
多加這 4 條,踩雷機率減半。

為什麼還要再學 4 條

聊天跟動手做,本質不同

層面聊天問答(第一層就夠)請 AI 動手做(要第二層)
一次互動一問一答就結束通常要多次來回修正
出錯的代價重問一次就好改壞原本的檔案、整個亂掉
模糊容忍度AI 可以自己猜猜錯就真的做錯
「做完」的標準你看順眼就可以要有可以一條條打勾的驗收條件
出處

這 4 條原則的靈感來自 Andrej Karpathy(前 OpenAI、特斯拉 AI 負責人)公開分享的工作約定,他把自己請 AI 做事的規矩整理成一份指南,我們把它翻譯成人話。

Karpathy 四原則

想清楚 · 保持簡單 · 精準只改 · 驗收導向

🤔
想清楚再動
Think Before Coding
動工前,要 AI 先用自己的話複述一遍、問清楚疑問。就像裝潢師傅進場前先畫草圖給你看,而不是直接敲牆。
✂️
保持簡單
Simplicity First
只做必要的。不要預先為還沒發生的需求做準備。用最小改動達成目標即可——別請人拔智齒順便做全口矯正。
🎯
精準只改
Surgical Changes
只改該改的那幾個地方。其他看起來不順眼的部分只回報、不亂動。「順手幫你整理」是最常踩的雷。
驗收導向
Goal-Driven Execution
模糊的任務先轉成可以一條條打勾的條件。完成的定義是「清單全勾」,不是「看起來差不多」。
每個原則對應的踩坑

當 Claude違反原則時長什麼樣

原則違反徵兆你的反擊話術
想清楚再動連問都沒問就動手「你違反了『想清楚再動』,請先用你自己的話複述一次我要什麼」
保持簡單一次生出 300 行、塞一堆沒要求的功能「你違反了『保持簡單』,請只做最小雛形就好」
精準只改順手動到你沒叫他改的地方「你違反了『精準只改』,請把無關的部分還原回去」
驗收導向改完不告訴你怎麼確認對錯「請列出 3–5 條我可以逐項打勾的驗收條件」
本堂重要訓練

今天結束前,你會真的用過上面每一句話術。不會的不算你學到。

兩層合起來

第一個完整指令長這樣

【第一層:需求】 - 角色:資深網頁設計師 - 情境:我是鮮乳坊營運主管,每天早上 9 點看這個儀表板 - 限制:一個檔案就好、不要用複雜工具、不要深色模式、用系統預設字型 - 格式:一個網頁檔,我會雙擊在瀏覽器打開 - 範例:視覺風格參考 Notion / Linear 那種乾淨的資料卡 【第二層:動手做的規矩(嚴格遵守)】 1. 想清楚再動:開工前先用你的話複述需求給我確認 2. 保持簡單:只做我要求的,不要多 3. 精準只改:後續請你改哪裡只改哪裡,其他地方不動 4. 驗收導向:每改完一輪,告訴我「怎麼確認這輪對了」 【本輪任務】 先只做最小雛形:標題 + 3 張數字卡預留位 + 待辦區塊 + 趨勢區塊。 做完後告訴我:(1) 怎麼打開檢查 (2) 下一步建議。

這段就是你等下要用的第一個指令。手冊第 03 章已經整段準備好,你直接複製貼上就行。

3
動手做時間 · 70 分鐘

打開手冊,進入 milk-dashboard/ 資料夾,
在黑框視窗打 claude,準備真的做出東西

5 個 Step · 70 分鐘

實作節奏

Step 1 · 10'
下第一個指令,做出雛形(三個區塊的空格子)
Step 2 · 10'
把 3 張數字卡的內容補上(假資料、數字、變化箭頭)
Step 3 · 15'
調整外觀(字型、間距、分隔線)——練習「精準只改」
Step 4 · 10'
待辦清單可以打勾(勾選狀態存在瀏覽器裡,關掉還在)
Step 5 · 15'
7 日趨勢長條圖(用排版方式拉出來)
自由 · 10'
改成自己部門的版本 · 或領支線卡
黃金介入點 · Step 1 結束

全班暫停 1 分鐘

講師會問

「剛才誰的 Claude 一次就做對雛形?—— 舉手看看。
做出來不對的,你剛才那段指令漏了 5 原則裡的哪一條?」

這個 1 分鐘的回頭檢討,比前 30 分鐘講理論有用 10 倍。

✅ 一次就對

你的指令寫得夠完整。記住你的寫法,下一個 Step 繼續這樣。

❌ AI 亂做

對照 5 原則 + 4 原則看哪條漏了。不要直接去改成品——去改你給它的指令

Step 2 · 「精準只改」現場練

只改三張數字卡」

這句話是「精準只改」的核心。來看一下差別:

起點:原本的儀表板,三張數字卡留白等填內容
起點|原本的儀表板,三張數字卡等著填內容
不加這句 加這句
「請補數字卡的內容」
「請只改三張數字卡的區塊,其他區塊完全不要動」
AI 順手全部重改:字型、配色、排版都變了
AI 順手全部重改——字型、配色、排版都被動過,要花 5 分鐘比對。
只有指定區塊被動過:只有三張數字卡換了數字
只有指定區塊被動過——三張數字卡換了數字,其他完全沒動。
記住

AI 沒有「克制」本能。你沒說「只改 X」,它會當成「請整頁重新想過」。主動權在你的用詞

Step 4 · 網頁「會動起來」的第一次

待辦打勾 + 關了還記得

驗收條件(4 條)

  • 點一下小方框,會切換「打勾 / 沒打勾」
  • 打勾後,文字加刪除線、顏色變淡
  • 用網頁原生的小程式做,不要裝外掛工具
  • 打勾的狀態存在瀏覽器裡,重新整理還在(像瀏覽器自己的便利貼)
「驗收導向」實戰

4 條具體可打勾的行為,AI 沒話說。你一條條確認。

按 F12 叫出「檢查視窗」

這 30 秒的技能一生受用——在瀏覽器按 F12,會跳出一個藏起來的後台視窗。紅字就是網頁回報的錯誤。

看不懂沒關係,把紅色那段複製貼給 Claude,請它解釋並修正。重點不是會看英文,是知道「遇到壞掉要先按 F12」。

Step 5 · 最有挑戰的一段

7 日趨勢圖

主線 · 所有人 進階支線 · C 組

長條圖(用排版拉出來就好)

  • 7 個不同高度的長方形,像樂高積木排排站
  • 最高那根用主題色強調
  • 不要用額外的圖表工具
  • 滑鼠移上去,會顯示當天數字

平滑曲線圖(像氣象預報那種)

  • 用平滑曲線連接 7 個點
  • 每個資料點加一個小圓圈
  • 縱軸自動抓最大最小值
  • 線下方填淡淡的顏色(像氣象圖)
7 日長條圖:7 根不同高度的長方形,最高那根顏色較深
像 Excel 長條圖的單純版——7 根不同高度、最高那根顏色較深。
7 日平滑曲線圖:流暢的波浪線,下方有淺色陰影
像手機上的股票或體重曲線——流暢的波浪線,下方有淺色陰影。

A 組若卡住,照主線就好。「做得出來」比「做得漂亮」重要。

最後 10 分鐘

把儀表板變成你的

A 組新手
換部門名
把「🐮 鮮乳坊門市日報」改成「🏷️ 你部門日報」;數字卡的名稱、數字、待辦通通改成你今天真的在做的事。
B 組中間
換顏色組合 + 加一張數字卡
挑你部門真實使用的顏色主題;再加第 4 張數字卡。
C 組進階
三選一
① 讓網頁去讀另一個檔案的假資料
② 時段切換(今日 / 本週 / 本月)
③ 一鍵把儀表板存成圖片
我的部門不需要儀表板?

走替代路線

HR / 法務 / 行銷 / 財務 學員可改做「部門資訊單頁」,一樣 5 個 Step,一樣 70 分鐘,一樣學到 5+4 心法。

HR

新人報到日 Day 1 資訊卡

法務

合約審核流程 SOP 單頁

行銷

本月活動一頁式介紹

財務

月底請款流程 FAQ 頁

共同骨架

標題 + 摘要 + 3 張資訊卡 + 步驟清單 + 重要日期/聯絡方式。Day 2 一樣能擴充為全端版。

4
驗收 · Day 2 預告
2:50 驗收

你做到了嗎

  • 雙擊網頁檔能直接打開,不用額外架任何東西(不用接主機、不用裝程式)
  • 3 張數字卡顯示今日數字(或你部門的 3 張資訊卡)
  • 待辦清單至少 3 項,可以打勾
  • 7 日趨勢至少一個圖(或你部門的流程步驟清單)
  • 手機打開不會跑版、字也看得清楚
上台分享 30 秒

隨機抽 3 位上台:你做了什麼 · 最卡在哪 · 最開心哪一步。別緊張,這是給同學看見彼此進度。

這 3 小時你已經會的

四件事 · 很可觀

1. 寫出一段好指令

下指令五原則(角色 / 情境 / 限制 / 格式 / 範例)+ Karpathy 四原則(想清楚 / 保持簡單 / 精準只改 / 驗收導向),九條融合成一段話。

2. 用黑框視窗指揮 Claude 做事

從打開黑框對話視窗到做出檔案,你已跑完一次完整流程。

3. 當 AI 犯錯時能反擊

你不只會交代任務,也會糾正它。這是進階者才有的能力。

4. 做出一份可以給主管看的東西

不只學了概念,有實際成果。這是今晚回家可以秀給家人看的。

Day 2 預告

從「能看」到「能用

Day 2 開場
把今天的儀表板裝上「後台 + 資料倉庫」—— 資料真的存得下來,不會關了就消失
Zeabur 上線
產生一條網址,任何人(包括手機)都能打開你的儀表板
個人知識庫
把 Karpathy 4 原則寫進一份「AI 專屬筆記本」——從此你每次下指令不用再手貼一次
吊胃口

今天每次下指令都要把 Karpathy 四原則貼一遍。明天我會讓你再也不用貼——這是 Day 2 的真正禮物。

End of Day 1

帶著你的
第一個作品 回家。

今晚你會很想打開它給家人或主管看。
明天早上醒來會想「我昨天真的做出這個?」

這就是下指令五原則+ Karpathy 四原則送你的禮物。

Day 2 見 · 有問題請發到Line群組
1 / 25
← → 切換 · F 全螢幕 · N 顯示講者備註