Fudge

Fudgeは、実際の本番サイトから例を検索・確認・保存・再利用できるデザインリファレンス検索ツールです。タイポグラフィ、配色、レイアウト、トークンデータを起点に、デザイナーや開発者、AI支援ワークフローを支えます。

Fudgeとは

Fudgeは、実際の本番サイトから例を検索・確認・保存・再利用できるデザインリファレンス検索ツールです。このサイトでは、一般的なインスピレーションやモックアップから始めるのではなく、タイポグラフィ、配色、UIパターン、レイアウトの詳細を検索する手段として位置づけられています。

検索可能なWebサイトライブラリに、ブラウザでのキャプチャとエクスポートのワークフローを組み合わせています。ユーザーはスタイルで検索し、ページの作られ方を確認し、Chromeから例を保存し、キャプチャした視覚的情報をTailwind、CSS variables、JSON、デザイン・トークンなどの形式に変換して、コードやAI支援ワークフローで利用できます。

主な機能

本番サイトを検索する

モックアップや一般的なインスピレーションボードに頼るのではなく、説明、レイアウト、フォント、色、スクリーンショット、ドメインで本物のWebサイトを検索できます。

デザインをデザインシステムのデータに分解する

ソースサイトから取得したタイポグラフィ、色の値、間隔、ボーダー、角丸、シャドウ、グラデーション、レイアウト階層、メディアの役割、その他の構造的詳細をページ上で確認できます。

リファレンスを保存・整理する

ChromeからWebサイトを保存し、スクリーンショット、フォント、色、間隔、レイアウト、ソースの文脈を再利用可能なライブラリやコレクションにまとめられます。

コード向けフォーマットにエクスポートする

観察したスタイルをTailwind、CSS variables、JSON、DTCG、Figma tokensとしてエクスポートでき、構造化された結果や再構築しやすいレイアウトデータにも対応しています。

デザインリファレンスをAIツールに接続する

MCP対応のAIクライアント内でFudgeを使い、エージェントが保存したリファレンスを参照しながら、スクリーンショット、配色、タイポグラフィ、ソースの文脈を扱えるようにします。

Fudgeの主な使い方

新しいUIのためのリファレンスを集める
デザイナーは、特定の見た目の料金ページ、ダッシュボード、オンボーディングフロー、ランディングページを検索し、その背後にあるフォント、色、レイアウトの選択を確認できます。
Webサイトを実装しやすいスタイルに変換する
エンジニアは、Chromeから例のサイトを保存し、その視覚的属性をTailwindやCSS variablesにエクスポートして、実装の出発点にできます。
エージェントに本番デザインの文脈を与える
AIユーザーは、MCP対応クライアント経由でFudgeを接続し、モデルが保存されたスクリーンショット、配色、タイポグラフィ、ソースの文脈を使って、推測せずに質問へ答えられるようにできます。
再利用可能なデザインリファレンスを整理する
チームは保存したWebサイトやコレクションの個人ライブラリを作成し、毎回ゼロから探すのではなく、将来のプロジェクトのために例を見返せます。
フォントの組み合わせと代替を調べる
タイポグラフィの選択を比較する人は、特定のフォントや近い代替を使っている実際のWebサイトを検索し、本番環境でそれらのフォントがどのように組み合わされているかを確認できます。

Pros and Cons

Pros

モックアップではなく、実際の本番サイトを前提にしている。
フォント、色、レイアウト、スクリーンショット、ドメインなど、実用的なデザイン属性で検索できる。
キャプチャ、確認、保存、エクスポートを1つのワークフローにまとめている。
Tailwind、CSS variables、JSON、デザイン・トークンなど、実装に役立つ出力形式を提供する。
MCPベースで、AIツール内に取得したデザイン文脈を取り込む道筋を示している。

Cons

公開ページでは、詳細で完全な統合マトリクスや、あらゆるワークフロー面のドキュメントは提供されていません。
提供されたページ上では一部の機能説明が広めで、深いドキュメント化がされていないため、高度な設定の詳細はソースだけでは不明なままです。

FAQ

Fudgeは何のためのツールですか？

Fudgeは、レイアウト、タイポグラフィ、配色、余白、UIパターンなどのデザインリファレンスを探すために、保存済みの本番サイトを検索するためのツールです。料金ページとMCPページでは、MCP対応クライアントを通じてAIツール内でも使えることが示されています。

Fudgeは実際にはどのように使いますか？

ソースページには、ブラウザからサイトを保存するためのChrome拡張機能と、FudgeをAIツールに接続するためのMCP設定が示されています。また、実際のWebサイトからデザインを検索、確認、保存、再利用できるとも記載されています。

Fudgeは何をエクスポートできますか？

はい。料金ページによると、FudgeはWebサイトのタイポグラフィ、色、余白、デザイン・トークンをTailwind、CSS variables、JSONにエクスポートできます。また、トークンページではFigma tokensとCSSへのエクスポートにも触れられています。

Fudgeの料金はいくらですか？

料金ページでは、サブスクリプションは月額15ドルまたは年額150ドルで、年払いは17%オフと記載されています。また、このプランは個人のデザイン作業向けで、商用ライセンスには会社への連絡が必要とも書かれています。

Fudgeは統合機能に対応していますか？

ソースには、詳細な公開統合一覧は表示されていません。ただし、Chrome拡張機能、サブスクリプション製品、そしてAIエージェント向けのMCP対応ワークフローがあることは示されています。

Quick Facts

カテゴリ: デザインツール / 開発者向けツール
主な用途: デザインのインスピレーション、リファレンス検索、デザイン・トークン抽出
プラットフォーム: Webアプリ + Chrome拡張機能
AIワークフロー: エージェント利用のためのMCP対応クライアントサポート
エクスポート: Tailwind、CSS variables、JSON、DTCG、Figma tokens
料金: 公開プランは月額15ドルまたは年額150ドル

Fudgeの代替品

图像大厨imgcook

imgcookは、デザイン稿をフロントエンドコードに変換するデザイン-to-codeツールです。Sketch、Photoshop、VS Code、CLIに対応し、プラグインと開発者向けのワークフローを提供します。

ByteAsk

ByteAskは、C/C++向けのターミナル起点AIコーディングエージェント。リポジトリを編集し、コンパイラやデバッガ、サニタイザ、テストで変更を検証してから差分を表示。無料枠あり。

CreateOS Sandbox

CreateOS Sandboxは、FirecrackerマイクロVM上でコードやエージェントのワークロードを実行できる分離型コンピュート環境です。SDK、CLI、MCPで制御可能。

hob

hobは、エージェントのセッション、ターミナル、履歴、後続作業を、既存のツールやプロバイダーに合わせて整理できる独立したコーディングエージェント向けワークスペース。ローカルでの制御を重視する開発者に最適。

Ably Chat

Ably Chatは、カスタムのリアルタイムチャットアプリを構築できるチャットAPIプラットフォームです。ルーム単位のメッセージ、入力中表示、プレゼンス、リアクション、メッセージ更新に対応し、利用量ベースの料金も選べます。

Manta AI

Manta AIは、URLからアプリの挙動を把握し、回帰を検出し、スクリプトやセレクタ管理なしでテストを生成できる自律型Webアプリテストツールです。