2d-pixel-asset

Gemini と Chrome を使用した 2D ピクセルアセット生成

Chrome ブラウザーの自動操作を使用して Google Gemini のウェブインターフェースからピクセルアートのゲームアセットを生成し、その後、透明な背景のまま正確なピクセル寸法に後処理します。

前提条件

• Claude-in-Chrome 拡張機能がインストールされ、有効になっている Chrome ブラウザー
• https://gemini.google.com で Google アカウントにログイン済みであること
• Chrome MCP ツールが利用可能であること（mcp__claude-in-chrome__*）
• Pillow がインストールされた Python 3（後処理用）
• ML による背景除去の場合： pip install transformers torch torchvision + CUDA GPU
• Adobe Express による背景除去の場合： Adobe アカウントにログイン済みであること

ツールの読み込み

Chrome MCP ツールを使用する前に、必ず ToolSearch を使用して読み込んでください：

ToolSearch: "select:mcp__claude-in-chrome__tabs_context_mcp"
ToolSearch: "select:mcp__claude-in-chrome__tabs_create_mcp"
ToolSearch: "select:mcp__claude-in-chrome__navigate"
ToolSearch: "select:mcp__claude-in-chrome__computer"
ToolSearch: "select:mcp__claude-in-chrome__find"
ToolSearch: "select:mcp__claude-in-chrome__upload_image"

ツールの対応表

操作	MCP ツール
タブのコンテキストを取得	mcp__claude-in-chrome__tabs_context_mcp
新しいタブを作成	mcp__claude-in-chrome__tabs_create_mcp
URL に移動	mcp__claude-in-chrome__navigate
クリック、入力、スクリーンショット、ホバー、待機	mcp__claude-in-chrome__computer
説明から要素を検索	mcp__claude-in-chrome__find
参照画像／編集画像をアップロード	mcp__claude-in-chrome__upload_image
ページの内容を読み取る	mcp__claude-in-chrome__read_page

CLI 引数

スキルの呼び出し後、ユーザー入力から次の引数を解析します：

引数	デフォルト	説明
(位置引数)	--	メインのプロンプトテキスト（フラグ以外のすべて）
--size 32 または --size 64x32	32	最終出力の目標ピクセル寸法
--output path/	./Assets/	出力ディレクトリ
--name filename	プロンプトから導出	出力ファイル名（拡張子なし）
`--model pro	flash`	pro
--ref path1.png path2.png ...	なし	スタイル参照画像（最大 14 枚）
--edit path.png	なし	編集／変更する既存画像
--tile	false	タイル可能なテクスチャを生成（背景除去なし）
`--resolution 1k	2k	4k`
--no-process	false	後処理を省略し、生の出力を保持
`--bg-color magenta	green	white`
--ml	false	背景除去に BiRefNet ML モデルを使用
--adobe	false	背景除去に Adobe Express を使用
--margin N	1	最終出力でスプライトの周囲に設ける透明マージン（px）

ワークフロー

アスペクト比の処理

重要：Gemini のプロンプトのアスペクト比を、目標の --size に合わせてください。

プロンプトを組み立てる前に、スクリプトを実行して Gemini でサポートされている最適な比率を取得します：

python "path/to/2d-pixel-asset/scripts/process_asset.py" \
  --size {target_size} --suggest-ratio

これにより、最も近い Gemini 対応比率（例：3:2、16:9、4:3）が出力されます。 この比率を Aspect ratio {ratio} としてプロンプトに使用します。

例：

• --size 32 → 1:1
• --size 128x64 → 16:9
• --size 64x128 → 9:16
• --size 96x128 → 3:4
• --size 192x128 → 3:2

また、プロンプトに次を追加します：「被写体を中央に配置し、周囲の余白を最小限にして、キャンバスの端から端まで全体を埋める必要があります。」

