picture-backdrop

ピクチャーバックドロップ

デスクトップはmodのバックドロップを、mod自身がレンダリングするsceneとしてのみ描画し、その内部にラスター画像を描画することはありません。そのため、画像はベクター経路にトレースされ、厳格なサイズ制限内に収められ、小さなmodによって描画されます。 modの描画方法を変更する前にreferences/limits.mdを読んでください。測定された内容と、何が黙って失敗するかが記載されています。

ワークフロー

1. 画像を入手する。 1枚の画像、またはライト（昼）用とダーク（夜）用のペア。ランドスケープで1600x1000程度が適しています。アプリはxMidYMid sliceでトリミングするため、被写体を上下の端から離してください。絵画的でソフトなアートは、セル画のような輪郭線のあるアートよりもはるかにトレースしやすく、写真も同様に機能します。ユーザーがアートを生成する場合は、その前にその旨を伝えてください。
2. 一時フォルダにツールをインストールする（mod内にはインストールしない）：

   python -m pip install --target "$TMP/pb-vtracer" vtracer
   mkdir -p "$TMP/pb-svgo" && cd "$TMP/pb-svgo" && npm init -y >/dev/null && npm install svgo@4
   

3. modフォルダを作成する ~/.claude/skills/<id>/に（セッションごとに読み込まれます）： assets/mod-template/をコピーし、プラグインオーサリングスキルからmake-colors.jsとmake-colors.d.tsをhooks/に（変更せずに）コピーします。すべての__PLACEHOLDER__を埋めてください（__ID__はフォルダ名で、小文字とハイフンを使用）。1枚の画像の場合は、もう一方のインポート、そのsceneとlookを削除し、autoをその1枚の画像に向けてください。
4. 画像を確認し、その領域をリストアップします（トリミングして表示）：被写体、顔、肌領域、各サイド。各画像の設定をmodの隣（hooks/の外ではない）に書き、領域の選択と設定にはreferences/tracing.mdを、モデルとしてはassets/example-night.json（玄関の右側に座る少女）を使用します。ペアの場合は、各設定に"scheme"と両方の予算（{"FULL": 259500, "HALF": 129500}）を指定します。1枚の画像の場合はFULLのみでschemeは不要です。
5. トレースする（バックグラウンドで実行。数分かかります）：

   python -I scripts/trace_scene.py night.json --vtracer "$TMP/pb-vtracer" --svgo "$TMP/pb-svgo" --preview "$TMP/pb-preview/night.html"
   

   各オプションで各領域を1回ずつトレースし、各予算に合わせて（最初にすべての領域、次に優先順位に従って詳細を）調整し、scene-<name>.tsを書き出します。設定のoutをmodのhooks/に指定してください。
6. プレビュー：ブラウザペインでHTMLを表示します（フォルダをpython -m http.serverでサーブ）。アプリが画像を拡大するため、被写体を2倍のクロップで確認してください。tracing.mdのテーブルを参照して見た目が悪い部分を修正し、再度トレースします。
7. 色を設定する。 画像から表面の色（支配的な壁や空のトーン。ダークモードは暗めに保つ）をサンプリングし、makeColorsを実行します。その問題リストに「Desktop won't paint」エントリがあってはなりません。
8. 検証して引き渡す：claude plugin validate <mod folder>を実行します。ユーザーにウィンドウをリロードするか新しいセッションを開始するように伝え、任意のメッセージを入力し（テーマは最初のプロンプトで設定されます）、/backdrop day|night|autoを試してもらいます。特定の領域を見るように依頼してください。スクリーンショットが本当のテストです。その後、一時ツールフォルダを削除します。

注意すべきルール

• SVGはシングルクォートのみ使用可能。どのSvgにも"、\、バッククォートは使用不可。エスケープは総文字数にカウントされます。
• シーンのSvgの合計は約259,500文字以下。各Svgは約98,000文字以下。超えた場合、デスクトップは何も表示せず、何も通知しません。テンプレートはセッション開始時にサイズ超過のシーンをログに記録します。
• glassはオンにしたままにしてください。両方のモードに対応するlookではtintは使用しないでください。
• image、color、gradient、vectorバックドロップ、<image>、overrideColorSchemeは使用しないでください。これらは描画も効果もありません。
• テーマはsession.startではなくprompt.submitで設定してください。
• 特定の領域を改善する場合、ユーザーが気に入っていると述べた部分はそのまま維持し、全体を再調整するのではなく、その領域に独自の領域や優先順位を割り当ててください。各変更は影響を与える領域とともに報告してください。