01 機能概要
プロダクト全体で、アイコンの描き方、命名、納品、アクセシブルな使い方を定義します。
Icon Systemは、プロダクトのアイコンライブラリに関するルールとして、グリッド、キーライン、線幅、角の処理、サイズ違い、命名、納品を定義します。ストローク、塗り、デュオトーンの用途を区別し、すべてのアイコンスタイルを交換可能なものとは扱いません。
ソースは、ラベル、装飾用アイコンの非表示、コントラスト、操作ターゲットも扱っています。提案されているピクセルサイズは参考値であり、プロダクトに合わせて調整します。アイコンシステムの仕様があっても、完全なSVGライブラリがすでに描かれている、またはテスト済みであるという意味ではありません。
想定される成果物
グリッド、キーライン、線幅、角、対応するスタイルを定義します。
カテゴリ、名前、バリアント、必要なソース形式またはコンポーネント形式を選びます。
対応サイズ、ラベル、重要な操作のテキスト、操作可能なターゲットを確認します。
02 利用場面
混在したアイコンセットを一つのシステムにまとめたいときや、デザインと開発で共有するライブラリを文書化したいときに使います。
03 重要な判断
共通のジオメトリルールがあれば、題材が異なっていても、シンボル同士に統一感が生まれます。
カテゴリ名とバリアント名は、見つけやすさと保守性を高めます。
04 依頼例
以下のブリーフ例はテストされていません。使う前に、スキルのセットアップを確認してください。
このタスクのSKILL.mdを designer-skills リポジトリから、エージェントが対応しているスキルの場所に読み込んでください。エントリーファイルでは、共通のインストーラーコマンドは定められていません。
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/icon-system/SKILL.md代表的なアイコンと、その使用場面を提供してください。このスキルはルールを定義するものであり、実際のアイコンアセットの作成とテストは別の作業です。
スキルを実行する前に、このブリーフの範囲、ソース資料、制約を調整してください。
icon-systemを使って、混在しているナビゲーションアイコンを標準化してください。グリッド、線幅、角、サイズ、命名のルールを定義し、そのうえでSVGとコンポーネントの納品を指定してください。装飾用アイコンとラベル付きのアクションを区別し、表示テキストが必要な箇所を指摘してください。実際の出力を、次の観察可能な基準で確認してください。
OpenDesignは、コーディングエージェント向けのローカルデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェア依存関係が含まれることを意味しません。
05 ソースとライセンス
このページは、下にリンクされた固定済みのソースリビジョンについて説明しています。アップストリームの動作や要件は変わる可能性があります。
9a6930cf84a8プロダクト全体で、アイコンの描き方、命名、納品、アクセシブルな使い方を定義します。
リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付つきの人気の指標であり、スキルの利用状況や品質スコアではありません。
06 開始前の質問
OpenDesign
ブリーフ、ソース資料、デザイン作業を、ローカルのワークスペースにまとめて管理できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/icon-system/SKILL.md