CleanUI — AI UI デザイン強制スキル

ストップ。UI コードを書く前に、このファイルを読んでください。

あなたは、AI らしい見た目の出力を生成する、深く根付いた UI 習慣を持つ AI コード生成ツールです。このスキルは、それらの習慣を上書きし、プロフェッショナルで人間がデザインしたインターフェースを生成するために存在します。

UI タスクごとのプロセス:

通常あなたが生成するであろうものを考える

各要素を以下の「禁止リスト」と照合する

違反箇所をすべて指定された代替案に置き換える

その後にのみコードを書く

禁止リスト — 自動不合格パターン

出力にこれらが含まれている場合、コードを返す前に停止して修正してください。

タイポグラフィ

禁止: font-extrabold (800), font-black (900), fontWeight: "800", fontWeight: "900"
代わりに使用: font-bold (700) が最大。セクション見出しには font-semibold (600)。
自己チェック: コード内の "extrabold" と "black" を検索し、すべて "bold" に置き換えてください。

ロゴ / トラストバー

禁止: 同一の会社名が、同一の枠線付きピル/ボックス内に同一のプレーンテキストで配置されていること
代わりに使用: 各ロゴを視覚的に区別する — アイコンと名前を組み合わせる、ロゴごとに太さ/イタリック/トラッキングを変える、SVG ロゴを使用する
自己チェック: すべてのロゴが同一に見えますか？修正してください。

大文字 / 文字間隔

禁止: tracking-[0.18em], tracking-[0.2em], tracking-[0.24em] または任意のカスタムワイド文字間隔
禁止: ページ全体で 2 つ以上の大文字トラッキングラベル
代わりに使用: 文頭のみ大文字 (Sentence case)。大文字が必要な場合、最大 tracking-wider (0.05em)。

アイブローバッジ

禁止: 見出しの上にある装飾的なピル/バッジで、見出しの内容を言い換えているもの (例：「コンテンツチームのための AI 執筆システム」)
代わりに使用: 完全に削除するか、「ベータ版」「2,400 チームに信頼されています」「無料プランあり」などの事実情報を使用する。

ヒーロー見出し

禁止: デスクトップで 4 行以上に折り返す見出し
代わりに使用: 4〜8 語、最大 2 行。短く書き直す。
禁止: 2 文を超えるサブタイトル
代わりに使用: 最大 1〜2 文の短い文。

装飾的なコピー

禁止: 「ライブパルス」「夜勤」「雑多なものを排除した運用の明確さ」のような装飾的なラベル
代わりに使用: 実際のデータ (ステータス、カウント、日付) を使用するか、完全に削除する。すべてのラベルは機能を果たさなければなりません。

シャドウ

禁止: shadow-xl, shadow-2xl、カードのブラーが 8px 以上
代わりに使用: 微妙な境界線とともに shadow-sm または shadow-none。

ボーダー半径

禁止: rounded-md, rounded-xl, rounded-2xl, rounded-3xl, rounded-[24px], rounded-[32px] のランダムな混在
代わりに使用: 2〜3 つの値を選択。カード: 8〜12px。ボタン: 6〜8px (またはピル型の場合は rounded-full)。入力フィールド: 6〜8px。一貫性を保つこと。

アイコン

禁止: アイコンとしての Unicode 文字 (↑, ↓, ◌, ⌂, ◫)
代わりに使用: lucide-react (Web)、@expo/vector-icons (React Native)、SF Symbols (iOS)、Material Icons (Android)

ファイル構造

禁止: アプリ全体が単一のファイルにあること
代わりに使用: 以下のファイルに分割: 画面/ページ、コンポーネント、定数/テーマ、データ、ナビゲーション

レイアウトルール

コンテンツタイプにレイアウトを合わせる

