kill-ai-slopでWebインターフェースからAIスラップを除去する方法

明確なデザインシステムなしでClaudeやCursorでインターフェースを生成するたびに、同じテンプレートが出力されます。紫-藍色のグラデーション、輝くカードボーダー、画面に散らばる絵文字、カウンターのUPPERCASE、そして隅にいるマスコット。

機械は、味覚を欠いているが複雑な作業の外観を作成する必要があるときに、これらの要素を生成します。私たちはProduct Huntや新しいペットプロジェクトでこのビジュアルノイズにとても慣れているので、気づかなくなっています。

最近、GitHubにこのデジタル無味覚症を宣言したプロジェクト kill-ai-slop が登場しました。著者は生成されたデザインの33の特徴的な兆候をコンパイルし、体系化し、自動コードクリーンアップのツールを作成しました。

プロジェクトの2つの部分

このリポジトリは理論的かつ実践的な2つのレベルで問題に取り組んでいます。

一方では、別のウェブサイトにデプロイされたインタラクティブなリファレンスです。33の具体的なマシンデザパタンが含まれています。各例には、純粋なHTMLでのインタラクティブなビフォー・アフターのデモが含まれており、乱雑なブロックをクリーンなマークアップに変換する方法を示しています。

一方では、プロジェクトにはコーディングアシスタント用の готовый スキルとスタンドアロンスキャナーが含まれています。このユーティリティはソースツリーを走査し、生成されたコードマーカーを識別し、根本原因を説明し、クリーンな修正を提案します。

スキャナーが具体的に何をゴミと見なすか

プロジェクトのデータベースには抽象的な苦情は含まれていません—すべてのルールは、生成モデルがデフォルトでCSSとマークアップに挿入する実際のスニペットから生じています。

スキャナーは特徴的なマーカーを探します：

• カードの背後にあるぼやけたカラーブロブとグラデーションの輝き（紫色の blur エフェクト）
• すべての見出しの上にある無意味なステータスタグ
• 適切なタイポグラフィやベクターアイコンの代わりに至る所に絵文字
• 「データの力を解き放つ」のようなコーポレート流行語が含まれたコピー

プロジェクトサイト自体は、これらのパターンの完全な反対として設計されています。紙とインクのコンセプトを使用しています：厳格なグリッド、アノテーション用の単一のアクセント赤、薄いディバイダー、そして重いクライアントサイドスクリプトへの依存ゼロ。

自分でチェックを実行する方法

大きなパッケージをインストールせずにプロジェクトをチェックできます。スキャナーは純粋なNode.jsで書かれており、依存関係ツリーを引きません。

スキャンを実行するには、ターミナルでコマンドを実行するだけです：

node skill/scripts/scan.mjs path/to/project

CIや外部スクリプト用に構造化された出力が必要な場合は、機械可読形式フラグが便利です：

node skill/scripts/scan.mjs path/to/project --json

このユーティリティはマークアップとスタイルのみを分析します—許可なくファイルを上書きすることはありません。特定のビジュアルアクセントが意図的で残すべきものである場合、コード内で直接 deslop-ignore コメントを使用してチェックを無効にできます。フラグ --only と --skip は特定のルールをフィルタリングするためにも利用でき、カスタムチェックを追加する --rules 引数も使えます。

アシスタントワークフローへの統合

CursorやClaude Codeでコーディングしている場合、ツールを外部スキルとして直接統合できます：

npx skills add yetone/kill-ai-slop

その後、アシスタントにシンプルなテキストコマンドを与えるだけです：「このコンポーネントからすべてのAIスラップを削除」。エージェントはカタログからルールを引き出し、見つかったフラグメントと照合して、不必要なシャドウ、根拠のないtransform、冗長なスペーシングを削除してCSSをクリーンに書き換えます。

誰がこのリポジトリを見つけるか

このプロジェクトは、LLMでプロトタイプを頻繁に作成するが、その画一的なビジュアルスタイルに厌倦している開発者にアピールします。このツールは、長い手動マークアップクリーンアップなしでインターフェースのリズムを取り戻すのに役立ちます。

サイトのカタログは基本的なWeb美学のチートシートとしても機能します。プロンプト経由でAIに提案されたカードがなぜ安っぽ見えるかを説明するのに苦労している場合、リファレンス例は明確な技術的ガイドラインを提供します：どのライウェイトを選択するか、スペーシングでどのように階層を確立するか、そして無限のグラデーションを避けるべき理由。