Fudge について
Fudgeは、AIコーディングツール向けのホスト型ウェブサイト参照サービスです。Grok BuildプラグインからOAuthで接続し、収集されたデザイン情報を調査や実装に活用できます。
主な機能
- 01スタイルやページ種別で参照を検索
- 02フォント、色、レイアウトを確認
- 03参照を比較してデザイン方針を検討
- 04類似フォントと使用箇所を調査
- 05関連事例を使ってページをレビュー
活用シーン
- 01新しいインターフェースの参考探し
- 02サイトのデザイントークンの確認
- 03実装前のビジュアル方針の比較
MCP 対応
Grok BuildプラグインはOAuthでFudgeのホスト型MCPサーバーに接続します。他のMCPクライアントからもリモートエンドポイントを利用できます。
設定
リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。
https://api.withfudge.com/mcpclaude mcp add --transport http scroobius-pip-fudge https://api.withfudge.com/mcp{"mcpServers":{"scroobius-pip-fudge":{"type":"http","url":"https://api.withfudge.com/mcp"}}}Cursor で開く{"servers":{"scroobius-pip-fudge":{"type":"http","url":"https://api.withfudge.com/mcp"}}}VS Code で開く{"mcpServers":{"scroobius-pip-fudge":{"type":"http","url":"https://api.withfudge.com/mcp"}}}{"mcpServers":{"scroobius-pip-fudge":{"serverUrl":"https://api.withfudge.com/mcp"}}}コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。
ツール
詳細
Grok Build 用 Fudge プラグイン
Fudge を使うと、AI コーディングツールがサイトを構築する際に、検索や調査に使えるウェブサイトの参考例を提供できます。タイポグラフィ、色、レイアウト、コンポーネント、余白、境界線、シャドウ、グラデーション、メディア、ページのコンテキストなど、各ウェブサイトの詳細を収集します。
このプラグインは Grok Build を Fudge のホスト型 MCP サーバーに接続し、収集したウェブサイトの情報をデザイン調査、批評、実装に活用するためのガイダンスを提供します。
インストール
Grok Build で /plugin を開き、Fudge を検索してプラグインをインストールします。
初回の接続時に、Grok はブラウザーで Fudge の認証フローを開きます。design.withfudge.com にサインインし、アクセスを許可してください。API キーやローカルの認証情報ファイルは必要ありません。
質問できること
- スタイル、ページの種類、コンポーネント、色、タイポグラフィからウェブサイトの参考例を検索します。
- 収集したウェブサイトで使われているフォント、色、余白、レイアウト、デザイントークンを調べます。
- デザインの方向性を決める前に、複数の参考例を比較します。
- 見た目の特徴が似ているフォントを探し、収集したフォントがどこで使われているかを調べます。
- Fudge ライブラリの関連する例を使ってウェブサイトをレビューします。
- インターフェースのコードを作成または改善する際に、収集したデザイン情報を活用します。
プロンプトの例：
Find dark SaaS pricing pages with serif display type and restrained shadows.
What fonts, colors, spacing, and border radii are used on linear.app?
Find fonts similar to Anthropic Serif, then show me free alternatives.
Review this landing page and find relevant website references for the changes you recommend.
その他の MCP クライアント
リモートサーバーを Claude Code に追加します：
claude mcp add --transport http fudge https://api.withfudge.com/mcp
その他の MCP クライアントでは、チェックイン済みの .mcp.json 設定を使用できます。
認証とセキュリティ
このプラグインは、Fudge のホスト型 MCP エンドポイント https://api.withfudge.com/mcp に接続します。認証には OAuth を使用します。アカウントとプランによる制限が適用されます。
このプラグインには、実行可能なフック、インストールスクリプト、ローカルのシェルコマンドは含まれていません。環境変数、API キー、プロジェクトファイル、その他のローカル認証情報を読み取ることはありません。ホスト型サービスは、design.withfudge.com、api.withfudge.com、pin.fontofweb.com から Fudge が所有するリンクやビジュアルプレビューを返す場合があります。
リンク
ライセンス
MIT
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。