AI AGENT SKILL RUNBOOK

Editorial SVG Diagram Skill

全平台 AI Agent 通用的矢量架构图 AI 技能包,支持 40 种精美出版级图表。

↓ 下载 Skill 本地包 (ZIP)
← 返回工具集 (Back to Widgets)
Overview

出版级矢量架构图 AI 技能包 (Diagram Design)

在传统的 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 代码。

AI Agent Quick Setup

🤖 Claude Code / Cursor / Codex / Copilot / Cline 配置

下载解压 Skill 包后,直接将文件解压放入全局技能路径:

~/.claude/skills/diagram-design/SKILL.md

💻 Cursor & Windsurf 配置

点击顶部「复制 SKILL 规则」,粘贴至项目根目录的 Prompt 文件:

.cursorrules

What it makes

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.

Taste Gate Standard

核心设计与品味原则 (Design Rules)

极简删除原则 (The Remove Test)

删除任何非必要的双描边、下落阴影与多余修饰。保留最纯粹的核心节点与连接线,最大化信息传输效率。

克制的 Accent 色彩

绝不使用彩虹多色节点。全局仅允许 1 种核心强调色(如 Seeed 绿 `#BEED35` 或青蓝 `#38BDF8`),建立清爽的视角焦点。

4px / 8px 模块网格

所有节点边框、文本间距、内边距与排版高度严格统一对齐 4px / 8px 网格,拒绝随意偏移。

矢量无缝嵌入

生成代码为 100% 独立内嵌 SVG + CSS 容器,不依赖 Figma 或外部 JS 渲染库,支持随时二次修改与矢量导出。

立即获取 Editorial SVG Diagram Skill

零外部导流,100% 本地托管,为你的 AI 编码助手注入出版级绘图能力。

↓ 下载 Skill 本地包 (ZIP)