Slop Patterns

スロップパターン

AI デザインのアンチパターンを集めた公開ライブラリです。どのような見た目か、ツールがそれを生成する理由、代わりに何をすべきかを紹介しています。sloppatterns.com で公開しています。

• ライセンス：MIT（LICENSE）。ここに含まれるのはパターンライブラリのみで、MIT ライセンスが適用されます。対象は patterns.json、パターンのテキストと出典、サイト、api/ 内の MCP サーバーです。
• スキャナーのコードは非公開です。 sloppatterns.com/score の Slop Score スキャナー（ブラウザーキャプチャ、ライブチェック、採点）は別のプロジェクトで、このリポジトリには含まれていません。
• MCP サーバーは https://sloppatterns.com/mcp で稼働しています。アカウントやキーは不要です。サイトの「エージェント向け」ページをご覧ください。
• 調査ノート「The Same Page」は research/ にあります。

Precious Studio の Pavithra Lamahewa がメンテナンスしています。サイトからパターンを提案するか、イシューを作成してください。

AI ツールで使う

コーディングエージェントは、作成した UI に対して check_design を呼び出し、検出した問題を修正してから、あなたに表示します。

• Claude Code（プラグイン、MCP とスキル）：

  /plugin marketplace add pavithralamahewa/slop-patterns
  /plugin install slop-patterns@slop-patterns
  

• 任意の MCP クライアント： npx add-mcp https://sloppatterns.com/mcp を実行するか、その URL を使って HTTP サーバーを追加します。公式 MCP Registry には com.sloppatterns/slop-patterns として登録されています。
• Cursor： Settings → MCP でサーバーを追加し（タイプは HTTP、URL は上記）、cursor/slop-patterns.mdc を .cursor/rules/ にコピーします。

分類体系を使う

各パターンには固定コード（例：A10）と固定 URL（https://sloppatterns.com/#gradient-text-headline）があります。コードの意味は変わりません。エントリーが改訂されると、version フィールドと updated フィールドが変わります。

• 全 531 件のパターンをデータとして提供： taxonomy.json。各エントリーには、自動チェックの対象か（101 件が対象です。スキャナー、MCP サーバー、コマンドラインで 104 のコードルールを共有し、そのうち 57 件はページ全体を対象とした手動監査に合格しています）、または人による確認が必要かが記載されています。
• コマンドライン： npx slop-patterns check ./dist または npx slop-patterns scan example.com を実行します。cli/ をご覧ください。
• ルールセットは共通です： スキャナー、MCP サーバー、コマンドラインは同じ rules.js を実行するため、結果が食い違うことはありません。
• 引用する： CITATION.cff をご覧ください。これにより、GitHub に「このリポジトリを引用」ボタンが表示されます。