elmir-mammadli/ai-deslop

AI de-slop（AIスロップ除去）

目標：人の視点でデザインされたと読めるページ。1つのタイポグラフィックな声、ラベルだったところに本当のコンテンツ、意味があるところにだけ装飾。特徴を取り除くことは半分の仕事。残りの半分は、それらがあった場所で何も壊れていないことを確認すること。

この順序で作業し、ステップをスキップしないこと：スコープ設定 → 監査 → 保持リスト → 編集 → 修復 → 検証 → 報告。各工程は「完了の定義」のすべてのゲートを満たしたときのみ完了とみなす。

1. スコープ

• スコープ内のすべてのサイト、ページ、共有コンポーネント、データファイル、サムネイルをリストアップする。親サイトもカウント対象であり、デモやサブページだけではない。ユーザーが「すべて」と言ったら、すべてを意味する。一部分だけを対象にして完了と報告してはならない。
• コンテンツは3か所に存在する。すべてを監査すること：スタイルシート、マークアップ/コンポーネント、データファイル（タイトルの配列、タイポグラフィの事実、ナビラベル、メタデータ）。
• スコープが本当に不明瞭な場合のみ、一度だけ質問すること。それ以外はそのまま作業を進める。

2. スクリプトで監査、その後目視で確認

最初にバンドルされたスキャナーを実行する。スキャナーはすべての候補をファイル:行でリストアップし、特徴ごとにグループ化し、修正レベルの特徴が残っている間は終了コード1で終了する。

python3 <skill-dir>/scripts/audit.py <paths...> --keep-caps ".wordmark,.logo,.heroTitle"
python3 <skill-dir>/scripts/audit.py src --only caps,tracking,period      # フォーカス
python3 <skill-dir>/scripts/audit.py src --json > audit.json               # 機械可読

• fix（修正）の特徴はゼロにしなければならない（または理由を添えた deslop-keep マーカーを付ける）。check（確認）の特徴（グラデーション、グロー、カウンターCSS、アイブロウ、ストライプ、絵文字見出し、シェイプ）はそれぞれ人間による判定が必要であり、報告書に記録する。
• スキャナーはコメントと node_modules/ビルド出力をスキップする。意図の判断、レイアウトの破損の発見、レンダリングされたテキストの確認はできない。これらはステップ5と6で行う。
• スクリプトがカバーしない追加の検索は references/audit.md に記載されている。

3. 20の特徴：正確なアクションと保持ルール

#	特徴	正確なアクション	保持してよい場合のみ
1	タグとピル	radius 999px → 3～4px、またはタグをプレーンな色付きテキストにする	読者がアクションを起こす状態（緊急度、ステータス、アクティブフィルター）を示す場合
2	過剰なイタリック	font-style: italic、italic ユーティリティ、装飾用の <em>/<i> を削除する	作品の実際のタイトル、引用された外国語の用語、ワードマーク
3	デフォルトのAIフォント	Instrument Serif、Instrument Sans、Geist、Geist Mono、Space Grotesk、IBM Plex Mono、JetBrains Mono、Space Mono をページの声として使用している場合に置き換える	声としては決して使用しない。フォントルール参照
4	ネガティブカーニング	すべての負の letter-spacing と tracking-[-…]、tracking-tight(er) を削除する	決して保持しない
5	過剰に詳細なUI	ガジェットを削除する：ライブステータスドット、偽のトラッカー、カーソルレンズ、マグネティックボタン、スクロールスキューマーキー、回転カウンター、装飾的なレベルメーター	ガジェットが製品そのものである場合（電卓、プランナー、コンフィギュレーター）
6	区切り線の多用	リストごとに最大1つの構造的な罫線を残し、それ以外の区切り線は削除する	罫線がテーブルやリストの行をグループ化する場合
7	シェードと透明度	ソリッドカラートークンを使用する。グロー、ぼかし、backdrop-filter、40pxを超えるぼかしのシャドウを削除する	スクリムが写真上のテキストの可読性を保つため、または実際のオーバーレイ（ダイアログ、メニュー）に控えめなエレベーションがある場合
8	枠線付きコンテナ	枠線が装飾だけのカードのボックスを解除する。左のアクセントストライプ（border-left ≥ 3px）を削除する	ボックスが実際のオブジェクト（フォーム、レシート、チケット、シート、テーブル）である場合、またはストライプが状態（フォームの成功/エラー）を示す場合
9	過剰に詳細な図	「Plate I」「Fig. 2」、説明になっていない凡例やラベルを削除する	すべての要素が実際の何かに対応している場合
10	冗長で重複したテキスト	フッターに1行の開示行を配置し、「サンプル」ノートの繰り返しを避ける。見出しを言い換えるだけの文章を削除する	ノートが他に記載されていない情報を追加する場合
11	コードのパンくずリスト	// LABEL、/services リンクテキスト、[1]、EV-01、R-03、STATUS:、TEL/MAIL/AREA の大文字ラベルを削除する	実際のナビゲーションパンくずリスト（「ホーム / アバウト」）の場合
12	セクション番号	「01 /」、「§」、「Chapter 1」、ローマ数字、「Z1」、ゼロ埋めカウンターをマークアップと CSS counter() から削除する	順序がコンテンツである場合：指示、タイムライン、フォームステップ、クイズの質問、図のマーカーに一致する数字。その場合は 01 ではなくプレーンな 1. を使用
13	アイブロウ	見出しの上の小さなラベルを削除する。それが事実（場所、取引、価格）を含んでいた場合は、それらを見出しまたは最初の文に移動する	機能的なラベルである場合：フォームラベル、凡例、dt、テーブルヘッダー、フッターの列見出し
14	ディザリング、ノイズ	ディザリングとノイズテクスチャを削除する	テクスチャがアートディレクションそのものである場合（リソグラフ印刷、紙の端）。deslop-keep をマークする
15	ASCII画像	削除する	デフォルトでは決して保持しない
16	スクアークル	半径12px以上 → 4～6px（セクション、カード、画像、ダイアログ）	真円（幅と高さが等しい：アバター、アイコンドット、丸チェック）、意図的な形状（アーチ窓、パイプの端）で deslop-keep を付けたもの
17	モノフォント	サイトのテキストフォントに font-variant-numeric: tabular-nums を追加して置き換える	ページ上の実際のコード
18	すべて大文字のサブタイトル	text-transform: uppercase、uppercase ユーティリティ、ソース文字列の大文字を削除する。同時にそれらの正のレタースペーシングも削除する	ワードマーク、実際の標識（DANGER / WARNING / NOTICE、パイプマーカー）、および凝縮されたディスプレイ見出しをベースにしたブランド（それらのセレクターは --keep-caps に残す）
19	グラデーションバックグラウンド	ソリッドカラーにする	データスケール（温度、季節）、写真スクリム、ハードストップのヘアライン
20	タイトル内のピリオド	h1～h3、ページタイトル、カードやデータのタイトル、表示サイズの1文フッター行の末尾のピリオドを削除する	本文の文、複数文の段落、略語（「Co.」「Inc.」）

