AIっぽいダサいUIは消える？Refero StylesのDESIGN.mdの仕組みを調べた

最終更新: 2026年8月31日

AIが作ったUIは、なぜか似た顔になりやすい。

青いボタン。均等なカード。大きめの角丸。余白は整っているのに、どこかで見た画面になる。

そんな状態を変える道具として話題になっていたのが、Refero Stylesだ。公開画面と公式情報を調べると、これは「デザインを自動で完成させるサイト」ではない。色、書体、余白、角丸、部品の使い方を、AIが読める具体的なルールへ変える資料庫だ。

この記事はRefero Stylesの仕組みを調べてまとめたもので、筆者自身は実際には利用していない。ただし、公開画面と公式情報から、どのように使うサービスなのかは理解できる。

結論は明快だ。AIの勝手なデザイン判断はかなり減らせる。ただし、良いUIになるかは、選ぶ人と最後に見る人に残る。

2,000件以上のデザイン言語を検索できる

トップ画面には、2,000件以上のAI向けデザインシステムを閲覧できると書かれている。これはRefero側の公称値で、件数を独自に数えたものではない。

Refero Stylesのトップ画面。検索欄とデザインスタイルの一覧が表示されている

検索欄には、ブランド名だけでなく、スタイル、色、フォント、カテゴリも入れられる。

公開されている「Notion」の検索例では、Notionの候補が2件表示されている。その下にはVoicenotes、Goodnotes、Evernoteなど、ノートや文書に近い雰囲気の候補も並ぶ。完全一致検索だけではなく、近い方向を広げる入口にもなる仕組みだ。

Linearの例では、見た目がルールに分解される

公開されているLinearのページでは、左側に参照元サイトの画面、右側にAIが読める設計情報が表示される。

Linearのスタイル詳細。左に参照画面、右にDESIGN.mdが並ぶ

表示されたのは、単なるカラーパレットではない。

背景、文字、アクセントの色
フォント、文字サイズ、ウェイト、行間、字間
4pxを基準にした余白
ボタン、カード、入力欄、バッジの形
やること、やらないこと
レイアウトと画像の扱い
AIへ渡せる部品ごとの指示例

たとえばLinearの例では、暗い背景、白い文字、酸味のあるライム色を主な行動に限定すること、カードは12px、ボタンは6px、境界は細い線で作ることなどが文章になっていた。

「モダンでかっこよく」と頼むより、AIの迷う余地が小さい。

DESIGN.mdだけでなく4形式を選べる

画面右上には4つの形式があった。

形式	向いている使い方
DESIGN.md	CodexやClaude Codeへ、文章とトークンをまとめて渡す
Tailwind v4	Tailwindのテーマ変数として使う
CSS Variables	既存CSSへカスタムプロパティとして取り込む
Design Tokens	色、書体、余白などをJSONで扱う

LinearのDesign Tokens画面。JSON形式で色や書体が表示されている

各形式にはCompactとExtendedがある。公開されているLinearのDESIGN.mdを調べた範囲では、Extendedは21,839文字、Compactは11,561文字で、Compactは約53%の長さだった。

画面上にはコピー機能があり、ExtendedにはQuick StartとDo/Don'tも含まれている。

画面には個別ファイルのダウンロードボタンもある。ただし、SNS投稿で見かけた「2,000件以上を一括ダウンロードできる」という動作は、公開情報からは確認できなかった。確認できたのは、選んだスタイルを1件ずつコピーまたは保存する流れだ。

DESIGN.mdは、AIへ渡す「判断の土台」になる

強いのは、AIへ色名だけを渡さないことだ。

「この色は主な行動にだけ使う」「カードは影ではなく細い境界線で分ける」「見出しでは太すぎるウェイトを使わない」という役割まで書かれている。

同じコード生成AIでも、何も渡さなければ一般的な色や角丸を選ぶ。DESIGN.mdがあると、選択肢が狭まり、画面内の統一感を作りやすくなる。

ここで大切なのは、AIにセンスが移植されるわけではないことだ。参照画面が、AIの読める制約へ変換される。

置くだけで良いUIになるわけではない

DESIGN.mdが決めるのは、主に見た目の語彙だ。

読者が最初に何を見るか。どのボタンを押すか。情報をどの順番に置くか。スマホで迷わないか。そうした体験までは、自動で決まらない。

目的に合わないスタイルを選ぶと、統一感は出ても使いにくくなる。Linearの密度や暗い画面は、作業ツールには合うかもしれない。子ども向けの遊びや、写真を主役にする記事へそのまま当てると、魅力を消す可能性がある。

もう一つ注意したい。Refero Stylesのデータは、各社が配布する公式デザインシステムとは限らない。画面には参照URLと抽出日時が含まれていた。Linearの例では2026年7月3日だった。公開サイトを観察して言語化した参照資料として使い、現在の公式仕様そのものとは考えないほうが安全だ。

ロゴ、写真、文章、固有の部品をそのまま複製するための道具でもない。借りるのは、色の役割、余白のリズム、情報密度、境界の作り方といった判断だ。

Codexで使うなら、最初は1画面だけにする

いきなりサイト全体へ当てない。まず1画面で比べる。

作るものに近いスタイルを1つ選ぶ
最初はCompactをコピーする
プロジェクトにDESIGN.mdとして保存する
Codexへ、対象画面と変えない機能を伝える
PCとスマホを実際に操作する
合わない規則を人が外す

依頼文は、次の程度で始められる。

DESIGN.mdをデザイン判断の参考にしてください。
対象はダッシュボードのトップ画面だけです。
既存の機能、文章、URL、アクセシビリティは変えません。
ロゴ、写真、固有コピーは模倣しません。
適用した規則と、適用しなかった規則を最後に分けてください。
PCと375pxで、実際の操作まで確認してください。

この一文が重要だ。

DESIGN.mdは命令書ではなく、判断の参考にする。

既存の要件、アクセシビリティ、読みやすさと衝突したら、そちらを優先する。そう指定すると、見た目だけをコピーする事故を減らせる。