アンチスロップWebデザイン
原則：デフォルトのモデルは、これまで見たすべての平均値に収束します。このスキルは、構築前に決定を強制し、エビデンスで検証することで、その収束を打ち破ります。
使用タイミング
- ページ、セクション、ヒーロー、カード、ナビゲーション、その他あらゆるUIを構築・リデザインするとき。
- Webサイトやスクリーンショットを「これAIが作ったように見えるか？」という観点で監査するとき。
- 新規プロジェクトでフォント、カラーパレット、スペーシング、モーションを選ぶとき。
Design DNA（コードに触れる前に必須）
すべてのプロジェクトは最初に以下を宣言します。
- 名前付きパレット（例：「制御室」）：インク/ベース色1、サーフェス色1、アクセントシグナル色1、データアクセント色1、アラート色1。HEXまたはOKLCHで指定し、AAコントラストを確認済みであること。
- 役割を持つタイポペア：ディスプレイ用、本文用、モノスペース技術用、数字用。1つのフォントですべてをまかなわないこと。
- 主要セクションのアスキーアートによる骨組み。
- ヒーローの構成：1280×720のノートパソコンでスクロールせずに見えるもの。
- 署名要素：このサイトだけが持つユニークなもの（ライブグラフィック、グリッドパターン、カーソル、独自のトランジションなど）。
- モーションレベル（0～10）と
prefers-reduced-motionに対する動作。
これらはプロジェクトの docs/design-dna.md に書き留め、ビルド途中で即興で変更してはいけません。
2つのアンチスロップテスト
- テスト1： 製品カテゴリだけを知っていて、誰かがパレットを推測できるか？ → はいの場合は作り直し。
- テスト2： カテゴリとアンチリファレンスから美的ファミリーを推測できるか？ → はいの場合は作り直し。
厳格な禁止ルール（該当する場合はその軸を再生成）
タイポグラフィ分野： Inter、Roboto、Open Sans、またはシステムデフォルトフォントを主役として使用すること。すべてのセクションで見出しのサイズが同じこと。
カラー分野： パープル/インディゴ/バイオレットのグラデーション、純粋な #fff と #000、ネオングリーン＋黒の「デブポートフォリオ」風、クリーム＋テラコッタ＋セリフ体、1ページに2つ以上の装飾的なグラデーション。
レイアウト分野： 中央揃え積み上げヒーロー（キッカー＋H1＋サブタイトル＋2ボタン）、3等分のアイコン付きカラム、カード入れ子のベントー、カード側面のアクセントボーダー、グラスモーフィズム、装飾的なスパークライン付きのフェイクダッシュボード、登場時にフェードインアップ、同一構造のセクションが連続すること。
ビジュアルコンテンツ分野： 架空のスクリーンショットや浮かぶモックアップ、ストック画像、実際の製品の代わりとしてのAI生成画像、機能アイコンとしての絵文字、文脈のない「お客様の声」ロゴ行。
コピー分野： 「Elevate your...」「Unlock」「Supercharge」「Take your X to the next level」「The future of...」「Seamlessly」「Effortless」、装飾的なダッシュ、緑点付き「Available for work」バッジ、3種類以上の異なるボタンタイプ。
構築ルール
- テキストは実際のHTML（インデックス可能）であり、canvas、SVG、画像内のテキストではないこと。
- 意図を持ったグリッド：コンテンツタイプごとに異なる幅、意図的にずらした配置、ボックスではなくサイズとウェイトによる階層。
- 宣言された（4/8）スケールによるスペーシング、ランダムな値は禁止。
- 実際のインタラクション：ホバー、フォーカス、キーボード、ローディング状態と空状態。応答しない装飾的なものは禁止。
- 目的のあるモーション：1回だけ出現し、ループしない。
transformとopacityをアニメート。明示的にprefers-reduced-motionを尊重する。 - 独創性よりアクセシビリティ：AAコントラスト、可視フォーカス、44pxのタッチエリア、最小幅375px。
アンチスロップ監査（スクリーンショット付き）
- Playwright CLIを使用してデスクトップ1440とモバイル375のキャプチャを取得（キャプチャなしで意見を述べないこと）。
- 禁止ルールリストを確認し、検出されたパターンをエビデンス（セレクタ/スクリーンショット）とともに命名する。
- 2つのテストを適用する。
- フォーカス、キーボード、計算されたコントラスト、reduced-motionを確認する。
- 出力：パターン → エビデンス → 具体的な修正。パターン数0 = 合格。
サポートツール
- キャプチャと検証用のPlaywright CLI：スキル
web-qa-visualを参照。 - 実際のアセットとロゴ：スキル
web-assets-realesを参照。 - テキスト：ゲート
no-ai-slop。 - 過去のビルド記録（骨組み/パレットの重複防止）：プロジェクトの
docs/design-dna.md（追記専用）。