HOZUHozu DevTools
指著它， 你的 agent 就拿到 那一行。
在畫面上選取有問題的地方，說明該怎麼改。這份請求會指出檔案、行號，以及用 Hozu 的方式該怎麼改，讓你的 agent 不用再找，直接開始修。完成後，它會回頭指給你看：每個改過的部分都會在你的頁面上加上編號框。
運作方式
點三下，然後它會回頭指給你看。
1 · 選取
選擇 Select（選取），再點擊那個部分，快捷鍵和 Figma 一樣：Shift+Enter 往上一層，Alt 測量，按兩下選取一段文字。
2 · 描述
說明該怎麼改。先試試尺寸、顏色或其他文字：這只是你螢幕上的預覽。
3 · 交出去
按 Copy for AI（複製給 AI），或把它存起來。然後告訴你的 agent：「Do the open Hozu requests.」
4 · 看它回報
你的 agent 會在你的頁面上替每個改過的部分加上編號框，並附上用你的話寫的說明。你可以回覆，或標為已解決。
用起來就像 Figma
你用慣 Figma 的手早就會了。
同樣的快捷鍵、同樣的測量方式、順序相同的 Design 面板，而且你的 design token 排在最前面。Builder 與 Developer 模式都一樣。
Shift+Enter · Enter · Tab
選取外層、內層與相鄰的元素。
Alt
按住並指向：顯示 px 距離。
W × H
每個選取都會顯示尺寸。
Design 面板
Frame、Auto layout、Layer、Fill、Stroke、Effects、Text。
Variables
token 優先：red · #fb3a0e、2xl · 24px。
Comments
你的 agent 留下的說明是編號圖釘：可以回覆或標為已解決。
Assets
所有元件，一頁看完。
不用另外寫展示頁，也不需要 Storybook。Assets（素材）直接從應用程式本身畫出每個元件、每個 variant，以及你命名的狀態。看看每個元件用在哪裡、框出它的每個 instance，並請你的 agent 修改主元件（main component）。Styles 會列出你的 token。
previews.ts
為你在意的畫面命名：很長的標籤、空的列表、載入失敗、五十列資料。每個頁面畫面都會用你提供的資料回答它的 query，而且只在 npm run dev 下生效。
永遠不會上線
建置與正式環境的伺服器都不會載入它；除非你要求，你的 agent 不會動它；當某個預覽不再符合應用程式時，hozu check 會告訴你。
這份請求
你的 agent 讀到的內容。
在哪裡、改什麼、影響範圍多大、要用哪個主題 class，只有在單純修改會出錯的地方才附上提醒。即使行號移動了，指標（pointer）也能再找到那個部分。
# Hozu request: Make it bigger on phones and use the brand red Page `/` · 390 × 844 ## 1. <button> · ui.Button - Want: Make it bigger on phones and use the brand red - Where: `features/tasks/views.ts:102:16` (view `tasks.Board`) - Scope: only this one - Style: font size 14px → 16px: replace `text-sm` with `text-base` - Style: background #111010 → #fb3a0e: replace `bg-ink` with `bg-brand` - Mind: `ui.Button` is used in 6 places. For only this one, change `class` at this use; a property the component owns needs a trailing `!`. - Locate: `hozu why /features/tasks/views/Board/root/children/2/children/0/children/2` Run `hozu check` after the edits.
回頭指給你看
看看你的 agent 改了什麼。
完成修改後，你的 agent 會指出它動過的每個部分，並附上用你的話寫的說明。你在頁面上檢查結果，而不是看 diff。
npx hozu show features/notes/views.ts:42 --note "Delete now asks before it removes a note" npx hozu show features/notes/views.ts:51 --in "Buy milk" --note "Pinned notes go first" npx hozu show page:home --note "The page title is shorter"
編號框
每個部分都會有紅框與編號。給檔案與行號就夠了；--in "<text>" 可以挑出列表中的某一列。
回覆或標為已解決
Agent 面板會逐一顯示這些說明。Send reply（送出回覆）會把你的回答以請求的形式交回去；Resolve（已解決）會移除這則說明。
永遠不會過時
hozu show 會列出尚未處理的說明；當某則說明指向的部分移動或消失時，會把它標為過時，讓你的 agent 在你看到之前就修正它。
每一種狀態
看見你平常碰不到的畫面。
載入中、失敗、儲存中、錯誤訊息、確認對話框：Layers（圖層）會列出頁面可能處於的每一種狀態，直接從應用程式本身讀取。不必執行任何東西就能預覽其中一種，而且是手機的精確尺寸。
你的資料
一邊開發，一邊測試 API。
API 會打開一個抽屜，列出頁面讀取的資料與它能做的變更：每一項在哪裡執行、如何快取，以及實作它的那一行。編輯輸入、執行，然後以表格閱讀回應。變更會先詢問你，接著頁面就地更新，就像是頁面上的按鈕做的一樣。
它送出了什麼
一次呼叫從伺服器與瀏覽器送出的每個請求：headers、body、狀態碼、時間。可以複製成 curl。
你的 endpoint
對你宣告的每個 endpoint 送出請求，可附上 body 與你自己的 headers，例如 bearer token。
以任何人的身分操作
開發時把這個瀏覽器的 session 設成任何使用者，看到和他們一樣的頁面。
給每個人
白話說明，或是原始碼。
Builder
「A shared Button: the same design is used in 6 places.」（共用的 Button：同樣的設計用在 6 個地方。）沒有程式碼名稱，影響範圍以提問的方式呈現。
Developer
檔案與程式碼片段、元件、條件、transition 與 node id。
零成本
只在 npm run dev 下出現。正式版建置不帶任何標記，也沒有 DevTools 程式碼。
你的語言
一個檔案就能翻譯它的每一個字，給你自己或整個團隊使用：npx hozu devtools messages。你的 agent 讀的內容維持英文。