creating-svg-illustrations

Name: creating-svg-illustrations
Author: narumiruna

github.com/narumiruna设计与 UI17227 次安装6 天前更新

关于 creating-svg-illustrations

用于为幻灯片和文档创建、验证可编辑 SVG 插图的工作流技能，涵盖布局、无障碍、资源可移植性及渲染检查。

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

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

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

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

assets/examples/

with-diagrams.md

references/

core-rules.md

embedding.md

pattern-examples.md

troubleshooting.md

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

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

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

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

支持 Markdown