使用 Ferret

專案與 URL

專案就是一個資料夾(通常是你的儲存庫根目錄)。每個專案都有自己儲存的 URL,因此本機、開發與正式環境只要按一下就能切換。

#新增專案

  1. 使用 檔案 → 開啟專案資料夾…(⌘O / CtrlO)、側邊欄中的 新增專案,或標題列專案選單中的 新增專案…。
  2. 選擇專案的來源:
    • 在這台電腦上:選擇一個資料夾。
    • 從 GitHub / GitLab 複製:從你的儲存庫中選擇一個(透過你的 gh 或 glab 登入列出),或貼上 URL,再選擇上層資料夾,Ferret 就會複製並開啟它。
    • 透過 SSH 開啟:從 ~/.ssh/config 中選擇主機。終端機與 Agent 會在遠端機器上執行;審查則保留在這台電腦上。

名稱預設為資料夾名稱。新增已經登錄過的資料夾時,會直接開啟它(在 macOS 與 Windows 上,路徑比對不分大小寫)。你可以從側邊欄選單 重新命名 專案,或 從清單中移除。移除絕不會刪除資料夾。

終端機會在專案資料夾中開啟,審查則儲存在 <project>/.ferret/ 底下。

#儲存 URL

  1. 在內建瀏覽器中開啟頁面。
  2. 按一下瀏覽器工具列中的 +(儲存目前的 URL)。目前的 URL 會預先填入。
  3. 輸入 名稱,然後按一下 儲存。

每個儲存的 URL 在 審查內容 底下都有一個種類:應用程式(你正在開發的 App)、設計(Figma、Penpot、Canva、原型)或 文件 / 規格(Google Docs、Notion、Confluence、GitHub 上的 Markdown 規格、PDF)。種類會根據 URL 推測,你也可以變更。請參閱不只審查程式碼,也審查設計與文件。

只接受 http:// 與 https:// 的 URL。對於 App 的 URL,如果保留建議的名稱,會根據主機推測名稱:

主機名稱
localhost、127.*、::1、0.0.0.0、*.localhostlocal
包含 dev、develop、developmentdev
包含 stg、stage、stagingstg
其他prd
瀏覽器工具列中儲存的 URL
瀏覽器工具列中儲存的 URL

#審查目標面板

在不停止錄製的情況下切換審查目標與頁面。

在意見模式中,右側的 審查目標 面板會列出目前專案中所有可以審查的項目。切換目標不會停止錄製。可用 顯示方式 → 切換審查目標(⌘⇧K / CtrlShiftK)或 隱藏面板 切換面板顯示。

  • 目標:專案中儲存的 URL。每個 URL 底下是你在該網站造訪過的頁面樹狀結構。造訪過但未儲存的網站會各自成為一個群組。
  • 檔案:專案資料夾。檔案會以預覽開啟(Markdown 與 Mermaid 會轉譯顯示,其他文字為唯讀),因此也能審查文件。鉛筆圖示(在編輯器中開啟)會在編輯器中開啟檔案。

篩選目標 會同時篩選目標、頁面與檔案,使用與 前往檔案… 相同的模糊比對。在清單中,可用 ↑ ↓ Enter 或 1–9 切換目標。開啟 URL… 可開啟一次性的 URL,儲存到專案 URL 則會保留它。

目標來自 settings.json 中的 projects[].urls(請參閱範例)。每個項目都需要 url、launchCommand(在終端機中執行,例如啟動桌面 App)或 windowMatch(要錄製的視窗)其中之一,並可加上 purpose(app、design 或 doc)。選擇視窗目標會將它設為錄製來源,因此錄製期間無法這麼做。造訪過的頁面會依專案記住,只保存在這台電腦上(最多 200 個)。

#開啟與切換環境

按一下儲存的 URL 即可開啟。如果目前的頁面位於另一個儲存的 URL 之下,Ferret 會保留路徑、查詢字串與雜湊,只替換來源(origin)。例如在 http://localhost:3000/pricing?plan=pro 上按一下 prd,會開啟 https://example.com/pricing?plan=pro。

與目前頁面相符(最長前綴)的標籤會反白顯示。在標籤上按右鍵,或使用其鉛筆圖示,即可編輯或 刪除 它。開啟專案時若沒有上次的 URL,會載入第一個儲存的 URL。

標籤會依種類分組:先是 App 的 URL,接著是設計,然後是文件,各種類之間有分隔線,並各有圖示。切換到設計或文件,或從設計或文件切換出去時,會直接開啟它儲存的 URL,不會沿用路徑。

#不只審查程式碼,也審查設計與文件

意見不一定要針對程式碼。任何能在內建瀏覽器中開啟的內容,都能以同樣的方式錄製並用畫筆標註:Figma 或 Penpot 的設計、原型、Google Docs 或 Notion 上的規格、GitHub 上的設計文件、PDF。請在審查前把這些 URL 儲存到專案中,和 local、dev 放在一起。

  1. 從側邊欄選單開啟 編輯專案…(或按一下瀏覽器工具列中的 +),然後按 新增目標。
  2. 貼上 URL。figma.com 的連結會成為 設計,docs.google.com 或 notion.so 的連結會成為 文件 / 規格,名稱分別為 Figma 或 Spec。如果推測錯誤(例如放在你自己伺服器上的原型),請在 審查內容 底下變更種類。
  3. 開啟目標,如果網站需要登入,請在內建瀏覽器中登入一次。內建瀏覽器會在每次啟動之間保留 Cookie,因此你會維持登入狀態。
  4. 照常錄製:一邊說話、一邊指出位置,並在設計或文件上畫圖標註。

在設計或文件上錄下的意見,會在「意見」分頁與 feedback.md 中標上該種類,傳送給 Agent 的指示也會說明這一點。Agent 便會修改設計或文件,而不是程式碼:

  • 如果文件位於專案中(Markdown 規格、ADR),Agent 會編輯該檔案。
  • 如果無法編輯(Figma 檔案、Google 文件),Agent 會將該意見標為 Agent 提問,並寫明要做的具體修改,讓你自行套用或轉交他人。

範例:在 Google Docs 中閱讀價格規格時,你圈起方案表並說「Pro 方案現在是 9,800 日圓,不是 8,800」。feedback.md 會把這則意見列在 Spec 目標底下,並標示 Kind: document,Agent 會回覆規格中修正後的句子,而不會去動價格頁面的程式碼。把規格和執行中的 App 錄在同一段錄影中,意見會依目標分開,因此 Agent 可以先更新規格,再更新實作它的程式碼。

figma.com、docs.google.com、notion.so 等主機上未儲存的頁面也會被辨識出來。專案資料夾中的檔案(Markdown、Mermaid)可從 審查目標 面板的 檔案 清單中審查。

在 GitHub 上協助翻譯此頁 (在新分頁中開啟)