Iconsaz：カスタムアイコンパックは何をしますか？

ユーザーのブランドに完全に属する、新しいオリジナルアイコンパックを構築します。

タイプフェイスと同じ線の太さ
UIと同じ角の言語
マーケティングと同じ雰囲気

品質基準は、最高のパブリックパック（Lucide、Phosphor、Tabler、Heroicons、Material Symbols、Untitled UI）に設定されています。

1つのグリッド
1つのストロークルール
1つの光学サイズ
予測可能な名前

出力はユーザー自身のパックであり、それらのいずれのコピーでもありません。

このスキルのファイル

ファイル	これを読むタイミング
`references/question-flow.md`	ステップ1：14の質問の正確な文言、オプション、デフォルト、バッチ処理
`references/style-rules.md`	ステップ2～7：ベンチマークルール、ブランドからスタイルへのマッピング、構築ルール、スターターカタログ、メタファーバンク
`references/rtl-and-culture.md`	ステップ8、および製品がRTLであるか複数の地域に出荷される場合
`templates/style-brief.md`	ステップ3：コピーして記入する。ユーザーが保持するファイルでもある
`scripts/validate_icons.py`	ステップ6、7、9：グリッド、パディング、ストローク、viewBox、currentColor、非表示レイヤー、命名、完全性、RTLペアをチェック
`scripts/preview_sheet.py`	ステップ6、9：`preview.html`（サイズ、グリッド上のズーム、ライト/ダーク、カラー、RTLトグル）を構築
`scripts/package_pack.py`	ステップ10：検証後、SVG + フラットなFigma対応コピー + プレビュー + ブリーフ + インポートガイドをZIPにまとめる

スクリプトは依存関係のないプレーンなPython 3.8+です。python scripts/<name>.py --help で実行します。

2つのモード

新しいパック： 以下の全ワークフローを実行します。
パックの拡張： ユーザーがこのスキルで以前に作成したスタイルブリーフ（icon-spec JSONブロックを含む）を共有します。インタビューとブランドスキャンをスキップします。ブリーフを読み、追加するアイコンのみを尋ね（抽象的なものにはメタファーを提案）、ブリーフの正確な数値に従って描画し、それに対して検証し、アイコンリストに追加し、マイナーバージョンを上げ、変更ログ行を追加します。このモードでは、グリッド、ストローク、パディング、半径を絶対に変更しないでください。古いアイコンと完全に一致させることがすべてです。ユーザーがスタイルの変更を希望する場合、それは新しいメジャーバージョンであり、すべてのアイコンを再描画する必要があります。

ワークフロー

ユーザーを3つのゲートでループに参加させてください：ブランドスキャン（ステップ2）、ブリーフ（ステップ3）、テストアイコン（ステップ6）。間違った前提で60個のアイコンを描画することは、1回の確認よりもはるかに多くの時間を浪費します。

1. インタビュー

references/question-flow.md の14の質問を、順番に、3つか4つずつ尋ねます。複数選択の質問には、利用可能な場合は構造化質問ツール（AskUserQuestionなど）を使用し、アップロードや入力回答にはプレーンチャットを使用します。

ユーザーが質問をスキップした場合は、リファレンスからデフォルトを選択し、何を選んだかとその理由を1行で説明し、先に進みます。再度質問しないでください。
既存のアイコンを尋ねないでください。ユーザーが提供してきた場合は、感謝して脇に置いてください。これは新しいセットです。古いアイコンは、チームが離れようとしているスタイルに引き戻します。デザインシステムのルール（グリッド、ストローク、半径）は歓迎します。これは質問9で尋ねる内容です。
アップロードされたスクリーンショットには現在のアイコンが含まれている場合があります。それらは、アイコンが必要な場所を学習するためだけに使用し（ステップ4）、外観を学習するためには決して使用しないでください。

2. ブランドDNAスキャン

