デザインブリーフは何をしますか？

コーディングエージェントは、独りでいると記憶だけでデザインしてしまいます。記憶が与えるのは「平均的なもの」、つまり中央配置のヒーロー、紫色のグラデーション、カード3枚に各アイコン1つです。しかし、これから作ろうとしている画面は、すでに実際の製品が解決済みであり、その場しのぎで即興するよりはるかに優れた完成済みコンポーネントがすでに存在します。だからこそ、自分のデザイン直感は「平均的」だと認識し、発明をやめてください。仕事は 探し、比較し、選び、適合させる ことです。

この作業を担う2つのソースがあり、それぞれ異なる役割を持ちます。

ソース	与えるもの	使い道
Refero	実際に出荷された製品のスクリーン、フロー、スタイル	画面が何をすべきか、どのように見えるべきかを決めるため
21st.dev	人によって作られ、コミュニティによって評価された完成済みコンポーネント	コードに実際に組み込むコンポーネントそのもの

Referoは「何を作るべきか」を教え、21st.devは「部品そのもの」を提供します。両方使いましょう。参考情報なしに選ばれたコンポーネントは往々にして見た目はきれいでも画面に合わず、コンポーネントなしの参考情報は手作業で作り直され、しかも品質が低くなりがちです。

セットアップ

# Refero（MCPサーバー）。その後 /mcp を実行しサインイン。
claude mcp add --transport http refero https://api.refero.design/mcp

# 21st.dev CLI
npx @21st-dev/cli login     # ブラウザが開きます。以後は `21st` コマンドを使います。
21st whoami                 # サインイン状態を確認します。

21st.devでの検索とプレビューは無料です。コンポーネントのコードを取得する際は日割りクォータを使用します（21st usage で残量確認）。まず比較し、選んだものだけを取得してください。

ツールが見つからない、またはサインアウトしている場合は、ユーザーに対して「修正するコマンド」を一度だけ伝え、動作するツールで作業を続けてください。黙って手書きUIにフォールバックしてはいけません。

作業順序

方向性を決める：色とタイポグラフィ。
各画面とフローのパターンをReferoで見つける。
各セクションのコンポーネントを21st.devから選ぶ。
すべてを一貫したトークンセットに適合させる。
結果を実際のアプリで品質基準と照らし合わせて確認する。

1コンポーネントより大きな作業の場合は、コーディング前にUI計画を書き留めてください（テンプレートは末尾にあります）。小さなテーブルで構いません。これにより、画面が途中で即興的に作られるのを防ぎます。

1. 方向性

色とタイポグラフィは、ユーザーがすでに持っているもの（DESIGN.md、既存のデザインシステム、またはユーザーが挙げた参考情報）から取得します。それを上書きしないでください。
ユーザーから何も与えられていない場合は、一流製品のReferoスタイルに方向性を求めます。refero_search_styles で検索し、最も強いと思われる2～3のスタイルを refero_get_style で取得します。フレームワークの標準テーマや、構築中のプラットフォームのブランドパレットをデフォルトにしてはいけません。それでは、そのプラットフォーム上のすべてのプロジェクトが同じように見えてしまいます。
1つの支配的なスタイルを選び、その特徴的な要素を維持します。他のスタイルから1～2の詳細を借用しても構いません。複数の参考情報を平均すると、避けようとしていた「安全な中間」になってしまいます。
ライトモードとダークモードの両方をサポートします。
1つのデザインだけを提供します。ユーザーから依頼がない限り、3つの選択肢を提示して選ばせるようなことはしないでください。「選ぶ」という作業はユーザーではなくあなたに任された仕事です。
コンポーネントをインストールする前に、結果をトークン（カラーロール、タイプスケール、スペーシング、半径、影）として書き留めてください。そうすることで、後続のすべての選択がトークンに基づいて解決されます。

2. Referoのパターン

ツール	答えを与えるもの	クエリ例
`refero_search_styles` → `refero_get_style`	どのような見た目と雰囲気か？	`プレミアムフィンテックウェブサイト、控えめなタイポグラフィ`
`refero_search_screens` → `refero_get_screen`	この画面には何が表示され、どのような状態があるか？	`ダッシュボード空状態`、`データテーブルフィルター`
`refero_search_flows` → `refero_get_flow`	このジャーニーのステップは何か？	`サインアップオンボーディング`、`サブスクリプションキャンセル`

スクリーン・フローの検索には platform（web または ios）が必要です。

