Communitygithub.com

AIスロップ除去

WebプロジェクトからAIスロップ(vibeコードされたプロダクトにありがちな、機械的なビジュアルやコピーの定型表現)を見つけて除去します。「AIスロップを除去して」「デスロップして」「AIっぽい見た目をなくして」「これがAI生成に見えないようにして」といったユーザーの要望や、テンプレートっぽいランディングページ/UI/ドキュメントの整理に使えます。

AIスロップ除去 とは?

このスキルは、AIが生成したプロダクトに特有の「AIスロップ」(インディゴ→バイオレットのグラデーション、グラデーションクリップの見出し、デフォルトのセマンティックパレット、単色のステータスボックス、大気圏風グラデーション、セリフ斜体の強調、ハイライトキーワード、AI的なコピーライティング文体(「単なるXではなく、Yです」)、絵文字の多用、光るステータスドット、ぐらつくスピナー、左縁色のコールアウト、パステルアイコンタイル、ガラスモーフィズム、過剰な角丸、巨大なシャドウ、角で途切れるボーダー、バッジとピルの乱発、AI描画のSVGアイコン、見出しごとのキッカー、平坦なタイプ階層、でっち上げの統計行、01/02/03のセクションマーカー、カードの中のカード、デフォルトのInter/Space Groteskフォントなど)を検出・修正します。HTML/CSS、React/Vue/Svelte/Astro、Tailwind、PHP、Markdownコピーに対応。スキャナーはNode.jsのみで動作し、依存関係は不要です。修正前にレポートを生成し、ユーザーが確認してから適用するワークフローを採用。各スロップの検出パターンと修正例はリファレンスドキュメントにまとめられています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/yetone/kill-ai-slop/tree/HEAD/skill

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

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Kill AI Slop

AIスロップは特定の方法で醜いものです。つまり、焦点を絞らずに可能な限りのスタイルと詳細を積み重ねます。グラデーション、グロー、マスコット、絵文字、光るカードの壁、すべてのデフォルトが一度にオンになり、すべてのプロダクトが同じ派手なテンプレートに見えます。サムネイルでは「デザインされている」ように見えますが、誰かが見た瞬間に崩れます。あなたの仕事は、実際に人が選ぶようなものに削ぎ落とすことです。

すべての修正で守るべき原則:

  1. 装飾する前に決定する。 すべての視覚的選択は説明可能でなければなりません。
  2. アクセントは1つ、ボイスも1つ。
  3. スケールとスペースから階層を生み出す。 単語に色を付けたりフォントを変えたりするのは近道です。
  4. まずは削る。 醜くなくするための最初の一手は、ものを取り除くことです。
  5. コピーは、パンチの効いた表現よりも具体的であること。
  6. 装飾には意味がなければならない — アイコン、バッジ、コールアウトはシグナルです。

ワークフロー

以下の手順を順番に実行してください。ユーザーがレポートを見る前に一括編集してはいけません。

1. スコープ

スキャン対象を確認します。デフォルトはアプリ/サイトのソース(node_modules、dist、build、.git、vendor、ロックファイル、minifiedファイルはスキップ)です。プロジェクトが複数のアプリを混在させているか尋ねてください。

2. スキャン

バンドルされたスキャナーを実行します。スキャナーはコードベースをgrepして各スロップのコードレベルのシグナルを見つけ、グループ化された file:line ヒットを出力します。

node scripts/scan.mjs <root>          # 人間可読なレポート
node scripts/scan.mjs <root> --json   # 機械可読、トリアージ用

これは純粋なNode(依存関係なし)で、ファイルを編集することはありません。その出力を開始マップとして使用し、コードを読んで各ヒットを確認してください。

スキャンを絞り込むには:--only=01,06 / --skip=19 でスロップIDをフィルタリング、--exclude=legacy でパスを除外(プロジェクト相対パスの部分一致)。--rules=extra.mjs で追加のプロジェクト固有または言語固有のスロップを読み込みます(scripts/rules.ru.mjs は出荷済みのロシア語コピーの例であり、独自ルールのテンプレートです)。ユーザーが意図的と確認したヒットは、ソースに deslop-ignore、deslop-ignore-next-line 06、または deslop-ignore-file コメントでピン留めできます。新しいスロップがまだ表面化するように、IDスコープ付きの形式を推奨します。

3. トリアージ

各ヒットについて、ファイルを開きスロップか意図的なものかを判断します。このステップが、このスキルをlintルールと区別するものです。グラデーション、セリフ、絵文字は、実際に守られた選択である可能性があります。ユーザーが明らかに選んだもの(ブランドトークン、ロゴ、意図的なイラスト)は保持してください。デフォルトのみをフラグします。

各スロップが何であり、なぜ機械的に見えるのかについては references/taxonomy.md を、正確なパターンと一般的な誤検出については references/detection.md を読んでください。

4. レポート

何かを変更する前に、ユーザーにグループ化されたサマリーを提示します。各スロップ、確認した file:line ヒット、理由の一文、提案する修正。以下の形式に従ってください。

slop  src/Hero.tsx:12   インディゴ→バイオレットグラデーション       → 1つのソリッドアクセント
slop  src/Hero.tsx:31   グラデーションクリップ見出し               → ソリッドインク、スケールアップ
slop  src/Note.tsx:8    border-l-4 コールアウト ×3                 → 1つは脇に、残りは本文
slop  copy.md:1        "単なるXではなく、Yです"                  → 具体的なことを言う
→ 4グループ、11ヒット。

次に、どのグループを適用するか、または全てに進むかを尋ねてください。

5. 修正

スロップを除去しつつ、意図と機能を保持する最小限の変更を適用します。スロップごとのbefore→afterパターンには references/fixes.md を使用してください。

  • すべての呼び出し箇所を触るよりも、共有トークン/コンポーネントを編集することを優先してください。
  • 新しいブランドカラーを考案してはいけません。パレットを変更する必要がある場合は、ニュートラルカラーとプロジェクトの既存アクセントを提案し、ユーザーに確認させてください。
  • コピーの意味は維持し、具体的にしてください。単に削除しないでください。
  • 修正後にスキャナーを再実行してカウントが減ったことを確認し、意図的に残したヒット(理由付き)を記録してください。

ガードレール

  • 作者を尊重する。 慣れないファイルや意図的な装飾は、誰かの選択として扱ってください。スロップかどうか不明な場合は、削除せずに尋ねてください。
  • 小さく、レビュー可能な差分。 無関係なコードをフォーマットしてはいけません。git add -A を実行してはいけません。明示的なファイルのみをステージし、他の人の作業中のものを残してください。
  • この作業に新しい依存関係を追加しない。
  • 可能な場合は視覚的に確認する。 devサーバーが存在する場合は、beforeとafterを確認してください。スキャンが通っただけでは、ページが良くなったとは言えません。

リファレンス

  • references/taxonomy.md — 35のスロップ:各スロップの内容、スロップである理由、修正方法。
  • references/detection.md — 具体的なripgrep/regexパターンと誤検出。
  • references/fixes.md — before→afterの修正パターン。
  • scripts/scan.mjs — 依存関係不要のスキャナー。

関連スキル