mcpField
D
design-lookup

design-lookup

github.com/genericserviceデザイン・UI073 回インストール24 週間前に更新
リポジトリ

design-lookup について

ウェブ上の CSS コンポーネント、SVG 素材、アニメーション、デザイン参考を探すスキルです。検索先に応じてコードを取得・整理し、出典を添えて提示します。

主な機能

  1. 01CSS と SVG 素材を検索
  2. 02保護されたページから情報を取得
  3. 03CodePen のコードを抽出
  4. 04取得したコードを整理・調整
  5. 05出典を明記

活用シーン

  1. 01CSS のボタンやローダーを探す
  2. 02SVG アイコンを取得
  3. 03アニメーション効果を探す
  4. 04ビジュアルデザインの参考を集める

インストール

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

$npx skills add https://github.com/genericservice/claude-skills --skill design-lookup

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

同梱ファイルreferences/sources.mdscripts/fetch-page.py

詳細

デザインの検索

Web を検索して、CSS コンポーネント、SVG アイコン、アニメーション、デザインリソースを探します。帰属表示付きで、すぐに使えるコードを提示します。

ツール

scripts/fetch-page.py — Playwright ブラウザーフェッチャー

Cloudflare の保護を回避し、SPA をレンダリングします。WebFetch をブロックするサイト（CodePen、UIVerse など）で使用してください。

# Extract HTML/CSS/JS code from a CodePen pen (returns clean JSON)
python3 scripts/fetch-page.py "https://codepen.io/user/pen/ID" --codepen-code

# Fetch any protected page as text
python3 scripts/fetch-page.py "https://uiverse.io/user/component-slug"

# Extract specific elements with CSS selector
python3 scripts/fetch-page.py "https://example.com" --selector ".code-block"

# Increase timeout for slow pages
python3 scripts/fetch-page.py "https://example.com" --wait 20

使用する場合： WebSearch で Cloudflare に保護されたサイト（CodePen、UIVerse など）に有望な URL が見つかった後、このスクリプトを使用して実際のコードを取得します。

使用しない場合： WebFetch が問題なく動作するサイト（CSS-Tricks、GitHub raw、dev.to、MDN）では使用しないでください。WebFetch のほうが高速です。

ワークフロー

  1. リクエストを分類する — ユーザーが必要としているものを判断します。

    • CSS コンポーネント（ボタン、カード、ローダー、トグルなど）
    • SVG アイコン（UI アイコン、ブランドロゴなど）
    • CSS アニメーション／エフェクト（ホバーエフェクト、トランジション、キーフレームアニメーション）
    • SVG グラフィック（イラスト、波形、ブロブ、背景）
    • デザインの参考資料（コードではなく、ビジュアルの参考）

  2. ソースを選ぶ — 最適なソースと検索パターンについては、references/sources.md を参照してください。「リクエストの種類別検索戦略」テーブルを使用します。

  3. 幅広く検索する — 次の要素を組み合わせて、WebSearch で 2～3 件のクエリを並行して実行します。

    • 対象ソースに絞った検索には site:{source} {query} を使用します
    • フォールバックとして、一般的な {query} CSS/SVG 検索を行います
    • 用語を変えて検索します（例：「loader」「spinner」「loading animation」）

  4. コードを取得する — ソースごとに適切な抽出方法を使用します。

    CodePen のペン — fetch-page.py --codepen-code を使用し、HTML/CSS/JS をクリーンな JSON として抽出します。

    UIVerse のコンポーネント — fetch-page.py を使用してページのテキストを取得します（インラインの行番号付きでコードを含みます）。

    SVG アイコン — WebFetch を使って、GitHub から SVG の生データを直接取得します。

    • Lucide：https://raw.githubusercontent.com/lucide-icons/lucide/main/icons/{name}.svg
    • Heroicons：https://raw.githubusercontent.com/tailwindlabs/heroicons/master/optimized/24/outline/{name}.svg（solid/、20/solid/ もあります）
    • Tabler：https://raw.githubusercontent.com/tabler/tabler-icons/main/icons/outline/{name}.svg（filled/ もあります）
    • Feather：https://raw.githubusercontent.com/feathericons/feather/main/icons/{name}.svg
    • Simple Icons：https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/{name}.svg

    記事／チュートリアル — WebFetch で直接取得します（CSS-Tricks、MDN、dev.to、各種ブログで利用できます）。

  5. 結果を提示する — 次の形式で出力します。

## {Description of component}
Source: {URL}

{code block with HTML/CSS/SVG}

{One-line note on how to customize, if relevant}

可能であれば、ユーザーやデザインエージェントが選べるよう、2～4 件の候補を提示してください。

エージェント型ワークフローとバイブコーディング

  • 反復的なソース選定： 最初の検索で完璧なコンポーネントやアイコンが見つかるとは限りません。候補を取得して抽出したコードを確認し、フレームワーク固有の余分なコードや競合するスタイルを切り分け、CSS クラスやルールを一度に 1 つずつ削除または調整して、スニペットが簡潔で使いやすくなるまでプレビューします。
  • バイブコーディング： 複雑なレイアウト構造やインタラクティブなコンポーネントへの統合に取りかかる前に、クリーンで動作する CSS または SVG のスニペットをローカルにコミットします。

ガイドライン

  • 抽出したコードを整理する — 不要なベンダープレフィックス、フレームワーク固有のラッパー、無関係なスタイルを削除します。最小限で自己完結したスニペットを提示してください。
  • ライセンスを明記する — ソースで帰属表示が必要な場合（例：Flaticon の無料プラン）は、その旨を記載します。
  • SVG アイコンの場合 — アイコンフォントへのリンクより、インライン SVG コードを優先します。viewBox を含め、不要なメタデータは削除してください。
  • ジェネレーターの場合（波形、ブロブ、グラデーション）— ユーザーがパラメーターを調整できるよう、ジェネレーターの URL を提示し、サンプル出力も提供します。

コメント

Markdown 対応