mcpField
C
create-svg-illustrations

create-svg-illustrations

github.com/narumiruna设计与 UI1782 次安装6 天前更新
代码仓库

关于 create-svg-illustrations

用于为幻灯片和文档制作可编辑 SVG 插图的技能，涵盖设计、无障碍、可移植性、验证及目标渲染器检查。

主要功能

  1. 01检查目标尺寸、配色和渲染器
  2. 02制作含无障碍描述的可编辑 SVG
  3. 03保持素材易于移植
  4. 04使用 svglint 验证并检查渲染效果
  5. 05参考针对性文档和示例

适用场景

  1. 01为幻灯片制作图表
  2. 02在文档中嵌入 SVG 插图
  3. 03检查 SVG 缩放、裁切和对比度

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/narumiruna/skills --skill create-svg-illustrations

安装后在 Claude Code 中输入/create-svg-illustrations确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/examples/
with-diagrams.md
references/
core-rules.md
embedding.md
pattern-examples.md
troubleshooting.md

详细介绍

SVG 插图

从 references/core-rules.md 开始；仅加载产物所需的额外细节。

需求阅读或使用
画布、样式、文本、无障碍访问、验证references/core-rules.md
可复用的构图references/pattern-examples.md
Marp 嵌入references/embedding.md
渲染失败references/troubleshooting.md
已验证可用的幻灯片示例assets/examples/with-diagrams.md

工作流

  1. 检查目标幻灯片或文档、所需尺寸、周边配色和渲染器。
  2. 创建最精简且可编辑的 SVG 来传达想法。使用正确的 viewBox、明确的文本样式、一致的几何形状；当图像具有语义时，添加 SVG 标题和描述。嵌入时，还要按照 references/embedding.md 的要求提供描述性的宿主级替代文本或相邻的语义等效内容；仅有 SVG 内部元数据并不足够。
  3. 保持资源可移植：除非输出必须自包含，否则避免嵌入字体、含义不明的表情符号、不必要的滤镜和 base64 内容。
  4. 如果有 svglint，则使用它进行验证；然后在目标产物中打开或嵌入 SVG，并检查裁切、缩放、对比度、文本和相对路径。
  5. 先返回 SVG 产物，再说明执行的验证以及任何渲染器或字体方面的注意事项。

仅当请求也要求时，才使用幻灯片创作或配色指南。若只运行了源代码验证，不要声称检查过视觉效果；除非收到请求，否则不要提交或发布产物。

评论

支持 Markdown