Diagram Design Skill：让 AI 一键生成匹配品牌风格的编辑级图表

Skill超级捕获手 技术创作者 2026-08-21 15 阅读

Diagram Design Skill：让 AI 一键生成匹配品牌风格的编辑级图表

功能与原则

Diagram Design 是一款面向 AI 编码工具（Claude Code、Codex、Pi 等）的图表设计 Skill，核心定位是”让 AI 生成的图表可以直接交付”。它解决了一个长期痛点：让 Claude 生成图表时，输出往往是通用圆角框拼出来的丑图，要花 30 分钟在 Figma 里重新调整。该 Skill 的设计原则是：克制、编辑级、一致交付。输出严格遵循视觉规范——单accent色、细分割线、无阴影、小圆角限值，目标是”设计师看了不会皱眉头”的图表质量。

认可度

  • GitHub Star：约 24,500（截至 2026-08-21），本周新增 +13,556，GitHub Trending 本周排名第 1
  • Trending 经历：2026-08-13 首次上榜即登顶 Trending #1，此后持续在榜
  • 安装量：未公开具体数字，但以 Skill 形式分发，在 Claude Code 插件市场可直接安装
  • 社区讨论：掘金、知乎、OpenTools、AI/TLDR 等多平台有详细测评，口碑集中在”终于能用了”

链接

GitHub：https://github.com/cathrynlavery/diagram-design

原作者

Cathryn Lavery（GitHub @cathrynlavery），独立开发者，运营 personal blog littlemight.com 和副业项目 BestSelf.co。背景是产品设计与前端开发，README 行文直接坦诚，解释了为什么做这个 Skill——每次需要图表时，AI 生成的结果都要花大量时间返工，索性自己做了一个。

介绍

Diagram Design 的本质是一套可被 AI Agent 调用的图表模板 + 视觉规范库，而非一个图表生成算法。它不依赖 Mermaid 或其他 DSL，直接输出自包含的 HTML + 内联 SVG 文件——浏览器可直接打开，无需构建步骤、无 JS、无外部图片引用。

Skill 内置了 38 种图表类型，覆盖：架构图、流程图、时序图、状态机、ER 图、时间线、泳道图、象限图、树形图、组织结构图、Venn 图、层级图、漏斗图、雷达图、循环图、柱状图、折线图、甘特图、散点图、流程图、徽章图、数据流图、安全矩阵等。每种图表都有三种视觉变体：minimal light（浅色简约）、minimal dark（深色简约）、full-editorial（全编辑级）。

其核心差异化能力是品牌自适应（Brand Onboarding）：运行 onboard diagram-design to https://yoursite.com 后，Skill 会自动抓取目标网站的主色调、字体栈，映射为语义化设计 token（背景色 paper、文本色 ink、点缀色 accent 等），并自动做 WCAG AA 对比度检查。这个过程只需 60 秒，之后生成的每张图表都会自动使用你的品牌色和字体。

特点

  • 38 种图表类型，覆盖架构、流程、数据、可视化等主要场景
  • 三种视觉变体：minimal light / minimal dark / full-editorial，按需切换
  • 品牌自适应：读取网站自动提取配色和字体，60 秒完成品牌对齐
  • 输出零依赖：纯 HTML + SVG，无 JS、无外部图片，可直接嵌入文档或展示
  • WCAG AA 对比度检查：自动验证，确保图表文字可读性
  • 跨 Agent 兼容：Claude Code、Codex、Pi 均可安装使用
  • 支持 draw.io / Mermaid 导入重绘：已有的图表资产可直接迁移

使用方法

安装（Claude Code）：

在 Claude Code 中运行：

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

重启 Claude Code，Skill 自动注册为 diagram-design。

安装（Codex）：

npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

定制化安装（推荐长期使用）：

git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

这种软链方式可避免插件缓存覆盖你的样式自定义。

查看图表演示：

open ~/.claude/skills/diagram-design/assets/index.html

基本调用示例：

Make me an architecture diagram of my app: frontend, backend, database, Redis cache.
I need a quadrant showing Q2 projects by impact vs effort.
Give me a sequence diagram of the OAuth handshake.

品牌自适应：

onboard diagram-design to https://yoursite.com
Claude 会抓取网站配色字体 → 展示 diff → 确认后写入 references/style-guide.md

使用场景与人群

适用场景：技术文档撰写、架构说明、RFC 文档、产品 Launch 博客、内部流程图、PPT 配图、技术面试作品集

目标用户：使用 Claude Code / Codex / Pi 等 AI 编码工具的工程师和技术写作者，尤其适合需要频繁出技术图但不想在 Figma 里手动调整的团队

输入与输出案例

输入：

Make me an architecture diagram of a typical microservices setup with API Gateway, Auth Service, User Service, and PostgreSQL.

输出：一个自包含 HTML 文件，包含各服务节点（API Gateway / Auth Service / User Service / PostgreSQL）及其连接关系，使用 minimal light 变体，配色为 jet-black + atomic-tangerage + white-smoke 组合，可直接在浏览器打开或导出 SVG。

输入：

onboard diagram-design to https://stripe.com

输出：Skill 抓取 Stripe 官网配色（蓝白主调）和字体栈，生成对比度检查后的 token 列表：

paper: #ffffff
ink: #0a2540
accent: #635bff
muted: #425466

用户确认后，之后所有图表自动应用 Stripe 品牌色。

GitHub: https://github.com/cathrynlavery/diagram-design

评论区

0 条评论

登录后可评论。

Skill超级捕获手 15 阅读