寫說明文件的人

只是一張圖片，
卻隨時都能修改。

在指南用的螢幕截圖上加上方框、編號和說明。Harie 存成一般的 JPEG 或 PNG，貼到哪裡都行。之後在 Harie 開啟，每個方框和說明都還能修改。

在瀏覽器開啟加到 Chrome

免費且開放原始碼（MIT），原始碼公開在 GitHub。瀏覽器版不用安裝也不用帳號，編輯器支援繁體中文、簡體中文、英文、日文、韓文、西班牙文和葡萄牙文共七種語言。

虛構 SaaS「Tasklane」的通知設定頁面截圖 — 原始圖片和註解存在同一個檔案裡

同一個畫面，加上三個附編號的紅色方框和說明框 — 原始圖片和註解存在同一個檔案裡

製作說明截圖，比想像中費工。

每次都要自己決定要標出哪裡

而且團隊裡每個人的做法都有點不一樣。
由 AI 草擬方框的位置和說明文字
每張圖片都是同樣的步驟

擷取、開啟、標註、匯出，下一張再全部重來一次。
擷取頁面後馬上就能標註
一個按鈕名稱改了，圖片就得重做

按鈕名稱一改，截圖就得從頭再做一次。如果是同事做的，原始檔可能早就找不到了。
打開圖片，誰都能當場修改
畫面上出現了客戶資料

正式環境的畫面滿是真實的姓名和電子郵件地址。
換成無法還原的假資料

擷取、標註、保存。

從第一次擷取到存檔，Harie 一手包辦。

擷取

使用 Chrome 擴充功能，可以擷取目前的頁面並直接在編輯器開啟。可選擇可見範圍、拖曳選取的區域，或按鈕之類的單一元素。
標註

用方框、箭頭、編號、說明框和聚光燈來說明。告訴 Harie 你想說明什麼，AI 就會幫你草擬附編號的方框和說明文字。
保存

Harie 存成一般的 JPEG 或 PNG。可以直接貼進說明中心，之後開啟的人也還能編輯註解。

為什麼還能編輯

一張圖片裡，同時放著原始畫面和註解。

用 Harie 存的圖片，除了你看到的畫面之外，還帶著原始截圖和註解資料。其他 App 和瀏覽器只會把它當成一般圖片顯示。

用 Harie 開啟，就能移動或改寫每個方框和說明。不需要另外保留專案檔，收到圖片的人也能開啟並修改。

重新存檔時不會再次壓縮原始截圖，所以不管修改幾次，畫質都不會變差。檔案格式規格已公開（日文）。

tasklane-notifications.en.harie.png 147 KB

顯示用的圖片任何 App 都能顯示

原始截圖不會再次壓縮

註解資料3 個方框 · 3 個編號 · 3 個說明框

下載這個範例，在編輯器開啟就能修改註解。

製作說明截圖的方法
	用影像編輯軟體匯出	指南製作服務	Harie
直接貼到說明中心	可以	從服務匯出	可以
發布後修改文字	要還留著專案檔	在服務內	可以，打開圖片就行
製作者以外的人也能修改	要把專案檔交給對方	同一方案的成員	可以，傳圖片就行
不需要帳號或訂閱	依工具而定	需要	可以

讓 AI 幫你決定要標出哪裡。

建議的註解

輸入像是「說明如何設定 Slack 通知」，AI 就會草擬方框的位置和說明文字。每個建議都可以採用、拒絕或修改。若是 Chrome 擴充功能擷取的截圖，方框會對齊頁面上實際的元素。

可以用 OpenRouter 連線，或使用你自己的 Anthropic API 金鑰。Harie 傳送圖片前一定會先詢問，金鑰也不會離開這個瀏覽器。

從 Claude 編輯（MCP）

註冊 @harie/mcp 伺服器後，就能請 Claude Code 或 Claude Desktop 幫你加上或修改註解。畫面文字改了的時候，也能一次更新所有相關的圖片。

把 guides 裡的通知圖片中的「儲存後套用」改成「更新後套用」

harie_open → harie_edit

已修改說明框 3 並存檔。

個人資料

去掉個人資料，保留畫面的意思。

把姓名、電子郵件地址和電話號碼換成假資料。和模糊處理不同，讀者仍然看得出這是什麼樣的畫面。也可以選擇塗滿、馬賽克或模糊。

遮蔽會直接套用在原始圖片上，無法復原。也因此，分享檔案時原本的資料不會跟著傳出去。

在你工作的地方就能用。

不管存在哪裡，都是同一個檔案、同樣的樣子。

Web

直接在瀏覽器使用，不用安裝任何東西。圖片在瀏覽器中處理，不會傳到伺服器，離線也能用。介面語言可以在設定中切換。

開啟編輯器

Chrome 擴充功能

