8万字の反AI風デザイン手法：Slop.md を agent のデフォルトルールにする
pols.dev が約8.7万文字の Markdown を公開。生成系 Web ページの定番パターンを1つずつ指摘し、改善策を示しています。公式サイトでは Claude / Codex / Cursor などに応じてインストールコマンドを切り替え可能。ファイルをダウンロードして任意の agent に貼り付けることもできます。
AI がランディングページや価格表、ヒーローセクションを生成すると、いつも同じような「デフォルト」に当たります。。紫のグラデーション、光るカプセルボタン、アイコンタイル、偽 macOS ウィンドウ、Inter フォントの多用などです。Slop.md はこれらの問題を具体的に挙げ、「デザイン前に必ず読み、完了後に1つずつチェックする」ための長大なルールブックです。インストールはとても簡単。使っている agent を選んで curl コマンドを実行するか、MD ファイルをダウンロードするだけです。
まずは当サイトの Impeccable 記事をチェック
先日、当サイトでは Impeccable を解説しました。Cursor や Claude Code、Codex などにインストールするフロントエンドデザイン用のスキルです。/typeset や /critique など23のコマンドがあり、npx impeccable detect で PR 内の slop を検出できます。プロジェクトのトークンやコンポーネントも認識します。
Impeccable も、今回紹介する pols / Slop.md も、同じ問題を扱っています。それは、生成系 AI が UI を作るときの「デフォルトの悪い癖」です。違いは形にあります。
会話内で「フォント変更 / レビュー / 太字」などと指示したい
CI に組み込んで検出したい、デザインシステムを認識させたい
ページをライブ編集してファイルに書き戻したい
ルールを一つ追加するだけでいい。コマンドを覚えたくない
Claude / Cursor / Codex… それぞれのパスに貼り付ける
デフォルトのルールとして使う。ユーザーの明示的な指示があれば上書き
併用も可能です。Slop.md を「こういうのは書くな」という土台にしつつ、Impeccable で日常の UI 修正フローを回す、という使い方です。ここでは pols の話に絞って解説します。
汎用ルールファイルであって、Webサイト生成ツールではない
ファイルの冒頭に、次の3つの使い方が明記されています。。ルールとして読むこと。作業開始前にユーザーに「全体を読んだ」ことを伝え、完了前に項目ごとに自己チェックすること。。ユーザーの明示的な指示とルールが衝突した場合は、ユーザーの指示を優先すること。。
構成はおおよそ次の通りです。。まず AIスロップを定義し、次にダメなデフォルトを具体的に列挙します。後半は改善策やデザインの原則を紹介しています。見出しは140以上ありますが、目次を丸暗記する必要はありません。。「禁止 / 推奨」の2種類に分けて覚えておけば十分です。全文は約87KB。。文末には貼り付けないので、このページ下部のダウンロードリンクか公式サイトから入手してください。。
特に遭遇しやすい項目をいくつか。
1枚のカードにアイコンタイル、分類カプセル、タグ行、価格、光るボタンを全部詰め込むのは、まさに典型パターン。
CSS で描いた空の macOS ウィンドウを「製品スクリーンショット」として載せる。テンプレート感が出て、製品らしくない。
ボタン、背景、見出し文字が全部グラデーションで光っている。生成ページの「名刺代わり」の組み合わせ。
ヒーロー + 3つの機能カード + 価格 + お客様の声 + フッターCTA の構成をそのまま繰り返す。色と文字を変えただけ。
ページ全体に「これだ」と思える視覚的なアンカーを1つ置く。全部を「オシャレにする」必要はない。
偽ウィンドウは、中に本物のUIが入っていなければ意味がない。空の枠はやはりスロップ。
Google のデフォルトフォントを避ける。人気の無料表示フォントも、使いすぎると新しいデフォルトの顔になる。
動きがなさすぎるのも良くない。ただし、コンテンツをオープニングアニメーションで隠すのは避ける。
Install taste: お使いの agent を選んで、コマンドをコピー
公式サイトと同じで、5つの agent から選びます。コマンドの違いは「どのルールファイルに追記するか」だけです。以下はクリックできるコントロールです（スクリーンショットではありません）。全文のルールは、下のダウンロードから入手してください。記事末尾に8万字を貼り付けることはしません。
Claude のメモリ / ルールファイルに追記
curl -fsSL pols.dev/slop.md >> ~/.claude/CLAUDE.md
Codex AGENTS ファイルに追記
curl -fsSL pols.dev/slop.md >> ~/.codex/AGENTS.md
Cursor のルールディレクトリに no-slop ルールとして作成
curl -fsSL pols.dev/slop.md >> ~/.cursor/rules/no-slop.md
OpenCode AGENTS に追記
curl -fsSL pols.dev/slop.md >> ~/.config/opencode/AGENTS.md
Amp AGENTS に追記
curl -fsSL pols.dev/slop.md >> ~/.config/amp/AGENTS.md
- 上の表でお使いの agent を選び、snippet の curl コマンドをコピー（パスを間違えないように）
- または「完全版 slop.md をダウンロード」して、任意のプロジェクトルールに貼り付け
- agent に作業開始前に読了を確認させ、納品前にファイルに沿って自己チェックさせる
- 明確なデザイン指示がある場合は、ファイルのデフォルトより優先
- コマンド操作や CI 検出が必要な場合は、Impeccable を併用
初の公開プロダクト、ファイルは長大
作者はこれを最初の公開プロダクトと位置づけており、フィードバックを歓迎しています。サイトには「URL を貼ると slop 度を採点する」ような機能も開発中とのこと。ルールファイル自体は、現時点でもっとも充実していて、持ち運びやすい部分です。全文は約8.7万文字あり、コンテキストに丸ごと入れると容量を消費します。プロジェクト内では要約したり、章ごとに参照するのも手です。
AI生成Webページの「紫の発光ボタン」と「偽ウィンドウ」問題を、8.7万字の禁止リストにまとめた
pols.dev が、AI がよくやってしまうダメなデフォルトを具体的に挙げ、Claude や Codex、Cursor などの Agent にそのまま入れられるルールファイルとして公開しました。
↓ 一枚で読了 · 動く図つき
AIが生成するランディングページや価格表、ヒーローセクションは、どうしても同じような「デフォルト」に偏ります。。。紫青グラデーションの発光ボタン、アイコンタイルのカード、CSS で描いた偽 macOS ウィンドウ、Google の無料フォントの多用などです。pols.dev は、これらのダメなデフォルトをルールファイルにまとめました。Agent がデザインを始める前に一読し、納品前に項目ごとに自己チェックすることで、成果物を改善します。
文字数は当サイトでカウントしたもの。「8万+」は pols.dev の表記です。
ファイルの冒頭に使い方が明記されています。ルールとして読み、作業開始前に読了を確認し、納品前に項目ごとに自己チェックする。ユーザーからの明確な指示があれば、ルールのデフォルトよりも優先されます。
ファイル構成は、まず「AI生成Webページの悪い癖」を定義し、次にダメなデフォルトを具体的に列挙します。後半は改善策です。140以上ある項目から、特によく見かける4組を紹介します。
CSS で描いた空の macOS ウィンドウを製品スクリーンショットとして使う
ウィンドウの中に実際の製品を表示する。空の枠はやはりテンプレート
アイコンタイル、分類カプセル、価格、発光ボタンを1枚のカードに詰め込む
視覚的なアンカーを1つだけ残す。全部を凝る必要はない
ボタン、背景、見出し文字が全部光っている。生成ページの典型
Google のデフォルトフォントを避ける。人気の無料フォントも乱用すると新しいデフォルトに
ヒーロー、機能カード3つ、価格、お客様の声、フッターCTA をそのままコピー。色と文字を変えただけ
死んだように静かなページも良くない。コンテンツをオープニングアニメの後ろに隠すのも NG
pols.dev は、お使いの Agent に合わせてインストールコマンドを切り替えます。内容は、このルールを対応する記憶ファイルに追記する、というものです。curl コマンドは本文でコピーできますし、MD ファイル全体をダウンロードしてプロジェクトに貼り付けることもできます。効果は同じです。
| Agent | ルールファイル（追記または新規作成） |
|---|---|
| Claude | ~/.claude/CLAUDE.md |
| Codex | ~/.codex/AGENTS.md |
| Cursor | ~/.cursor/rules/no-slop.md |
| OpenCode | ~/.config/opencode/AGENTS.md |
| Amp | ~/.config/amp/AGENTS.md |
ページ作って
ささっと生成
どれも同じに見える!
- × 紫青グラデーション発光ボタン
- × 偽 macOS ウィンドウをスクショと偽装
- × アイコンタイルカードの積み重ね
- × Google フォントの多用
インストール
>> ~/.claude/CLAUDE.md
納品前に自己チェック
第三者による検証はまだ