ブリーフから実際のフローへ。いつものツールの中で。ブリーフから実際のフローへ。いつものツールの中で。

AIエージェントと開発するプロダクトデザイナーとエンジニアのために。リリース済みプロダクトの実際のフローを、Figma、Chrome、エディターで。AIエージェントと開発するプロダクトデザイナーとエンジニアのために。デザインしたいものを説明し、リリース済みプロダクトの実際のフローを見つけて、Figma、Chrome、またはMCP経由でClaude CodeやCursorに取り込めます。すべての画面に出典が残ります。

オンボーディングを設計チェックアウトを改善ダッシュボードを探す

無料で始められます · クレジットカード不要

Refcat の UI リファレンスライブラリ

使い方

デザインエージェントに依頼するだけ。

オンボーディングから決済まで、Refcatは次のデザイン判断を楽にする実在プロダクトのパターンを見つけます。

Uberアプリの「オンボーディング」フローの実際の画面

機能

実際のプロダクト開発のためのデザインエージェント

エージェントに依頼し、その提案の根拠となる実際のパターンを確認して、作業をFigmaやお気に入りのIDEへ。

FIGMAへのエクスポート

エージェントが導いたフローをすぐにFigmaへ。

RefcatからFigmaのフレームに書き出された実際のアプリのフロー

フォルダ

エージェントが見つけたパターンを整理して、チームに共有。

保存した画面とフローを整理したRefcatのフォルダ

フィルター

ブレークポイント、アプリ、フロー。エージェントに適切なデザインコンテキストを。

プラットフォーム、アプリ、フローでカタログを絞り込む様子

画像からコードへ

実際のアプリのスクリーンショットを、確かな視覚的コンテキストとともにコードに。

実際のアプリのスクリーンショットと、そこから生成されたコード

メモ

それぞれの提案の理由を記録して、二度と見失わない。

Airbnbの参考画面に添えられたメモ

CLAUDE CODE連携

Claudeに実際のデザインコンテキストを渡して、UIを改善。

MCP経由でRefcatのリファレンスを使うClaude Code

いつものツールの中で

エージェントのコンテキストに、実在する画面を。

Claude Code、Cursor、Claude Desktopは記憶をもとにインターフェースを生成します。RefcatはMCPを通じて、リリース済みプロダクトの画面を出典付きで届けます。

セッション例

あなた › 年額プランを前面に出した実在のペイウォールを3つ探して、「Pricing v2」プロジェクトに追加して。

refcat › search_screens "ペイウォール、年額プラン優先"
3件 · それぞれアプリ、プラットフォーム、フロー、キャプチャ日付き

refcat › get_screen ×3 → add_screen ×3 → プロジェクト「Pricing v2」

エージェント › 完了しました。リリース済みのペイウォール3つを出典付きでプロジェクトに追加しました。創作したものはありません。

23のツール、1つのキー
get_screenは画面そのもの、つまり画像とレイアウト構造をエージェントに渡します。search_screens、get_app_flows、get_email_html、export_design_systemが残りをカバー。アカウントでキーを作成し、JSONブロックを1つクライアントに貼り付けるだけ。
すべての画面に出典がある
各結果にアプリ、プラットフォーム、フロー、キャプチャ日が付くので、エージェントは推測ではなく実在のプロダクトに基づいて提案します。
Studioのブランドキット
生成されるすべての画面にカラーパレットとタイポグラフィを適用。ブランドキットは無制限、チーム全体で使える毎分300リクエストのMCPキーが10個。
MCPを2分でセットアップ
 Studioを見る

TESTIMONIALSOnce you try it, you won't research UI the old way again.

I love not having to download apps, create accounts, and test everything manually just to understand the UI.

Gugel@gugeldev

I was genuinely surprised. Congratulations on the quality and care for users!

Rafael Coelho@coelho_lab_

So much fun. I spent hours looking through the references.

渡邉一輝（かじき@kzkwt7b

The folders feature finally made me use the references I collect.

Nathan Oliveira@NathanDev_

料金リアルな文脈で、デザインエージェントはもっと賢くなる。実際のプロダクトフローを探して、必要な参考・エクスポート・AIの容量を選びましょう。

最大10%お得

Free$0.00/月

実際のプロダクトの参考を探して保存

プレビュー画面 + 毎週10件の完全なフロー

参考を50件保存 · 3プロジェクト

ブラウザーからFigmaへのエクスポート月5回

Claude CodeまたはCursor向けMCPキー1本 · 毎分30リクエスト

1席

無料で始めるクレジットカード不要

一番人気

Pro$9.17/月

$110.00 を年1回請求

毎週つくるデザイナーに

参考を無制限に保存

1席あたり月20回のエクスポート

Figmaとデザインシステムのエクスポート

フロー履歴全体

月100画面のAI生成（チーム共有）

ブランドキット1つ · MCPキー3本（毎分120リクエスト）

2席を含む

アップグレード: Pro

いつでも解約可能

Studio$35.00/月

$420.00 を年1回請求

ブランドキット無制限、MCPをチーム全体で

ブランドキット無制限：生成画面すべてに自社の色とタイポグラフィ

チーム全体でMCPキー10本（毎分300リクエスト）

無制限のエクスポートとProの全機能

6席を含む

月500画面のAI生成（チーム共有）

アップグレード: Studioいつでも解約可能

USD · 税金がかかる場合があります。金額と通貨はチェックアウト時にご確認ください。

Refcatについてのよくある質問

プラン、エクスポート、解約について。

白紙から考えるのはもう終わり。エージェントにブリーフを渡そう。

実際のプロダクトの参考をプロジェクトに

無料 · クレジットカード不要

利用規約プライバシー Cookie