custom-icons-skill

🎨 カスタムアイコンスキル

プロ仕様のアイコンを制作するための総合ワークフローです。このスキルは、コンセプトの「着想」やビジュアルの「デザイン」から、技術的な「パス」の調整、透明な 3D PNG のクリーンアップ、本番環境に適した SVG の最適化まで、すべての工程に対応します。

🤖 エージェントへの指示（厳守するワークフロー）

このスキルが有効になったら、次のステップごとの対話プロトコルに必ず従ってください。

フェーズ 0：ユーザーの意図を最優先する

このスキルの既定値よりも、ユーザーの明示的なリクエストを優先してください。

• ユーザーが具体的な対象、スタイル、出力形式、保存先、色、またはフレームワークを指定した場合は、指定された詳細をそのまま使用してください。詳細が不足している場合は、確認を求めてください。
• ユーザーの入力に矛盾または無効な詳細が含まれている場合は、先に矛盾を明らかにし、修正を依頼してください。これは入力に厳密に従うことよりも優先されます。
• ユーザーがサポートされていない形式またはスタイルを求めた場合は、制限を伝え、代替案を提示してください。
• 有効なリクエストについて、より簡単に思えるという理由で、別のパイプライン、形式、スタイル、対象、配色、または保存先に置き換えないでください。
• ユーザーが手動で決定論的な SVG コードを明示的に求めない限り、Strategy A の最終 SVG を手書きで作成しないでください。
• ユーザーが SVG を明示的に求めない限り、Strategy B／3D のリクエストを SVG に変換しないでください。
• ユーザーが作業を進めるのに十分な情報をすでに提供している場合は、セットアップについて質問しないでください。
• 出力形式、対象の一覧、保存先、または戦略の選択を正確に判断するうえで、不足している詳細が障害となる場合に限り、簡潔な確認質問をしてください。
• ユーザーがこのスキルまたはそのギャラリーの更新を依頼した場合、変更を求められない限り、既存の規約を維持してください。
• 生成したソース、マスク、トレース、中間出力には、プロジェクト内の見える一時ワークスペース tmp/custom-icons/<request-or-icon-name>/ を使用してください。
• ユーザーが明示的にクリーンアップを依頼しない限り、一時ワークスペースや中間ファイルを削除しないでください。最終アセットは保存先にコピーし、中間ファイルは明示的なクリーンアップ依頼があるまで、参照用として tmp/ ワークスペースに残してください。

フェーズ 1：要件の確認とスタイルの定義

必須情報が不足している場合に限り、要件を確認してください。ユーザーの入力が不完全な場合は、不足している最小限の情報を尋ねてください。

1. スタイル：どのようなスタイルのアイコンにしますか？（例：3D 効果、フラット、モノライン、高級感のあるエングレービング、ミニマリスト）
2. 対象：どのアイコン、または着想を表現しますか？
3. 対象環境：アイコンはどこで使用しますか？（例：Astro、React、モバイルアプリ）

フェーズ 2：生成と戦略の選択

各アイコンについて、ビジュアルの複雑さに応じて戦略を選択してください。

戦略選択フローチャート

1. リクエストを分析する：対象の複雑さと色の要件を確認します。
   • リクエストに Strategy A と Strategy B の特徴が混在する場合は、どちらを優先するか確認するか、タスクを分割することを提案してください。
2. 戦略を選択する：
   • Strategy A（ベクター）：モノクロのロゴ、UI アイコン、またはシンプルな線画に使用します。
   • Strategy B（ラスター）：3D アイコン、複数色のアセット、または詳細なイラストに使用します。
3. パイプラインを確認する：
   • Strategy A -> 二値化 -> Potrace -> SVGO。
   • Strategy B -> クロマキー -> 透明な PNG／WebP。

戦略	推奨される用途	技術的なパイプライン
Strategy A（ベクター）	ロゴ、UI アイコン、線画、モノクロ	画像 -> 二値化 -> Potrace -> SVGO
Strategy B（ラスター）	3D アイコン、複数色、詳細なイラスト	画像 -> クロマキー -> 透明な PNG／WebP

プロンプト作成ルール

生成には、簡潔でラベル付きのプロンプト仕様を使用してください。

コンテンツの制約

