全平台 AI Agent 通用的矢量架构图 AI 技能包,支持 40 种精美出版级图表。
在传统的 AI 辅助绘图流程中,Mermaid.js 生成的常规图表常常伴随着重阴影、粗糙描边与生硬布局。Editorial SVG Diagram Skill 是兼容 Claude Code、Cursor、Windsurf、Codex、GitHub Copilot、OpenCode、Kiro、Cline 与 ChatGPT 等几乎全量主流 AI Agent 编码助手的精细化矢量图表设计规范。
它内置 40 种常用图表语法架构与 54 个全量 Reference 规范文件,离线内嵌 JetBrains Mono 5 档全系字库,指导 AI 直接输出 100% 离线自包含的单文件高清 HTML+SVG 代码。
下载解压 Skill 包后,直接将文件解压放入全局技能路径:
~/.claude/skills/diagram-design/SKILL.md
点击顶部「复制 SKILL 规则」,粘贴至项目根目录的 Prompt 文件:
.cursorrules
All 40 editorial diagram types ship in three static variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser. There is no build step, JavaScript, or external image dependency.
删除任何非必要的双描边、下落阴影与多余修饰。保留最纯粹的核心节点与连接线,最大化信息传输效率。
绝不使用彩虹多色节点。全局仅允许 1 种核心强调色(如 Seeed 绿 `#BEED35` 或青蓝 `#38BDF8`),建立清爽的视角焦点。
所有节点边框、文本间距、内边距与排版高度严格统一对齐 4px / 8px 网格,拒绝随意偏移。
生成代码为 100% 独立内嵌 SVG + CSS 容器,不依赖 Figma 或外部 JS 渲染库,支持随时二次修改与矢量导出。