diagram-design
为 Claude Code 提供 29 种编辑级图表类型的 Skill，直接生成自包含 HTML + SVG，免去 Figma 手动调整。核心亮点是能读取你的网站自动提取配色与字体并应用到所有图表，同时内置 WCAG 对比度检查，强调无阴影、无 AI 味的编辑设计风格。适合需要高质量架构图、流程图、象限图等场景的开发者。
README
Diagram Design
设计师也不会讨厌的编辑级图表。
2.0 新增 — Loop（循环图）：带共享内存中枢的飞轮。虚线表示写回。
27 种图表类型。一个 Claude Code skill。60 秒匹配你的品牌 —— 该 skill 会读取你的网站，并将颜色和字体映射到每张图表。
不需要 Figma。没有千篇一律的圆角方框。不用花 30 分钟挑颜色。
为什么做这个
我在 littlemight.com 写作（同时运营着 BestSelf.co）。每次我需要图表时 —— 架构草图、流程图、"什么最重要"的优先级金字塔 —— 我都会让 Claude 生成，但得到的是千篇一律的圆角方框，和网站其余部分完全不搭。我要么在 Figma 里折腾 30 分钟，要么干脆跳过图表。
所以我为它构建了一个 Claude Code skill。二十七种类型，编辑级质量，通过读取你的网站在 60 秒内匹配你的品牌。
最高质量的操作通常是删减。 每个节点都要靠质量赢得位置。强调色只留给读者应该最先看到的 1–2 个元素。目标密度：4/10。
它能做什么
全部 27 种图表都有三个变体：极简浅色、极简深色、全编辑风格。直接用浏览器打开，无需构建步骤、无需 JS、无需外部图片。
架构图 组件 + 连接 |
 < 相关内容transformerspaperclipLifeOScode-graph-rag |