前言

昨天嘗試了第一個小練習之後，你應該有被 AI 詢問你一些問題，並且問過你一次「可以改嗎？」，然後由你決定是否按下「Yes」同意它改檔案。

但...用久之後，你應該會發現 AI 的確認視窗出現得很頻繁，然後人類的天性就會發作「開始無腦」按 Yes，一路按到最後，然後你就會發現「啊！我不小心把整個專案都改壞了！」。

所以這邊我們要來把這個 「Permission」的機制好好講清楚，讓你知道哪些操作會被詢問、哪些不會被詢問，然後你就可以在不被煩死的情況下，還能保護你的專案不被亂改。

AI 的門禁機制

還記得昨天這張圖嗎？

可以看到儘管是我們自己要求 AI 幫忙打開瀏覽器，它依然會詢問你：「你同意我打開瀏覽器嗎？」。

奇怪，明明是我們自己下這個 Prompt：

請幫我開啟 index.html，我想使用瀏覽器看看結果。

為什麼它還要問我們？這就是這章節要介紹的「Permission」機制，也就是權限機制。

這個機制並不侷限於 Claude Code，其他 AI Agent 工具都有相似的機制，而這個機制將會決定哪些操作會被允許，哪些操作需要經過使用者的確認，而且這並不是隨機性的。

Permission 核心機制

Permission 核心機制其實很簡單，主要是依照操作是否會在你的電腦上留下痕跡來決定，其實就是兩種操作：

• 會留下痕跡（記錄）的操作
• 不會留下痕跡（記錄）的操作

什麼意思呢？你可以想像成 AI 在做每一件事情之前都會先問過自己一次一個問題

「我做這件事情，會不會在這台電腦上留下痕跡？如果會，我就要停下來問使用者是否同意。」

反之，如果只是單純 看/讀取 檔案或是 搜尋 這種大多都不會詢問你。

但！如果是改檔案、建立/新增檔案等操作，這些操作只要會在電腦上留下痕跡（記錄）的行為，那麼預設情況下，就會停下腳步讓你知道它即將做什麼事情。

好吧，我知道你看到這邊可能覺得文謅謅了，那就記住這句話就好：

看不用問，動才要問。

理解這個門禁機制的大概念之後，你才會知道 AI 詢問這些並不是一個擾人擾民的行為，而是它正在做一些 「可能」 會在你的電腦上留下痕跡的事情，所以它才會停下來問你這句話：

「我可以這樣做嗎？」

Note
這邊要注意一下，同一個指令沒被詢問權限並不代表以後都不會問，也不代表它就是絕對的安全，這些基本上都跟你目前的模式、之前核准過的規則有關。

搞懂六種權限模式

搞懂最基本的門禁機制概念之後，接下來就要在深入了解一下權限模式。

首先，我們先做一點小實驗，請你跟昨天一樣進到 claude-playground 資料夾啟動 Claude Code，接著試著在畫面上按幾下 Shift+Tab，你會看到輸入框附近的模式會一直輪流切換以下：

1. manual mode on
2. accept edits on
3. plan mode on
4. auto mode on（不一定每個人都有，等等會解釋）

這幾個就是你平常使用 AI 會用到的權限模式（記得切回 manual mode on）。

這邊也特別補充一個有趣的事情，如果你有特別去翻官方文件（Permission modes（官方文件））的話，你會發現跟你畫面上看到的名稱不太一樣，例如...官方文件的 default 模式，其實對應的是 manual mode on，所以底下這邊我也幫你組合起來：

這邊要把 accept edits on（acceptEdits）特別拉出來解釋一下，基本上這個模式下，它會把常見的檔案編輯與檔案系統指令自動放行，例如...

• 建立資料夾（mkdir）
• 搬移（mv）
• 刪除（rm）

諸如此類這種類似的指令都變成預設同意，這樣就不用每次都問你「可以嗎？」，但你還是要養成習慣看清楚 AI 打算幹嘛，因為我就曾遇過 AI 把我的專案資料夾整個搬到別的地方一度找不到東西。

