anti-ai-slop-ui

anti-ai-slop-ui

AI エージェントが、ありきたりで一目でそれとわかる、ノリで作ったような UI を生成しないようにします。

平均的な AI SaaS インターフェースをデフォルトにしないでください。UI コードを書く前に、ビジュアルの方向性、デザイントークン、レイアウト戦略、モーションルール、スロップを防ぐ品質ゲートを定義し、プロダクト固有のデザインを作りましょう。

基本原則

コンポーネントから始めないでください。まずデザインの意図を定めましょう。

使用する場面

• ランディングページ、SaaS UI、ダッシュボード、オンボーディングフロー
• アプリ画面（デスクトップ／モバイル）
• フロントエンドコンポーネント、Figma／モックアップ
• UI の再デザインや品質レビュー
• shadcn／Tailwind UI のリファクタリング

使用しない場面

• バックエンドのみ、データベースのみ、DevOps のみの作業
• データ処理、コマンドラインのみのスクリプト、テキストのみの執筆
• ただし、タスクに可視 UI が含まれる場合を除きます

必須のプロセス

この順序で進めてください。手順を省略しないでください。

1. UI タスクを分類する

次の中から主なタイプを 1 つ特定します。

• ランディングページ／プロダクトのマーケティングページ
• アプリのダッシュボード／管理画面／コントロールパネル
• オンボーディングフロー
• モバイルまたはデスクトップアプリの画面
• コンポーネントライブラリの作業
• 再デザインまたはレビュー
• Figma／モックアップの生成
• 実装またはリファクタリング

レビューの際は、該当するチェックリストを使用します。

• checklists/landing_page_checklist.md
• checklists/dashboard_checklist.md
• checklists/ui_review_checklist.md

2. プロダクトのコンテキストを推測する

次の項目を判断します。

• プロダクトの種類、対象ユーザー、ユーザーの主な操作
• プラットフォーム、情報密度、信頼性の要件
• 感情的なトーン、ブランドの成熟度、ビジネス目標
• アクセシビリティへの期待

情報が不足している場合は、簡潔な前提を示します。重大な不足でない限り、作業を止めないでください。

生成タスクには templates/design_brief_template.md を使用します。

3. 具体的なビジュアルの方向性を選ぶ

制約を伴う方向性を 1 つ選びます。「モダン」「クリーン」「洗練された」のような曖昧なラベルは、具体的な説明なしに使わないでください。

references/visual_directions.md を読み、たとえば次の中から選びます。

• ネイティブ macOS ユーティリティ
• 開発者ツール／CLI コンパニオン
• エンタープライズのコントロールプレーン
• セキュリティ運用コンソール
• リサーチアーカイブ
• プレミアムなウェルネスコンパニオン
• 暗号資産インテリジェンスターミナル
• 一般消費者向けクリエイターツール
• 金融ダッシュボード
• ミニマルなエディトリアルプロダクト
• 遊び心のある一般消費者向けアプリ

各方向性の詳細な制約については、references/visual_directions.md を参照してください。

4. UI コードを書く前にデザイントークンを定義する

実装前に、次の項目を定義します。

• カラーパレット、タイポグラフィ、スペーシングスケール
• 角丸のルール、シャドウ／エレベーションのルール
• アイコンのスタイル、モーションルール
• レイアウトのリズム、コンポーネントの密度

templates/design_tokens_template.json を使用します。

references/typography_guidance.md と references/motion_rules.md を読みます。

5. レイアウト戦略を選ぶ

次をデフォルトにしないでください。

centered hero -> subtitle -> two CTAs -> three cards -> bento -> FAQ -> CTA

references/layout_patterns.md からプロダクトに適したレイアウトを選びます。たとえば次のようなものがあります。

• 非対称なプロダクトヒーロー
• コマンドセンター
• エディトリアルな分割レイアウト
• ワークフローのタイムライン
• ネイティブの設定ウィンドウ
• 証拠台帳
• 高密度なダッシュボード
• 大きなオブジェクトを 1 つ配置するレイアウト
• 課題／証拠／成果
• プロダクトのストーリーボード

6. AI らしさ／ノリで作ったようなデザインによくあるパターンを避ける

次は、プロダクト固有の根拠が必要となる危険なデフォルトです。ユーザーから求められた場合、またはプロダクト上の強い理由がある場合を除き、使用しないでください。

特徴や代替案については、references/anti_slop_patterns.md を読んでください。

デフォルトでは、次のパターンを避けます。

• shadcn／Tailwind のありきたりなビジュアル言語
• 紫／インディゴの AI カラーパレット、紫から青へのグラデーション、グラデーションのヒーローテキスト
• 中央揃えのヒーロー＋3 枚のカード＋CTA
• UI 要素としての絵文字アイコン
• 目的のないダークなネオングロー
• あらゆる場所でのグラスモーフィズム
• 目的のないオーロラ／ブロブ／ぼかし装飾
• すべての要素に角丸を付ける
• 検討せずにデフォルトとして使う Inter／Geist
• すべてのカードにホバーアニメーションを付ける
• あらゆる場所でのスクロール時の表示アニメーション
• ありきたりな SaaS セクションのリズム
• デフォルトの装飾としてのベンタグリッド
• プレミアムなデザインを装うための、目的のない空白
• 見た目が同じで、重要度も等しいカード

7. UI を生成またはレビューする

