[免費服務 #1] 用 Agentation 修改 AI 設計

讓 AI 製作網站已不再困難。真正辛苦的是之後：從展示完成畫面、說出「這個按鈕有點奇怪」的那一刻開始。

「中間那個藍色按鈕。」→ AI 改錯了按鈕。 「不是，是上面那個。」→ 又動到了另一個。 「從上面數第二個、在登入旁邊的那個……」→ 最後只好親自打開程式碼。

原因很簡單。人看畫面，AI 看程式碼。要用語言連起兩雙不同的眼睛，中間難免會漏掉資訊。為了填補這道縫隙，Agentation應運而生。

這個系列會逐一介紹不用花錢也能使用的服務，確認它能做什麼、免費到什麼程度，以及有哪些條件。第一篇是 Agentation。

在畫面上點一下，翻譯成 AI 能理解的話

Agentation 是浮在你正在製作的網站上的小工具列。點擊不滿意的位置並留下「留白太窄了」之類的備註後，它會整理成 AI 程式碼工具可直接執行的格式。

重點在於「幫你整理」。點一下，就會自動附上這些資訊：

• 能在程式碼中找到該元素的 CSS 選擇器（selector，像是指向程式碼中畫面元素的地址）— body > main > .hero-section > button.cta
• 建立該元素的原始檔案與行號 — src/components/Button.tsx:42
• React 元件階層 — App > LandingPage > HeroSection > CTAButton
• 位置與大小、周邊文字，以及目前套用的色彩、字型與間距值

按下複製按鈕後，這類資訊就會放進剪貼簿。

## Page Feedback: /landing
**Viewport:** 1440×900

### 1. button
**Location:** body > main > .hero-section > button.cta
**Source:** src/components/Button.tsx:42
**React:** App > LandingPage > HeroSection > CTAButton
**Feedback:** Button is cut off on mobile viewport

資訊量可以調整。共有簡潔（Compact）、標準（Standard）、詳細（Detailed）、鑑識（Forensic）四個層級，上例使用的是預設的標準。需要追查間距或色彩為何如此時，切換到鑑識模式還會帶出套用的 CSS 值。

順帶一提，Source:行，也就是原始檔案與行號，只會在開發模式中附加。它支援 Vite、Next.js、Webpack、Turbopack 環境，但依 bundler 設定而定，這項資訊可能會缺失。即使沒有，仍可透過選擇器與元件階層尋找，只是準確度稍低，並非完全不能用。

只要貼到 Claude Code 或 Cursor 聊天視窗就完成了。AI 不必再猜「藍色按鈕」是哪一個；拿到地址後，會直接前往那個檔案的那一行。

在螢幕截圖上畫箭頭交給它不行嗎

這是常見方法，也不是完全不可行。但螢幕截圖只是圖片，無法連到程式碼。AI 必須重新找出圖片中的按鈕位於哪段程式碼，過程中就可能改到外觀相似的另一個按鈕。

Agentation 傳遞的不是圖片，而是可搜尋的字串。有了選擇器與類別名稱，AI 就能搜尋程式碼庫，精確定位該處。這正是它與畫箭頭的圖片決定性的差異。

共有五種標註方式

想指出的對象不一定總是單一按鈕，因此提供了不同方式。

• 點選元素 — 精確指定按鈕、卡片或單張圖片。
• 選取文字 — 用來修正錯字或文案。選取的句子會連同引號放入結果，AI 可直接在程式碼中搜尋該句。
• 多重選取 — 拖曳一次選取多個元素，適合「請調整這三張卡片的間距」之類的要求。
• 指定區域 — 空白處也能指定，因此可以說「這裡太空了」。
• 停止動畫 — 按下 P 鍵即可停止 CSS、JavaScript 與影片動畫。把滑過太快而抓不到的瞬間停住後再指出問題即可。不過有些第三方動畫函式庫無法完全停止。

記住幾個常用快捷鍵會更方便。用 Cmd+Shift+F（Windows 為 Ctrl+Shift+F）開關回饋模式，用 C 複製、用 X 全部刪除、用 H 隱藏標記。

需要調整配置時，使用版面配置模式

「把這張卡片移到右邊，並在下面放一個表單。」這類要求一旦改用文字描述就會變模糊。因此按下 L 鍵後，工具列會切換到版面配置模式，讓你直接移動示範，而不是用語言解釋配置。

• 從元件面板將超過 65 種元素拖放到畫面上。
• 將滑鼠移到既有區段時會顯示 CSS 選擇器標籤，接著可直接拖曳調整順序。
• 開啟「新頁面線框圖」後，現有設計會變淡，你可以在空白畫面上繪製草圖。也能用透明度滑桿透視原畫面來繪製。
• 另有欄位可填寫這個頁面的用途。

這樣建立的變更會在每則註解上附帶 feedback、placement、rearrange 其中一種。AI 收到的不是「請移到中間」這類句子，而是座標與大小。不過版面配置模式是 Agentation 3.0 才加入的功能，需確認版本；與其他功能相同，也只在桌面電腦上運作。詳細介紹請見 官方部落格文章。

安裝不必請開發人員幫忙

如果正在使用 Claude Code，在終端機輸入一行即可。

npx skills add benjitaylor/agentation

接著在 Claude Code 中輸入 /agentation，它會自動偵測框架並完成安裝。即使看不懂程式碼，也能做到這一步。

若要自行處理，只需安裝套件並加入一行元件。

npm install agentation -D

import { Agentation } from 'agentation';

function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === 'development' && <Agentation />}
    </>
  );
}