接著稍微講一下官方文件的部分，官方文件裡面有列出來的權限模式總共六種，除去上面介紹的四種之外，還有另外兩種模式，分別是：

• dontAsk： 這個模式下只要出現會詢問權限的一律都會拒絕，只跑你預先允許過的操作，這個很適合給自動化腳本（讓程式自己跑 AI Agent 的場景）用的，所以它不會出現在 Shift+Tab 中。
• bypassPermissions： 不問你任何權限問題，直接允許通通通過，但我個人非常不建議你隨便使用，這個模式基本上是給沙盒（Sandbox, 一種跟你電腦隔離開的環境）用的，如果你隨便在自己的電腦上開這個模式，那就等同於把自家鑰匙直接交出去大門敞開，這個模式也不會出現在 Shift+Tab 中，是需要特別在啟動指令上加參數才會出現的。

所以額外的 dontAsk 跟 bypassPermissions 這兩個模式，是必須搭配啟動指令的參數才會出現的，平常你是切不到的，啟動方式我也提供給你參考（請不要隨便拿來用）：

# 啟動 dontAsk 模式
claude --permission-mode dontAsk
# 啟動 bypassPermissions 模式
claude --permission-mode bypassPermissions

bypassPermissions 如果要使用，請務必確認你正在處於隔離環境（Sandbox）中，否則你某天就會成為社群上的災難故事主角。

Plan Mode（計畫模式）

Plan Mode 這個模式非常推薦使用，也是我個人最常使用的模式，也就是先計畫、先思考，再來決定是否動手。

開啟 Plan Mode 之後，AI 會變成唯讀狀態，它只能讀取你的專案、做研究，但一個檔案都改不了。

我們講了那麼多，不如實際嘗試一下，還記得昨天我們的練習檔做到哪裡嗎？你應該會停留在這個需求：

按鈕的文字是「更改背景顏色」，而不是「按我」

如果找不到或者沒有的話，你也可以透過 GitHub #day5 找到相關的練習檔案。

今天我們要來嘗試使用 Plan Mode 替這個練習頁增加一些東西，讓它變成一頁簡單的個人簡介，剛好這個簡介需要一次加入三個區塊，很適合拿來練 Plan Mode。

所以請你啟動 claude 進入 Claude Code 後，並對著終端機輸入框按 Shift+Tab 切換到 plan 模式

確認已經切換到 plan mode on 後，接著請你在輸入框裡面複製貼上以下文字：

我想在 index.html 這個頁面加上三個區塊：自我介紹、技能清單、聯絡方式。
原本的標題跟「更改背景顏色」按鈕都要保留。

Note
為了避免 AI 沒有與你建立資訊對等，所以記得先跟 AI 說 這個資料夾裡面有什麼？index.html 裡面有什麼東西？，再接著說上面這段文字，這樣它才會知道你希望它做什麼事情。

接著你應該會有滿高機率看到這個畫面：

為什麼會問這些呢？畢竟我們要求的任務（Prompt）就是有空洞，所以才會出選項題給你，盡可能減少 AI 做出不符合你預期的修改。

接下來你會看到 AI 給你一大串資訊，這個就是 Plan Mode 的精髓所在，它會先研究你的專案，然後交出一份計畫給你，讓你決定要不要同意它執行，底下我也貼上完整的計畫內容給你參考：

Ready to code?

Here is Claude's plan:
在 index.html 加上三個區塊

Context

day-5/claude-playground/index.html 目前只有 17 行：一個 <h1>、一句「目前這裡什麼都還沒有。」、一個外部連結，以及一顆會隨機換背景色的按鈕。這是 vibe coding 練習頁，內容還沒長出來。

這次要補上自我介紹、技能清單、聯絡方式三個區塊，並保留原本的標題與換背景色按鈕。內容先用中性的範例文字（不編造個人資訊），之後由 Ray 自己替換；同時加一小段 inline CSS，讓多了三個區塊之後的頁面仍然好讀。

沿用現在的單檔風格：不引入外部字型、不做深色模式、不拆檔案。

