mcpField
P
post-process-logo

post-process-logo

github.com/tradingstrategy-aiデザイン・UI82961 回インストール今日更新
リポジトリ

post-process-logo について

ボールトプロトコルの元ロゴを、標準的な 256×256 の PNG に変換するスキルです。適切な画像バリアントを選び、余白を加えて正方形に整えます。

主な機能

  1. 01元ロゴの一覧化と分類
  2. 02適切なロゴバリアントの選択
  3. 03非正方形画像への透明余白の追加
  4. 04256×256 PNG への変換と縮小
  5. 05ライト版とダーク版の作成

活用シーン

  1. 01ボールトプロトコルのメタデータ用ロゴの準備
  2. 02横長または縦長ロゴの正方形化
  3. 03ライト背景用とダーク背景用のロゴ作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/tradingstrategy-ai/web3-ethereum-defi --skill post-process-logo

インストール後、Claude Code で/post-process-logoを入力して読み込まれたか確認します。

詳細

ロゴの後処理

このスキルは、元のロゴ画像を、ボールトプロトコルのメタデータに適した標準化済みの 256x256 PNG 形式に変換します。利用可能なロゴの中から最も正方形に近いバリエーションを自動的に選択し、必要に応じて余白を追加して正方形の出力を作成します。

必要な入力

開始する前に、以下の情報をユーザーから収集してください。

  1. 入力フォルダー - 元のロゴファイルが含まれるフォルダー（例：eth_defi/data/vaults/original_logos/protocol-name/）
  2. 出力フォルダー - 処理済みのロゴを保存するフォルダー（例：eth_defi/data/vaults/formatted_logos/）
  3. バリエーションの指定（任意） - 処理するバリエーション：generic、light、dark、または all

必要な入力が不足している場合は、処理を進める前にユーザーに確認してください。

前提条件

以下が利用できることを確認してください。

  1. Python の依存関係がインストール済みであること：poetry install --with dev

画像形式、寸法、透過を検出するために、Python Pillow がインストールされています。

ロゴの用語

ロゴファイルのダーク版とライト版にアーティストが付ける名前について、共通の標準はありません。このプロジェクトでは、常に次のように定義します。

  • light：暗い背景または透明な背景に配置された明るい（白い）文字
  • dark：白い背景または透明な背景に配置された暗い（黒い）文字

以下の用語を使用します。

  • ブランドマーク：ロゴマークと同じで、ブランド名の文字を含まないロゴ
  • ワードマーク：ブランド名の文字を含むロゴ

ステップ 1：入力ロゴの一覧確認

入力フォルダー内のすべての画像ファイルを一覧表示し、分類します。

  1. ファイル形式を特定します：SVG、PNG、JPG、WEBP など
  2. ファイル名に基づいてバリエーションを分類します：
    • {slug}.generic.{ext} - 汎用／デフォルトのテーマ
    • {slug}.light.{ext} - 明るい背景のテーマ（暗いロゴ）
    • {slug}.dark.{ext} - 暗い背景のテーマ（明るいロゴ）
  3. 後処理用のソースロゴには、必ずワードマークよりブランドマークを優先します
  4. 各ロゴのアスペクト比を確認します：
    • 正方形のアスペクト比：幅と高さが同じ（比率 1:1）。元データでまれに 1 ピクセルの誤差が発生する場合があるため、検出では 90% の許容範囲を設けます。
    • 正方形以外：幅と高さが異なり、正方形にするには余白の追加が必要です
  5. ロゴの背景が透明かどうかを確認します：
    • 透明な背景：アルファチャンネルによる透過を含む PNG ファイル
    • SVG は常に透明とみなす：元の SVG ファイルに単色の背景が含まれていてはなりません
  6. 各バリエーションのアスペクト比を明記して、確認結果をユーザーに報告します

ステップ 2：バリエーションの選択

自動選択の優先順位
  1. 最も正方形に近いバリエーションを選択：各バリエーションのアスペクト比（短辺 / 長辺）を計算し、1.0 に最も近いものを選択します
  2. 正方形に近い度合いが同じバリエーションが複数ある場合：
    • 透明なバリエーション（アルファチャンネル付き PNG、SVG）を優先します
    • それでも同じ場合は、generic > light > dark の順で優先します
  3. ユーザーがバリエーションを指定した場合：正方形に近い度合いにかかわらず、指定されたバリエーションを使用します

ステップ 3：ロゴの処理

選択したロゴのバリエーションを処理します。スクリプトは、正方形以外のロゴを拡大縮小する前に、正方形にするための余白を自動的に追加します。

export INPUT_IMAGE=/path/to/original/logo.png
export OUTPUT_IMAGE=/path/to/output/logo.generic.png
poetry run python scripts/logos/post-process-logo.py

スクリプトは以下を実行します。

  1. 必要に応じて SVG を PNG に変換します
  2. ロゴを正方形にするため、透明な余白を追加します（正方形以外の場合）
  3. 背景がまだ透明でない場合は、背景を削除します
  4. 暗い背景で見えるように、必要に応じてロゴの色を変更します（ロゴが暗すぎる場合は色を反転します）
  5. 余分な余白を取り除き、256x256 に拡大縮小します

ステップ 4：結果の報告

以下の情報をユーザーに提供します。

  1. 処理済みファイル - 作成した出力ファイルの一覧
  2. ファイルの詳細 - 各ファイルの寸法とサイズ
  3. 問題点 - 処理できなかったロゴや、品質上の問題があったロゴを記載します

出力ファイルの命名規則

出力ファイルには、次の命名パターンを使用します。

  • {protocol-slug}/light.png - 明るい背景用
  • {protocol-slug}/dark.png - 暗い背景用

トラブルシューティング

SVG 変換の問題

SVG の変換に失敗する場合：

  1. SVG ファイルが有効な XML か確認してください
  2. 複雑な SVG は正しくレンダリングされないことがあります
  3. ブラウザーで開いて、SVG が正しく表示されるか確認してください
背景除去の問題

背景が正しく除去されない場合：

  1. ロゴのエッジが複雑、またはグラデーションが含まれている可能性があります
  2. より高解像度の入力を指定してみてください
  3. すでに透明な背景を持つロゴの場合、スクリプトは背景除去をスキップします

コメント

Markdown 対応