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 本身更可迁移。无论你用什么生成视觉内容——图表、幻灯片、封面、缩略图——「看起来像设计过」和「看起来像生成出来的」之间的差别，通常就是一份有人愿意写下来的短规则清单。