また削除するもの：見出し内のアクセントカラーのフレーズ（#2と同じ特徴）、アウトラインまたはストロークされた巨大なワードマーク、装飾的なブロブや円、空のフレームやフィルムストリップ。

4. フォント

• デフォルトAIフォント（#3）をページの声として出荷してはならない。対象に合わせて選ぶ。ページが何についてかから選ぶ：サイネージ業種ならハイウェイ系または凝縮系、伝統工芸ならCaslonまたはDidone、スタジオならエディトリアルセリフと控えめなサンセリフ。
• 1つのディスプレイフェイスと1つのテキストフェイス、または1つのファミリー。ラベル用に第3のファミリーは不可。
• 数字はテキストフェイスで font-variant-numeric: tabular-nums を使用し、モノは使用しない。
• フォントを交換する際は、以下のものも更新する：フォントのインポート、CSS変数、レイアウトクラスリスト、フォント名を記載したヘッダーコメント、フォント名を表示するデータ（カタログカード、スタイルガイド）。その後、幅や行数が古いフォントに依存していたすべての見出しを再確認する。
• イタリックを削除した後は、イタリックや未使用のウェイトをロードしない。

5. コピールール

• 見出し：末尾にピリオドなし、<em> なし、アクセントスパンなし、センテンスケース。
• スタッカート調の2文見出しを1つの自然な文に書き換える：
  • 「Close the valve. Then call.」→「Close the valve, then call」
  • 「Find the leak. Plan the roof.」→「Find the leak, then plan the roof」
  • 「Fast, contained, explained.」→「Fast, contained and explained」
  • 「A professional website. A clear price.」→「A professional website at a clear price」
  • 「Seven layers. One you see.」→「Seven layers, and you see one」
  • 質問と指示の組み合わせは2つの部分として残してもよい：「Water off? Book a morning visit」
• 事実を含むアイブロウを削除する場合、その事実はどこか見える場所に残らなければならない。
• プロジェクト自身のスタイルルール（スペルバリアント、禁止ワード、ダッシュスタイル）に従う。編集後にスペルの一貫性を確認する。
• 決して証拠を捏造しない：偽のレビュー、カウント、ロゴ、賞は不可。サンプルはフッターに一度だけラベルを付ける。

6. 編集

• 機械的な変更（大文字、トラッキング、イタリック、半径、見出しのピリオド）はスクリプトで。判断を要するもの（書き換え、ガジェット、レイアウト）は手動で。
• CSSは小さなパーサーを使ってルールごとに編集する（selector { body } ブロックにマッチし、bodyを変更し、書き戻す）。スタイルシート全体に対して1つの大きなバックトラッキング正規表現を決して実行しない。
• 保持リストを先に作成し、編集はその後。どのセレクターが大文字を保持し、どの数字が残るかを書き留め、そのリストをスクリプトに渡す。
• 意図的な例外はインラインにマークし、将来の監査でスキップされるようにする：CSSでは /* deslop-keep: reason */、JSXでは {/* deslop-keep: reason */} を同じ行または前の行に記述する。

