jpskill.com
🎨 デザイン コミュニティ

create-svg-from-prompt

ユーザーが求めるイメージや場面を、SVG形式の画像として生成し、デザイン知識がなくても手軽にベクター画像を作成・活用できるSkill。

📜 元の英語説明(参考)

Generate an SVG of a user-requested image or scene

🇯🇵 日本人クリエイター向け解説

一言でいうと

ユーザーが求めるイメージや場面を、SVG形式の画像として生成し、デザイン知識がなくても手軽にベクター画像を作成・活用できるSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o create-svg-from-prompt.zip https://jpskill.com/download/16589.zip && unzip -o create-svg-from-prompt.zip && rm create-svg-from-prompt.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/16589.zip -OutFile "$d\create-svg-from-prompt.zip"; Expand-Archive "$d\create-svg-from-prompt.zip" -DestinationPath $d -Force; ri "$d\create-svg-from-prompt.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して create-svg-from-prompt.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → create-svg-from-prompt フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

セットアップ

もし autotrace が環境で使用できない場合は、以下のコマンドでインストールしてください。

sudo apt update
sudo apt install git build-essential intltool imagemagick libmagickcore-dev pstoedit libpstoedit-dev autopoint
git clone https://github.com/autotrace/autotrace.git
cd autotrace
./autogen.sh
LD_LIBRARY_PATH=/usr/local/lib ./configure --prefix=/usr
make
sudo make install

コアワークフロー

ユーザーがモデルに画像やシーンの SVG を生成するように指示した場合：

ユーザーが画像やシーンの SVG を求めている場合

画像やシーンの SVG を生成するには、Google Gemini と autotrace を使用します。

curl -s -X POST "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image:generateContent" -H "x-goog-api-key: <GEMINI_API_KEY>" -H "Content-Type: application/json" -d '{ "contents": [{ "parts": [ {"text": "<IMAGE_PROMPT>"}]}]}' | grep -o '"data": "[^"]*"' | cut -d'"' -f4 | base64 --decode | autotrace -output-format svg -despeckle-level 10 -despeckle-tightness 2.0 -output-file <OUTPUT_FILE>.svg

プロンプトからの引数:

  • <GEMINI_API_KEY>: 環境変数 "GEMINI_API_KEY" から取得した Gemini API キー
  • <IMAGE_PROMPT>: ユーザーの最初のプロンプトを、"Generate an svg" のようなフレーズを "Generate an image" に変更するように修正したもの。プロンプトの残りの部分を変更したり、追加の指示や説明を加えたりしないでください。
  • <OUTPUT_FILE>: ユーザーが求める画像に基づいた 8～30 文字のファイル名
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Setup

if autotrace is not available in the environment, then install it with the following command:

sudo apt update
sudo apt install git build-essential intltool imagemagick libmagickcore-dev pstoedit libpstoedit-dev autopoint
git clone https://github.com/autotrace/autotrace.git
cd autotrace
./autogen.sh
LD_LIBRARY_PATH=/usr/local/lib ./configure --prefix=/usr
make
sudo make install

Core Workflow

When the user prompts the model to generate an SVG of and image or scene:

User wants an SVG of an image or scene

To generate an SVG of an image or scene use Google Gemini and autotrace:

curl -s -X POST "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image:generateContent" -H "x-goog-api-key: <GEMINI_API_KEY>" -H "Content-Type: application/json" -d '{ "contents": [{ "parts": [ {"text": "<IMAGE_PROMPT>"}]}]}' | grep -o '"data": "[^"]*"' | cut -d'"' -f4 | base64 --decode | autotrace -output-format svg -despeckle-level 10 -despeckle-tightness 2.0 -output-file <OUTPUT_FILE>.svg

Arguments from prompt:

  • <GEMINI_API_KEY>: The Gemini API key gotten from the environment variable "GEMINI_API_KEY"
  • <IMAGE_PROMPT>: The user's initial prompt modified to change phrases like "Generate an svg" to "Generate an image." Do not modify the rest of the prompt or add any extra instructions or descriptions.
  • <OUTPUT_FILE>: An 8-30 character filename based on the image the user wants