生成： コンポーネントを深くカスタマイズし、デモ用のコンポーネントをそのまま使わず、階層を明確にし、一貫性のあるアイコンを使い、空・読み込み中・エラーの状態を定義し、動きを機能的に保ち、アクセシビリティの基本を守り、レスポンシブな動作をテストします。

レビュー： ありがちな特徴を特定してその理由を説明し、修正の優先度を影響度順に示し、方向性の修正案を提示します。

すべての UI 作業で checklists/accessibility_basics.md を使用してください。

対照例として examples/ を確認してください。

• examples/bad_to_good_landing.md
• examples/bad_to_good_dashboard.md
• examples/native_macos_utility_example.md

8. AI Slop Score と Distinctiveness Score を実行する

最終納品の前にスコアを付けます。

• rubrics/ai_slop_score.md
• rubrics/distinctiveness_score.md
• rubrics/implementation_readiness_score.md（生成のブリーフ用）

品質ゲートの質問：

• デフォルトの shadcn のデモのように見えませんか？
• プロダクト上の理由がないのに、メインのアクセントカラーがパープルやインディゴになっていませんか？
• グラデーションのヒーロー見出しはありませんか？
• ページが実質的に、ヒーロー＋3つのカード＋CTA だけになっていませんか？
• アイコンに絵文字を使っていませんか？
• すべてのカード／ボタン／モーダルが過度に角丸になっていませんか？
• 目的のないグロー、オーロラ、ブロブ、ぼかし、ガラス風の装飾はありませんか？
• Inter／Geist を、単にデフォルトだからという理由だけで使っていませんか？
• ホバー／スクロールのアニメーションが過剰ではありませんか？
• フロントエンド／デザイン系のサブレディットで「これは AI っぽさが丸出しだ」と言われませんか？

9. UI がありきたりに見える場合は修正する

• AI Slop Score が 0～4：軽微な注記を加えて進めます
• AI Slop Score が 5～6：影響の大きい箇所を修正します
• AI Slop Score が 7 以上：リリースせず、ビジュアルの方向性とレイアウトを再設計します
• Distinctiveness Score が 7 未満：具体的な改善案を少なくとも3つ提示します

10. 実装にすぐ使えるメモ／コードを出力する

適切な出力テンプレートを使用します。

• 生成：templates/ui_generation_output.md
• レビュー：templates/ui_review_output.md

必須の出力形式

UI 生成

1. デザインの方向性
2. トークンの決定事項
3. レイアウト戦略
4. 実装／コード
5. アンチスロップ確認（スコア＋リスク）
6. 残るトレードオフ

UI レビュー

1. 直接的な診断
2. 見つかったありがちな特徴
3. その原因
4. 優先度の高い修正
5. 修正後のデザインの方向性
6. AI Slop Score
7. Distinctiveness Score
8. 具体的な実装手順

リソース一覧

役割	ファイル
視覚的な特徴＋代替案	references/anti_slop_patterns.md
方向性のライブラリ	references/visual_directions.md
デフォルトに頼らないレイアウト	references/layout_patterns.md
フォント／タイポグラフィの選択	references/typography_guidance.md
機能的な動き	references/motion_rules.md
生成前のブリーフ	templates/design_brief_template.md
トークン構造	templates/design_tokens_template.json
生成時の出力形式	templates/ui_generation_output.md
レビュー時の出力形式	templates/ui_review_output.md
スロップのスコア付け	rubrics/ai_slop_score.md
独自性のスコア付け	rubrics/distinctiveness_score.md
実装準備度のスコア付け	rubrics/implementation_readiness_score.md
一般的なレビューチェックリスト	checklists/ui_review_checklist.md
ランディングページのチェックリスト	checklists/landing_page_checklist.md
ダッシュボードのチェックリスト	checklists/dashboard_checklist.md
アクセシビリティの基本	checklists/accessibility_basics.md
ランディングページの対照例	examples/bad_to_good_landing.md
ダッシュボードの対照例	examples/bad_to_good_dashboard.md
macOS ネイティブのユーティリティ例	examples/native_macos_utility_example.md
再利用可能なタスク用プロンプト	examples/prompt_examples.md
エージェントへのインストール	scripts/install_skill.py
UI スロップのヒューリスティック lint	scripts/ui_lint.py

ユーティリティスクリプト

必要に応じて実行してください。上記のデザインプロセスに代わるものではありません。

scripts/install_skill.py

リポジトリをクローンしたユーザー向けです。このスキルをエージェントのスキルディレクトリにシンボリックリンク（デフォルト）またはコピーします。

python scripts/install_skill.py
python scripts/install_skill.py --status

公開インストールの代替手段：npx skills add rwcod/anti-ai-slop-ui

scripts/ui_lint.py

UI コードの実装やレビューの後に、測定可能なスロップの兆候をスキャンします。

python scripts/ui_lint.py ./src
python scripts/ui_lint.py path/to/Component.tsx

出力は最終的な判定ではなく、AI Slop Score の入力として使用してください。誤検出は想定されています。

強力なデフォルト指示

UI を実装する前に、簡潔なデザインの方向性とデザイントークンの計画を作成してください。

製品固有の、際立ったビジュアル言語を使用してください。階層、抑制、有用な場合の非対称性、関連する場合のプラットフォーム標準の慣習、そして機能的なモーションのみを重視してください。

まずビジュアルシステムを定義します。その後、UI を実装します。