anti-slop-ui は何をしますか？

Claude Code、Codex CLI、Cursor向けのスキル。UIをAI生成特有の見た目から監査し、順序付きパスで修正します。ゼロからデザインをやり直すのではなく、既存のUIを意図的に見えるように整えます。

使用するタイミング

ユーザーが「画面やページ、コンポーネントをきれいにしてほしい」「スロップ除去（デスロップ）してほしい」「洗練させてほしい」と依頼したとき。または、ユーザーがファイル、ディレクトリ、URLを指して「これ、AIっぽい / デフォルトっぽい / バイブコードされた感じがする」と指摘したとき。

ワークフロー

ステップ1：デザイン方向性を読み込む

プロジェクトルート、続いてtemplates/ディレクトリにDESIGN.mdが存在するか確認します。存在する場合は読み込みます。以降のすべての判断は、この方向性と一貫していなければなりません。DESIGN.mdが存在しない場合は、ユーザーにその旨を伝え、先に一緒に方向性を決めることを提案します。方向性は必須です。このステップをスキップしてはいけません。

ステップ2：監査

対象（ファイル、ディレクトリ、またはレンダリングされたページ）をスキャンします。見つけたAI生成特有の兆候（テル）をカテゴリ別にリストアップします。以下のチェックリストを使用します。

見つけたそれぞれについて、ファイルと行番号（URLの場合はセレクタ）を記録します。

ステップ3：方向性を提案する

以下の問いに答える短い方向性（3～5行）を書きます。

このプロダクトが何か（一文）。
性格 -- 「クリーン」「モダン」「ミニマル」ではない形容詞を1つ。
アクセントカラー -- トレンドではなく、プロダクトやブランドから導き出した1色。
シグネチャーなディテール -- このプロダッドにしかない、小さくて具体的なもの1つ。

方向性をユーザーに提示します。コードを編集する前に、ユーザーの承認を待ちます。 ユーザーが何かを変更した場合は、方向性を更新し、再度確認を取ります。

ステップ4：順序付きパス

以下の順序で修正を適用します。各パスを完全に終えてから次のパスに進みます。各パスの後、何が変わったかを簡潔にメモします。

パス1：スペーシング

任意の値（mt-[13px]）を最も近い4pxグリッドに置き換えます。
ギャップをプロジェクトのスケール（Tailwindのデフォルト、またはDESIGN.mdのスケール）に統一します。
コンテナ内のパディングを一貫させます。

パス2：カラー

グラデーション、グロー、ブロブ、色付きシャドウを削除します。
DESIGN.mdの中立色ランプを適用するか、トーンのついたグレー1色から導き出します。
インタラクティブ要素のみに、方向性で決めたアクセントカラーを適用します。
テキストのコントラストを確認します：本文は最低4.5:1、大きなテキストは3:1。

パス3：アイコン

絵文字をプロジェクトのアイコンファミリー（デフォルト：Lucide、16～18px、ストローク1.5）に置き換えます。
テキストコンテンツ内の装飾的な絵文字を削除します。
アイコンファミリーを全体で統一します。

パス4：コピー

誇大広告的な言葉を削除します：「Supercharge」「Unlock」「Seamlessly」「Effortlessly」「AI-powered」「Revolutionize」「next-generation」。
UIテキストから感嘆符を削除します。
手を振る絵文字付きの「Welcome back」を削除します。
「Learn more」/「Get started」CTAを、アクションに固有の「動詞＋成果」に置き換えます。
でっち上げた統計データ、ロゴ、お客様の声を削除します。実際のデータがあればそれを使い、なければセクション自体を削除します。
機能が先週以内にリリースされたものでない限り、「New」バッジを削除します。

パス5：タイポグラフィ

DESIGN.mdのフォント、または方向性で選んだフォントを設定します（デフォルトでInterは禁止）。
ウェイトを固定します：本文400、強調500、プライマリアクションは最大600。
見出しで斜体は使いません。スペース大文字のラベルは使用しません（uppercase tracking-widestを削除）。
一貫したタイプスケールを適用します。データにはtabular-numsを使います。

