Refero（実在プロダクト画面のライブラリ）をエージェントに検索させ、参考3件と原則を説明させてから直させる

「かっこよくして」ではなく、実在の画面を根拠に方向性を提案させ、OKを出すまで変更させない。

どんな問題を解決するか / いつ使うか

エージェントにページを改善させると、どこかで見た典型的な見た目に寄りがち。Refero は実在プロダクトの画面（投稿時点で14.5万枚以上）、2,000以上のデザインシステムの色・文字・余白の分解、1.2万以上のユーザーフロー（登録・購入の通し）、1,000以上のマーケティングサイトを収録し、似た画面を探す機能もある。これを Claude Code / Codex から検索できるプラグインとして入れると、「本物の参考」を持ってから直させられる。

手順

プラグインを入れる
- Claude Code：/plugin marketplace add referodesign/refero_skill → /plugin install refero@refero
- Codex：codex plugin marketplace add referodesign/refero_skill → codex plugin add refero@refero
次のような依頼を送る（要旨）
- プロジェクトを読み、いちばん手を入れるべき1ページを選ぶ
- Refero で合いそうな実在プロダクトのスタイルを1つ選び、似たページを3件参考に探す
- このプロジェクトに関係するデザイン原則と、それを真似ではなくオリジナルの方向性にどう落とすかを説明する
- OKを出すまで何も変更しない
提案を読んで方向性を決めてから実装させる。

注意点

MCPでのライブ検索は有料プラン（投稿時点で Pro は年払いで月£10から）。
「参考3件→原則の説明→承認→実装」の順番自体は、Refero以外の参照集でも使える。
参考画面をそのまま写させない。原則を抜き出させて自分のプロダクトに合わせる。

出典

@Voxyz_ai · 2026-11-10 （手順はスレッドの返信 @Voxyz_ai · 2026-11-10 、@Voxyz_ai · 2026-11-10 ）