アップロードされたすべてのもの（ロゴ、ブランドガイド、カラー、タイプフェイス、ムードボード、マーケティング資料、スクリーンショット）を調査します。references/style-rules.md のマッピングテーブル（「ブランドからアイコンスタイルへ」）を使用して、証拠からスタイルを導き出します。以下を確認します。

タイプフェイス： UIサイズでのステムの太さ、ターミナル（丸、平ら、角度あり）、ボウルの丸み、x-height、幾何学的かヒューマニストか。これにより、ストロークの太さとキャップ/ジョインが設定されます。
ロゴ： サイズに対する線の太さ、コーナーの形状、角度（45°か自由か）、パック全体の微妙な特徴となり得る特徴的なモチーフ（ノッチ、カール、カットコーナー）。
UIスクリーンショット： コンポーネントのコーナー半径、境界線の太さ、密度、スペーシング。これにより、アイコンのコーナー半径とサイズセットが設定されます。
カラーと画像： これらはムードのみを通知します。アイコンは currentColor で出荷されます。

結果を表で示し、ユーザーに確認または修正を求めます。

シグナル	証拠	決定	確信度
ストローク	本文フォントはNunito Regular、16pxテキストでステム幅約1.6px	24pxで2px、20pxで1.75px	高

証拠が薄い場合は、その旨を明確に述べてください（「タイプフェイスが提供されていないため、ストロークはログからのみ推測され、確信度は中程度」）。

3. スタイルブリーフ

templates/style-brief.md をコピーし、すべてのセクションを記入してユーザーに表示します。グリッドとパディング、サイズごとのストローク、キャップとジョイン、コーナー半径、スタイルと状態、サイズ、ムード、命名、RTLの決定、カテゴリ別にグループ化された完全なアイコンリストをカバーします。下部の icon-spec JSONブロックはスクリプトが読み取るものなので、散文と同期させておいてください。何かを描画する前に、明示的な承認を得てください。

4. 不足アイコン検出

スクリーンショットを領域ごと（ナビゲーション、ヘッダー、ツールバー、ボタン、リスト行、フォームフィールド、空の状態、トーストとステータス、設定行、カード）に調べ、アイコンが必要なすべての場所をリストアップします。表（画面、場所、必要なアイコン、すでにリストにあるか？）を提示し、ユーザーの同意を得て不足しているアイコンをブリーフのアイコンリストに追加します。スクリーンショットがない場合は、references/style-rules.md のスターターカタログと製品コンテキストを使用します。

5. メタファーオプション

すべての抽象的な概念（払い戻し、相談、同期、オンボーディング、サブスクリプション、ロイヤルティ、コンプライアンスなど）について、それぞれ1行の根拠とともに2～3のビジュアルアイデアを提供し、references/rtl-and-culture.md を使用して文化的リスクをフラグ付けします。references/style-rules.md の「メタファーバンク」に出発点があります。ユーザーに選択させ、その選択をブリーフに記録します。次のデザイナーが、なぜ refund が戻る矢印の付いたコインなのかを知る必要があるためです。

6. テストアイコン

最初に3～4つのサンプル（home、search、settings、および最も特徴的なプロダクト固有のアイコン）を描画します。承認されたすべてのスタイルで、すべてのサイズでそれぞれを作成します。次に、以下を実行します。

python scripts/validate_icons.py icons/ --brief style-brief.md --samples
python scripts/preview_sheet.py icons/ --brief style-brief.md -o preview.html

すべてのエラーを修正し、プレビューを自分で確認し（ブラウザで開いて1倍サイズを確認し、ズームだけでなく確認）、ユーザーに表示します。違和感がある点を尋ねます。この段階での一般的な調整：ストロークを少し太くまたは細く、コーナーをよりソフトに、ディテールを増やすまたは減らす。変更があればブリーフを更新します。ユーザーがサンプルを承認するまで、フルセットを開始しないでください。

7. フルセット

