Communitygithub.com

hraness/graphics

Graphics 是一個無頭部 CLI 與 AI 代理技能,用於建立小且清晰的圖表。

graphics 是什麼?

此技能提供了一個名為 `graphics` 的 CLI 工具,作為建立小型、精確圖表的確定性介面。其核心原則是以 `.diagram.json` 作為唯一權威來源,並視 `.light.svg`、`.dark.svg`、`.light.png`、`.dark.png` 及 `.tldr` 為可取代的匯出產物。技能會嚴格遵循使用者提示,不擅自添加標題、圖例或裝飾性元素,確保圖表內容忠於原始指定。支援的作業流程包括:在專案中尋找現有圖表來源、依據提示建立新的 `.diagram.json`、使用 `graphics check` 進行驗證,以及透過 `graphics render` 產生圖形輸出。此外,還能產出 `.tldr` 檔案以相容 tldraw 編輯器,讓使用者可在需要時進行直接畫布編輯。此技能特別適用於以知識庫為基礎的環境(如 `kb/` 目錄結構),可將圖表與對應的筆記檔案配對,並嵌入或連結已渲染的淺色/深色圖像,確保圖表與文字敘述的關聯性。整體而言,這項技能讓開發者與 AI 代理能以精確、重複且可審查的方式建立與維護圖表,避免手動繪圖的模糊性與不一致性。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add hraness/graphics

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

建立清晰的圖表

使用已安裝的 graphics CLI 作為確定性介面。保留已建立的 .diagram.json 原始檔;將 .light.svg、.dark.svg、.light.png、.dark.png 以及 .tldr 視為可取代的匯出產物。

嚴格遵循提示

將使用者的提示視為完整的內容規格。

  • 保留提供的標籤、數值、關係、相對大小及省略的部分。
  • 僅添加繪製這些事實所需的中立機制。
  • 不要自行發明標題、副標題、圖例、註解、範例、含意、類別、度量、刻度、連接線或裝飾性宣稱。
  • 不要將簡短標籤擴展成句子。優先使用使用者原本的一到三個字詞的標籤。
  • 在更新時,移除被拒絕的內容,不要用新的闡述來取代它。

尋找來源

  1. 閱讀本地儲存庫的指示,尋找 graphics.config.*。
  2. 在建立新的 .diagram.json 之前,先搜尋現有的相同主題 .diagram.json。
  3. 更新該來源,而不是編輯產生的圖像或建立重複的檔案。
  4. 在含有 kb/ 的知識庫中,使用 kb/diagrams/<slug>.diagram.json,並與 kb/notes/<slug>.md 配對。根據主機的慣例嵌入或連結已渲染的淺色/深色圖像,並透過筆記而非二進制畫布來連結知識。
  5. 在知識庫之外,預設使用 diagrams/<slug>.diagram.json。

編排視覺效果

在建立或大幅重新設計圖表之前,請閱讀 visual-communication.md。

深入套用這些預設值:

  • 對一般概念使用圓角矩形。相同角色的元素應獲得相同的大小、圓角半徑、筆劃粗細、圖示大小以及標籤處理方式。
  • 在相連的形狀之間至少保留 96px(最好是 120–200px),以便箭頭看起來是關係而不是接縫。
  • 將圖示直接放在其語義形狀內部。不要將有邊框的圖示瓦片放在另一個有邊框的卡片內部。
  • 當提示允許抽象化時,使用三到七個主要元素。
  • 建立明確的閱讀順序,並將同層級的元素對齊到共享的格線。
  • 使用空白(在邊框、顏色或文字之前)來分隔群組。
  • 最多對一個語義區別使用顏色。永遠不要做出任意的尺寸或樣式變更,而暗示提示未提供的差異。
  • 讓圖示保持輔助性:標籤仍必須承載意義。
  • 每個物件偏好一個可見邊界,每條軸線或連接線偏好一個可見筆劃。

不要為了滿足這些偏好而「改善」文字資料。提示具有最終決定權。

建立與渲染

使用公開的 schema URL,或執行 graphics init 來取得起始檔:

graphics check diagrams/<slug>.diagram.json --strict
graphics render diagrams/<slug>.diagram.json

渲染指令會覆寫同名稱的所有匯出產物。在版面或對比度不確定時,檢查淺色與深色兩者的輸出。處理所有有用的 lint 發現;變更來源,然後重新渲染。

如果儲存庫使用自己的字型或圖示套件,請閱讀 customization.md。不要將 MonoLisa 或其他授權字型加入儲存庫。預設渲染會使用系統的無襯線字型堆疊。

謹慎使用 tldraw

產生的 .tldr 檔案是可編輯的交換格式,且不需要 tldraw SDK 或桌面應用程式即可建立。當有人想要直接編輯畫布時,可以在 tldraw Offline 中開啟它:

graphics open diagrams/<slug>.tldr

如果缺少可選應用程式,graphics desktop install 會解析目前官方版本,驗證其發布的 SHA-256 雜湊值,然後啟動平台安裝程式。該應用程式會將 .tldr 匯入為未儲存的文件;在該處儲存文件以建立其較新的原生 .tldraw 套件。永遠不要直接改寫原生的 .tldraw ZIP/SQLite 套件。

驗證

  1. 執行 graphics check <source> --strict。
  2. 執行 graphics render <source>。
  3. 確認所有五個產物都存在於來源旁或指定的輸出目錄中。
  4. 以實際大小檢查淺色與深色輸出。
  5. 確認同層級的形狀不會暗示錯誤的差異。
  6. 確認連接線夠長、在 .tldr 中綁定到預期的形狀,且不會穿過標籤。
  7. 如果需要附帶的筆記,請確認其路徑和視覺參考。

相關技能