【2026年】Refero Stylesとは？「DESIGN.md」でAIエージェントのデザインセンスを一瞬で上げる無料サービスを徹底解説｜Cursor・Claude Code対応

---

まず結論：Refero Stylesは「AIのデザインセンス不足」を解決する無料のデザイン仕様ライブラリ

AIが作るUIが「なんかAIっぽい」——この問題に心当たりはありませんか？

2026年、Claude CodeやCursorで画面を作らせると、コードは完璧なのにデザインが微妙、という経験は開発者の共通認識になっています。原因は明確で、AIモデルはコードとテキストで訓練されており、実際の製品デザインをほとんど学習していないからです。

Refero Styles（https://styles.refero.design/）は、この問題を一発で解決します。

• 2,000以上の実在製品（Linear・Notion・ElevenLabs・Apple・Dubなど）のデザインシステムを収録
• 各スタイルはDESIGN.md（AIが読めるデザイン仕様書）として抽出済み
• 無料・会員登録不要で、カラー・タイポグラフィ・余白・コンポーネント・Do/Don'tをコピーできる
• Cursor・Claude Code・Codex・v0・Lovableに貼るだけで、AIの出力が「実プロダクト品質」になる

つまり、「AIにデザインセンスを教える」ための、世界最大級の無料ライブラリです。

Refero Stylesとは？基本情報

サービス概要

なぜ2026年に注目されているのか

1. DESIGN.mdがGoogleによってOSS化（2025年後半〜2026年に標準化）
   • 従来、AIエージェントにデザインを伝える手段は曖昧なプロンプトだけだった
   • DESIGN.mdは「AIが読むためのデザイン仕様書」という新しい標準ファイルとして普及
2. AIコーディングエージェントの普及
   • Cursor・Claude Codeなどで「UIを作らせる」のが当たり前になった
   • 同時に「生成された感」のあるデザインが大きな課題に
3. 実在製品のデザインシステムがそのまま手に入る
   • LinearのダークUI・Notionの紙のような質感・ElevenLabsの温かい編集デザイン
   • これらを一瞬で自分のプロジェクトに適用できる

DESIGN.mdとは？（GoogleがOSS化したデザイン仕様）

DESIGN.mdは、AIエージェントがデザインの決定を下すためのマークダウン形式の仕様書です。

従来の「デザイントークン」や「スタイルガイド」との違いは、人間ではなくAIが読むことを前提にしている点です。

典型的なDESIGN.mdの構造：

• デザイン原則：この製品のデザイン哲学（例：Linearなら「ミッドナイトの精密機器」）
• カラーパレット：Brand・Accent・Neutralsの実コード
• タイポグラフィ：フォント・スケール（例：Minor Third 1.2 from 16px base）
• スペーシング＆シェイプ：余白・ボーダー半径・シャドウ
• Do / Don't：このデザインでやってよいこと・ダメなこと

Refero Stylesの各スタイルページは、このDESIGN.md形式で情報が整理されており、そのままコピーしてAIエージェントに渡せます。

Refero Stylesの使い方（実際の手順）

ステップ1：スタイルを探す

styles.refero.designを開きます。

• トップページにはトレンド・人気・新着のスタイルが並ぶ
• 検索ボックスでブランド名を検索（例：「Linear」「Notion」）
• カテゴリ（Minimal Design・Clean SaaS・Soft Gradients・High Contrastなど）で絞り込み

ステップ2：DESIGN.mdをコピーする

スタイルを開くと、以下の情報が表示されます：

• デザインコンセプト（1行の説明文）
• カラーパレット（Brand・Accent・Neutrals）
• タイポグラフィ（Type Scale・Fonts）
• スペーシング＆シェイプ（Spacing・Border Radius・Shadows）
• ガイドライン（Do / Don't）

これをそのままコピーします。ファイルとしてダウンロードする機能もあり、プロジェクトのルートにDESIGN.mdとして置くだけで、Claude CodeやCursorが常に参照できるようになります。

ステップ3：AIエージェントに貼る

コピーしたDESIGN.mdを、以下のいずれかの方法でAIに渡します。

