mcpField
S
suggest-lucide-icons

suggest-lucide-icons

github.com/nweiiデザイン・UI10620 回インストール1 週間前に更新
リポジトリ

suggest-lucide-icons について

プロダクトデザイナーや UI 開発者向けに、概念やスクリーンショットの文脈から Lucide アイコンを提案するスキルです。カタログで名前を検索・検証して候補を示します。

主な機能

  1. 01概念やタグによるアイコン検索
  2. 02スクリーンショットの文脈を考慮
  3. 03名前を検証し近似候補を提示
  4. 04候補三つと推奨案の提示

活用シーン

  1. 01UI の概念を表すアイコンの選定
  2. 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

手順

  1. 関連性を考える — 重要なアイデア、視覚的なメタファー、スクリーンショットから読み取れる手がかりを洗い出します。検索語をいくつか選びます。

  2. カタログを検索する — 名前を推測するのではなく、スクリプトの検索結果から候補を選びます。

    python3 scripts/lucide.py search "calendar schedule date"
    

    タグから各アイコンが適している理由がわかります。命名規則に沿って複合名を作った場合は、提案する前に検証してください。

    python3 scripts/lucide.py validate circle-dashed-heart-broken
    
  3. 確認済みの候補を3つ提示する — アイコン名と、適している理由(象徴的な意味、視覚的なわかりやすさ、状況への適合性)を示します。

  4. 最適な候補を推奨する — 最も有力な候補を1つ選び、その理由を説明します。

ガイドライン

  • search で確認された実在のアイコン、または validate で確認された手作業の名前だけを提案してください。名前を創作してはいけません。
  • 候補が3つ未満の場合は、あきらめる前に検索語を追加して検索してください。
  • 十分に検索しても良い候補が見つからない場合は、その旨を伝えてください。
  • スクリーンショットがある場合は、具体的なデザインの状況に合わせて提案してください。
  • 必要なアイコンごとに、それぞれ異なる推奨を提示してください。
  • フィードバックを複数回受けて、提案を改善できる状態にしてください。

出力形式

関連性:[主要な関連性とメタファー]

候補アイコン:

  1. icon-name — 適している理由
  2. icon-name — 適している理由
  3. icon-name — 適している理由

推奨:icon-name — [状況]に最も適している理由

コメント