Refero Styles は、有名プロダクトサイトのデザインを解析し、AI コーディングエージェントがそのまま読める「DESIGN.md」という Markdown ファイルにまとめて公開しているライブラリです。配色・タイポグラフィ・余白・コンポーネントといったビジュアルのルールが 1 ファイルに整理されているので、Cursor や Claude Code、Codex などに読み込ませると、選んだサイトに近い見た目で UI を組み立ててもらえます。実プロダクトの画面を大量に集めたデザイン参考サービス「Refero」から派生したプロダクトで、2026 年 9 月時点ではベータ版として公開され、2,000 件以上のデザインシステムが収録されています。
主な特徴
- DESIGN.md のギャラリー: 著名なプロダクトサイトごとに、色・タイポグラフィ・スペーシング・コンポーネントのルールを DESIGN.md 形式で閲覧できます。新しいスタイルは毎週追加されると案内されています
- 主要な AI コーディングツールで使える形式: 公式サイトは Cursor・Claude・Codex・v0・Lovable などで使えると説明しています。Markdown なので、特定のツールに縛られずにプロジェクトへ置いて参照させられます
- トレンド・人気・新着での閲覧: 並び順を切り替えながらスタイルを探せるほか、「Apple 風」のように雰囲気を手がかりにした探し方もできます
- Refero MCP との連携: Refero 本体が提供するリモート MCP サーバー（
https://api.refero.design/mcp）には Styles の検索層が含まれており、AI エージェントが会話の中でスタイルを探して取り込めます。ただし MCP の利用には Refero の有料プランが必要です
料金
| プラン | 料金 | 主な内容 |
|---|---|---|
| Refero Styles の閲覧 | 無料（ベータ） | ギャラリーの閲覧・検索 |
| Refero Pro | 年払いで $10/月相当（$120/年） | MCP を含む Refero 本体の機能。MCP は月 8,000 回まで |
| Refero Team | 年払いで $12/シート/月相当（$140/シート/年） | 複数メンバー向けの Refero 本体プラン |
| Refero Lifetime | 公式サイトで確認 | 買い切り型の Refero 本体プラン |
料金は2026年9月時点の情報です。Pro と Team の金額は 2026 年 9 月時点の二次情報（比較サイト経由）で、公式の料金ページでは確認できていません。MCP の利用上限（Pro・Team・Lifetime で月 8,000 回まで）は公式ドキュメントの記載です。最新の料金は公式サイトをご確認ください。
DESIGN.md のダウンロードに Refero アカウントへのサインインが要るかどうかは、今回の調査では確かめられていません。
メリット・デメリット
✅ メリット
- 「どんな配色と書体にするか」をゼロから決めなくても、実在サイトのルールを出発点にしてすぐ作業に入れます
- AI に「きれいにして」と曖昧に頼む代わりに具体的なルールを渡せるので、生成される UI の見た目が回ごとにぶれにくくなります
- 複数サイトのデザインシステムを見比べられるため、方向性を決める前の比較検討に使えます
- ギャラリーの閲覧だけなら費用がかからず、気軽に試せます
⚠️ デメリット
- ベータ版のため、収録内容や提供形式が今後変わる可能性があります
- エージェントから自動で検索・取得できる MCP 連携は Refero 本体の有料プランが前提で、無料で使えるのは主に手動での閲覧です
- DESIGN.md は既存サイトの見た目を解析したものなので、そのまま使うと他社サイトとよく似た印象になります。自社らしさを出すには調整が必要です
類似サービスとの比較
| サービス名 | Refero Styles との違い |
|---|---|
| designmd.app | 同じく DESIGN.md を集めたライブラリで、オープンソースとして公開されています |
| getdesign.md | 同種の DESIGN.md 収集サイト。Refero Styles は画面アーカイブを持つ Refero 本体と同じ運営で、MCP を共有している点が異なります |
| awesome-design-md（GitHub） | GitHub 上で公開されている無料のコレクション。リポジトリとして扱いたい人に向いています |
| Mobbin | 実プロダクトの UI スクリーンショット検索が中心で、DESIGN.md 形式での配布は行っていません |
こんな人におすすめ
- Cursor や Claude Code で UI を作るとき、デザインの方向性を AI にうまく伝えられずに困っている開発者
- 個人開発やプロトタイプで、デザイナー不在のまま見た目の水準を一定以上にしたい人
- 配色やタイポグラフィの候補を複数の実例から比べて、方向性を早めに固めたいデザイナー
- すでに Refero を使っていて、画面の参考集に加えてデザインルールも AI に渡したい人
まとめ
AI に UI を作らせると、機能は動いても見た目がありきたりになりがちです。Refero Styles はそこに「お手本となるデザインルール」を足す道具で、まずは無料のギャラリーから好みのサイトの DESIGN.md を探し、自分のプロジェクトに置いて試してみるのが手軽な始め方です。エージェントからの自動取得まで求める場合は、Refero 本体の有料プランと MCP の設定が必要になる点を踏まえて検討してください。