ブリーフのすべてのアイコンを、以下の「描画方法」に従って描画します。カテゴリごとに作業し、各カテゴリの後にバリデーターを実行して、80アイコン後に1つの系統的なミスを見つけることがないようにします。

8. RTLとカルチャー

テキストの方向がRTLまたは両方の場合、すべての方向性アイコン（矢印、戻る/進む、送信、返信、元に戻す/やり直し、ログアウト、リストインデントなど）のミラーリングされた -rtl バージョンを作成します。非方向性アイコンはそのままにします。時計や再生ボタンをミラーリングするのは誤りです。すべてのアイコンを文化的リスクリストと照合します。両方のリストは references/rtl-and-culture.md にあります。スペックの directional リストに方向性アイコンをマークして、バリデーターがペアをチェックできるようにします。

9. 最終チェック

--samples なしでバリデーターを実行します。エラーがゼロである必要があります。次に、目視で確認します。スクリプトは認識性を判断できないためです。

ブリーフ内のすべてのアイコンが、すべてのスタイルとサイズで存在する（バリデーター：完全性）。
すべてのアイコンがブリーフに従っている：グリッド、パディング、ストローク、キャップ、ジョイン、半径（バリデーター）。
光学サイズがセット全体で均一であり、プレビューグリッドで隣接するアイコンよりも大きくまたは小さく見えるものがない（バリデーターは外れ値を警告）。
各アイコンは最小サイズでも明確である：プレビューの1倍行を表示します。2つのディテールが融合する場合は、ストロークを細くするのではなく、そのサイズでは1つを削除します。
名前は category/name/variant/size に従い、小文字のケバブケースで、どこでも同じ意味である（バリデーター：命名）。
RTLペアが存在し、実際に相互にミラーリングされている（バリデーター：RTL）。
文化的にリスクのあるシンボルが紛れ込んでいない。

不合格の項目を修正し、納品前に再度チェックを実行します。

10. 納品

Figma Professional（またはそれ以上）： Figma MCPを使用してライブラリを構築します。そのツールがないか認証されていない場合は、ユーザーに接続が必要であることを伝え、代わりにZIPを提供します。figma-use などのFigmaスキルが利用可能な場合は、最初の書き込み呼び出しの前にロードします。

カバー、アイコン、使用方法の3ページで新しいファイルを作成します。
アイコンページで、カテゴリごとに1つのセクションを作成します。各アイコンについて、すべてのSVGをノード（figma.createNodeFromSvg）に変換し、各ノードをコンポーネントに変換し、バリアントプロパティ（style=outline, state=default, size=24）でコンポーネントに名前を付け、figma.combineAsVariants で category/name という名前のコンポーネントセットに結合します。ストロークはストロークのままにし、アウトライン化しないでください。
1回の書き込み呼び出しで1つのカテゴリを構築します。大量のバッチはタイムアウトし、失敗はパック全体ではなく1つのカテゴリを失うことになります。各カテゴリの後にスクリーンショットを撮り、プレビューと比較します。
カバー： パック名、バージョン、ムードワード、ヒーローアイコンのグリッド。使用方法： サイズと各サイズを使用するタイミング、テキスト横のスペーシング、アクティブ/非アクティブルール、RTLルール、命名、するべき/しない例、および「アイコンを追加するには、このスキルとスタイルブリーフを共有してください」。
次のパスからのZIPも引き渡します。開発者はとにかくSVGが必要なためです。

Figma Free（またはFigmaなし）： Figma MCPは無料プランではライブラリファイルに書き込めないため、代わりにファイルを納品します。

python scripts/package_pack.py icons/ --brief style-brief.md --out dist/

エラーがあるとパッケージ化を拒否し、警告についてもレビューするまで拒否します。残りの各警告が意図的である場合にのみ --allow-warnings を追加します。次に、dist/<pack>-v<version>.zip を書き込みます。これには svg/（category/name/variant/size.svg ツリー）、figma/（1回のバッチリネームでFigmaのスラッシュ名になるフラットな category__name__variant__size.svg コピー）、preview.html、manifest.json、スタイルブリーフ、およびアイコンをインポートしてバリアント付きコンポーネントに変換するためのクリックバイクリックの手順が記載された IMPORT-TO-FIGMA.md が含まれています。これらの手順をチャットでも要約します。

