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 打开热门仓库
- public-apis/public-apis一份由社区维护的免费API大全仓库
- semantica-agi/semantica一个让AI智能体的决策可追溯、可审计的开源图谱基础设施
- cactus-compute/needle一个14MB的AI模型,让手机和可穿戴设备无需联网就能调用工具
- unslothai/unsloth一款让你在自己电脑上运行和训练AI模型的桌面应用，无需写代码
- macro-inc/macro把邮件、聊天、文档、任务和CRM互相链接、共享同一份AI团队记忆的一体化办公平台
- harry0703/MoneyPrinterTurbo只需一个主题或关键词，就能自动生成配好文案、素材、字幕和音乐的完整短视频的开源工具
- basecamp/omarchyDHH打造的、开箱即用且风格统一的Linux发行版
- mattpocock/skills一套可复用的提示词剧本,防止Claude Code等AI编程代理跑偏