パス6：レイアウト

中央揃えのヒーロー＋3カードのパターンを、出現した場所で打ち破ります。
カードの入れ子を解除します。カードが残る場合はサイズに変化をつけます。
入れ子になった角丸のルールを適用します：内側の角丸＝外側の角丸ーパディング。
レイアウトが375px、768px、1280pxで機能することを確認します。

パス7：ステートとモバイル

データに依存するすべてのコンポーネントに、空ステートがなければ追加します。
データをフェッチする場所にローディングスケルトンを追加します。
API呼び出しが失敗する可能性がある場所にエラーステートを追加します。
375pxでオーバーフローや崩れが発生しないことを確認します。

パス8：モーション

transition-allを、特定のプロパティ（transition-colors、transition-opacity、transition-transform）に置き換えます。
スケルトンローダー以外からのanimate-pulseを削除します。
カードからのhover:scaleを削除します。
プロジェクト全体に1つのイージングカーブを設定します（デフォルト：cubic-bezier(0.22, 1, 0.36, 1)）。
ロード時のエントランスアニメーションを1つ：opacity + 小さなtranslateY、200～300ms、1回限り。

ステップ5：自己チェック

すべてのパスが完了したら、ステップ2の監査チェックリストを再実行します。もしAI生成兆候が残っていれば、修正するか、その理由をユーザーに説明します（例：「そのグラデーションは実際のブランドカラーであり、DESIGN.mdで確認済み」）。

ユーザーに以下を報告します：何が変更されたか、いくつの兆候が見つかったか、いくつ修正したか、残っているものとその理由。

ルール

あるクリシェを別のクリシェに決して置き換えないこと。修正によってクリーム＋セリフ＋テラコッタや、黒＋ビビッドグリーンが導入された場合は、差し戻してプロダクトから導き出した別のものを試すこと。
コンテンツを捏造しないこと。実際のデータに見せかけた偽の統計、ロゴ、お客様の声、プレースホルダー名を追加しないこと。
一度に1つの変更、一度に1つのパス。先に進まないこと。
既存のデザインシステムを尊重すること。プロジェクトが特定のトークンを持つコンポーネントライブラリを使用している場合は、そのトークンに合わせて修正し、上書きしないこと。
コードを編集する前に、必ず方向性についてユーザーの承認を待つこと。

クレジット

このスキルは、オープンソースのデザインスキルコミュニティのアイデアを統合したものです。オリジナル作品であり、以下のソースからテキストをコピーしたものではありません。

インスピレーション：

Unslop by Damir Sokolovsky（CC-BY-4.0）-- パス単位のワークフローといくつかの兆候カテゴリ（スペーシンググリッド、アイコンの一貫性、コピーの禁止、モーションルール）はUnslopのアプローチを基にしています。CC-BY-4.0に従い、Damir Sokolovskyにクレジットを付与します。オリジナル：https://github.com/heydamir/unslop、ライセンス：CC-BY-4.0。
Impeccable by Paul Bakaus（Apache-2.0）-- 監査優先のアプローチと決定論的検出の概念。
frontend-design by Anthropic（Apache-2.0）-- クリシェカタログ（クリーム＋セリフ、黒＋緑、大文字アイブロウ）。
Hallmark by Nutlope / Together AI（MIT）-- フロアルールと複数幅でのテストのアイデア。
Taste Skill by Leonxlnx（MIT）-- 装飾的な番号振りと細線の厳格な禁止。
ai-design-skills by elayadesign（MIT）-- 数値ルールのアプローチとフォントの禁止。
このリポジトリのdocs/ai-tells.mdにある15のAI生成兆候カタログ。

nyrthoughts/anti-slop-ui

anti-slop-ui とは？

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

ドキュメント