要改的檔案

只有一個：day-5/claude-playground/index.html

具體做法

1. 保留不動的東西

- <h1>Hello，這是我的 Vibe Coding 練習頁</h1> — 原字不動
- 按鈕 <button type="button" id="bgBtn">隨機換背景色</button> 與底部那段 <script> — 完全不動，包含 id="bgBtn"

2. 兩處會調整（請在核准時確認）

- 第 8 行「目前這裡什麼都還沒有。」：加了三個區塊之後這句話就不成立了，建議換成一句簡短的開場白（範例文字）。若想留著，說一聲即可。
- 第 9 行 israynotarray.com 連結：建議搬進「聯絡方式」區塊，避免它孤零零卡在標題和區塊之間。連結本身與 target="_blank" 保留，順手補上 rel="noopener noreferrer"。

3. 新增結構

在標題之下、按鈕之上，放一個 <main>，內含三個 <section>，各自以 <h2> 開頭：

┌──────────┬─────────────────────┬───────────────────────────────────────────────────────┐
│   區塊   │      標籤結構       │                       範例內容                        │
├──────────┼─────────────────────┼───────────────────────────────────────────────────────┤
│ 自我介紹 │ <h2> + 一到兩段 <p> │ 「我是 OOO，目前主要做前端開發⋯⋯」這類中性敘述        │
├──────────┼─────────────────────┼───────────────────────────────────────────────────────┤
│ 技能清單 │ <h2> + <ul><li>     │ HTML / CSS / JavaScript / Git 等，附一句簡短說明      │
├──────────┼─────────────────────┼───────────────────────────────────────────────────────┤
│ 聯絡方式 │ <h2> + <ul><li>     │ Email（mailto: 佔位字串）、部落格連結、其他社群留一項 │
└──────────┴─────────────────────┴───────────────────────────────────────────────────────┘

每個範例值旁邊放一則簡短 HTML 註解標示「改這裡」，方便日後替換。

同時在 <head> 補一行 <meta name="viewport" content="width=device-width, initial-scale=1"> — 加了版面寬度限制之後，手機上沒有這行會被縮放。

4. CSS 範圍

寫在 <head> 的一段 inline <style>，只做四件事：

- body：系統字型堆疊、line-height: 1.7、max-width 約 40rem 置中、內距
- section：區塊之間的上下間距
- ul：清單項目間距
- button：一點內距與 cursor: pointer

關鍵限制：不要對 body 以外的元素設定 background。按鈕的 JS 是把顏色寫進 document.body.style.backgroundColor（inline style），只要 section / main 沒有自己的底色，換背景色的效果就會照常穿透整頁。body 本身可以給預設底色，inline style 優先度更高，不會互相打架。

不加：外部字型、深色模式、favicon、動畫、CSS 變數。

驗證

1. 直接用瀏覽器開啟 day-5/claude-playground/index.html
2. 確認三個區塊都在，標題文字沒被改掉，版面在桌機與窄視窗下都好讀
3. 點「隨機換背景色」數次 — 整頁底色要跟著變，三個區塊不能出現白色色塊蓋住背景
4. 開 DevTools Console 確認沒有錯誤（getElementById('bgBtn') 不能變成 null）

Plan 的計畫出來之後，下面會出現一些選項，分別是：

• Yes, and use auto mode（同意執行，並切換到 auto mode）
• Yes, manually approve edits（同意執行，並切換到 manual mode）
• Tell Claude what to change（不同意執行，並告訴 Claude Code 要修改的地方）

選項的文字依版本可能會略有不同，意思對得上就好，但請你先 不要按下 Yes, and use auto mode，而是先按下 Esc 鍵離開選單，因為我們只是先體驗一下 Plan Mode 的流程而已。

體驗之後，我們回來繼續講一下 Plan Mode 的一些重點，在 Plan Mode 下我會非常建議你好好閱讀計畫內容，像是...

• 它打算動/改哪些檔案（有沒有超出你的預期範圍？）
• 步驟的順序合不合理？

