# Hermes Agent 新選配 skill 讓使用者能操作 tldraw 桌面白板

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 原作者：Nous Research (@NousResearch) · 策展與摘要：EasyVibeCoding · 平台：X (Twitter) · 熱度：🔥 · 日期：2026-07-24

> 原始來源：https://x.com/nousresearch/status/2080319476243861569

## 證據與延伸閱讀

- [Hermes Agent 新選配 skill 操作 tldraw 桌面白板](https://hermes-agent.nousresearch.com/docs/user-guide/skills/optional/creative/creative-tldraw-offline)

## 中文摘要

Hermes Agent 新選配 skill 讓使用者能操作 tldraw 桌面白板。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/04316431f078cb03.png)
> 黑色背景上顯示黃色與棕色像素風格的 Hermes Agent 標題字樣。

**核心功能與運作機制**
Hermes 透過 tldraw 離線桌面應用程式的本機 HTTP API（預設連接埠 `7236`）與畫布互動，不依賴 GUI 點擊或手動編輯檔案。主要特點包含：
- **即時畫布編輯**：透過 `/exec` 執行指令進行單次圖形生成、版面配置與清理。
- **持久化行為**：透過編輯 `script/main.js` 寫入 JavaScript，讓互動邏輯與動態行為在重新載入後依然有效。
- **狀態與互動**：支援在圖形中嵌入計數器等互動按鈕，並將應用程式狀態儲存在圖形的 meta 資料中。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1784873413342-33zjw4lv.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/ed127a91ffed7692.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 黑色背景上浮現出「tldraw SKILL」字樣。

**安裝與使用方式**
使用者可透過以下指令將此 skill 安裝至 Hermes：
```bash
hermes skills install optional-skills/creative/tldraw-offline
```

在操作時，由於每次終端機呼叫皆為獨立 shell，因此必須在每次呼叫時動態讀取連接埠與 token，避免 401 錯誤：
```bash
PORT=$(jq -r .port <server.json>)
TOKEN=$(jq -r .token <server.json>)
```

針對不需要持久化的單次畫布編輯，可使用以下 API 進行操作：
```bash
BASE=http://localhost:7236
TOKEN=$(python3 -c "import json;print(json.load(open('$HOME/.config/tldraw/server.json'))['token'])")
DOC=$(curl -s "$BASE/api/search" -X POST -H 'content-type: application/json' \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"code":"return (await api.getFocusedDoc()).id"}' | python3 -c "import sys,json;print(json.load(sys.stdin)['result'])")
curl -s "$BASE/api/doc/$DOC/exec" -X POST -H 'content-type: application/json' \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"code":"const {createShapeId,toRichText}=await import(\"tldraw\"); editor.createShape({id:createShapeId(),type:\"geo\",x:0,y:0,props:{geo:\"rectangle\",w:200,h:100,color:\"blue\",fill:\"solid\",richText:toRichText(\"hello\")}}); return editor.getCurrentPageShapes().length"}'
```

**注意事項與驗證**
- 腳本在每次載入時都會重新執行，因此程式碼必須具備冪等性（Idempotency），建議使用 `createShapeIfMissing` 避免重複建立圖形。
- 為了讓帶有腳本的 `.tldraw` 檔案自動執行而不跳出確認對話方塊，必須在 `metadata.json` 中帶入對應的 script 摘要資訊，並預先將其加入 `~/.tldraw/script-trust.json` 中信任。
- 詳細的官方技術文件可參考 [Nous Research Hermes Agent 官方說明文件](https://hermes-agent.nousresearch.com/docs/user-guide/skills/optional/creative/creative-tldraw-offline)。

## 標籤

Skills, 功能更新, Agent, 開源專案, Hermes Agent