用途：为博客文章与文档生成编辑级质量的图表，输出自包含 HTML+SVG，无需构建步骤，不使用 Mermaid，不使用阴影。
主要能力：支持 13 种图表类型，包括架构图、流程图、时序图、状态机、ER／数据模型、时间线、泳道图、四象限、嵌套图、树形图、层级堆栈、韦恩图、金字塔／漏斗图。提供类型选择规则：先判断图表是否比一段写好的文字更有信息量，否则不画，默认倾向删减。设计系统规定：坐标、宽度、间距均为 4px 倍数；无阴影；最大圆角 10px；仅 1px 细边框；字体分三族三角色（Instrument Serif 标题、Geist Sans 节点名与标签、Geist Mono 技术子标签）；每张图仅一个强调色并保留给 1 至 2 个焦点节点；目标视觉密度 4/10。
使用方式：将仓库克隆到 ~/.claude/skills/diagram-design 并重启 Claude Code，或从其他位置创建符号链接。安装命令：git clone git@github.com:cathrynlavery/diagram-design.git ~/.claude/skills/diagram-design；可选本地浏览所有类型：open ~/.claude/skills/diagram-design/assets/index.html。可直接用自然语言描述需求，由 Claude 选择类型并生成 HTML 文件；也可复制模板：cp assets/template.html my-diagram.html 或 cp assets/template-full.html my-diagram.html。品牌匹配：运行“onboard diagram-design to https://yoursite.com”，会抓取首页、提取主色与字体栈、映射为 paper/ink/muted/accent/link 语义角色、运行 WCAG AA 对比度检查并写入 references/style-guide.md，也可手动编辑该文件覆盖。首次在新项目使用且 style-guide.md 为默认时，会提示选择引导、手动粘贴或使用默认。
适用场景：博客文章与文档配图，以及架构、流程、时序、状态、数据模型、时间线、泳道、象限、层级、树、堆叠、集合重叠、漏斗等表达。
限制：资料未提供价格、平台兼容范围与效果保证；手绘滤镜变体适用于随笔而非技术文档；其余细节暂未提供。