方法A：プロンプトに直接貼る（簡単）

このDESIGN.mdに従って、SaaSのダッシュボード画面を作成してください。

[DESIGN.mdの内容をここに貼る]

方法B：プロジェクトにDESIGN.mdファイルとして置く（推奨）

プロジェクトルートにDESIGN.mdを置く
→ Claude Code / Cursor が自動で読み込む
→ 複数タスクでも一貫したデザインが維持される

ステップ4：高品質UIを生成する

DESIGN.mdを渡した上で、具体的なタスクを指示します。

LinearのDESIGN.mdを参照して、タスク管理アプリの
ダッシュボードを作成してください。
- ダークテーマ（#08090a基調）
- アクセントは#e4f222のみ使用
- カードは12px・ボタンは6pxの半径
- シャドウではなく0.5pxのヘアライン境界線で区切る

これで、「AI生成感」のない、実プロダクト品質のUIが出力されます。

対応AIエージェント別の活用例

Cursorでの使い方

Cursorはコードベースを読めるので、既存のUIを指してDESIGN.mdを補足するのが効果的です。

[Cursorで]
1. 新画面を作る前に、既存のコンポーネントファイルを指定
2. プロンプトにDESIGN.mdを貼る
3. 「このリファレンスを守りつつ、ローカルのデザインシステムに合わせて」
4. 実装後は「DESIGN.mdのルールと比較してチェックして」と指示

Claude Codeでの使い方

Claude CodeはDESIGN.mdをプロジェクトルートに置くと、複数ファイルを横断する変更でもデザインを一貫させられます。

[Claude Codeで]
1. プロジェクトルートにDESIGN.mdを配置
2. 「DESIGN.mdに従って、設定画面を新規作成して」
3. 実装後「タイポグラフィ・余白・コントラスト・モバイル対応をDESIGN.mdと照合して」と検証させる

v0・Lovableでの使い方

v0やLovableはプロンプトベースなので、DESIGN.mdをプロンプトに含めるだけで効果が出ます。

[Dashboardを作って]
Linearのデザインシステムに従って:
- ダーク基調 #08090a
- タイトルはInter Variable 590 weight以下
- カード半径12px・ボタン半径6px
- ヘアライン境界線で区切る（シャドウ禁止）

実際に使ってみた感想

良い点

• 本当に「AI生成感」が消える。LinearのDESIGN.mdを貼って生成したUIは、ダークテーマの濃淡・細い境界線・アクセントの使い方が明らかに違う
• 無料で2,000以上。Linear・Notion・ElevenLabs・Appleなど、自分が真似したいブランドが必ず見つかる
• カテゴリ検索が優秀。「Clean SaaS」「Minimal Design」など、目指す方向から探せる
• DESIGN.mdの質が高い。単なるカラーコードだけでなく「Do/Don't」まで含まれており、AIが判断に迷わない

改善してほしい点

• 検索がブランド名ベース。色や雰囲気からの検索はカテゴリのみで、もう少し細かいフィルタ（色相・フォントなど）があると嬉しい
• 英語UIのみ。日本語対応がないため、初心者は最初とまどうかも
• 各スタイルの詳細は英語。DESIGN.md自体は英語で書かれている（日本語のデザイン仕様が必要な場合は自分で翻訳する必要あり）

注意点

• ライセンス確認：実在製品のデザインシステムを参考にすることはできますが、完全にコピーして商用製品を作る場合は、そのブランドの商標・著作権に注意が必要です。参考にする・アレンジする範囲なら問題ありません。
• DESIGN.mdは「参考」：ローカルのデザインシステムを無視してDESIGN.mdを優先させると、既存UIと不整合が出る場合があります。既存システムを守りつつ、DESIGN.mdを方向性の参考にするのが正しい使い方です。

Referoの関連サービス（Styles以外）

ReferoはStyles以外にも、AIデザインのエコシステムを展開しています。

Refero MCPとは

Refero MCPは、AIエージェントに「実際の製品デザイン」を検索・学習させられるMCPサーバーです。