1. アセットの種類：ユーザーの対象環境向けのアイコンアセット。
2. 主なリクエスト：正確な対象またはコンセプト。
3. スタイル／媒体：リクエストされたスタイルと選択した戦略。
4. 構図／フレーミング：中央に配置し、シルエットを明瞭にし、十分な余白を確保します。
5. カラーパレット：ユーザー指定の色またはカテゴリカラー。

視覚的な制約

• テキストなし：明示的にリクエストされた場合を除きます。
• クリーンさ：ロゴ、商標、透かしは含めません。
• 独立性：余計な要素や複雑な背景は含めません。

例

• ベクター：「白地に黒の、モノラインのコーヒーカップアイコン。ミニマルなデザイン。」
• ラスター：「鮮やかな色の3Dアイソメトリックなコンピューターアイコン。背景色は#00ff00。」

既存の画像／参照画像を使うワークフローでは、各画像に役割を付けてください：Image 1: edit target、Image 2: style referenceなど。

戦略 A：ベクター（単色／シンプル）

使用対象：ロゴ、UIアイコン、線画。

1. 生成：

   アセットの種類：スケーラブルなUIアイコン
   主なリクエスト：[SUBJECT]
   スタイル／媒体：[STYLE]、コントラストの高い黒のベクター風線画
   構図／フレーミング：中央に配置したアイコン、明瞭なシルエット、十分な余白
   カラーパレット：純白の背景に黒
   制約：リクエストがない限り塗りつぶしなし、グラデーションなし、テキストなし、ロゴや商標なし、透かしなし、余計な要素なし
   

2. 処理：生成した画像を二値化し、potraceでトレースして、svgoで最適化します。
3. ルール：ユーザーが決定的な／手動のSVGを明示的にリクエストしない限り、戦略Aの新しいアイコンの最終SVGパスデータを手作業で作成しないでください。デフォルトの出力は、生成画像 -> scripts/crop_and_trace.py -> potrace -> svgoのパイプラインを経て作成する必要があります。
4. 色：ユーザーが色を指定した場合は、トレース後にその色を適用します。参照ギャラリーを更新する際に色が指定されていない場合は、カテゴリカラーを使用します。

戦略 B：ラスター（複雑／多色）

使用対象：詳細なイラスト、3Dアイコン、カラフルなアセット。

1. 生成：

   アセットの種類：透過ラスターアイコン
   主なリクエスト：[SUBJECT]
   スタイル／媒体：[STYLE]、鮮やかで精細なアイコン
   構図／フレーミング：中央に配置した独立した対象、明瞭なシルエット、十分な余白
   シーン／背景：完全に平坦な単色のクロマキー背景。通常は#00ff00
   制約：背景は影、グラデーション、テクスチャ、反射、床面、照明の変化がない均一な単色であること。エッジはシャープにし、ハローなし。リクエストがない限りテキストなし。ロゴや商標なし、透かしなし、余計な要素なし。対象にはクロマキー色を一切使用しない
   

   対象に緑の要素が多く含まれる場合や、主に緑の配色の場合は、#00ff00の代わりに#ff00ffを使用します。
2. 処理方針：背景をクロマキー処理で除去し、透過PNGを作成します。
3. ルール：ユーザーが別の形式を明示的にリクエストしない限り、戦略Bの出力は透過PNG／WebPのままにします。

---

フェーズ3：処理とトレース

一時ワークスペース

処理を始める前に、このリクエスト用のプロジェクト内ワークスペースを作成します：

mkdir -p tmp/custom-icons/<request-or-icon-name>

生成した元画像、クロップ済みPNG、PBMファイル、トレースしたSVGの下書き、検証用スナップショット、別案は、そのフォルダーに保存します。ユーザーが指定した保存先は、最終納品用アセットにのみ使用します。最終保存先が指定されていない場合は、最終アセットも同じtmp/custom-icons/<request-or-icon-name>/ワークスペースに置きます。

• 入力の検証：指定された最終保存先のパスが無効な場合、または入力としてサポートされていないファイル形式が指定された場合は、ユーザーに通知し、有効なパス／形式を確認してから作業を進めます。

エラー処理

処理手順（二値化、トレース、クロマキー処理）で失敗した場合は、具体的なエラーをユーザーに報告し、修正方法（パラメーターを調整して再試行する、ファイル形式を確認するなど）を提案します。

戦略 A（ベクター）の場合：

