custom-icons

カスタムアイコン

アイコンはそれぞれ、確認可能なソースからアセットへのパイプラインを通じて作成します。ユーザーが指定した題材、スタイル、パレット、形式、寸法、保存先をアセットの仕様として扱います。

ワークフロー

1. アセットの仕様を確定する

質問する前に、依頼内容、提供された参考資料、対象プロジェクトを確認します。定型的な詳細は、次のデフォルト値に基づいて判断します。

• 提供された参考資料や既存のアイコンセットがある場合は、新しいスタイルを導入する前に、それに合わせます。
• 単色のシルエット、線画、シンプルな UI アートには SVG を選びます。
• 3D、多色、陰影のあるアート、テクスチャ付きのアートには、透過 PNG またはロスレス WebP を選びます。
• UI 用 SVG の寸法が指定されていない場合は 24×24 の座標系を、詳細なイラスト SVG の寸法が指定されていない場合は 1024×1024 を使用します。
• ベクターの色が指定されていない場合は黒を使用し、ラスター画像のサイズが指定されていない場合は、生成時またはソースの寸法を維持します。
• 保存先が指定されていない場合は、依頼用ワークスペースに最終アセットを保存します。

題材が不明、要件が矛盾している、または形式の選択によって見た目が大きく変わる場合に限り、簡潔な質問を一つだけします。実装やフレームワーク固有のパッケージ化が求められていない限り、対象フレームワークの指定は任意です。

各アセットについて、題材、分岐、スタイルの基準、パレット、形式、最終保存先を決定します。すべての項目が明示されているか、安全に推定でき、重大な矛盾が残っていなければ、このステップは完了です。

2. アセットごとに分岐を一つ選ぶ

• トレースベクター： ラスターソースを SVG に変換する場合、または有機的な、手描き風の、あるいは生成されたシルエットの新しいアイコンが必要な場合に使用します。アセットを生成または処理する前に、references/vector-workflow.md を読みます。
• 透過ラスター： 詳細な、3D の、多色の、陰影のある、またはテクスチャ付きのアートに使用します。アセットを生成または処理する前に、references/raster-workflow.md を読みます。
• ネイティブベクター： 既存のベクターソース、決定論的な幾何学的 UI アート、またはベクターの塗りつぶし、グラデーション、エフェクトで忠実に表現できる詳細な SVG に使用します。アセットを作成または編集する前に、references/native-vector-workflow.md を読みます。

混在するアイコンセットはアセットごとに分類します。一つのセットに SVG とラスター出力の両方が含まれていても問題ありません。可能な限り、ユーザーが指定した形式を維持します。指定された形式では重要な視覚的詳細が失われる場合は、そのトレードオフを説明し、生成前に解決します。

各アセットにパイプラインが一つだけ割り当てられ、そのパイプラインで指定された形式を出力できれば、このステップは完了です。

3. ソースとワークスペースを準備する

<skill-dir> は、この SKILL.md が格納されているディレクトリに解決します。バンドルされたスクリプトは、ユーザーのプロジェクト内に存在すると仮定したパスではなく、<skill-dir>/scripts/... を使って呼び出します。

対象プロジェクト内に tmp/custom-icons/<request-slug>/ を作成します。依頼とアセットのスラッグには、ファイルシステムで安全な小文字とハイフンを使用します。プロンプト、生成ソース、処理済みプレビュー、トレースの下書き、検証用アーティファクトはそこに保管します。ユーザーから削除を求められるまでは中間生成物を保持し、依頼で置き換えが許可されていない限り、既存の最終アセットを上書きしないでください。

参考資料が提供された場合は、それぞれに edit target、style reference、palette reference などの役割を割り当てます。依頼で明示的に変更が求められている場合を除き、編集対象のアイデンティティ、シルエット、比率、構図を維持します。

アイコンが3つ以上ある場合は、まず代表となるパイロットを一つ作成します。残りを制作する前に、そのシルエット、スタイル、パレット、余白、小さいサイズでの視認性を確認し、すべてのアセットでそのビジュアル仕様を再利用します。

ワークスペースが存在し、入力に明確な役割が割り当てられ、複数アイコンのセットには検証済みのパイロットがあれば、このステップは完了です。

4. 生成と処理

選択したブランチの参照情報を、そのプロンプトとコマンドの唯一の信頼できる情報源として使用します。ソース画像ごとに、独立したアセットを1つ生成します。画像生成ツールまたは編集ツールが利用できない場合は、ユーザーが提供したソースを使って続行します。ソースがない場合は、生成が作業を妨げている段階であることを報告します。

すべてのブランチでの試行をワークスペースに残します。最初の結果が要件を満たさない場合は、ソースまたは処理パラメーターを調整します。形式を切り替えて、失敗した試行を隠してはいけません。

契約で指定されたすべての最終ファイルがワークスペースに存在し、選択したパイプラインで生成された時点で、このステップは完了です。

5. すべてのアセットを検証する

同梱のバリデーターを各出力に対して実行します。

python3 "<skill-dir>/scripts/validate_icon.py" "<final-asset>"

アイコンセットの場合は、各ブランチのすべての出力をまとめて検証します。

python3 "<skill-dir>/scripts/validate_icon.py" \
  "<asset-1>" "<asset-2>" "<asset-n>" \
  --require-matching-canvas

次に、各アイコンを想定される表示サイズで視覚的に確認し、依頼内容および参考資料と比較します。以下を確認します。

• 主題が認識しやすく、シルエットが明瞭であること。
• セット内で、キャンバス、視覚上のサイズ、余白、配色、遠近感、線やディテールの太さが一貫していること。
• 余分なパスや失われたディテールがなく、ベクターの形状が鮮明であること。
• キーカラーのはみ出し、切り取られた端、意図しない影がなく、ラスター画像の透明部分がきれいであること。
• 想定される最小サイズでも判読できること。

ユーザーがアートボードの可変を要求している場合を除き、ラスター画像の各ファイルはピクセル寸法が同一であること、SVG ファイルはviewBox、幅、高さの座標系が同一であることを必須とします。

失敗したアセットは修正し、両方のチェックを再実行します。バリデーターに合格し、すべてのアセットが視覚チェックリストを満たした場合にのみ、このステップは完了です。セット内のメンバーが1つでも失敗した場合、セットは未完成です。

6. 納品と報告

検証済みの最終アセットのみを、契約で指定された保存先にコピーします。

使用したブランチ、最終パス、ワークスペースのパス、検証結果、および依頼内容から意図的に逸脱した点があれば報告します。連携用コードは、要求された場合、または対象環境で分かりにくい使い方が必要な場合に限り含めます。

約束したすべてのアセットが報告したパスに存在し、すべての検証結果が記載された時点で、納品は完了です。