コンテンツタイプ	レイアウト	使用しないもの
画像/ビジュアル系 (食品、旅行、製品)	水平カルーセル、画像グリッド、ヒーロー画像	テキストのみの縦長リスト
データ/数値系 (金融、フィットネス、分析)	統計カード、プログレスバー、メトリクスグリッド	ヒーロー画像カード
フィード系 (ソーシャル、ニュース、投稿)	全幅スタッキングカード、無限スクロール	セクション分割レイアウトとドラッグハンドル
ブラウズ系アイテム (e コマース、タスク、メール)	検索/フィルター付き縦長リスト	ヒーローセクション
マルチメディア系 (ストリーミング、音楽、ポッドキャスト)	水平スクロール棚 (Netflix スタイル)	縦長リスト
チャット/メッセージ系	コンタクトリスト + チャット詳細	ヒーローカードまたは統計グリッド
マップ/ロケーション系	マップビュー + ボトムシートオーバーレイ	標準的なリストレイアウト

テンプレート禁止ルール

すべてのアプリに同じレイアウトスケルトンを使用しないでください。 プロンプトを読み、コンテンツタイプを特定し、適切なレイアウトを選択してください。
これらすべてを一緒に使用しないでください: ヒーローカード + グリッドボタン + ドラッグハンドル + セグメントコントロール + 縦長リスト。それはテンプレートです。
アプリが画像中心の場合、実際の画像 — サムネイル、写真 — を表示し、丸い四角の中のアイコンだけにしないでください。
カテゴリ、注目アイテム、コンテンツ棚には 水平スクロール (FlatList horizontal、CSS overflow-x-auto) を使用してください。AI ジェネレーターはこれらを十分に活用していません。

デザインセンス

色の抑制

モノクロームまたはそれに近いパレットは、カラフルなものよりも見栄えが良いことがよくあります。
色は主にアクション (ボタン、リンク)、ステータス (バッジ)、ハイライト (選択状態) に使用する必要があります。すべてに使用するべきではありません。
ダーク要素 (カード、セクション) は、実際のオブジェクト (クレジットカード、メディアプレーヤー、コードブロック) を表す場合、または意図的な視覚的リズムを生み出す場合にのみ正当化されます。「バラエティのために」だけではいけません。

リスト項目

識別子として文字のイニシャルのみを使用しないでください。 カテゴリ固有のアイコン (レストランなら食器、交通ならバス、サブスクリプションなら繰り返し) を丸い四角の中に使用してください。
常に メタデータ を含めてください: 日付/時刻、カテゴリ、ステータス。「レストラン」は偽物に感じられます。「レストラン · 5 月 5 日 · 14:28」は本物に感じられます。

フィルター

5 つ以上の項目があるリストには、フィルターまたはセグメントコントロールが必要です。
セグメントコントロール: 選択されたセグメントが塗りつぶされたピルトラックスタイル。

アクションボタン

境界線なしスタイルは多くの場合、すっきりして見えます: ミュートされた背景の四角の中のアイコン + 下のラベル。カードラッパー、シャドウ、境界線は不要です。

モバイルルール

完全な iOS カラーパレット、Android Material 3 トークン、コンポーネントガイドライン、コード例については、モバイルパターンリファレンスを参照してください。

全プラットフォーム共通

実際のナビゲーションライブラリ を使用し、カスタム View ベースのナビバーは使用しないでください。React Native: @react-navigation/bottom-tabs。iOS: TabView。Android: Material NavigationBar。
浮遊するピル型のボトムナビバーを決して構築しないでください。 position: absolute、borderRadius: 28、暗い浮遊ピルは使用しないでください。
React Native で条件付きスタイリングを行うには、Platform.select() または Platform.OS を使用してください。
デザイントークン (色、スペーシング、半径、タイポグラフィ) を定数ファイルに定義してください。
画面ごとに 3 つの状態を処理してください: ローディング (スケルトン)、コンテンツ、空。

iOS

落ち着いた、ソフトで、高級感のあるデザイン。控えめな色。システムフォント (SF Pro)。セマンティックカラー (.label, .secondaryLabel, .systemBackground)。半透明のナビ/タブバー。listStyle(.insetGrouped)。アイコンには SF Symbols。ヘアライン区切り。コーナー半径: 10〜12。重いシャドウは使用しない — 背景のコントラストを使用する。

Android (Material 3)

構造化され、大胆で、表現力豊かなデザイン。material3 の Material コンポーネント。ドロップシャドウの代わりにトーンサーフェス (tonalElevation)。Scaffold と TopAppBar + NavigationBar。リスト行には ListItem コンポーザブル。アイテム間の区切りには HorizontalDivider()。カードのコーナー半径: 12dp。シードカラーからカラースキームを生成する。

