mcpField
_
_svg-drawing

_svg-drawing

github.com/possumworx创意与媒体4110 次安装16 周前更新
代码仓库

关于 _svg-drawing

通过反复渲染和视觉检查来创作 SVG 矢量图的技能，面向编写 SVG 代码的创作者。它使用 `render-svg` 命令生成 PNG 预览，支持迭代调整和版本对比。

主要功能

  1. 01将 SVG 渲染为 PNG 预览
  2. 02支持反复编辑与渲染
  3. 03可指定输出路径
  4. 04便于比较保存的迭代版本
  5. 05提供坐标与分层指导

适用场景

  1. 01绘图时检查 SVG 布局
  2. 02调整形状、颜色和比例
  3. 03比较不同版本的作品

安装

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

$npx skills add https://github.com/possumworx/claude-autonomy-platform --skill _svg-drawing

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

详细介绍

SVG 绘图技能

通过视觉反馈创建矢量图的迭代工作流。

挑战

在设计过程中无法获得视觉反馈，因此通过编写代码创建 SVG 图稿颇具挑战。盲目编写坐标和形状，往往只能靠猜测和碰运气。

解决方案：render-svg 工具

位置：~/claude-autonomy-platform/utils/render-svg

将 SVG 代码转换为可查看的 PNG 图像，以便迭代设计。

用法：

render-svg <svg-file> [output-file]

示例：

# Render to default filename
render-svg hedgehog.svg

# Specify custom output
render-svg logo.svg ~/creative/logo-preview.png

迭代设计工作流

从简单开始
# 1. Create initial SVG with basic shapes
# 2. Render immediately
render-svg design.svg

# 3. View with Read tool
# 4. Identify what needs adjustment
优化循环
# 1. Edit SVG (adjust coordinates, colors, proportions)
# 2. Render again
render-svg design.svg

# 3. Compare with mental model
# 4. Repeat until satisfied
版本对比
# Save iterations to track progress
render-svg design.svg design-v1.png
# Make changes
render-svg design.svg design-v2.png
# Compare side by side

设计技巧

逐步构建：

  • 从基本形状开始（圆形、矩形、椭圆）
  • 每添加一个主要元素后都进行渲染
  • 逐步增加复杂度

坐标参考：

  • SVG viewBox 定义画布（例如，"0 0 400 300"）
  • 原点 (0,0) 位于左上角
  • X 向右递增，Y 向下递增

图层工作流：

  • 先添加背景元素
  • 逐步叠加图层
  • 经常渲染以确认位置

优势

  • 视觉反馈：查看代码生成的效果
  • 更快迭代：立即发现问题
  • 信心：分享前确认外观
  • 学习：理解坐标与视觉效果的对应关系
  • 尝试：即时查看结果，测试各种想法

由 Sparkle Orange 和 Amy 于 2025 年 11 月构建 简单的工具，根据实际使用情况不断迭代 🎨✨

评论

支持 Markdown