用途：该技能用于生成编辑级质感的图表，输出为自包含的 HTML + SVG 文件，与品牌视觉一致，适用于架构图、流程图、时序图、状态机、ER 图、时间线、泳道图、四象限、嵌套图、树形图、组织架构图、韦恩图、分层图、金字塔/漏斗等 14 种图表类型，另有顾问式 2x2 场景矩阵。
主要能力：读取目标网站首页，提取主色板与字体栈，映射为语义化 token（paper、ink、muted、accent、paper-2 等），并自动执行 WCAG AA 对比度检查，尺寸过小不达标时给出调整建议。支持暗色模式变体、手绘风格 SVG 滤镜、编辑性斜体批注与虚线引导线。所有坐标、宽高与间距按 4 的倍数对齐，强调单一强调色，不使用阴影、渐变或模糊。
使用方式：安装可用 git clone 加软链接到 ~/.claude/skills 目录，也可通过 /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。品牌接入只需向 Claude 提出“onboard diagram-design to https://yoursite.com”，确认后写入 references/style-guide.md，也可手动编辑该文件覆盖默认 token。生成图表时直接用自然语言描述需求即可，Claude 会选择合适类型、构建 HTML + SVG 并套用品牌 token。
适用场景：需要快速产出与站点风格统一的架构、流程、时序、时间线、四象限等图示，用于文档、演示或产品说明。
限制：默认配色为 jet-black + atomic-tangerine，需执行品牌接入才应用自有品牌；若目标站点使用内联样式或初始加载不含的 CSS-in-JS，颜色提取可能失败，需手动设置 token；字体依赖外部 Web 字体，需在 head 中引入；暗色模式、手绘风格等为可选变体。其余细节资料未提供。