画像からベクター は何をしますか？
参照画像を一致するSVGに変換し、さらに依頼者の希望するスタイル（および、必要であればアニメーション）のアートワークに仕上げます。
以下のコマンドでは、<skill>はこのスキルのフォルダ、つまりこのファイルがあるフォルダを指します。pythonがPython 3でない場合はpython3を使用してください。-Iフラグは、Pythonが画像フォルダから無関係なファイルをインポートするのを防ぎます。
このワークフローが存在する理由
「目測」で座標を打って認識可能な形状を描くことは、近づいたように感じても失敗します。推定された点はそれぞれ少しずつずれ、そのずれが積み重なり、結果は特定のものではなく一般的な形状として認識されます。人はすぐに気づきます（「全然似てない」）。参照画像のピクセルをトレースすれば正確なジオメトリが得られ、その後のすべてのステップ（色、シェーディング、アニメーション）はすでに正しい形状に基づいて構築されます。
トレースと同じくらい重要な習慣が2つあります：
- 主張する前に一致を証明すること。 出力を参照画像の横に並べ、参照画像の上に重ねて表示してください。「この画像に一致しています」と、そのオーバーレイを確認せずに言ってはいけません。一致していないときにそれを言うと、描画自体よりも多くの信頼を失います。
- 実装する前にデザインの承認を得ること。 レンダリングされたプレビューとしてバリエーションを表示し、選択してもらってください。プレビューの変更は安価ですが、統合されたコードの変更は安価ではありません。また、依頼者が見ていないデザインは拒否される傾向があります。
セットアップ
スクリプトにはPython 3.9以上（Pillow、NumPy、scikit-imageが必要）、Node 18以上、および（プレビュー用に）Edge、Chrome、またはChromiumが必要です。以下で確認してください：
python -c "import PIL, numpy, skimage" && node --version
Pythonパッケージが不足している場合は、インストールする前に確認を取ってください。pip install -r <skill>/requirements.txtでインストールするか、uv run --with pillow --with numpy --with scikit-image python ...でインストールせずに実行できます。
スクラッチフォルダで作業してください。参照画像は元の場所に置いたままにし、共有されるものにコピーしないでください。
手順
1. 良い参照画像を入手する
フラットなアートワークはきれいにトレースできます：2D描画、フラットアイコン、ロゴ、ベタ塗りと輪郭線のある漫画。写真や3Dレンダリングにはグラデーションや反射があり、斑点状に分解されます。写真しかない場合は、同じ被写体のフラットな描画を依頼するか（依頼者の了承を得て）検索してください。きれいな「Xの描き方：最終ステップ」の画像が理想的です。写真は後でシェーディングをガイドするためだけに使用します。
まず自分で画像を見てください。その部分を平易な言葉で命名し（フクロウの場合：耳毛、顔盤、目、くちばし、腹部、翼）、後で依頼者と話せるようにしてください。
2. 色をサンプリングする
python -I <skill>/scripts/palette.py <image>
これにより、画像サイズ、被写体のバウンディングボックス、主要な色、および初期パレットが出力されます。それらをトレース設定に変換します：フラットな領域ごとに1つの名前付き色（body、belly、eye、line、background...）。小さな領域（くちばし、ハイライト）は初期設定のカットオフ以下になる場合があるので、画像で確認してください。アンチエイリアスされたエッジ色も確認してください：暗い輪郭は2つまたは3つの暗い色合いとして現れることがよくあります。それぞれに独自のパレットエントリを割り当て、同じレイヤーに入れてください。
3. トレース
設定ファイルを書き（references/config.mdですべてのキーを文書化し、examples/owl/owl.config.jsonは動作例です）、以下を実行します：
python -I <skill>/scripts/trace.py <image> <config.json> <out-dir>
各ピクセルは最も近いパレット色に割り当てられます。各レイヤーの連結領域は輪郭が抽出され（軽くブラーをかけたマスクにマーチングスクエアを適用し、エッジを滑らかにします）、単純化され、画像自身のピクセル座標のSVGパスデータとして<out-dir>/regions.jsonに書き込まれます。背景以外のすべてを含むsilhouetteレイヤーは常に含まれます。また、フラットカラーのSVGであるtrace.svgと、各ピクセルがどの色に割り当てられたかを示すclasses.pngも書き込まれます。領域が正しく出なかった場合はclasses.pngを確認してください。references/config.mdの末尾の表によくある修正方法が記載されています。
4. 一致を証明する
node <skill>/scripts/compare.mjs <out-dir>/regions.json <image> <config.json> <out-dir>/compare.html
python -I <skill>/scripts/render.py <out-dir>/compare.html <out-dir>/compare.png --size 1160x520
設定のcompareColoursは各レイヤーを参照画像自身の色にマッピングするため、再構築はオリジナルのように見えるはずです。このページは、参照画像、再構築画像、および再構築画像を参照画像に55%の不透明度で重ね、シルエットを青い輪郭線で囲んだものを表示します。PNGを見て正直に確認してください：輪郭、すべての領域、線とその太さ。設定を修正し、一致するまで再トレースしてください。この比較も依頼者に見せてください。これがその後の信頼を得るものです。
もし依頼者が画像のSVGだけを欲しかった場合、trace.svgがそれです：比較結果と一緒に渡し、それ以上を望まなければここで終了します。
5. 3つのバリエーションにリスタイルする
同じトレース形状から、依頼者の要求する色で、真に異なる3つのレンダリングを構築します。references/styles.mdにレシピがあります：
- A、フラットアイコン： ベタ塗り、太い輪郭線、2トーンの明暗分割。小さなサイズで最も鮮明。
- B、ソフト3D： 各領域が独自の左上光源グラデーションを持ち、プレートはソフトなドロップシャドウで浮き上がり、光沢のあるシェル、発光するディテール。
- C、シネマティックメタル： マルチバンドのブラシグラデーション、ベベルエッジ、反射の筋、ブルーム。
色替え（たとえば「ダーク版」）は、同じレイヤーに対するパレットの交換です。すべての領域は形状を保持するため、それでもオリジナルとして認識されます。
各バリアントを暗い背景と明るい背景の両方で大きく表示し、実際に使用されるサイズ（アバターは72pxと40px、ファビコンは32pxと16pxなど）でも表示し、比較用にオリジナルの色も含めたプレビューページを作成してください。render.pyでそれをPNGにレンダリングし、自分で見て、環境が許す方法（開ける画像やファイル、アーティファクト、サイドパネル）で依頼者に見せてください。選択してもらうか、組み合わせ（たとえばCの仕上げにAの輪郭線）を提案してください。まだ何も組み込まないでください。
6. アニメーション（オプション、スタイル決定後）
references/animation.mdをお読みください。要約すると：状態ごとのムード（待機、思考、会話、一時停止）、ループ用のCSSキーフレーム、およびデータにタイミングを合わせるもの（発話ラウドネスエンベロープへのリップシンクなど）にはSMILの<animate>を使用します。ムードをHTMLページとしてライブプレビューし、静止PNGも送ってください。再度承認を得てください。
7. 実装する
ここで初めてプロジェクトに触れます。トレースした形状を、パスデータをあちこちに貼り付けるのではなく、コードモジュールに変換します：
node <skill>/scripts/emit_shapes.mjs <out-dir>/regions.json <target>/shapes.ts --name OWL_SHAPES --layers silhouette,body,wings=wing[],eyes=eye,ink
key=layerはレイヤーの名前を変更し、[]はその領域を配列として保持するため、各領域に個別にシェーディングを適用できます。このモジュールはOWL_SHAPES_VIEWBOXもエクスポートします。座標は参照画像のピクセル空間に保ち、そのviewBoxでフレームしてください。埋め込みに関する注意事項はreferences/animation.mdに、Claude Code Modに関する注意事項はreferences/claude-code-mods.mdにあります。
依頼者との会話
- 説明するのではなく、見せてください。すべてのデザインステップは、相手が見られる画像で終わります。
- 相手がおかしいと言ったら、それを信じてください。参照画像と比較し、何が違うかを具体的に言ってから変更してください。
- どうやって作るのかと聞かれたら、平易な言葉で方法を説明してください（「すべてのピクセルを色で分類し、各色の輪郭をトレースし、その輪郭をベクター形状に変換します」）。
- 商標登録されたキャラクターや会社のロゴについて、個人使用のためにトレースすることは問題ありません。説教じみることなく、公開や販売は別問題であることを一度だけ述べてください。