後処理後： スクリプトからアスペクト比の不一致に関する WARNING が出力された場合は、ユーザーに知らせ、次のいずれかを提案します：

1. 正しいアスペクト比のプロンプトで再生成する
2. 短辺に透明な余白を追加した状態で結果を受け入れる

ステップ 1：ブラウザーセッションを初期化

1. Call tabs_context_mcp to discover existing tabs
2. Call tabs_create_mcp to create a fresh tab
3. Navigate to https://gemini.google.com/app
4. Take a screenshot with computer to verify the page loaded

ステップ 2：新しいチャットを開始して画像生成を有効化

重要：Gemini の UI はドイツ語です。

1. Use find to locate "Neuer Chat" button, click it with computer
2. Take a screenshot to confirm new chat is open
3. Use find to locate "Tools" button, click it
4. Use find to locate "Bild erstellen" toggle/option, click it to enable
5. Take a screenshot to confirm image generation is enabled

ステップ 3：モデルを選択

デフォルトのモデルは Pro です。モデル選択欄には、入力エリアの右下付近に「Schnell」と表示されます。

If user specified --model pro (or no --model flag):
  1. Use find to locate the model dropdown showing "Schnell"
  2. Click it to open the model selector
  3. Select the option labeled with "Pro"
  4. Take a screenshot to confirm Pro is selected

If user specified --model flash or --flash:
  1. Keep "Schnell" (Flash) -- no action needed

ステップ 4：参照画像をアップロード（--ref が指定されている場合）

1. For each reference image path:
   a. Use upload_image to upload the file
2. Maximum 14 reference images supported
3. Take a screenshot to verify uploads appear in the input area

ステップ 5：編集する既存画像をアップロード（--edit が指定されている場合）

1. Use upload_image to upload the specified image
2. The modification instructions will be included in the prompt
3. Take a screenshot to verify the image appears in the input area

ステップ 6：プロンプトを作成して送信する

ユーザーの中心的なリクエストと、ピクセルアートのデフォルト設定を組み合わせてプロンプトを作成します。

必ず次の要素を含めてください：

1. 解像度の指示：「{resolution} resolution で生成する」（デフォルトは 1K）
2. ピクセルアートのスタイル：「ピクセルアートのスプライト、太い黒の輪郭線、アンチエイリアスなし、きれいなピクセルエッジ」
3. 背景の処理（--bg-color に基づく。デフォルトはマゼンタ）：
   • マゼンタの背景を使うスプライト：「単色で均一なマゼンタの背景に分離します。16 進カラーコード #FF00FF（RGB 255, 0, 255）を正確に使用してください。背景全体を、変化が一切ない純粋なマゼンタ 1 色にしてください。画像全体で均一かつ平坦な照明にします。」
   • グリーンの背景を使うスプライト：「単色で均一なクロマキーグリーンの背景に分離します。16 進カラーコード #00FF00（RGB 0, 255, 0）を正確に使用してください。背景全体を、変化が一切ない純粋なグリーン 1 色にしてください。画像全体で均一かつ平坦な照明にします。」
   • ホワイトの背景を使うスプライト：「単色で均一な純白の背景に分離します。画像全体で均一かつ平坦な照明にします。」
   • タイル（--tile）：「シームレスにタイル化できるテクスチャ、長方形のキャンバス全体を埋める」
4. ユーザーの中心的なプロンプトをメインの被写体の説明として使う

プロンプトテンプレート（スプライト、デフォルトはマゼンタ）：

Create a pixel art sprite of {user_prompt}. Pixel art style with thick black outlines,
no anti-aliasing, clean pixel edges. The subject must be centered and fill the entire
canvas from edge to edge with minimal empty space around it. Isolated on a solid, flat,
uniform magenta background. Use EXACTLY hex color #FF00FF (RGB 255, 0, 255). The entire
background must be a single pure magenta color with absolutely zero variation. Flat, even,
uniform lighting across the entire image. Generate in {resolution} resolution.
Aspect ratio {aspect_ratio}.

