oil-icon

oil-icon

同じビジュアルスタイルのアイコンセットを生成し、背景透過PNGとして出力します。

画像生成では、フラットなグレーの背景に4×4のシートとして、1回の生成で16個のアイコンを出力します。スタイルの統一に役立ちますが、それでも1つずつ確認する必要があります。その後、各セルを切り出して背景を除去します。

デザイン上の判断（スタイル、パレット、メタファー、ブランドに合わせるかどうか）はエージェントが担当し、画像生成と切り出しは機械的な手順です。

API Key 設定方法

外部サービスの認証情報が必要な場合は、まずAPI Key の設定と業務での読み取りを読んでください。既存の安全な設定方法を再利用してください。ローカル環境にKeyがない場合は、付属の固定ページを使用し、保存後に業務用ラッパーを通じて読み取ります。組み込み機能と完全ローカルのワークフローでは、Keyの設定は不要です。

ワークフロー

1. スタイルを選択します。 styles/（下表）にある組み込みスタイルを選ぶか、プロジェクトのデザイントークン／アセットを読み取ってカスタムのスタイル仕様を導き出し、ユーザーのブランドに合わせます。詳しくはreference/style-adaptation.mdを参照してください。組み込みJSONと同じフィールドを持つスタイル仕様として結果を確定し、後続のバッチでも同じ仕様を再利用して、生成時の逸脱を確認します。
2. アイコンの一覧を作成します。 各コンセプトを名前 — 具体的で短いメタファー（例：settlement — a wallet with a coin）の形式で記述します。各アイコンには明確なアイデアを1つだけ使い、セット全体で細部のレベルをそろえます。既定では1枚あたり16マスです。明示的に9マスを選ぶ場合は、プロンプトに3×3と指定し、切り出しコマンドにも必ず--grid 3を渡してください。ユーザーが16個未満の正確な個数を指定した場合も、4x4／16マスのシートを使用します。指定されたアイコンを行優先順に先頭から配置し、残りのマスは空のグレー背景のままにするよう明示します。
3. プロンプトを作成します。 style.preambleに、そのスタイルのconstructionフィールド（短いガイダンスとして）、パレット固定の文、番号付きのメタファー、固定の構図テキストを組み合わせます。詳しくはreference/prompt-template.mdとreference/construction.mdを参照してください。
4. シートを生成します。 機能に応じて、次の優先順位で画像プロバイダーを選びます（reference/image-providers.mdを参照）。Codexが使えると決めつけないでください。
   1. 組み込み／ホストの画像生成を最初に使用 — 実行中のエージェントが、Codexの組み込みimage_genツールやimagegenスキルを含む、呼び出し可能な画像生成ツールをすでに備えている場合は、それを直接呼び出します。別プロセスから画像生成機能にアクセスするためだけに、外部のCodex CLIへ処理を委任しないでください。
   2. Codex CLIへのフォールバック — このエージェントに呼び出し可能な画像生成ツールがなく、Codexが利用可能な場合に限り（利用可能なSkill一覧からcodexを探すか、PATHにあるcodexを使用します）、生成を委任します。
   3. 外部APIへのフォールバック — 上記のいずれも利用できない場合に限り、ユーザーが許可したプロバイダーを使用します。認証情報がない場合は、設定手順に従って付属ページを開きます。チャット上でKeyを尋ねないでください。OpenAI Imagesの場合は、scripts/gen_image.py --prompt "…" --out raw/<style>.pngをすぐに使えます。 生成した各シートは、フラットなグレー#808080の背景でraw/<style>.pngに保存するか、そこへコピーします。組み込みの画像生成機能では$CODEX_HOME/generated_images/...の下に保存される場合があります。生成後、選んだPNGをタスク出力のraw/フォルダーに移動またはコピーしてください。同じ画像を使うとスタイルをそろえやすくなりますが、それでも1つずつ検収する必要があり、1回の生成で一貫性が保証されるわけではありません。プロバイダーに必要なのは、プロンプトをグレー背景のPNGにすることだけです。
