styleseed-design-review

StyleSeed Design Review

概要

UI が「AI 生成らしく」見えるのは、コンポーネントが醜いからではなく、各パーツに一貫性がないからです。角丸の混在、アクセントカラーが 3 色、純粋な黒のテキスト、階層がない、状態の欠落、ロボットのような文言などが原因です。このスキルは、UI ファイル（またはディレクトリ全体）を具体的なデザイン基準に照らしてレビューし、0〜100 点で採点して、優先度順の修正リストを返します。レビューと提案を行いますが、依頼がない限り、編集も削除もしません。

ルール一式（74 項目）とコンポーネント：https://github.com/bitjaru/styleseed

使用するタイミング

• React／Tailwind／HTML の UI が「しっくりこない」、ありきたり、または未完成に見えるのに、理由がわからないとき。
• デザインスコアの確認や、リリース前のチェックをしたいとき。
• ユーザーが UI を「プロフェッショナルに／洗練された／きちんとデザインされた、AI 生成ではない」見た目にしたいと求めたとき。
• UI の生成後、リリース前に確認したいとき。

レビュー方法

ファイルを読みます。次の7 つのカテゴリを採点します（合計 100 点）。各カテゴリを満点から始め、行番号を挙げて指摘できる違反ごとに減点します。具体的かつ根拠に基づいて採点してください。

1. 一貫性 — 20（「AI 生成らしさ」を最もよく示す特徴）

各軸で選択肢を 1 つに絞り、全体に適用します。次の軸が混在するごとに減点します。

• 角丸の混在 — 例：角が鋭いカードとピル型ボタンの組み合わせ（−6）
• 強調に 2 色以上のアクセントカラーを使用（−5）
• UI アイコンとして絵文字を使用（🚗🧺⭐をリスト／ナビゲーション／ステータス／カテゴリのマーカーに使用）— 制御できない多くの色相が入り込むため、currentColor を使う単色のラインアイコンセットを使用します（−6）
• 影の表現や光の方向が混在（−3）
• アイコンの種類、塗りつぶし方式、または線の太さが混在（−3）
• コントロールの高さが不統一（ボタン／入力欄の高さが異なる）（−3）

2. 色の規律 — 16

• テキストに純粋な黒（#000／text-black）を使用 — 洗練された黒はおよそ #2A2A2A です（1 か所につき −4、最大 −8）
• セマンティックトークンがあるのにハードコードした 16 進カラーを使用（1 か所につき −2、最大 −6）
• 通常／OK／デフォルト（「보통」）状態を、中立的なグレーではなくステータスカラーで表示（−4）
• 大半／すべての行にステータスカラーを使用（深刻度の階層がない — 色は注意が必要な少数の項目に使います）（−4）
• アクセント／グレーではなく、装飾的な色相（金色の星、虹色のカテゴリドット、カードごとに異なる色）を使用（−3）
• アイコン／テキストを伴わず、色だけでステータスを伝える（−4）
• コントラストが WCAG AA を下回る（本文 4.5:1、大きな文字／UI 3:1）（−6）

3. 階層とタイポグラフィ — 16

• 数字と単位の比率がおよそ 2:1 ではない（数字 48px／単位 24px）（−4）
• すべてが同じサイズと太さで、明確な優先順位がない（−5）
• フォントサイズが任意に設定され、スケールがない（−4）
• 行の高さが不適切（ディスプレイ文字では広すぎる、本文では詰まりすぎる）（−3）

4. レイアウトと間隔 — 12

• コンテンツがカードに収まらず、むき出しのページ背景に配置されている（−6）
• グリッドに沿わない間隔（8px スケールではなく 7／13／19px）（−3）
• グループの外側の余白が、内側の余白より大きくない（−3）
• 同じ種類のセクションが連続して繰り返されている（−4）

5. 状態 — 12

• データ表示領域に空／読み込み中／エラー状態がない（1 つにつき −5、最大 −10）
• 空状態に次のアクションがない、またはエラーがユーザーを責めるだけで解決に役立たない（−4）

6. UX ライティング — 12

• アクションを明示しないボタン（「$2,400 を送信」ではなく「送信」／「OK」）（−4）
• ユーザーを責める、またはシステム用語を使ったエラー文言（「入力が無効です」「エラーが発生しました」）（−4）
• 1 つの概念に対して用語が 2 種類ある（削除と取り除くなど）、または「お願いします」「正常に」などの埋め草の言葉を使う（−2）

7. モーションと仕上げ — 12

• 一貫した、名前の付いた表現ではなく、その場しのぎのフェードを使用（−3）
• コンテンツの表示を遅らせる、または操作を妨げるモーション（−4）
• カスタムモーションに prefers-reduced-motion の処理がない（−3）
• 低い不透明度で色味を付けた多層の影ではなく、単一の濃い黒い影を使用（−2）

各カテゴリの点数は 0 点を下限とし、合計します。評価区分：90 点以上 A · 80〜89 点 B · 70〜79 点 C · 60〜69 点 D · 60 点未満 F。

出力形式

## Design Score: 72 / 100   (src/Dashboard.tsx)   C

Coherence            13/20   sharp cards (l.22) + pill buttons (l.48); 3 accent hues
Color discipline     12/16   #000 headings (l.12, 40)
Hierarchy & type     15/16   number/unit 1:1 on hero (l.18)
Layout & spacing     10/12   two identical KPI rows (l.22-31)
States                7/12   no empty/loading state on the orders list
UX writing            8/12   "Submit" button (l.55); "Invalid input" (l.61)
Motion & polish      10/12   one hard black shadow (l.22)

### Fix first (highest score gain)
1. Unify radius (pick soft 8–12px) + collapse to one accent   → +11 coherence/color
2. Add empty + loading states to the orders list              → +7  states
3. Rename "Submit" → "Send $2,400"; "Invalid input" → "Check the card number" → +6 copy

Re-score after: ~90 / 100.

ルール

• 実際の根拠を確認してください（行番号を引用）。推測はしないでください。
• 修正項目は重要度だけでなく、スコアの伸びが大きい順に並べてください。より高いスコアに最短で到達するためです。
• ディレクトリの場合は、各ファイルのスコアを1行で示してから、スコアが最も低いファイルの詳細な内訳を示してください。
• 自動編集はしないでください。 このスキルは測定と提案を行います。依頼された場合にのみ修正を適用してください。
• 品質ゲートとして使用してください。UI を生成したらすぐにレビューし、修正項目を適用して、ユーザーに見せる前にスコアが約80を超えるまで再レビューしてください。初稿のまとまりのない UI（虹色のステータスリスト、絵文字アイコン、アクセントカラーが2色、状態表示の欠落など）をユーザーに見せてはいけません。この基準は最低ラインです。80を超えたら完成として出荷し、100を追い求めて公開を遅らせないでください。

---

StyleSeed をベースにしています。これは、Claude Code、Cursor、Codex にデザインの判断力を与え、AI が作る UI がいかにも自動生成された見た目になるのを防ぐオープンソース（MIT）のデザインエンジンです。全74ルールのリファレンス、コンポーネント、ブランドスキン、モーションについては、こちらをご覧ください：https://github.com/bitjaru/styleseed