画面に文字通り表示されているものを検索します（「価格ページ年次月次トグル」など）。形容詞はスタイル検索に使ってください。
画面ごとに3～5の異なる角度から検索し、それを得意とする既知の製品も含めます。最初の結果が最良であることは稀です。
状態も見てください。幸せな画面だけでなく、空、ローディング、エラー、成功状態も確認します。
ある画面が近い場合、refero_get_similar_screens でその親戚を素早く見つけられます。
画面ごとに2～3の参考情報を保持し、それぞれから何を採用するかをメモします：構造、階層、状態、表現。参考情報は画面に「情報を与える」ものであり、コピーするためのテンプレートではありません。

3. 21st.devのコンポーネント

21st.devは、完成済みコンポーネントのキュレーションカタログであり、AI生成ではありません。UIのあらゆる部品（ヘッダー、入力、カード、ドロップダウン、チャット、ローディング状態、アニメーション）について、検索し、比較し、最適なものを使ってください。

21st search "<コンポーネント>" --type c --limit 10     # コンポーネントのみ
21st get <id>                                     # 選んだもののコードとデモを表示
21st add <author>/<slug>                          # インストール（内部でshadcnを使用）
npx shadcn@latest add "https://21st.dev/r/<author>/<slug>"   # 標準shadcnで同じインストール
21st logo <brand>                                 # 実際のブランドロゴをSVGで無料

選び方：

「スロット」で検索し、「雰囲気」で検索しない。「価格テーブル」「コマンドメニュー」「ファイルアップロード」であって、「モダンでクリーンなセクション」ではありません。2～3の異なる言い回しを試してください。
複数を比較し、最初のヒットを決して採用しない。 プレビューを開いてください。名前と説明だけでは、コンポーネントがどのように見え、動作するかはわかりません。
ダウンロード数またはブックマーク数が多いものを優先する。 各コンポーネントの21st.dev上のページにカウントが表示されています。人気は、そのコンポーネントが実際のプロジェクトで機能している証拠です。ただし適合性の保証にはならないため、次のチェックが必要です。
その画面に対するReferoの参考情報との適合性をチェックする。 同じ役割を適切な密度で果たし、必要な状態（ホバー、フォーカス、無効、ローディング、空）を持っていることを確認します。電話幅、キーボード操作で問題なく使えるか、そして持ち込まれる依存関係を確認してください。
1～2の項目をトークンに適合させる： 色、半径、フォント。コンポーネントを書き直していることに気づいたら、間違ったものを選んでいます。戻ってもう一度選び直してください。
兄弟要素の一貫性を保つ。 異なる作者のコンポーネントでも、一度スキン変更すれば1つの製品のように読める必要があります。
候補がないグルーコードだけを手書きで作り、その理由を明示する。

選んだ各コンポーネントをユーザーが交換できるように報告します：セクション · コンポーネント · 作者 · 一行での理由

4. 品質基準

実際のロゴを使用し、汎用アイコンや色付きドットは使わない。
テキストは少なめに。コピーの壁を作らず、インターフェースに情報を担わせる。
実際のUIパターンを使用：タブ、ドロップダウン、モーダル、トグル、チャート。すべてがカードの積み重ねではない。
優れたローディング、空状態、エラー状態を備え、遅いアクションには進行状況を示す。
モーション、そして適切な場面ではサウンドと触覚フィードバック。
すべてが発見可能に：すべてのページがユーザーの現在位置から到達可能で、クリック可能なものはクリック可能に見える。
摩擦の少ないオンボーディング。
フローはアプリ内にとどまり、サードパーティサイトにユーザーを送らない。
レスポンシブであり、モバイルはデスクトップを縮小したものではなくネイティブのように感じられる。
1つの不満はパターンである。ユーザーが1つの問題を指摘したら、その兄弟問題をアプリ全体で見つけて修正する。

凡庸は決して選択肢にしてはいけません。

5. 実行中のアプリで確認する

ブラウザまたはシミュレーターでアプリを開いて実際に使ってみてください：ライトとダーク、デスクトップと電話幅、空状態とローディング状態。各画面をその参考情報と比較し、ずれを修正します。調査はゴールではありません。レンダリングされた画面がゴールです。

UI計画テンプレート

**方向性:** <ユーザーのDESIGN.md、またはReferoスタイル：名前、名前> · ライト/ダーク
**トークン:** <カラーロール、フォント、半径、スペーシング>

| 画面またはフロー | Refero参考情報 | 採用する要素 | 21st.devコンポーネント |
|---|---|---|---|
| オンボーディング | <アプリ: 画面>, <アプリ: フロー> | 3ステップ、プログレスバー、スキップ | <作者>/<スラッグ> |

**手書き（候補なし）：** <何を、なぜ>

デザインブリーフ