1. 二値化: python3 scripts/crop_and_trace.py <source> tmp/custom-icons/<request-or-icon-name> <name>
2. トレース: potrace "tmp/custom-icons/<request-or-icon-name>/<name>.pbm" --svg --flat -o "tmp/custom-icons/<request-or-icon-name>/<name>.svg"
3. 最適化: bunx svgo "tmp/custom-icons/<request-or-icon-name>/<name>.svg"
4. 着色: トレース後、機械的な色付け手順として、最適化済み SVG にのみ対象カテゴリの塗りつぶし色／線色を適用します。
5. 納品: ユーザーから指定があった場合は、最適化済み SVG を tmp/custom-icons/<request-or-icon-name>/ から指定された保存先にコピーします。
6. 検証: SVG が正しく解析できること、トレースされたパスデータを含むこと、指定された題材／スタイルと視覚的に一致することを確認します。

戦略 B（複雑）の場合：

1. グリーンスクリーンを除去：高度なクロマキー処理ユーティリティを使用します。

   python3 scripts/remove_chroma_key.py \
     --input <source> \
     --out tmp/custom-icons/<request-or-icon-name>/<name>.png \
     --auto-key border \
     --soft-matte \
     --spill-cleanup \
     --edge-feather 1.0 \
     --force
   

   結果：色かぶりを除去し、アンチエイリアス処理されたエッジを備える透明 PNG を作成します。

2. トリミングの代替ワークフロー：

   python3 scripts/crop_and_trace.py <source> tmp/custom-icons/<request-or-icon-name> <name> \
     --chroma \
     --padding 12
   

   結果：tmp/custom-icons/<request-or-icon-name>/<name>.png に、背景が透明でトリミング済みの PNG を作成します。ソフトマット処理よりトリミングを優先する場合に使用します。

3. 納品: ユーザーから指定があった場合は、背景が透明な PNG／WebP を tmp/custom-icons/<request-or-icon-name>/ から指定された保存先にコピーします。

4. アルファを検証: 出力の角が透明であること、緑色の縁が残っていないこと、被写体のシルエットが明瞭であることを確認します。高度なユーティリティの実行後も縁が残る場合は、--edge-contract 1 を付けてもう一度試します。エッジが硬すぎる場合は、--edge-feather 0.25 など、より小さい値を使用します。

---

フェーズ 4：最適化と納品

1. 最適化: SVG には svgo を使用します。PNG はトリミングと圧縮を行います。
2. 実装: アセットの使い方をユーザーに示します。
3. ギャラリーの一貫性: ギャラリーを更新する際は、各参照カテゴリのアイコン数を 5 個に保ちます。戦略 A のカテゴリでは、テーマに応じた塗りつぶし色／線色を使用します。Tech は #00C8FF、Lifestyle は #00E676、Detailed は #FF3D00 です。
4. 正直に報告: 使用したパイプライン、最終ファイルの保存先、tmp/custom-icons/... ワークスペースの場所、検証に合格したかどうかを伝えます。指定された手順を完了できなかった場合は、何が失敗したのかを正確に伝えます。

---

🎯 このスキルを使う場面

• ブランドアイデンティティ：新しいブランド向けに、統一感のある独自のアイコンセットを作成します。
• AI からベクターへ：イラストを、色を適用できるクリーンな SVG に変換します。
• 高忠実度アセット：複雑な 3D アイコンや多色アイコン向けに、背景が透明な PNG を作成します。

---

🛠 アイコン作成モード

1. 🏗 デザインモード（視覚的な構造）

ミニマルな[SUBJECT]アイコン。白地に黒、モノラインスタイル。

2. 🛣 パスモード（ベクター駆動）

既存の画像を、クリーンな SVG に仕上げます。

3. ✨ 願望モード（概念的）

「[DESIRE]」を抽象的に表現します。

---

🎨 スタイルライブラリ

スタイル修飾子	カテゴリ	視覚的特徴
ラグジュアリーなモノライン	プレミアム	エレガントで細い線
大胆な幾何学	テック	2px の線、丸い端
オーガニックインク	ライフスタイル	テクスチャのあるエッジ、流れるような形状
3D レンダリング	複雑	奥行き、ライティング、多色、背景が透明な PNG／WebP（戦略 B を使用）

---

スクリプト

• ベクター／トリミングスクリプト：scripts/crop_and_trace.py
• 高度なクロマキー処理スクリプト：scripts/remove_chroma_key.py