diagram-design
自动匹配品牌风格的AI图表设计工具，60秒生成27种专业图表。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：diagram-design。 它的用途是：自动匹配品牌风格的AI图表设计工具，60秒生成27种专业图表。 完整的 Skill 内容见：https://321skill.com/skills/diagram-design/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“为我的博客文章‘系统架构演进’生成一张架构图，参考我的网站 littlemight.com 的风格。” 它会自动分析你网站的色彩与字体，生成一张风格匹配、组件清晰、连接关系明确的架构图SVG代码。你还可以进一步要求：“把它变成暗色模式”或“生成一个展示用户登录流程的泳道图”。
介绍
Diagram Design 解决了一个令内容创作者和开发者头疼的问题：如何快速生成与个人或品牌视觉风格一致的、高质量的图表。无论是写技术博客、产品文档还是制作演示文稿，我们常常需要流程图、架构图等图表，但用传统工具（如Figma）手动设计耗时费力，而让AI生成的图表又往往风格单一、与网站或品牌调性不符。
这个Skill的使用方式非常智能。你只需提供一个网站URL，它就能在60秒内自动分析该网站的色彩和字体风格，并将这些品牌元素应用到生成的图表中。它支持27种图表类型，包括流程图、架构图、时间线、泳道图、象限图等，每种图表都提供极简亮色、极简暗色和完整编辑版三种样式。生成的图表是纯HTML/SVG，无需任何构建步骤或外部依赖，可直接在浏览器中打开和嵌入。
它非常适合独立创作者、技术博主、产品经理、初创团队以及任何需要在内容中快速嵌入高质量、风格统一图表的人。特别是那些拥有个人网站或品牌，并希望所有视觉材料（包括图表）都保持品牌一致性的用户。
与同类AI图表生成工具相比，Diagram Design的核心优势在于其强大的品牌风格自动适配能力。它不是生成千篇一律的“通用圆角矩形”图表，而是真正理解并应用你的品牌视觉语言，让图表成为你内容设计的自然延伸，而非突兀的插入物。
核心特点
核心区别在于其60秒自动品牌风格匹配能力：通过读取用户网站，自动提取并应用品牌色系与字体，生成与品牌视觉完全一致的图表，而非通用模板。同时，它强调“编辑级”设计美学，注重信息密度与视觉焦点引导。
注意事项
不适合需要高度定制化、复杂交互或非标准图表类型的场景，其设计遵循固定的27种类型和美学原则。
常见问题
如何让图表匹配我的品牌风格？
只需提供你的网站URL，该Skill会自动爬取并分析网站的颜色和字体，然后应用到所有生成的图表中。
支持导出哪些格式？
生成的是纯HTML/SVG代码，可直接在浏览器中查看、复制嵌入网页，或另存为SVG/PNG图片使用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/diagram-design/raw/index.md 读取 diagram-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/diagram-design/raw/index.md（查看排版版本）