Fudge
Fudgeとは何ですか？
Fudgeは、コーディングエージェントがより優れたWebサイトを制作できるよう支援する、AI搭載のデザインリファレンスエンジンです。実際に公開されている何千ものWebサイトを検索・解析し、スクリーンショットとともに、タイポグラフィ、カラー、余白、レイアウト、コンポーネント、ページタイプ、メディア、インタラクション、コントラスト、ボーダー、角丸、シャドウ、グラデーションなど、計測されたデザイン情報を提供します。FudgeはMCPを通じてCodex、Cursor、Claude Codeなどのツールで利用できます。また、Chrome拡張機能を使えば、Webサイトやデザインの詳細を保存して後から再利用できます。エージェントは、インスピレーションの発見、ビジュアル方向性の比較、フォントやカラースケールの調査、スクリーンショットとの照合、Tailwind CSS・CSS変数・JSON形式でのデザインシステムのエクスポートにFudgeを活用できます。
Fudgeの使い方は？
互換性のあるAIコーディングツールで、セットアップコマンド npx -y @withfudge/design@latest setup を実行してFudgeをインストールします。エージェントに、デザインのインスピレーション、フォント、カラー、レイアウト、ページタイプ、スクリーンショットに似たWebサイトなどを検索するよう依頼できます。エージェントは該当するリファレンスを調査し、そのタイポグラフィ、カラー、余白、レイアウト、コンポーネントの詳細を参考にしながら制作できます。Chrome拡張機能をインストールすれば、Webサイトやページ内の選択したセクションを保存し、後から検索したりプロジェクトコレクションに整理したりすることも可能です。
Fudgeのコア機能
スタイル、レイアウト、カラー、フォント、ページタイプ、コンポーネント、ドメイン、ビジュアル類似度などの条件で、実際に公開されている何千ものWebサイトを検索
タイポグラフィ、カラー、余白、レイアウト、コンポーネント、コントラスト、ボーダー、角丸、シャドウ、グラデーション、メディアの詳細を計測し、スクリーンショットとともに提供
使用されているフォントを調査し、類似フォントやフォントペアを発見
料金ページ、ダッシュボード、ドキュメント、オンボーディング、ログインページ、ポートフォリオ、ランディングページなどを検索
アップロードしたスクリーンショットと見た目が似ているWebサイトを検索
Chrome拡張機能でWebサイトやページ内のセクションを保存
保存したリファレンスをプロジェクトコレクションとして整理し、再利用
AIコーディング中の会話内で、保存したデザインリファレンスを検索・比較
タイポグラフィ、カラー、余白、角丸、シャドウ、グラデーションをTailwind CSS、CSS変数、JSON形式でエクスポート
Codex、Cursor、Claude Codeなど、MCPに対応したAIコーディングツールで利用可能
カラーの役割、アクセシビリティ上のコントラスト、読みやすいテキストカラー、カラースケールを分析
必要に応じて、メディア、動画、トリミング、モーション、インタラクション、オーバーレイ、クリッピング、ビューポート、キャプチャ時のコンテキストを保持
Fudgeの使用例
新しいSaaSランディングページのために、実在するデザインリファレンスを探す
既存のサンセリフ体に合うセリフ体のフォントペアを見つける
MerriweatherやAnthropic Serifなど、特定のフォントを使用しているWebサイトを探す
WebサイトのフォントとカラーをTailwindテーマとしてエクスポートする
セリフ体のディスプレイタイポグラフィ、タイトな角丸、柔らかなシャドウ、アクセシブルなCTAコントラストを備えた、ダークな料金ページを探す
スクリーンショットとビジュアルの方向性が似ているWebサイトを探す
金融プロダクトを制作する前に、フィンテックのデザインパターンを研究する
複数のデザインプロジェクトにまたがってWebサイトのリファレンスを保存・比較する
「モダン」「プレミアム」といった曖昧な指示ではなく、具体的なビジュアル情報をAIコーディングエージェントに提供する
確立されたプロダクトのレイアウトとデザインシステムを調査し、似たインターフェースを再現する
FudgeのFAQ
FudgeはAIコーディングエージェントに何を提供しますか？
FudgeはどのAIコーディングツールに対応していますか？
フォントやフォントペアを検索できますか？
Webサイトのデザインシステムをエクスポートできますか？
見つけたWebサイトを保存できますか？
スクリーンショットを使ったビジュアル検索に対応していますか？
スクリーンショット以外に何を保存できますか？
無料プランはありますか？
無料プランにクレジットカードは必要ですか？
Fudgeはデザインインスピレーションギャラリーとどう違いますか？
Fudge レビュー (0)
Fudge の価格
無料
月額0ドル
1日25回のFudgeクエリ、MCPサーバーへのアクセス、実在するWebサイトリファレンスの検索・調査が利用できます。クレジットカードは不要です。
Pro
月額29ドル
Fudgeクエリ無制限、Webサイト・フォント検索、スクリーンショット照合、カラー機能、Chrome保存、Tailwind v4、CSS変数・JSONエクスポート、コレクション無制限、優先サポートが利用できます。年払いでは17%割引になります。
Fudge の分析
Fudge ウェブサイトのトラフィック分析
地理的なトラフィック
上位2地域
Fudge 埋め込みを起動する
ウェブサイトバッジを使用して、Toolify Launchに対するコミュニティからのサポートを促進しましょう。ホームページやフッターに簡単に埋め込むことができます。
Fudge の代替
ソーシャルリスニング