一个面向 Claude Code、Codex 和 Pi 的 Agent Skill，能生成 27 种编辑级图表，全部为自包含 HTML + SVG，无阴影、无 Mermaid 风格模板感。2.0 新增 Loop 类型，用于带共享内存枢纽的飞轮图。
核心卖点是品牌适配：Skill 会读取你的网站，自动提取配色和字体并应用到所有图表，约 60 秒完成。也支持直接导入 draw.io 文件重绘，并可按格式、尺寸、详细程度和受众四档调节输出。默认提供浅色、深色、全编辑三种变体，无需构建步骤，浏览器直接打开。
图表类型覆盖架构图、流程图、时序图、状态机、ER 图、时间线、泳道图、象限图、嵌套图、树形图、组织架构图、维恩图、层级图、金字塔/漏斗图、雷达图、循环图、甘特图、散点图等 27 种。
设计系统强调克制：单一强调色、每图 1-2 个焦点元素、1px 细边框、无阴影、所有坐标和间距可被 4 整除。内置 55 个 IT/云图标，支持手绘风格滤镜和注解标注。
首次使用时会检查样式指南是否已定制，避免默认皮肤混入品牌项目。导入 draw.io 文件后会输出保真度清单，说明哪些元素被合并、折叠或丢弃。
对经常需要为博客、文档或演示配图，又不想在 Figma 里耗时间的开发者来说，这个 Skill 能直接产出与站点风格一致的图表。项目由 BestSelf.co 创始人 Cathryn Lavery 开发。
GitHub
#GitHub #开源 #DiagramDesign #ClaudeCode #Codex #AI绘图 #设计系统 #AgentSkill
@GitHubTrendingHub