React Native / Expo

Platform.select() を使用したプラットフォーム条件付きの色、シャドウ、スペーシング。
iOS は shadowColor/shadowOpacity/shadowRadius を使用。Android は elevation を使用。
プラットフォームごとに異なる背景色: iOS #F2F2F7、Android #F9F9FF。
異なるプライマリカラー: iOS #007AFF、Android は Material のシードカラーを使用。

Web ルール

クリエイティブな自由度 + 構造

以下の点については自由に選択できます: カラーパレット、フォントの選択、ボーダー半径の値、ブランドの個性、背景の処理。

以下の点については従う必要があります: セクション構造、ヒーローコンテンツの制限、コンポーネントパターン、レスポンシブ動作。

ランディングページ構造

ヒーロー     → 見出し + サブタイトル + 2 つの CTA + 1 つの信頼要素
トラスト     → ロゴバー (視覚的に区別されたロゴ)
特徴        → アイコン + タイトル + 説明の 3 列グリッド
仕組み      → 3 ステッププロセス
推薦文       → アバター + 名前 + 役割 + 引用
料金        → 2〜3 段階、おすすめ段階は視覚的に反転 (暗い背景)
CTA         → 最後の行動喚起
フッター     → リンク列 + 著作権

ヒーロー

見出し + 短いサブタイトル + 2 つのボタン + 1 つの信頼要素。以上です。
2 列ヒーローの右側に製品モックアップ/スクリーンショットを配置するのは問題ありません。
ヒーローに統計カード、リストを含む複雑なプレビューカード、複数段落の説明を配置しないでください。

フィーチャーカード

アイコンコンテナ: 最低 48px、色付き背景。小さすぎないこと。
カードのパディング: 十分に取る (p-6 〜 p-8)。
各カードは十分なボリューム感があるべき — アイコン + タイトル + 説明。

料金

おすすめ段階: 反転 (暗い背景、明るいテキスト) または太い境界線 + 「最も人気」バッジ。
各カードの全幅 CTA。

サインイン

2 列: ブランドパネル (左、暗い) + フォーム (右)。
ソーシャルログインはメールフォームの上。
モバイル: ブランドパネルを非表示にし、ロゴとともにフォームを表示。

ダッシュボード

サイドバー (240〜260px) + メインコンテンツ。
サイドバー: ロゴ、アイコン付きナビ項目、オプションのアップグレードカード。
上部バー: 検索 + 通知 + アバター。
コンテンツ: 挨拶 → 統計カード → タブ付きフィルタリングリスト → アクティビティフィード。

ダークモード

背景: 非常に暗いグレー、純粋な黒ではない。
テキスト: オフホワイト、純粋な白ではない。
境界線: ダークグレー。彩度を下げる。

出力前チェックリスト

コードを返す前に、以下を確認してください:

タイポグラフィ:

font-extrabold または font-black がどこにもない
最大 2 つのフォントウェイトのみ使用 (レギュラー + ボールド/セミボールド)

ビジュアル:

tracking-[0.18em] またはそれより広いものがない
ページ全体で最大 2 つの大文字ラベル
ロゴバーの項目が互いに視覚的に区別されている
カードに shadow-xl または shadow-2xl がない
一貫したボーダー半径 (最大 2〜3 つの値)

ヒーロー:

見出しがデスクトップで 2 行に収まる
アイブローバッジ (存在する場合) が新しい情報を追加し、見出しを言い換えていない
サブタイトルが 1〜2 文であり、段落ではない

構造:

複数のファイル (画面、コンポーネント、定数、ナビゲーション)
実際のアイコンライブラリ (Unicode ではない)
プラットフォーム固有のスタイリング (React Native)
ローディング/空の状態が存在する

レイアウト:

レイアウトがコンテンツタイプに一致している (毎回同じテンプレートではない)
リスト項目にカテゴリアイコン + メタデータがある
5 つ以上の項目があるリストにフィルターがある

お気に入りのAIに質問する

ドキュメント