Diagram Design

Diagram Design 是一个专为 Claude Code（及 Codex 等支持 Skills 的 AI 助手）设计的开源技能包。它旨在解决 AI 生成图表“通用、廉价、与品牌脱节”的痛点，能够根据自然语言指令，在 60 秒内生成具有编辑级质量、完美匹配你网站品牌的 HTML/SVG 图表。

无需 Figma，无需手动调整颜色，无需忍受通用的圆角框。它通过读取你的网站，自动提取配色和字体，将图表无缝融入你的视觉体系。

核心亮点

1. 60 秒品牌自动适配

• 智能抓取：只需提供网址，Skill 会自动分析你的网站首页，提取主色调、辅助色、字体栈。
• 语义映射：将提取的颜色映射为 paper (背景), ink (文字), accent (强调), muted (次要) 等语义 Token。
• 对比度校验：自动确保生成的图表符合 WCAG AA 无障碍标准，若对比度不足会主动建议调整。

2. 14 种专业图表类型

覆盖从技术架构到商业演示的全场景，每种类型提供极简浅色、极简深色和全编辑级三种变体：

• 技术类：架构图 (Architecture)、流程图 (Flowchart)、序列图 (Sequence)、状态机 (State Machine)。
• 商业类：金字塔原理 (Pyramid)、 quadrant (四象限矩阵)、漏斗图 (Funnel)、时间轴 (Timeline)。
• 其他：维恩图、层级图、雷达图等。

3. 编辑级设计哲学

• 克制美学：目标密度 4/10，每个节点都必须“赢得”其存在的位置。
• 焦点引导：每张图表仅保留 1-2 个强调色焦点，引导读者视线。
• 排版规范：
  • 标题/标注：Instrument Serif (衬线体，优雅且具 editorial 感)。
  • 节点名称：Geist Sans (无衬线体，清晰现代)。
  • 技术标签：Geist Mono (等宽字体，用于端口、URL、字段类型)。
• 像素级严谨：所有坐标、间距均为 4 的倍数，边框半径最大 10px，杜绝“AI 随意感”。

快速开始

1. 安装

方式 A：克隆并符号链接（推荐，便于自定义）

git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design
# 重启 Claude Code

方式 B：作为插件安装（快速试用）

# Claude Code
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

# Codex
npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

2. 品牌 onboard (仅需一次)

在 Claude Code 中输入：

“onboard diagram-design to https://yoursite.com“

Claude 将：

1. 抓取你的首页。
2. 提取颜色和字体。
3. 生成 references/style-guide.md 并展示差异。
4. 你确认 “yes, apply it” 后，后续所有图表将自动使用你的品牌风格。

3. 生成图表

直接下达指令：

“Make me an architecture diagram of my app: frontend, backend, database, Redis cache.”
“I need a quadrant showing Q2 projects by impact vs effort.”
“Give me a sequence diagram of the OAuth handshake.”

Claude 会自动选择最合适的图表类型，生成单文件 HTML，并在浏览器中打开供你预览或截图。

架构与设计系统

• 渐进式披露：SKILL.md 仅作为索引，Claude 仅在需要时加载特定图表类型的参考文件（如 type-flowchart.md），保持上下文轻量。
• 原生 HTML/SVG：输出为纯 HTML 文件，无需构建步骤，无外部依赖，可直接嵌入文档或截图分享。
• 原语扩展：
  • Annotation：斜体衬线标注 + 虚线贝塞尔引导线，模拟杂志旁注。
  • Sketchy Filter：SVG 扰动滤镜，可生成手绘风格变体（适合非正式场景）。

何时不使用此 Skill？

• 快速 Unicode 图表：如需在终端或推文中使用，请使用 wiretext-style。
• 简单列表：直接使用表格或项目符号。
• 前后对比：使用表格更清晰。
• 单元素说明：如果一个带标签的框就能说清，直接写句子。