Fudge MCP.

Fudge MCP

AIコーディングエージェントに「デザインのセンス」を与えるMCPサーバーです。1,665以上の実在するWebサイトリファレンスから、フォント、カラー、レイアウト、コンポーネントの詳細情報を取得し、AIが生成するUIの品質を飛躍的に向上させます。「生成された感」のあるサイトではなく、本物のデザインのようなWebサイトを構築できます。

製品ハイライト

• MCPサーバー連携: Cursor、Claude Code、Codexなど既存のAIコーディングツールとシームレスに統合し、自然言語でデザインリファレンスを取得できます。
• 豊富なリファレンスライブラリ: 1,665以上のWebサイト、10,030以上のキャプチャ、1,471以上のフォントファミリーを収録。2,535人以上のデザイナーによって継続的に更新されています。
• 構造化されたデザイン情報: スクリーンショットだけでなく、タイポグラフィ、カラーロール、コントラスト、スペーシング、ボーダー、角丸、シャドウ、グラデーション、コンポーネントスタイルを詳細に解析。
• フォント類似検索: 特定のフォントに似た代替フォントをビジュアルハッシュ類似度でランキング。有料フォントの他、Google Fontsなどの無料代替案も提示します。
• デザインシステム出力: キャプチャしたWebサイトのデザイントークンをTailwind v4、CSS変数、JSON形式でエクスポート可能。
• Chrome拡張機能: 任意のWebサイトをワンクリックで保存。フォント、カラー、レイアウト、インタラクションを含む完全な構造化データとしてライブラリに追加できます。

ユースケース

• ランディングページ作成: 「ダークモードのSaaSランディングページ」「オーバーサイズタイポグラフィを使ったデザイン」など、スタイルを指定して実在する参考サイトを検索・適用。
• フォント選定・ペアリング: Geistと組み合わせるセリフフォント、Anthropic Serifに似た代替フォントなど、実際の使用例を基にしたフォント選びをサポート。
• デザインシステム構築: StripeやLinearなどの有名サイトのカラースキーム、タイポスケール、スペーシングを解析し、自社プロダクトのデザインシステムとして再利用。
• スクリーンショットマッチング: 画像をアップロードすると、似た雰囲気・レイアウトの実在するWebサイトを検索し、デザイン方向性の具体化に活用。
• アクセシビリティ対応: コントラスト比の計算、WCAG準拠のテキストカラー選定など、アクセシブルなデザインの実現を支援。

対象ユーザー

AIコーディングツールを活用してWebサイトやアプリケーションを開発するフロントエンド開発者、UIデザイナー、プロダクトマネージャー。特に、生成AIの「テイストのない」出力に不満があり、実在する高品質なデザインリファレンスをAIエージェントに学習させたい方に最適です。月額29ドルで無制限検索が可能なProプランを提供しています。