cathrynlavery/diagram-design

项目概览

它针对通用 AI 生成图表观感差、与站点品牌不符的问题，提供了无需构建步骤、可直接在浏览器打开的输出形式，并支持从网站 URL 提取品牌配色与字体，在 Claude Code 与 Codex 插件市场可安装。

项目类型

提示词工程

应用场景

文档办公

部署方式

查看项目说明

License

MIT

适合谁

• 需要与站点品牌风格一致、可直接在浏览器查看的图表，且不想在 Figma 中反复调整的内容创作者与开发者。

核心能力

• Agent 生成单个自包含 HTML 文件，内含内联 SVG，覆盖 45 种图表类型，可直接在浏览器打开，无需构建步骤或 JavaScript。
• 从用户网站 URL 提取配色与字体栈，映射到语义化 token 角色，并应用到后续每个图表。

限制与风险

• 生成结果不是可编辑的源格式：没有可供 diff 的文本，也没有可拖拽的画布。
• 输出质量取决于运行它的模型，同一提示词两次生成的布局可能不同。

如何开始

• 运行 npx skills add cathrynlavery/diagram-design 安装；向 Agent 提出图表需求（例如“为我的应用画一张架构图”）；在浏览器中打开生成的 .html 文件。

核验依据

• GitHub 项目简介: Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, and Pi. 45 diagram types. Self-contained HTML + SVG.
• README: I'd either fight with Figma for 30 minutes or skip the diagram.
• README: Open any of them directly in a browser. There is no build step, JavaScript, or external image dependency.
• README: the skill pulls your brand from your website and applies it across every diagram.
• README: You: "onboard diagram-design to https://yoursite.com" Agent: → fetches the homepage → extracts the dominant palette + font stack

来源更新时间：2026-10-27T18:24:54Z

打开原始 GitHub 项目