Diagram Design：一個自帶設計系統的 Agent Skill

AI 生成的圖表長得都一樣。你肯定見過那種樣子：圓角方塊、某處來一段紫到藍的漸層、所有元素都拖著陰影、箭頭末端總是差一點沒貼齊邊框，再加一個寫著「預設字型」的字型。這就是視覺版的公關稿。技術上它確實傳達了資訊，但沒人想讀。

Diagram Design 是 Cathryn Lavery 做的一個 Agent Skill，正面硬槓這種審美。它的標語在 README 裡顯得格外不客氣：一個自帶全部內容的 HTML 加 SVG 檔案、套用你的品牌、45 種圖表類型、沒有陰影、沒有 Mermaid 那一套隨便湊合的東西。

最後那句就是全文的論點。這個專案不是想讓圖表生成變得更聰明，而是想讓產出看起來像出自一個有品味的人之手。

它究竟產出什麼

你描述想要的圖，agent 寫一個內嵌 SVG 的 HTML 檔案，你雙擊打開。沒有建置步驟，沒有算圖管線，不依賴任何服務。檔案離線可用，五年後再打開還是同一個樣子。

它的涵蓋範圍確實很廣：架構圖與架構變更圖、部署圖、相依圖、UML 類別圖、資料庫 schema、流程圖、循序圖、狀態機、泳道圖、資料流圖，還有整套圖表（長條、折線、散佈、矩形樹狀、雷達、極座標、瀑布、熱力、桑基），以及結構類形式（樹狀、組織圖、層疊、文氏圖、金字塔、圓形徽章）。策略與規劃類有象限圖、Wardley 地圖、甘特圖、時間軸、看板、故事地圖和使用者旅程。甚至還有給空間表達用的爆炸軸測圖。

每種類型都提供三個靜態變體：極簡淺色、極簡深色，以及完整編輯排版風格。有個小地方值得一提——倉庫標題寫 44 種，正文說 45 種，而展示頁的編號是 01 到 44。一個對自己的格線如此執念的專案，居然有個錯字。這種事難免。

讓它成立的那部分：規則

力氣都花在設計系統上，而且它用數字說話，不用形容詞。

每張圖只有一個強調色。強調色用來把注意力拉到一兩個元素上，其餘都是墨色、紙色和收斂的灰。這一條規則就刪掉了大部分讓 AI 圖表像 2016 年儀表板的視覺噪音。

三種字型，各有分工。標題和斜體註解用 Instrument Serif；節點名稱用 Geist 無襯線；連接埠、URL、欄位型別這類技術副標籤用 Geist Mono。技術細節交給等寬字型，這是真正做過設計的人的本能，而生成器從來不會這麼做。

4 像素格線。每個座標、寬度、間距和內距都必須能被四整除。作者說這是讓輸出不像 AI 生成的關鍵。她說得對，理由很微妙：錯位就是破綻。你不會注意到某個方塊寬 137 像素，你只會覺得哪裡怪，又說不上來。

細線，不要陰影，圓角上限 10px。該由邊框做的就交給邊框，不必假裝這張圖是擺在某個平面上的實體。

資訊密度目標：10 分裡的 4 分。這條規則大多數團隊會抗拒，而大多數讀者會為此感謝他們。它寫明的原則是：品質最高的動作通常是刪掉。

無障礙也不是事後補的。SVG 輸出帶 role="img"、aria-labelledby 以及 title/description 元素；尊重減少動態效果的系統偏好；WCAG AA 對比度（正文 4.5:1，關鍵標記 3:1）在 CI 裡強制執行。預設配色是煙白紙面上的墨黑配橘橙。

品牌接入是被低估的殺手功能

你把網站 URL 給它。它抓取顏色和字型，對應到語意角色：paper、ink、muted、accent、link。然後給你一份保真收據，告訴你它推斷出了什麼，以及哪裡是猜的。

