cathrynlavery/diagram-design
让AI编程工具画出杂志排版质感图表,而不是千篇一律的圆角方框
让Claude Code、Codex或Pi帮你画图,往往只能得到和网站风格格格不入的圆角方框图。这个仓库提供一个技能包,内置38种编辑排版风格的图表类型,每张图都是自包含的HTML加SVG文件,不需要任何构建步骤,浏览器直接打开就能看。只要给出你的网站地址,大约60秒就能自动提取配色和字体套用到所有图表上。
它做什么
- 覆盖架构图、流程图、时序图、状态机、组织结构图等38种图表类型,每种都提供简约浅色、简约深色和完整编辑版三种版本。
- 有一套严格的视觉规范:不用阴影,只用1像素细边框,仅三种字体家族(Instrument Serif和Geist系列),所有坐标、宽度、间距都对齐4像素网格,避免出现AI生成的廉价感。
- 能读取已有的draw.io或Mermaid图表并按同一套设计系统重新绘制,可选择输出格式、尺寸和细节层级,并给出哪些内容被合并或删减的清单。
- 自动分析用户网站,提取背景色、文字色、强调色和字体,检查是否符合WCAG AA对比度标准,并保存为可复用的品牌样式指南。
- 在GitHub获得23713个星标,仓库内附带自动检测脚本,在合并代码前拦截样式违规和无障碍问题。
为什么重要
它解决了AI生成图表千篇一律、与品牌不搭的老问题,原本这会逼人放弃画图或跑去设计工具里手动折腾半小时。写文档、博客或演示文稿的人可以直接在AI编程助手里得到符合自己品牌调性、可发布的图表。
本仓库术语
- SVG · 一种放大不失真的矢量图像格式
- Mermaid · 一款用文本描述来生成图表的开源工具
- draw.io · 一款基于网页的图表编辑软件
- WCAG AA · 规定文字与背景对比度是否足够的网页无障碍标准
- Agent Skill · AI编程工具执行特定任务时加载的一组指令
仓库简介（英文）
38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.
在 GitHub 打开热门仓库
- vorssaint/vorssaint-utils一个免费菜单栏应用,顶替十几款付费Mac工具
- Alishahryar1/free-claude-code一个本地代理,把编程AI助手接到49家免费或低价模型服务商,不再只能用一家付费服务
- freestylefly/awesome-gpt-image-2把532个GPT-Image2案例拆解成可复用模板的提示词工程库
- block/buzz一个让人类和AI智能体在同一空间里聊天、写代码、做审查的开源协作平台
- NousResearch/hermes-agentNous Research推出的Hermes是一款越用越聪明的AI智能体
- virgiliojr94/book-to-skill把技术类书籍PDF变成AI编程助手随时可查阅的技能包
- VoltAgent/awesome-agent-skills把上千份让AI编程助手秒变专家的操作手册集中放在一个地方
- anthropics/claude-plugins-community一个把大家做的Claude插件集中起来供安装的仓库