如果你擔心 AI 講的話你都無法看懂（如一堆技術術語），你可以在「Tell Claude what to change」裡面要求它用更簡單的方式解釋，這也是一種有效理解它要做什麼事情的方式技巧之一。

這樣才不會讓你有一種 「它做了什麼我都不知道」 的感覺，因為這個模式就是要讓你先看計畫、再決定要不要動手。

可控失敗練習：修改剛剛的 Plan Mode 計畫

認識完這些之後，我們要來嘗試與體驗 Plan Mode 的另一個重點：修改計畫。

以剛剛來講，我們已經按 Esc 離開選單並回到一開始的輸入框了，但其實我們的對話視窗中前面一樣包含剛剛的計畫內容

這時候我們要來嘗試修改計畫，請你在輸入框裡面複製貼上以下文字：

這份計畫先不要執行，請修正後再給我一次：

1. 聯絡方式不要放 email，改成 GitHub 和 Threads 連結。
2. 只改 index.html，不新增套件或其他檔案。
3. 幫我把名字補上連結，連結是「https://israynotarray.com/」，並且 target="_blank"。

除此之外，也請你在新版計畫最前面列出「不會做的事」。

接著你就會得到這一大串的計劃書內容：

Ready to code?

Here is Claude's plan:

index.html 加上三個區塊（修正版）

不會做的事

- 不新增任何檔案：不建 style.css、script.js、README，也不動 day-4 或其他資料夾
- 不安裝任何套件：沒有 npm、沒有 build 工具、沒有 package.json
- 不引入外部資源：不載 Google Fonts、不載 CDN、不加 favicon、不放圖片
- 不放 email：聯絡方式只有 GitHub 與 Threads 兩個連結，不出現 mailto:
- 不動按鈕與那段 JS：id="bgBtn" 與換背景色的 <script> 原封不動
- 不改 <h1> 標題文字
- 不做多餘設計：不加深色模式、CSS 變數、動畫、RWD 斷點

Context

day-5/claude-playground/index.html 目前 17 行：一個 <h1>、一句「目前這裡什麼都還沒有。」、一個外部連結、一顆隨機換背景色的按鈕。

次要補上自我介紹、技能清單、聯絡方式三個區塊，保留原本的標題與按鈕。內容用中性範例文字（不編造個人資訊），日後自行替換；同時加一小段 inline CSS 讓版面好讀。全部改動都在同一個檔案內。

改的檔案

day-5/claude-playground/index.html — 僅此一個。

體做法
1. 保留不動

- <h1>Hello，這是我的 Vibe Coding 練習頁</h1> 
- <button type="button" id="bgBtn">隨機換背景色</button> 與底部整段 <script>

2. 兩處調整

- 第 8 行「目前這裡什麼都還沒有。」：三個區塊補上之後這句就不成立了，改成一句簡短開場白（範例文字）。想留著的話說一聲。
- 第 9 行原本孤立的 israynotarray.com 連結：移除。它的角色由下面「自我介紹」裡的名字連結接手，避免同一個網址在頁面上出現兩次。

3. 三個區塊

在標題之下、按鈕之上放一個 <main>，內含三個 <section>，各以 <h2> 開頭：

自我介紹 — <h2> + 一到兩段 <p>。名字要做成連結：

<p>我是 <a href="https://israynotarray.com/" target="_blank" rel="noopener noreferrer">是 Ray 不是 Array</a>，目前主要做前端開發⋯⋯</p>

顯示文字之後可自行改成想用的名字，href 固定為 https://israynotarray.com/。rel="noopener noreferrer" 是搭配 target="_blank" 的安全慣例，順手補上。

技能清單 — <h2> + <ul><li>，列 HTML / CSS / JavaScript / Git 等，每項附一句短說明。

聯絡方式 — <h2> + <ul><li>，兩個項目：

