mcpField
L
llm-icon-finder

llm-icon-finder

github.com/daymadeデザイン・UI1.5k958 回インストール今日更新
リポジトリ

llm-icon-finder について

llm-icon-finderは、lobe-iconsからAIやLLMのブランドアイコンを探すスキルです。モデル、プロバイダー、アプリのアイコンを探す人向けに、命名方法と形式・テーマ別のCDN URLパターンを案内します。

主な機能

  1. 01モデル、プロバイダー、アプリのアイコン検索
  2. 02SVG、PNG、WEBP形式
  3. 03ライト、ダーク、一部カラーのバリエーション
  4. 04名前からCDN URLを構成
  5. 05アイコン閲覧と問題解決の案内

活用シーン

  1. 01製品インターフェース用のモデルアイコン検索
  2. 02ドキュメント用のプロバイダーやアプリのロゴ取得
  3. 03形式とテーマを指定したアイコンリンク作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/daymade/claude-code-skills --skill llm-icon-finder

インストール後、Claude Code で/llm-icon-finderを入力して読み込まれたか確認します。

同梱ファイルreferences/developer-info.mdreferences/icons-list.md

詳細

AI／LLM ブランドアイコンを見つける

lobe-icons ライブラリから、AI／LLM モデルのブランドアイコンやロゴを利用できます。このライブラリには、モデル（Claude、GPT、Gemini）、プロバイダー（OpenAI、Anthropic、Google）、アプリケーション（ComfyUI、LobeChat）のアイコンが 100 種類以上含まれています。

アイコンの形式とバリエーション

利用可能な形式：SVG（ベクター）、PNG（ラスター）、WEBP（圧縮） テーマのバリエーション：ライト、ダーク、カラー（一部のアイコン）

CDN URL のパターン

次のパターンを使って URL を作成します。

# SVG
https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-svg/{light|dark}/{icon-name}.svg

# PNG
https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-png/{light|dark}/{icon-name}.png

# WEBP
https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-webp/{light|dark}/{icon-name}.webp

# Color variant (append -color to icon-name)
https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-png/dark/{icon-name}-color.png

アイコンの命名規則：小文字とハイフンを使用します（例：claude、chatglm、openai、huggingface）。

ワークフロー

ユーザーからアイコンを求められた場合：

  1. アイコン名を特定します（通常は会社名またはモデル名を小文字で指定し、複数語の場合はハイフンでつなぎます）
  2. 形式（デフォルト：PNG）とテーマ（デフォルト：ダーク）を決めます
  3. 上記のパターンを使って CDN URL を作成します
  4. URL をユーザーに提示します
  5. ダウンロードを求められた場合は、Bash ツールで curl を使用します
  6. Web ビューアーのリンク https://lobehub.com/icons/{icon-name} を含めます

アイコン名を見つける

一般的なアイコン：カテゴリ別（モデル、プロバイダー、アプリケーション、中国の AI）にまとめられた包括的な一覧は、references/icons-list.md を参照してください。

名前が不確かな場合：

  • https://lobehub.com/icons を参照します
  • 別の表記を試します（例：会社名と製品名の違い：alibaba と alibabacloud）
  • 標準 URL で失敗する場合は、-color バリエーションを確認します

中国の AI モデル：中国語での問い合わせに対応します（例：「智谱」→ chatglm、「月之暗面」→ moonshot）。

例

単一のアイコンをリクエスト：

User: "Claude icon"
→ Provide: https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-png/dark/claude.png
→ Also mention color variant and web viewer link

複数のアイコンをダウンロード：

curl -o openai.svg "https://raw.githubusercontent.com/lobehub/lobe-icons/.../dark/openai.svg"
curl -o anthropic.svg "https://raw.githubusercontent.com/lobehub/lobe-icons/.../dark/anthropic.svg"

中国語での問い合わせ：

User: "找一下智谱的图标"
→ Identify: 智谱 = ChatGLM → icon name: chatglm
→ Provide URLs and mention related icons (zhipu, codegeex)

トラブルシューティング

URL が 404 を返す場合：

  1. -color サフィックスのバリエーションを試します
  2. 別の名前を確認します（例：chatgpt と gpt、google と gemini）
  3. https://lobehub.com/icons で閲覧するようユーザーに案内します
  4. リポジトリを検索します：https://github.com/lobehub/lobe-icons

参考ファイル

  • references/icons-list.md - カテゴリ別にまとめた、利用可能な 100 種類以上のアイコンの包括的な一覧
  • references/developer-info.md - npm のインストール方法と React の使用例

コメント

Markdown 対応