mcpField
S
svg-creator

svg-creator

github.com/upbrew-tech设计与 UI3975 次安装13 周前更新
代码仓库

关于 svg-creator

svg-creator 是用于创作 SVG 图形的 Skill，要求先渲染并检查效果，再继续迭代。它指导创作者从编写草稿、视觉检查到修改和交付，并提供适用于不同图形类型的技巧。

主要功能

  1. 01要求渲染并进行视觉检查
  2. 02支持迭代改进 SVG
  3. 03提供光照与纹理技巧
  4. 04涵盖常见图形类别的制作指导
  5. 05未渲染时阻止交付

适用场景

  1. 01制作并检查 SVG 图标或标志
  2. 02通过预览迭代完善图表和插画

安装

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

$npx skills add https://github.com/upbrew-tech/svg-creator-skill --skill svg-creator

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

包含的文件

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

LICENSE
.gitignore
README.md
references/
advanced-techniques.md
scripts/
svg_loop.py

详细介绍

SVG 创建技能

强制工作流

每个 SVG 都必须经过反馈循环脚本。没有例外。未经渲染和目视验证的 SVG 不能交付。

循环
WRITE SVG → RENDER → VIEW PNG → ASSESS → FIX → RENDER → VIEW → ... → DELIVER
分步说明

1. 将 SVG 写入工作文件：

cat > /home/claude/draft.svg << 'SVGEOF'
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  ...
</svg>
SVGEOF

2. 渲染（强制 — 脚本会跟踪此步骤）：

python3 /path/to/skill/scripts/svg_loop.py render /home/claude/draft.svg

这会创建 /home/claude/svg_preview.png。

3. 查看渲染后的 PNG（强制 — 必须实际查看）： 使用 view 工具查看 /home/claude/svg_preview.png。仔细检查所见内容。

4. 评估结果。问问自己：

  • 元素的位置是否正确？
  • 是否有间隙、重叠或未对齐？
  • 比例看起来是否合适？
  • 颜色和渐变是否正常？
  • 对于角色：身体各部分是否自然连接？

5. 如果有任何问题，修正 SVG 并返回步骤 2。 使用 str_replace 编辑 /home/claude/draft.svg，或重写文件，然后再次渲染并查看。

6. 效果良好后，交付：

python3 /path/to/skill/scripts/svg_loop.py finish /home/claude/draft.svg output-name.svg

这会将 SVG 和预览 PNG 复制到 /mnt/user-data/outputs/。如果你从未渲染过，脚本会拒绝交付。

然后使用 present_files 与用户分享输出的 SVG。

迭代指南
  • **简单图标、徽标、图案：**通常迭代 1-2 次即可
  • **图表、信息图：**迭代 2-3 次
  • **场景、插画：**迭代 3-5 次
  • **角色、人物、动物：**迭代 5-8 次（逐步构建——先画躯干，再逐个添加四肢，每次添加后都要渲染）
脚本命令参考
python3 scripts/svg_loop.py render <file.svg>   # Render + view cycle
python3 scripts/svg_loop.py finish <file.svg> [name.svg]  # Deliver (blocks if no render)
python3 scripts/svg_loop.py status               # Check iteration count
python3 scripts/svg_loop.py reset                # Start fresh

视觉质量技巧

构建 SVG 时应用这些技巧。它们适用于所有类型的 SVG。

多段渐变（4 段以上）

双色渐变看起来很平。使用 4-8 个色标，并调整色相：

<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1" color-interpolation="linearRGB">
  <stop offset="0%" stop-color="#0f172a"/>
  <stop offset="25%" stop-color="#1e3a5f"/>
  <stop offset="50%" stop-color="#3b82f6"/>
  <stop offset="75%" stop-color="#93c5fd"/>
  <stop offset="90%" stop-color="#fde68a"/>
  <stop offset="100%" stop-color="#f97316"/>
</linearGradient>

对于球体：使用径向渐变，并设置 fx="0.3" fy="0.3"（将渐变中心偏向光源）。

五区照明

每个非简单物体都需要：镜面高光（明亮、偏暖）、受光区域、中间色调（真实颜色）、形体阴影（较冷的色调——蓝色／紫色，绝不可用黑色）、反射光（阴影边缘的微弱暖光，不透明度为 0.10-0.20）。

彩色阴影

阴影使用深蓝色（#1a1a4e）、紫色（#2d1b4e）或青绿色（#0d3b4f）。绝不要使用纯黑色或灰色。

投影滤镜
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"
  color-interpolation-filters="linearRGB">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
  <feOffset in="blur" dx="3" dy="5" result="offset"/>
  <feFlood flood-color="#1e1b4b" flood-opacity="0.30" result="color"/>
  <feComposite in="color" in2="offset" operator="in" result="shadow"/>
  <feMerge><feMergeNode in="shadow"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
噪点纹理（打破数字化的完美感）
<filter id="grain" color-interpolation-filters="linearRGB">
  <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="3" stitchTiles="stitch"/>
  <feColorMatrix type="saturate" values="0"/>
  <feBlend in="SourceGraphic" mode="soft-light"/>
</filter>

在表面和背景上以 5-15% 的不透明度应用。

关键默认设置
  • 所有 <filter> 元素：color-interpolation-filters="linearRGB"
  • 所有渐变元素：color-interpolation="linearRGB"
  • 动画元素：transform-box: fill-box; transform-origin: center;

按类别提供的指南

角色、人物、动物

这是最难的类别。逐步构建，并积极进行反馈：

  1. 绘制躯干 → 渲染 → 验证
  2. 添加腿部 → 渲染 → 验证连接
  3. 添加手臂 → 渲染 → 验证
  4. 添加头部 → 渲染 → 验证
  5. 添加细节 → 渲染 → 最终检查

使用较粗的 <line>，并设置 stroke-linecap="round" 来绘制四肢。每个关节处都添加 <circle>，并在四肢之后绘制。这样最能确保连接自然可靠。

对于动画角色：使用带有前向运动学的 React/JSX 产物（JS 根据关节角度计算位置，可确保关节连接）。

图标（24×24 描边样式）

与网格对齐，描边宽度为 2px，设置 stroke-linecap="round"、stroke-linejoin="round"、fill="none"、stroke="currentColor"。坐标范围保持在 2-22 之间。通常一次即可完成。

徽标和徽章

采用几何构造并居中。使用渐变填充增强立体感。最多使用 2-3 种颜色。在小尺寸下测试可读性（渲染为宽度 64px）。

场景和风景

按照由后向前的顺序分层：天空 → 远景元素（低饱和度、浅色）→ 中景元素 → 前景（鲜艳）。在各层之间添加大气雾霭（半透明的蓝白色矩形）。最后叠加暗角。

数据可视化

根据数据计算位置。在条形图／分段上使用渐变填充。网格线采用柔和的颜色（#f1f5f9）。所有端点均使用圆角。

图案

小型重复平铺图案。使用 <pattern> 元素，并设置 patternUnits="userSpaceOnUse"。斜向变体使用 patternTransform="rotate(45)"。

文档结构

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"
     role="img" aria-labelledby="svg-title">
  <title id="svg-title">Descriptive Title</title>
  <defs></defs>
  <g id="background">...</g>
  <g id="midground">...</g>
  <g id="foreground">...</g>
  <g id="effects">...</g>
</svg>

高级参考

阅读 references/advanced-techniques.md，了解完整方案：滤镜链、feTurbulence 指南、feComponentTransfer 色彩分级、材质模拟、构图模板、氛围效果、动画（CSS + SMIL）等。

评论

支持 Markdown