┌─────────┬──────────────────────────────────────┬────────────────────────────────────────────────────────┐
│  項目   │                 href                 │                          備註                          │
├─────────┼──────────────────────────────────────┼────────────────────────────────────────────────────────┤
│ GitHub  │ https://github.com/hsiangfeng        │ 從這個 repo 的 git user 推測，請核對；不對就直接改字串 │
├─────────┼──────────────────────────────────────┼────────────────────────────────────────────────────────┤
│ Threads │ https://www.threads.net/@ + 佔位帳號 │ 我不知道帳號，先留佔位並標註 TODO                      │
└─────────┴──────────────────────────────────────┴────────────────────────────────────────────────────────┘

兩個都加 target="_blank" rel="noopener noreferrer"。

每個要替換的範例值旁放一則短 HTML 註解標示「改這裡」。

另外在 <head> 補一行 <meta name="viewport" content="width=device-width, initial-scale=1"> — 加了寬度限制後，手機上少這行會被縮放。

4. CSS 範圍

<head> 內一段 inline <style>，只做四件事：

- body：系統字型堆疊、line-height: 1.7、max-width 約 40rem 置中、內距
- section：區塊上下間距
- ul：項目間距
- button：內距與 cursor: pointer

關鍵限制：除了 body 之外，任何元素都不設 background。按鈕的 JS 是把顏色寫進 document.body.style.backgroundColor（inline style），只要 main / section沒有自己的底色，換色效果就會照常穿透整頁。

驗證

1. 瀏覽器直接開 day-5/claude-playground/index.html
2. 三個區塊都在，<h1> 文字沒被改動，桌機與窄視窗下都好讀
3. 點「隨機換背景色」數次 — 整頁底色跟著變，區塊不能出現白色色塊蓋住背景
4. 三個連結（名字、GitHub、Threads）都會開新分頁，網址正確
5. DevTools Console 無錯誤（getElementById('bgBtn') 不可為 null）
6. git status 只該顯示 index.html 一個檔案被修改

這一次的計畫裡面清楚的包含幾個東西：

• 不會做的事：沒有 email、沒有新套件、只動一個檔案
• 會做的事：三個區塊、保留原本標題跟按鈕、按鈕功能還在

只要裡面多或少，你就可以在「Tell Claude What to Change」裡面要求它修改，一直把它打回去，直到它完全符合你的需求為止，而這過程就是在強迫你養成「先看計畫、再動手」的習慣。

當計畫改到你滿意之後，這一次才是真的可以按下「Yes, manually approve edits」。

請注意，這邊我是講「Yes, manually approve edits」，而不是「Yes, and use auto mode」，因為我希望 AI 修改的每一步都會經過你的眼睛，避免它做出你不想要的結果，同意之後它會離開 Plan Mode、開始動工。

完成之後別忘了驗收結果，像是...

• 沒有多出奇怪的檔案。
• 用瀏覽器看看結果，確認三個區塊跟兩個社群連結有沒有都在。
• 按一下「更改背景顏色」按鈕，確認原本的功能是否還活著。

最後一點格外重要，我們必須確保 AI 新增或修改功能後，舊有的功能不受影響，而這個習慣就是要你趁這個機會開始養成。

Note
Plan Mode 以我自己的使用時機大多是在牽涉到多個檔案的大改動（約兩個以上），或者是我不熟悉的專案、我沒有任何想法時，我就會去跑 Plan Mode，而這部份其實也格外節省成本（後面章節會介紹 Token）。

這邊我也把這個判斷流程畫成圖讓你參考：

結語

最後一樣總結一下今天的重點吧～

• 基本門禁概念建立在「看不用問，動才要問」上。
• 核心使用模式為：
  • manual mode on（default）：每次動作都問
  • accept edits on（acceptEdits）：常見的檔案編輯與檔案系統指令自動放行，其他操作仍會問
  • plan mode on（plan）：先研究再問你是否允許執行計畫
  • auto mode on（auto）：全部允許，但背後有安全機制幫你把關
• 可以使用 Shift+Tab 切換模式
• Plan 不滿意就打回，先計畫好再做事情會更好

希望這一篇有讓你對 Permission 跟 Plan Mode 有更近一步的認識。

那麼如果沒問題的話，我們明天見哩～