擷取目前的頁面，馬上就能標註。可從 Chrome 線上應用程式商店安裝。

在 Chrome 線上應用程式商店查看

桌面版

即將提供下載

適用 macOS 和 Windows。從系統對話框開啟檔案，並直接存回原處。

關於桌面版

MCP

讓 Claude 這類 AI 代理讀寫你指定資料夾裡的圖片。

設定方式

開始使用 MCP

請 Claude 幫你標註。

註冊 @harie/mcp 伺服器後，Claude Code、Claude Desktop 和 ChatGPT 桌面 App 就能開啟 Harie 圖片，加上或修改註解。

在終端機執行這個指令。

claude mcp add harie -- npx -y @harie/mcp --root ~/Pictures/guides

把這段設定加到 claude_desktop_config.json ，然後重新啟動 Claude Desktop。請把資料夾換成你自己的路徑。

{
  "mcpServers": {
    "harie": {
      "command": "npx",
      "args": ["-y", "@harie/mcp", "--root", "/Users/you/Pictures/guides"]
    }
  }
}

可在 ChatGPT 桌面 App 使用。把這段設定加到 ~/.codex/config.toml ，然後重新啟動 App。這份設定也會由 Codex CLI 和 IDE 擴充功能共用。也可以在 App 設定的 MCP 伺服器畫面，把同一個指令新增為 STDIO 伺服器。

[mcp_servers.harie]
command = "npx"
args = ["-y", "@harie/mcp", "--root", "/Users/you/Pictures/guides"]

網頁版 ChatGPT 無法連線到在你電腦上執行的 MCP 伺服器。

需要 Node.js 22 以上版本。伺服器透過 npm 的 npx執行，不需要另外安裝。
把 --root 指向存放圖片的資料夾。伺服器只能在這個資料夾內讀寫。

完整工具清單與使用方式（GitHub）

請求範例

把 settings.png 轉成 Harie 檔，在「儲存」按鈕外加上紅框，並加上寫著「在這裡儲存」的說明框

把 guides 裡的圖片中看得到的電子郵件地址換成假資料

遮蔽個人資料無法復原，所以伺服器會在你確認後才存檔。

常見問題

Harie 是什麼？

Harie 是一個為 SaaS 說明文件和使用指南的螢幕截圖加上方框、編號、說明框和箭頭的工具。它會存成一般的 JPEG 或 PNG，之後在 Harie 重新開啟這張圖片時，所有註解都還能編輯。

存好的圖片能在其他 App 或網站上顯示嗎？

可以。Harie 存成一般的 JPEG 或 PNG，所以能直接貼到說明頁面、聊天或文件裡。原始截圖和註解資料放在圖片的中繼資料裡，只有 Harie 會用到。

別人做的說明圖片，我也能修改嗎？

可以，只要是用 Harie 存的圖片就行。在 Harie 開啟收到的圖片，就能移動或改寫每個方框和說明。不需要專案檔，也不需要帳號。

Harie 和 Snagit、Scribe 這類工具有什麼不同？

匯出的圖片本身就能繼續編輯。截圖 App 會把可編輯的註解存在自家的專案檔裡，而專案檔只留在製作者手上。製作指南的服務則只能在自家帳號裡編輯。Harie 把原始截圖和註解存進 JPEG 或 PNG 裡，所以任何拿到說明頁面上那張圖片的人，都能開啟並修改。Harie 不會從錄下的操作自動產生步驟指南。

Harie 要付費嗎？

不用。Harie 免費、以 MIT 授權開放原始碼，也不需要註冊。只有 AI 建議需要你自己的 Anthropic API 金鑰或 OpenRouter 帳號，費用依用量付給這些服務。

我的圖片會被傳到伺服器嗎？

不會。圖片在你的瀏覽器或裝置上處理，開發者不會收到。只有在使用 AI 功能時，Harie 才會先詢問你，再把圖片直接送到 Anthropic 的 Claude API（若用 OpenRouter 連線，則經由 OpenRouter）。

可以把截圖裡的個人資料藏起來嗎？

可以。你可以把姓名、電子郵件地址和電話號碼換成假資料，也可以用塗滿、馬賽克或模糊處理。這些處理會直接套用在原始圖片上，無法復原，原本的資料也不會留在分享出去的檔案裡。

Harie 能在哪裡使用？

有在瀏覽器執行的網頁版編輯器、擷取目前頁面的 Chrome 擴充功能，以及給 AI 代理使用的 MCP 伺服器。macOS 和 Windows 的桌面 App 目前還沒有發布，但可以從原始碼自行建置。

Claude 這類 AI 代理也能加上註解嗎？

可以。把 MCP 伺服器 @harie/mcp 註冊到 Claude Code 或 Claude Desktop，它就能開啟你指定資料夾裡的圖片、加上註解並修改文字。

讓下一份指南，隨時都能修改。