7. 除去で壊れたものを修復する

すべての除去は穴を残す可能性がある。以下の各項目を、すべてのサイトについてチェックする：

1. 数字やコードを保持していた小さな最初の列（44px 1fr、80px 1fr 360px、90px 1fr 1.4fr）を持つグリッド：すべてのブレークポイントでその列を削除する。
2. 削除された数字に合わせてテキストを配置していた p、dd、h3、li の左マージンまたはパディング28～60px：0に設定する。
3. 残存する counter-reset / counter-increment、li > span / dt span ルール、数字のスペーシングのみを行っていた display: flex; gap の見出し。
4. マークアップで参照されなくなったデッドクラス（動的なもの、例：s[\badge_${x}`]はスキップ）、空のルール、未使用のindex` パラメータやプロパティ、未使用のインポートやフォント変数、古いコメント。
5. 画像と重なっていた、または行数に依存していた見出し（フォント変更後）。
6. ::before / ::after 内の境界線をルールを読まずに削除しないこと：左と下の境界線を45度回転したものは描かれたチェックマークである。

8. 検証

• すべてのページを1440pxと390pxの幅で、prefers-reduced-motion: reduce を設定してレンダリング確認する（アニメーションセクションが完了した状態でレンダリングされるようにする）。ページ全体をスクロールしてからキャプチャし、遅延読み込み画像が読み込まれるようにする。開発者オーバーレイは削除する。空白の画像領域は、反証されるまでは遅延読み込みまたはスタックした開発画像オプティマイザである。本番環境と比較してからバグと呼ぶこと。
• すべてのルートで両方の幅で自動化パスを実行する：コンソールエラーゼロ、水平オーバーフローゼロ（scrollWidth > innerWidth）。
• プロジェクトチェック：型チェック、リンター（新しい警告ゼロ）、プロジェクトのコピーまたは禁止ワードチェック、プロダクションビルド。
• 監査スクリプトを再実行する：fix の合計が0であること。
• 古いデザインを示すサムネイル、プレビュー、ショールーム画像を更新し、再確認する。
• ビルドや開発サーバーが書き換えるファイル（例：tsconfig.json、next-env.d.ts）をコミット前に復元する。

9. 完了の定義

以下のすべてが真でなければならない：

• スコープ内のすべてのアイテムが監査された（スタイルシート、マークアップ、データ、サムネイル）。
• audit.py が fix: 0 を報告する。残っているすべての check ヒットに判定がある。
• すべての例外が保持リストにあるか、理由付きの deslop-keep マーカーが付いている。
• すべてのページがレンダリングされ、1440pxと390pxで目視確認された。
• すべてのルートでコンソールエラーがゼロ、水平オーバーフローがゼロ。
• 型チェック、リンター、コピーチェック、プロダクションビルドがパスする。
• プレビューとサムネイルが更新された。
• ユーザーの承認なしにプッシュまたは公開されたものはない。

10. 報告

以下の形式で短い報告を終了する：

1. スコープ： カバーした内容（サイトとページの数）。
2. 削除したもの： 特徴ごとに、何を変更したかとおおよそのインスタンス数。
3. 意図的に保持したもの： 各例外とその理由。
4. 修復したもの： 見つけて修正したレイアウトの破損。
5. 検証したもの： 各チェックとその結果。
6. 未完了項目： 行われていない、または検証されていないものを明確に記載。

実践で見られる落とし穴

• ヘッドレスブラウザのプロファイルでディスクがすぐにいっぱいになる。一度に1ページずつキャプチャし、各プロファイルを削除し、空き容量を監視する。ディスクがいっぱいになるとシェルと開発サーバーが壊れる。
• ユーザーの開発サーバーを停止しないこと。別のポートで自分のサーバーを起動し、終了したら停止する。
• クラス名だけでマッチングすると機能的なラベルを削除してしまう。位置と要素タイプでマッチングすること。
• データ駆動のタイトルやテンプレートリテラルのページタイトルは、JSXのみの見出しスキャンでは見逃される。スクリプトは title:、heading:、title= もチェックする。
• 親サイト、データファイル、またはサムネイルをスキップするパスは完了ではない。

特徴のない新しい作業のデザイン

テンプレートではなく主題から始める：業種やオーディエンスに合わせて選んだ1つのディスプレイフェイスと1つのテキストフェイス、意味のある1つのアクセントカラー、0～6pxのコーナー、センテンスケースのラベル、ピリオドのない見出し、アイブロウなし、順序が重要でない限り番号付きセクションなし、プレースホルダーラベルの代わりに実際のコピー、そしてビジネスに関する真実に結びついたすべての装飾要素。作業を引き渡す前に audit.py を実行すること。