後面的 NODE_ENV === 'development' 條件表示「只在開發期間顯示工具列」。這是避免實際服務訪客看到它的安全措施，別漏掉。

各框架的安裝方式與設定項目，都整理在 官方網站 的 Install、Features 文件中。

連複製貼上都嫌麻煩，就用 MCP 連接

做筆記、複製、貼到聊天視窗；重複幾次也會變成工作。透過 MCP（Model Context Protocol，AI 工具與外部程式交換資料的標準規格）連接後，這段往返就會完全消失。你在畫面上留下備註，AI 會自動取得。除了工具列外，還需連接 agentation-mcp 伺服器，並在設定中開啟同步。

從這裡開始，使用方式分成三類。

• 免手動 — 新備註出現後，AI 會自動確認、修改並標示為已解決。人只需持續看著畫面指出問題。
• Critique — 相反地，AI 會開啟瀏覽器巡覽頁面，將設計問題留下備註，由人來審查。
• 自動駕駛 — AI 負責指出問題，也負責修改。

後兩種方式需要 AI 直接開啟瀏覽器，因此必須另外安裝 agent-browser 技能。第一次使用的話，從免手動模式開始較穩妥。

連接後，備註不再是單向傳遞，這點也很重要。AI 若在該備註中反問「要設為 24px 還是 16px？」，你可以直接在同處回答。也會保留等待中、待確認、已解決、暫緩等狀態。不再是丟出去就結束，而是形成對話。

題外話，這些來回備註的資料結構以 AFS（Annotation Format Schema，註解格式規格）之名公開。開發者將它描述為「附加在執行中應用程式上的智慧型 Figma 留言」。

開始前需要知道的條件

不能只談好處，先把界線說清楚。

無法修改別人的網站。 它必須安裝在你正在製作的專案中，並在自己的電腦啟動開發伺服器後使用。不是開啟任意網站就能改設計的擴充功能。

需要 React 18 以上。 如果請 AI 製作網頁應用程式，十之八九會是 React，但仍請確認。它也能在 Next.js、Remix、Astro 等 SSR/SSG 框架中正常運作。Astro 本身不是以 React 為基礎，但若採用疊加 React 的配置即可。

僅支援桌面電腦。 這是用滑鼠移到目標並拖曳選取範圍的工具，在行動裝置上幾乎無法操作。若要處理手機版的問題，可縮小桌面瀏覽器視窗來繞過。

結果中沒有圖片。 全部都是文字。對色調或氛圍等難以用語言描述的回饋，螢幕截圖仍然較好。

無法定位 iframe 內部。 外部嵌入的付款小工具或地圖都屬於此類，也就是整個放入其他網站畫面的區域。這是瀏覽器安全政策下無法避免的限制。

備註不會保留太久。 若未透過 MCP 連接，備註會按頁面儲存在瀏覽器中，7 天後消失。若想先累積、之後處理，建議先連接。

價格沒有負擔。個人或公司內部使用都免費。只有重新發布或商業提供時才需要另外取得授權。採用 PolyForm Shield 1.0.0。

總結

• Agentation 是一個工具列，會把你在畫面上點擊的位置翻譯成 AI 能理解的程式碼地址。
• 選擇器與元件階層會自動附加，開發模式下還會附上原始檔案與行號，因此 AI 不必猜「那個按鈕」是哪個。
• 可以透過點選、選取文字、多重選取、指定區域、停止動畫五種方式提出問題。
• 在 L 鍵的版面配置模式中，可以拖放元件、調整區段順序，直接展示配置本身（3.0 以上）。
• 使用 Claude Code 時，輸入 npx skills add benjitaylor/agentation 後再輸入 /agentation 一次即可完成安裝。
• 連接 MCP 後，不必複製貼上，AI 會直接取得備註，還能進行反問與回覆的對話。
• 但只能在自己的 React 18+ 專案以開發伺服器啟動，並透過桌面瀏覽器使用。

如果每次都厭倦重複用語言解釋，不妨改成用手指指出那個區域。官方網站是 https://www.agentation.com/。下一篇也會挑一個免費服務來介紹。

延伸閱讀

• 做好 Vibe Coding 的方法：程式碼該讀到什麼程度？
• 用規則檔從根本避免 Vibe Coding 事故