suggest-lucide-icons について
プロダクトデザイナーや UI 開発者向けに、概念やスクリーンショットの文脈から Lucide アイコンを提案するスキルです。カタログで名前を検索・検証して候補を示します。
主な機能
- 01概念やタグによるアイコン検索
- 02スクリーンショットの文脈を考慮
- 03名前を検証し近似候補を提示
- 04候補三つと推奨案の提示
活用シーン
- 01UI の概念を表すアイコンの選定
- 02手作業で組み立てた候補名の確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ nweii/ agent-stuff --skill suggest-lucide-iconsインストール後、Claude Code で/suggest-lucide-iconsを入力して読み込まれたか確認します。
同梱ファイルscripts/lucide.py
詳細
Lucide アイコンの提案
Lucide オープンソースアイコンパックから、コンセプトを象徴したり、特定の UI 配置に適したりする、最も関連性の高いアイコンを提案します。文字どおりの一致だけでなく、文化、科学、デザインにわたる幅広い象徴的な関連性を考慮します。
入力
次のいずれか、または両方を指定してください。
- コンセプト:表現するアイデア、アクション、意味
- スクリーンショット:アイコンが必要な場所を示す UI の状況
カタログスクリプト
scripts/lucide.py(Python 3、依存関係なし)は、Lucide のアイコンセット全体を一度だけ unpkg.com/lucide-static@latest/tags.json から取得し、約24時間キャッシュして、ローカルで検索・検証します。そのため、アイコンを1つずつ取得する必要はありません。
search "<terms>"— コンセプトに一致する実在のアイコンを、名前と意味タグから検索して順位付けします。各結果には実在するアイコンが表示され、適合する理由がわかるようタグも示されます。validate <name>...— 指定した名前(手作業で作った複合名など)を確認します。一致しない場合は、よく似た候補が提示され、名前が1つでも見つからなければ終了コードはゼロ以外になります。
Python 3 が利用できない場合は、その URL から直接取得してください(形式は {name: [tags]} です)。または、https://unpkg.com/lucide-static@latest/icons/<name>.svg で個別のアイコンを確認してください(200 は存在、404 は存在しないことを示します。302 リダイレクトには従ってください)。
命名規則
アイコン名には厳格な規則があります。結果を読むときや、検証する複合候補を作るときは、次の規則に従ってください。
- ケバブケース:
Arrow Upではなくarrow-up - 国際英語:
colourではなくcolor - グループのバリアント:
<group>-<variant>— 例:badge-plusはbadgeがベースです - サイズの異なる複数の要素:最も大きい要素を先に記載 — 円が大きい場合は
circle-person - 修飾子の付いた要素:
[element]-[modifier]—dashed-circleではなくcircle-dashed。組み合わせる場合:circle-dashed-heart-broken
手順
-
関連性を考える — 重要なアイデア、視覚的なメタファー、スクリーンショットから読み取れる手がかりを洗い出します。検索語をいくつか選びます。
-
カタログを検索する — 名前を推測するのではなく、スクリプトの検索結果から候補を選びます。
python3 scripts/lucide.py search "calendar schedule date"タグから各アイコンが適している理由がわかります。命名規則に沿って複合名を作った場合は、提案する前に検証してください。
python3 scripts/lucide.py validate circle-dashed-heart-broken -
確認済みの候補を3つ提示する — アイコン名と、適している理由(象徴的な意味、視覚的なわかりやすさ、状況への適合性)を示します。
-
最適な候補を推奨する — 最も有力な候補を1つ選び、その理由を説明します。
ガイドライン
searchで確認された実在のアイコン、またはvalidateで確認された手作業の名前だけを提案してください。名前を創作してはいけません。- 候補が3つ未満の場合は、あきらめる前に検索語を追加して検索してください。
- 十分に検索しても良い候補が見つからない場合は、その旨を伝えてください。
- スクリーンショットがある場合は、具体的なデザインの状況に合わせて提案してください。
- 必要なアイコンごとに、それぞれ異なる推奨を提示してください。
- フィードバックを複数回受けて、提案を改善できる状態にしてください。
出力形式
関連性:[主要な関連性とメタファー]
候補アイコン:
- icon-name — 適している理由
- icon-name — 適している理由
- icon-name — 適している理由
推奨:icon-name — [状況]に最も適している理由