後半句比抓取本身重要得多。品牌萃取工具通常給你一套色票就閉嘴了。把推斷過程攤開來看，你才能在產出四十張用錯橘色的圖之前糾正它。

還有一條匯入路徑：指向 Mermaid、draw.io 或 Excalidraw 檔案，它會用這套設計系統重繪，給你四個旋鈕——格式、尺寸、細節、受眾——外加一份保真帳本。把一個塞滿 Mermaid 圖的 wiki 搬過來，正是它被造出來要解決的情境。

它適合什麼，不適合什麼

安裝過程刻意做得很無聊。npx skills add cathrynlavery/diagram-design 適用於一切能讀 Agent Skills 的環境；Claude Code、Codex、GitHub Copilot 和 Factory Droid 用外掛市集指令；Cursor、Cline、Gemini CLI、Windsurf、Amp、Zed、Kiro 和 OpenCode 用符號連結或子目錄匯入。另外還有匯出、匯入、剖析和 doctor 自檢的斜線指令。

作者把限制講得很坦率，而這些限制也劃得恰當。

品質取決於模型。同一個提示詞可能產出兩種不同版面，因為你拿到的是生成出來的幾何結構，不是範本填色。沒有可編輯的原始檔：沒有畫布可拖，沒有能在 pull request 裡 diff 的文字。對於每週都要改的文件，她推薦 Mermaid——它能 diff，GitHub 原生算圖，這比好看更值錢。

她還問了一個更多工具作者都該問的問題：讀者從這張圖裡得到的，會比從一段話裡得到的更多嗎？如果所謂「圖」只是一個帶標籤的方塊，那就把那句話寫出來。如果你在比較兩個清單，用表格。如果你要的是終端機裡的 ASCII art，這工具不適合。

產出是檔案，不是服務

這裡有個設計決定會一年比一年顯得更聰明：交付物是一個內嵌 SVG 的單一 HTML 檔案，能離線打開。沒有帳號，沒有嵌入腳本，不依賴某個下一季可能調漲 API 的供應商。放進倉庫、貼到工單上、印出來、寄給用著被鎖死筆電的客戶，都行。

對於看過某家圖表 SaaS 被收購然後一路退化的人來說，這不是小功能。這是「作品」和「訂閱」之間的差別。

代價是你沒辦法像編輯畫布那樣編輯它。沒有拖放，沒有圖層面板，沒有復原堆疊。版面錯了，你要嘛重新生成，要嘛手動改座標——而因為一切都掛在 4px 格線上，手動改是可以活下來的，放在自由格式文件裡就不行。

十分鐘內怎麼評判一個圖表 skill

讓它畫一個形狀彆扭的東西：一個系統裡有一個顯而易見的重要節點、三個支撐服務，以及一個所有人都忘了的資料庫。好的輸出會用那唯一的強調色標出重要節點，讓其餘部分退到後面。壞的輸出會把所有東西都上色，因為沒有優先順序的時候，替所有東西上色正是生成器幹的事。

然後讓它把同一張圖畫兩遍。輸出完全一致，說明你看的是範本。輸出不同，說明你看的是生成——這更誠實，也正是你用的模型很重要的原因。

最後，看數字。數一數間距。如果不是四的倍數，說明限制被無視了，那設計系統的其餘部分大概也一樣。

真正的論點

這個專案本來可以只是一段風格提示詞。「做得像雜誌排版，不要陰影，極簡。」那樣做出來的會是不一致的垃圾，因為提示詞撐不過一張四十個節點的架構圖。

Diagram Design 有意思的地方在於，它把品味編碼成機器能檢查的限制：能被四整除、一個強調色、三種字型、對比度、無陰影。美學不在模型裡，在規格裡。

這個想法比這個 skill 本身更容易搬移。無論你用什麼生成視覺內容——圖表、簡報、封面、縮圖——「看起來像設計過」和「看起來像生成出來的」之間的差別，通常就是一份有人願意寫下來的短規則清單。