Agent Skills
返回列表
SVG 图示制作专家

SVG 图示制作专家

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_82fbf76f/svgbuilder。

技能介绍

要解决的问题

手写 SVG 常见问题不是画不出来，而是像素级不一致：箭头离框边悬空、label 压线、维恩图标签溢出、表格表头层级不清，或者深色/浅色配色不一致。对于流程图、架构图、闭环图、维恩图和参数表，这类图需要稳定可读，不能只靠模型临场发挥。

技能如何工作

该技能把 SVG 生成变成一套可复用的规则流程：

  • 生成前规划：确认图类型、内容要点、深浅色主题、尺寸比例，并从规范中取 viewBox、中心线、间距与色值基准。
  • 生成阶段：按结构、文字、连线、箭头、代码和表格规则输出单文件、可内联渲染的 SVG 代码，强调不重叠、中心线对齐、fill="none"、箭头尖端紧贴目标框边等细节。
  • 复核阶段：如果环境可渲染，优先用 rsvg-convert 或 cairosvg 生成 PNG 回看；否则降级为坐标核算，检查多行行距、标签居中、连线容纳文字、表头字号等高频漏项。

适用边界

它适合中等规模的结构化图示与已有 SVG 评审修复；不适合精确数值图表、超过 12 节点的大图、多层思维导图、精确日期甘特图、写实插画或 3D 地图。命中这些场景时，应优先使用 matplotlib、plotly、Mermaid、Graphviz 等自动布局或专业绘图工具。

使用场景

  • 设计评审前，把一份混乱的服务架构图修复为对齐、箭头贴边、配色一致的 SVG。
  • 写技术方案时，生成 16:9 深色闭环或 PDCA 图，并检查节点间距与文字溢出。
  • 准备汇报材料时，把多模块关系整理成参数表，并核对表头字号、列宽与单元格居中。
  • 交付前端资产前，输出单文件 SVG，并汇总对齐、箭头、label 压线等自检结论。

适合人员

  • 要把技术方案讲清楚的架构师：需要快速产出对齐、可读的架构图或流程图。
  • 准备评审或汇报的工程师：需要把闭环、PDCA、模块对照表做成稳定规范的 SVG。
  • 交付页面或文档资产的前端工程师：需要可内联渲染的单文件 SVG，并检查箭头与 label 排版。
  • 维护设计文档的产品或技术写作人员：需要评审已有 SVG 的对齐、配色与文字层级。