5. 切り出します。 scripts/setup.shを1回実行してから、次のコマンドを実行します。 .venv/bin/python3 scripts/slice_icons.py <raw>.png <outdir> --mode <cutout> [--thresh N] [--grid 4] [--count N] スタイルのcutoutモードを使用します。フラット／ハードエッジにはfloodfill、ソフト／3D／光沢／写真にはrembgを使います。
6. QA（必須）。 切り出したPNGを対照的な色（例：マゼンタ）の上に合成し、各アイコンについて次の点を確認します：（a）隣のセルから断片が混入していないか、（b）グレーが残っていないか、（c）スタイルのconstructionとの一貫性（線の太さが均一、角丸の半径が一定、細部のレベルが一致、パーツが共有されている、モチーフが含まれている、パースが統一されている、アクセントが特徴的な要素より目立っていないこと。線のスタイルでは、アクセントは線より薄く、小さくする必要があります）。不合格のものは切り出し直すか再生成します。上のアイコンの一部が混入したアイコンは、決して納品しないでください。
7. 納品 — 背景透過PNGを整理し、名前を付けて納品します。

組み込みスタイル

スタイル	見た目	切り抜き	適した用途
linear	モノクロの線画／アウトライン	floodfill	ユーティリティ、設定
filled	単色の塗りつぶしグリフ	floodfill	モバイルのナビゲーション／タブバー
colorblock	大胆でフラットなマルチカラーのブロック	floodfill	子ども向け、クリエイティブ
cartoon	ステッカー風のカートゥーン	rembg	ゲーム、エンターテインメント
isometric	アイソメトリックな3Dミニチュア	rembg	SaaS、ダッシュボード
render3d	光沢のあるふっくらした3D	rembg	報酬、オンボーディング
sticker	ダイカットの光沢ビニール	rembg	ソーシャル、リアクション
realistic	写実的な製品レンダリング	rembg	Eコマース、ヒーロー画像
animal-badge	バッジに描かれた動物のエンブレム	rembg	アバター、子ども向け

各 styles/<name>.json には、前置き、固定パレット、切り抜きモード、しきい値、構成システム、適した用途が記載されています。

重要なルール（reference/design-rules.md を参照）

• パレットは仕様で16進数に固定します。そうしないと、カラフルなスタイルは実行ごとにばらつきます。
• 黒塗りのアイコンは作成しないでください。黒に近い色や黒は、細いアウトラインや線のストロークには使用できますが、アイコンセットの主要な塗りつぶし部分には使用しないでください。ブランドの前景色が黒の場合は、ストロークにのみ割り当てます。塗りつぶしスタイルやデュオトーンスタイルでは、メインの形状に中間から明るめのブランドカラーを選び、暗い色は小さく使用してください。
• 実際の製品コンテキストから始めてください。ユーザーから公開中のサイト、スクリーンショット、マスコット、ロゴ、ブランドアセットが提供された場合は、まずそれをもとにアイコンのコンセプトと構成を導き出します。アイソメトリック、デュオトーン、3D、カラーブロックなどの汎用的なスタイルファミリーにいきなり飛びつかないでください。これらは、製品のモチーフ、実際のナビゲーション、実際の機能名を確定した後に適用する仕上げです。
• スライス時には隣接セルからのはみ出しが除去されます。スライサーは各セルの中央にあるアイコンだけを残します。
• エッジの種類に応じて切り抜き方法を選びます。フラット／ハードエッジには floodfill、ソフト／3D／光沢／写真には rembg を使います。
• 洗練されたデザインは、汎用セットに色を付けるのではなく、構成システムとブランドモチーフから生まれます。各スタイルの construction オブジェクトには、グリッド、ストローク、角丸、ディテールの量、共通パーツ、モチーフが定義されています（reference/construction.md を参照）。厳密なシステムでは最終的にベクターが求められます。ラスターは方向性の確認とポイントアイコンに使用します。