エージェントからのデザイン参照アクセス
AIエージェントをReferoの厳選された実際のプロダクト画面とユーザーフローのライブラリに接続し、出力前にリサーチできるようにします。
Refero MCP
Refero MCPは、MCP対応AIエージェントをReferoの厳選されたWebおよびiOSのUI/UX参考事例とユーザーフローに接続し、UI生成前の実践的なデザインリサーチを支援します。Refero Proで利用可能です。
概要
Refero MCP for AI agentsは、MCP対応のAIエージェントをReferoの実際のプロダクト画面とユーザーフローのライブラリに接続するデザインリサーチツールです。デザインを生成する前に既存のレイアウトやインタラクションパターンを調べられるようにし、一般的な仮定ではなく具体的な事例に基づいた結果を得やすくします。
Referoの基盤プラットフォームはWebとiOSのUI/UX参考事例に重点を置いており、検索や比較のために整理された数万件規模の画面とユーザーフローを備えています。MCP版はそのライブラリをエージェントのワークフローへ拡張するもので、サイト上ではRefero Skillや、Figma内で参考事例を閲覧できるFigmaプラグインなどの関連製品も紹介されています。
機能
大規模な画面・フローライブラリ
オンボーディング、ペイウォール、空状態、設定、権限設定など、さまざまなプロダクト状態を含む、WebとiOSの画面を大量に検索できるコレクションを提供します。
構造化された画面メタデータ
説明、UXパターン、UIパターン、レイアウトなどの構造化メタデータを含み、画像を見る前に参照事例を評価できます。
高速なパターン確認
数百の画面やフローを数秒で横断してデザインリサーチできるため、エージェント作業中の手作業ブラウジングを減らすことを意図しています。
検索と絞り込みのワークフロー
タグ、テキスト内容、サイト名で検索でき、プラットフォーム切り替えでWebとiOSの結果を切り替えられます。
デザイン手法としてのRefero Skill
タイポグラフィ、カラー、余白、モーションに関する職人品質のルールを備えた、リサーチ先行のデザイン作業のための手法としてエージェントに導入できるRefero Skillを含みます。
ユースケース
UI構築前のリサーチ
エージェントがインターフェースを生成する前に関連するプロダクト画面やユーザーフローを調べられるため、特定のレイアウトやインタラクションパターンが必要な作業に役立ちます。
プロダクトフローのパターン調査
チームはオンボーディング、課金、アカウント設定、その他一般的なアプリフローの事例を検索し、実際のプロダクトがそれらの状態をどう扱っているかを比較できます。
エージェントワークフロー内での参照検索
MCP対応のコーディングツールを使うデザイナーは、ブラウザのタブやスクリーンショットを手作業で行き来する代わりに、エージェントにReferoで関連参照を検索させることができます。
クロスプラットフォームのデザイン着想
ライブラリにはWebとiOSの両方の事例が含まれているため、プロダクトの各面で一貫したデザイン言語が必要なときに、クロスプラットフォームの着想に役立ちます。
リサーチ先行のデザイン手法
チームがエージェントにまず参照を調査させ、その後にタイポグラフィ、カラー、余白、モーションに関するルールを適用したい場合にRefero Skillを利用できます。
Pros and Cons
Pros
- エージェントを、実際のWebおよびiOSのプロダクト画面とフローの大規模ライブラリに接続します。
- 画像だけの閲覧よりも対象を絞ったデザインリサーチに役立つ構造化メタデータを追加します。
- MCP対応ツールで動作し、初回サインイン後はシンプルな認可フローが表示されます。
- タグ、テキスト検索、サイト検索、Web/iOS切り替えなど、Referoの広範な検索機能に支えられています。
- MCPアクセスがProプランに含まれることを示す料金ページが用意されています。
Cons
- ソースには、1行の設定とブラウザサインインの流れを超える詳細なインストール手順は記載されていません。
- 対応範囲はMCPをサポートする任意のツールと広く説明されていますが、ページにはより深い統合詳細やプラットフォーム要件は列挙されていません。
- チーム利用や正確なプラン範囲など、一部の製品領域はソースページ上での説明が限定的です。
FAQ
Refero MCPにはどうやってアクセスしますか？
Refero MCPはRefero Proサブスクリプションに含まれています。初回利用時はブラウザウィンドウでサインインし、その後は接続が自動化されます。
Refero MCPはどのツールで動作しますか？
ページでは、Refero MCPはMCPをサポートする任意のツールで動作すると説明されており、具体例としてClaude Code、Cursor、Antigravity、Lovable、Codex、Manus、その他互換ツールが示されています。
セットアップはどのように行いますか？
ページに示されているインストールの流れは、1行の設定のあとにブラウザベースのサインインと認可を行う形です。その後は、タスク中にエージェントがReferoの画面やユーザーフローを検索できます。
Refero MCPはいつ役立ちますか？
Refero MCPは、デザイン参照を必要とするAIエージェント向けで、特にインターフェース生成、パターン調査、プロダクト作業のレイアウト選定時に役立ちます。
制限事項やセットアップ上の注意点はありますか？
ソースには、すべての互換性詳細や完全なインストール手順は記載されていません。ただし、MCPサポートとブラウザベースの認可を中心に構成されていることは示されています。
Quick Facts
- カテゴリ
- Developer Tool
- 主な用途
- AIエージェント向けデザインリサーチ
- 製品タイプ
- MCP接続の参考ライブラリ
- 対応範囲
- WebおよびiOSのデザイン参考事例
- アクセス
- Refero Proに含まれる
- ソースドメイン
- refero.design
Refero MCPの代替品
PixelDrive
PixelDriveは、ブラウザ編集、REST API、CSV一括、MCPで1つのテンプレートから大量のブランド画像を生成できるAPI。キャッシュ可能なレンダリングと従量課金に対応。
Napkin AI
Napkin AIは、テキストをプレゼン資料や文書、共有用コンテンツ向けの編集可能なビジュアルに変換します。テキスト起点で生成でき、共同編集にも対応。PPT、PNG、SVG、PDFで書き出せます。
Pixso
Pixsoは、ユーザーがワンクリックでデザイン草案とコードを生成できる次世代のAIネイティブUIデザインツールで、Figmaの国内代替品として機能します。
创客贴 AI
創客貼 AIは、さまざまなAIデザインツールを含むAIデザインプラットフォームで、ユーザーがデザインの難易度を下げ、デザインの効率を向上させるのを助けます。
Make Real
Make Realは、tldraw SDKとAIモデルを使い、手描きワイヤーフレームを動作するHTMLプロトタイプに変換するNext.jsアプリです。キャンバスでスケッチし、コード生成し、埋め込みプレビューで確認できます。
Frames
Framesは、プレミアム端末フレームとテンプレートでInstagram・Twitter・Product HuntのローンチポスターやSNS販促素材をすばやく作成。無料で開始。