Communitygithub.com

hraness/graphics

Graphics 是一款用于创建小型清晰图表的无头 CLI 和 AI 代理技能。

graphics 是什么?

Graphics 是一个面向开发者和 AI 代理的技能,专注于生成小型、精确的图表。它通过一个名为 `graphics` 的 CLI 工具作为确定性适配器,用户编写 `.diagram.json` 源文件,然后自动导出为 `.light.svg`、`.dark.svg`、`.light.png`、`.dark.png` 和 `.tldr` 等可替换格式。该技能严格遵循用户提示,禁止添加未经指定的标题、标签或装饰性元素,确保图表内容完全忠实于原始规范。它支持在本地仓库或知识库中编辑和使用,并建议使用系统字体,避免引入商业字体。此外,生成的 `.tldr` 文件可与 tldraw 脱机版配合使用,实现手动画布编辑。通过 `graphics check --strict` 和 `graphics render` 命令,用户可以验证并生成符合规范的图表。

兼容平台~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。
  3. 更新该源文件,而不是编辑生成的图片或创建副本。
  4. 在带有 kb/ 的知识库中,使用 kb/diagrams/<slug>.diagram.json,并与 kb/notes/<slug>.md 配合使用。根据宿主约定嵌入或链接渲染的亮/暗图像,并通过笔记而不是二进制画布建立知识链接。
  5. 在知识库之外,默认使用 diagrams/<slug>.diagram.json。

设计视觉效果

在创建或实质性重新设计图表之前,请阅读 视觉沟通指南。

深入应用以下默认规则:

  • 对普通概念使用圆角矩形。相同角色应具有相同的尺寸、圆角半径、描边粗细、图标大小和标签样式。
  • 连接形状之间至少保留 96px 空间,最好 120–200px,以使箭头看起来像关系而不是接缝。
  • 将图标直接放在其语义形状内部。不要在一个有边框的卡片内放置另一个带边框的图标块。
  • 在提示允许抽象时,使用三到七个主要元素。
  • 建立清晰的阅读顺序,并将同级元素对齐到共享网格。
  • 使用边框、颜色或文字之外的空白来分隔组。
  • 颜色最多用于一种语义区分。不要进行任意的大小或样式更改,以免暗示提示未提供的差异。
  • 保持图标的辅助性:标签仍必须传达含义。
  • 每个对象最好只有一个可见边框,每个轴或连接器只有一条可见描边。

不要为了满足这些偏好而“改进”文字数据。提示优先。

编写和渲染

使用公开的 schema URL 或运行 graphics init 获取入门文件:

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

渲染命令会覆盖一致的同一词干导出文件。在布局或对比度不确定时,检查亮色和暗色输出。处理所有有用的 lint 发现;更改源文件,然后重新渲染。

如果仓库使用自己的字体或图标包,请阅读 自定义指南。不要向仓库添加 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. 如果需要配套笔记,请确认其路径和视觉引用。

相关技能