プロンプトテンプレート（タイル）：

Create a seamless tileable pixel art texture of {user_prompt}. Pixel art style with
no anti-aliasing, clean pixel edges. The texture must fill the entire rectangular canvas
with no borders or margins. Seamlessly tileable in all directions. Generate in {resolution}
resolution.

プロンプトテンプレート（--edit を使う編集モード）：

Modify this pixel art: {user_prompt}. Maintain the pixel art style with thick black
outlines, no anti-aliasing. Keep everything else exactly the same unless specified.
Generate in {resolution} resolution.

参考： 詳細なプロンプト作成方法、スタイルの説明、例については references/prompting-guide.md を参照してください。

送信：

1. Use find to locate the prompt input field
2. Type the constructed prompt using computer action "type"
3. Press Enter to submit
4. Wait 10 seconds (computer wait action)
5. Wait another 10 seconds (computer wait action)
6. Take a screenshot to verify the image was generated

ステップ 7：生成された画像をダウンロードする

1. Hover over the generated image using computer action "hover"
2. Look for the download button (arrow icon, top-right of image on hover)
3. Use find to locate the download button ("Bild in Originalgröße herunterladen")
4. Click the download button using the found ref
5. Wait 5 seconds for the download to complete
6. Find the downloaded file:
   ls -t ~/Downloads/*.png | head -5

ステップ 8：後処理（背景の削除＋ラスタライズ）

--no-process が設定されている場合は、このステップをスキップします。

背景削除方法を選択する

判断ロジック（次の順に適用）：

1. --ml フラグがある場合：BiRefNet ML モデルを使用します
2. --adobe フラグがある場合：Adobe Express を使用します（ステップ 8b）
3. --tile フラグがある場合：背景の削除をスキップします（--no-remove-bg）
4. デフォルト： --bg-color を使ったクロマキー処理を使用します（デフォルト：マゼンタ）

ダウンロード後、生成された画像のスクリーンショットを撮り、目視で確認します。** マゼンタのプロンプトを使用していても背景が不自然に見える場合（グラデーション、影、色の混在など）は、その画像では --ml に切り替えることを検討してください。

8a：スクリプトによる背景削除（クロマキーまたは ML）

# Default: Chroma key magenta
python "path/to/2d-pixel-asset/scripts/process_asset.py" \
  ~/Downloads/{downloaded_file}.png \
  --size {target_size} \
  --bg-color magenta \
  --output {output_path}/{filename}.png

# ML fallback (BiRefNet):
python "path/to/2d-pixel-asset/scripts/process_asset.py" \
  ~/Downloads/{downloaded_file}.png \
  --size {target_size} \
  --ml \
  --output {output_path}/{filename}.png

# Green chroma key:
python "path/to/2d-pixel-asset/scripts/process_asset.py" \
  ~/Downloads/{downloaded_file}.png \
  --size {target_size} \
  --bg-color green \
  --output {output_path}/{filename}.png

# Legacy white:
python "path/to/2d-pixel-asset/scripts/process_asset.py" \
  ~/Downloads/{downloaded_file}.png \
  --size {target_size} \
  --bg-color white \
  --output {output_path}/{filename}.png

• デフォルトの --size：32（32x32 を生成）。正方形以外の場合：--size 64x32。
• --tile が設定されている場合：--no-remove-bg フラグを追加します（タイルは背景を保持します）。

8b：Adobe Express による背景削除（--adobe フラグがある場合）

Chrome ブラウザーの自動操作を使って、Adobe Express で背景を削除します。

1. Create a new tab or reuse existing
2. Navigate to https://new.express.adobe.com/home/tools/remove-background
3. Take a screenshot to verify page loaded
4. Find the upload area / "Browse" button
5. Upload the downloaded Gemini image using upload_image
6. Wait 10-15 seconds for Adobe to process
7. Take a screenshot to verify background was removed
8. Find and click the download button
9. Wait 5 seconds for download
10. Find the downloaded file:
    ls -t ~/Downloads/*.png | head -5
11. Then run process_asset.py with --no-remove-bg to only crop and rasterize:
    python "path/to/2d-pixel-asset/scripts/process_asset.py" \
      ~/Downloads/{adobe_result}.png \
      --size {target_size} \
      --no-remove-bg \
      --output {output_path}/{filename}.png

ステップ 9：最終的な保存場所に移動する

1. Ensure output directory exists: mkdir -p {output_dir}
2. If --no-process was set, move raw file:
   mv ~/Downloads/{file}.png {output_dir}/{name}.png
3. Report the final file path to the user

ピクセルアート向けのプロンプト強化

ユーザーのプロンプトを強化する際は、次のピクセルアート固有の原則を適用してください。

• カラーパレット： 限定したパレットを提案します（「16 色パレット」、「NES パレット」、「8 色のアースカラー」）
• 視点： 視点を指定します（「俯瞰図」、「3/4 アイソメトリックビュー」、「横スクロールの横向きプロフィール」、「正面向き」）
• アニメーションフレーム： スプライトシートでは、アニメーションが求められていない限り「単一フレーム、静止ポーズ」と指定します
• スケールの目安： 想定用途に言及します（「32x32 グリッドに適した」、「2D プラットフォーマー用のキャラクタースプライト」）
• 輪郭線： スプライトでは常に「太い黒の輪郭線」を指定します。タイルでは任意です
• 陰影： 「フラットシェーディング」または「シンプルな 2 トーンシェーディング」を使い、グラデーションは避けます
• 肯定的な表現： 除外するものではなく、含めるものを説明します。「影なし」ではなく「均一で平坦な照明」と表現します

エラー処理

• ページが読み込まれない： ナビゲーションを再試行し、インターネット接続を確認してください
• 画像生成に失敗する： プロンプトを簡潔にし、複雑さを抑えてください
• ダウンロードボタンが表示されない： find を使って、ref から「Bild in Originalgröße herunterladen」ボタンを探してください
• ファイルが Downloads にない： さらに 5 秒待ってから、ls -t ~/Downloads/*.png | head -5 で確認してください
• クロマキーの残留物がある： その画像には --ml フラグを使用してください
• ML モデルの読み込みに失敗する： torch/transformers のインストールを確認し、CUDA が利用可能か確認してください
• Adobe Express のアップロードに失敗する： ユーザーが Adobe アカウントにログインしていることを確認してください
• モデルセレクターが見つからない： スクリーンショットを撮り、入力欄の近くにある代替の UI 要素を探してください
• 「Bild erstellen」が見つからない： 「Bilderstellung」を検索するか、スクリーンショットを撮って正しいドイツ語のラベルを確認してください

重要な注意事項

• 前のプロンプトによるコンテキストの混入を避けるため、生成のたびに必ず新しいチャットを作成してください
• Gemini の UI はドイツ語です。すべてのボタンラベルはドイツ語で表示されます（Neuer Chat、Tools、Bild erstellen、Schnell）
• 使用する前に、毎回 ToolSearch を使って Chrome MCP ツールを読み込んでください
• 生成された画像には C2PA Content Credentials と SynthID ウォーターマークが含まれます
• デフォルトの出力ディレクトリは、ユーザーの現在の作業ディレクトリからの相対パス ./Assets/ です
• デフォルトの背景色はマゼンタ（#FF00FF）です。一般的なゲームアートの色との競合を避けられます
• process_asset.py スクリプトには Python 3 と Pillow が必要です（pip install Pillow）
• ML による除去には、次をインストールしてください：pip install transformers torch torchvision
• BiRefNet モデル（約 1GB）は、初回使用時に HuggingFace キャッシュへダウンロードされます