mcpField
_
_svg-drawing

_svg-drawing

github.com/possumworxクリエイティブ・メディア4110 回インストール16 週間前に更新
リポジトリ

_svg-drawing について

SVGベクターアートを描き、レンダリングと目視確認を繰り返すためのスキルです。SVGコードを作成する人向けで、`render-svg`コマンドからPNGプレビューを生成し、調整やバージョン比較を行えます。

主な機能

  1. 01SVGファイルを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 対応