Claude Codeでの導入例:
claude mcp add --transport http refero https://api.refero.design/mcp --header "Authorization: Bearer <token>"

• 142,000+スクリーン・12,000+フローにアクセス
• オンボーディング・ペイウォール・空状態・エラー画面など、実在製品のパターンを検索
• Proプラン（有料）が必要

Refero Skillとは

npx skills add https://github.com/referodesign/refero_skill でインストールできるデザインメソッド。コードを書く前に、まずリファレンスを調査し、タイポ・カラー・余白・モーションのクラフトルールに従って設計する、という手法をAIに教えます。

読者が知りたいこと

Q1. Refero Stylesは無料ですか？

はい、完全無料です。会員登録も不要で、ブラウザからすぐ使えます。

Q2. DESIGN.mdはどこに置けばいいですか？

プロジェクトのルートディレクトリにDESIGN.mdとして置くのがおすすめです。Claude CodeやCursorが自動で読み込みます。一時的に使う場合はプロンプトに直接貼っても効果があります。

Q3. 日本語のデザインにも対応していますか？

Refero Styles自体のUIは英語のみですが、DESIGN.mdの内容を翻訳して使うことは可能です。日本のデザイン（和モダン・シンプル系）に近いスタイルも検索できます。

Q4. 商用利用できますか？

参考にする・アレンジする範囲なら問題ありません。ただし、特定ブランドのデザインを完全に模倣して商用製品を作る場合は、商標・著作権に注意してください。

Q5. Cursor・Claude Code以外でも使えますか？

はい。Codex・v0・Lovable・Antigravity・Manusなど、DESIGN.mdを読めるAIエージェントならすべて対応します。

Q6. Refero MCPとの違いは？

Refero Stylesは人間がブラウザで見てDESIGN.mdをコピーするサービス。Refero MCPはAIエージェントが直接APIでデザインをリサーチするサービス（Pro有料）です。

Q7. AI生成感を消すコツは？

1. DESIGN.mdを貼る（最低限の色・タイポ指定だけでも効果あり）
2. Do/Don'tを必ず守らせる（「シャドウ禁止」「太字禁止」など）
3. 1画面ずつ作る（全体を一気に作らせると崩れる）
4. 実装後に照合させる（DESIGN.mdと比較してチェックさせる）

まとめ：Refero Stylesで「AI生成感」を卒業しよう

Refero Stylesは、2026年現在もっとも手軽にAIのデザインセンスを底上げできる無料サービスです。

• 無料で2,000以上の実在製品デザインをDESIGN.md形式で取得
• Cursor・Claude Code・Codex・v0・Lovableに貼るだけで高品質UI
• DESIGN.mdはGoogleがOSS化した標準形式で、今後さらに普及する

AIコーディングが当たり前になった今、「コードが書ける」と「デザインができる」の差は、DESIGN.mdを使うかどうかで決まります。

まずはLinearのスタイルを開いて、自分のプロジェクトのルートにDESIGN.mdを置いてみてください。5分で「生成された感」が消えます。

あわせて使いたい関連サービス

Refero Stylesでデザインを固めたら、実際にAIエージェントを回す環境も揃えると開発が捗ります。

生成したUIを回すマシン（Mac mini M6）

DESIGN.mdを渡してUIを生成する作業は、手元のマシンでエージェントを回すほうが速く・安く済みます。Apple SiliconのMac miniなら、ローカルLLMとAIコーディングエージェントの両方を1台でまかなえます。

開発環境用VPS

AIエージェントを常駐させて開発するなら、手頃なVPSがあると便利です。ローカルPCを圧迫せずに、エージェントを24時間稼働させられます。

---

関連記事

• 【2026年】component.galleryを使ってAIのUI生成指示を劇的に上手くする方法！コンポーネント用語図鑑の活用法
• 【2026年】DESIGN.mdを入手するならココ！AIエージェント向けデザイン仕様ファイルが手に入る厳選10サイト
• 【2026年】Claude Fable 5で金融資産を守る！AIエージェントによる資産管理・監視・最適化の実践ガイド