11. ブリーフの保存

最終的なスタイルブリーフを納品物の隣に保存し（<pack>-style-brief.md と命名）、次の言葉またはそれに近い言葉でユーザーに伝えます。「このファイルを保管してください。次回アイコンが必要なときは、最初にこのファイルを私と共有すれば、新しいアイコンはこのパックと完全に一致します。」

描画方法

合意されたグリッド上でSVGを手書きで作成します。デザインツールでベクターを構築するのと同じように行います。各サイズは、独自のネイティブキャンバス（20pxの場合は viewBox="0 0 20 20" など）に描画されるため、小さなサイズは独自のストロークと簡略化されたディテールを持つことができます。これは、Materialの光学サイズやHeroiconsの20pxおよび16pxセットと同様です。

ルート：<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">。ルートにペイントを設定し、シェイプに継承させます。これにより、すべてのアイコンが同一になります。
グリッド上でプリミティブ（circle、rx付きの rect、line、弧を含む path）を使用します。座標は整数または半単位（最大で4分の1単位）に保ちます。オフグリッドのポイントは1倍でぼやけてレンダリングされます。
カラーは currentColor のみです。塗りつぶしシェイプは fill="currentColor" を使用します。デュオトーンの2番目のトーンは、ブリーフの不透明度での currentColor であり、2番目の色ではありません。
変換、非表示要素、<text>、埋め込み画像、<style>、ID、エディタメタデータは使用しません。すべてをプレーンなジオメトリにフラット化します。
シェイプをキーライン（円、正方形、縦長または横長の長方形。スタイルルールを参照）に合わせます。これにより、丸いアイコンと四角いアイコンが同じサイズに見えます。
内部のギャップは少なくともストローク幅の1倍とし、16pxではさらに広くします。
塗りつぶしバリアントはアウトラインと同じシルエットに従い、ディテールはギャップとして打ち抜かれます。それらは同じアイコンとして、「スイッチがオン」になったように読み取れる必要があります。
小さいサイズを作成するには、24pxのジオメトリを新しいキャンバスにスケーリングし、ポイントをグリッドにスナップし、ブリーフからそのサイズのストロークを設定し、もはや収まらないディテールを削除します。ファイルを単にスケーリングしないでください。
ブランドのタイプフェイスに一致させます：キャップとジョインはそのターミナルをミラーリングし、カーブはそのボウルをミラーリングし、パック全体のシグネチャ（1つのノッチ、1つのカットコーナー）は、ブリーフが要求する場合、ロゴをエコーできます。

最小限のアウトラインアイコンの例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="10.5" cy="10.5" r="7"/>
  <path d="M15.5 15.5 21 21"/>
</svg>

作業ディレクトリ構造

icons/<category>/<name>/<variant>/<size>.svg   e.g. icons/nav/home/outline/24.svg
icons/nav/arrow-back-rtl/outline/24.svg        ミラーリングされたRTLツイン
style-brief.md                                  icon-specブロックを含む記入済みテンプレート
preview.html                                    生成済み
dist/<pack>-v<version>.zip                      生成済み

正規のアイコン名は .svg なしのパスです。つまり nav/home/outline/24 です。これはFigmaコンポーネント名でもあり、コード、デザイン、ファイルを同期させます。

ユーザーとの会話

このスキルを使用する人の多くはデザイナーであり、開発者ではありません。「ストローク」と並べて「線の太さ」、「半径」と並べて「コーナーの丸み」と言い、スクリプトの出力は生で貼り付けるのではなく、一文で説明してください。各ターンを短く保ちます：いくつかの質問、1つの決定、またはレビューする1つのこと。

Iconsaz：カスタムアイコンパック