design-anti-slop

design:anti-slop

AIによるデザインのスロップは、美的な症状として現れる統計的な問題です。言語モデルは学習分布の中心付近をサンプリングするため、具体的な制約がなければ、同じランディングページや同じダッシュボードを何度も生成します。このスキルには、「使ってはいけない色」の禁止リストではできない、次の2つの役割があります。

• 生成前に具体性を強制することで、モデルが分布の平均以外からサンプリングできる材料を用意します。
• 生成後に、ビジュアル、構造、コンセプトの3つの層で収束を監査し、実際に問題がある最も深い層で修正します。

このスキルは、一般的なデザインの美意識、アクセシビリティ、コピーライティングは扱いません。扱うのはスロップの分類体系と、それを適用する3つのワークフローです。それ以外は、適切な担当に引き継ぎます。

モードの選び方

モードは3つあります。それぞれ起動条件、UX、出力が異なります。統合しないでください。

モードA — 生成前のブリーフ適用。 ユーザーがClaudeにランディングページ、ダッシュボード、アプリのUIの作成を依頼していて、スタイルブリーフを提示していない場合に起動します。該当する例：「Xのランディングページを作って」「SaaSのホームページを作って」「ダッシュボードを生成して」「ヒーローセクションのモックアップを作って」「Y向けのアプリをデザインして」。ブリーフがない場合は、コードを書く前に workflows/pre-gen-brief.md を読み、その手順に従います。

モードB — 生成後の監査。 ユーザーが既存のデザイン（スクリーンショット、公開済みURL、コードファイル、Figmaリンク、v0/Bolt/Lovableの出力）を提示し、レビューを依頼した場合に起動します。該当する例：「これってAIが生成したように見える？」「このデザインを批評して」「このページの問題点は？」「もっとありがちな感じをなくして」「このランディングページをこき下ろして」、または指示のないスクリーンショットのみの投稿。workflows/post-gen-audit.md を読み、その手順に従います。

モードC — 反復的なブラッシュアップ。 ユーザーがページの構造をすでに受け入れていて、再生成ではなく、深みや豊かさを求めている場合に起動します。該当する例：「もっと良くして」「アセットをもっと豊かにして」「もう少し奥行きを加えて」「まだ平坦な感じがする」「さらに押し進めて」「何が足りない？」。workflows/iterative-polish.md を読みます。プロトコルはアセットごとに進めます（洗い出し → 順位付け → データが乏しいものから豊富なものへと強化 → 検証）。反応的に見た目だけを付け足すことは禁止です。

依頼が曖昧な場合 — たとえば、ユーザーが草案を貼り付けて「改善して」と言った場合 — は、モードBを既定とします。その後、ユーザーがClaudeにゼロから再生成するよう依頼したら、その時点でモードAに切り替えます。ユーザーが構造を受け入れたうえで「さらに深掘りして」と依頼した場合は、モードCに引き継ぎます。

使い捨てや探索的な依頼の場合 — たとえば、「試しに使えるラフなものを作って」 — は、ブリーフの適用を省略して生成します。ただし、代わりに選んだ既定値を明示します（「指定がなかったためインディゴを使いました。決まったらセマンティックなパレットに置き換えてください」など）。そうすることで、ユーザーが何を行っているかを把握できます。

保存済みの好みとプロジェクトごとのブリーフ

メモリに保存された長期的な好み（「ユーザーは温かみのあるエディトリアルなパレットを好む」「ユーザーは一般的なベンツーグリッドが苦手」「ユーザーはH1に必ずセリフ体を使いたい」など）は、暗黙に適用する制約ではなく、繰り返して確認する既定値です。 先月のマーケティングサイトに合っていた好みが、今週のコンプライアンスツールにも合うとは限りません。好みを黙って適用すると、ユーザーが方向性を修正する機会を奪ってしまいます。

ブリーフを作成する際は、保存済みの好みを明示します。たとえば、次のように伝えます。

保存済みの好みでは、［温かみのあるエディトリアルなパレット、ベンツーグリッドなし、H1はセリフ体］となっています。このプロジェクトではこれを適用してよいですか？ それとも、別の設定にしますか？

ブリーフに反映する前に、ユーザーの確認（または方向転換の指示）を待ちます。保存済みの好みは、各軸の既定の回答に偏りを与える事前情報として扱い、それ自体を確定済みの回答として扱わないでください。

パターンカタログ

監査で使うすべてのパターン ID は、同じ階層にある3つのファイルに記載されています。パターンの兆候、根本原因、または修正方法を確認する必要がある場合は、該当するファイルを読んでください。記憶に頼らないでください。修正方法を根拠に基づいたものにするために、各項目が用意されています。

• patterns/visual.md — V1–V9。表層：色、タイポグラフィ、角丸、シャドウ、アイコン、ブロブ、ガラス風カード、3D のクレイ調イラスト。最も検出しやすく、劣化が最も早く、単独では最も効果が弱い層です。
• patterns/structural.md — S1–S9。構成：ヒーローのテンプレート、3つ並びの機能グリッド、ロゴの羅列、弁当箱型グリッド、KPI カードの行、汎用メニュー付きサイドバー。実際のスロップの大半はここにあり、他のスキルが最も見落としやすい層です。
• patterns/conceptual.md — C1–C7。コピーとプロダクトの実態：中身のない意欲的な見出し、動詞のスロップ、独自の視点の欠如、抽象的なデモ画像、捏造された統計、機能状態の欠落。レイヤー3に問題があれば、レイヤー1や2の修正は表面的なものです。

3つのファイルはそれぞれ独立しています。現在の作業に必要なものだけを読んでください。

修正方法は容易さではなく、レイヤーの順に優先する

複数のレイヤーに問題があるデザインでは、最も手軽だからという理由で、まずビジュアルレイヤーを直したくなります。しかし、その衝動を抑えてください。優れたヒーローの訴求、実際のプロダクトのスクリーンショット、Inter + インディゴを備えたデザインは、スロップではありません。ビジュアル面で独自性がないだけで、それは問題ない場合もあります。一方、完璧な独自のカラーパレットと美しい書体があっても、見出しが「仕事の未来を築こう」であれば、それはスロップです。

次の順で修正方法に優先順位をつけ、どのレイヤーを選んだか、その理由とともにユーザーに伝えてください。

1. まず、コンセプトの修正（レイヤー3）です。ヒーローの訴求に中身がない、またはデモが抽象的であれば、スタイルに手を加える前に修正してください。
2. 次に、構成の修正（レイヤー2）です。構成が「3つ並びのグリッド + KPI の行 + ロゴの羅列」であれば、配色を変える前に構成を修正してください。
3. 最後に、ビジュアルの修正（レイヤー1）です。より深いレイヤーに問題がない場合、またはユーザーが明示的に依頼した症状への迅速な対処としてのみ行ってください。

「これは問題なく、スロップではありません」と伝えることをためらわないでください。何もかも問題として指摘すれば、信頼を失います。問題なしという監査結果も妥当です。

他のスキルへの引き継ぎ — このスキルの範囲は意図的に限定されています

本質的な作業を別のスキルが担う場合は、その旨を伝え、該当するスキル名を挙げてください。ここで対応しようとしないでください。

状況	引き継ぎ先
スポット修正で対応しきれないレイヤー3のコピーの問題（C1 中身のない意欲的なヒーロー、C2 動詞のスロップ、C6 偽の具体性）	design:ux-copy
プロダクト全体で繰り返されるページ間の一貫性の問題／すべてが同じ画一的な問題（S6）	design:design-system
一般的なデザインレビュー（スロップパターンに関係しない階層、余白、コントラスト、インタラクション状態）	design:design-critique
監査で明らかになったアクセシビリティ上の懸念（C7 の状態欠落と一部重複）	design:accessibility-review
現在のデザインの修正ではなく、別の方向性をユーザーが求めている場合	design-ideation

長期的に取り組むチームにとって、最終的な解決策となるのはプロジェクト固有のデザインシステムです。該当する場合は、そのことを明確に伝えてください。このスキルは一時しのぎであり、システムではありません。

参照先のスキルがこの環境にインストールされていない場合は、その場でスポット修正し、制約を明示してください。たとえば、「本来は design:ux-copy の担当範囲です。ここでは簡単な書き換えを行いますが、より踏み込んだコピーの見直しはこのスキルの対象外であることをご了承ください」と伝えてください。

ステークスに応じた調整 — ワークフローをどこまで実行するか

アンチゴールでは「ステークスに応じて調整する」としています。具体的には次のとおりです。

対象	推奨する深さ
顧客向けランディングページ（実際に公開するもの）	モード A で 5 つの軸すべてを確認します。モード B の監査がすでにある場合は、全項目を監査します
社内管理ツール／ダッシュボードのモック	モード A で、主張とアセットの軸のみを確認します。タイポグラフィ／カラー／回避項目は、通常はテンプレートに沿っていれば問題ありません
使い捨ての探索的なモック（「だいたいの感じだけ見せて」）	ショートパスの代替手順を使い、ヒアリングは実施しません
単発のマーケティング実験	実際のユーザーに公開するなら 5 つの軸すべてを確認します。急ごしらえのテストならショートパスを使います

この表は「ブリーフを実施すべきか？」という問いへの答えです。独自の判断で進めないでください。

アンチゴール — このスキルが目指さないもの

これらは重要な前提です。いずれかの方向に逸れそうになったら、このセクションを読み直してください。

• 審美眼を押し付けるものではありません。 このスキルは、セリフ体よりサンセリフ体、ブルータリズムよりグラスモーフィズムなど、特定の美的スタイルを好むものではありません。流行ではなく、収束を指摘します。
• 反動で振り子のように揺れるものではありません。 「アンチスロップ」な見た目（粒状感、はみ出す文字、非対称な混沌）自体が、新たな収束先になりつつあります。そちらへ誘導しないでください。ユーザーにとって具体的に何が適切かを問わず、具体性を高める方向へ導いてください。
• 固定されたものではありません。 カタログにある具体的なパターンには、どれも有効期間があります。根底にあるデフォルトが変わったり、トレンドの周期が移り変わったりして、パターンが意味をなさなくなったら、それを指摘してファイルを更新してください。
• 禁止リストだけではありません。 否定だけでは、より見苦しいスロップが生まれます（Inter を禁止すると、モデルが Space Grotesk に収束します）。すべてのパターン項目には、「避ける」だけでなく改善の方向性も含まれています。
• 何でも確認しようとするものではありません。 ステークスに応じて調整してください。使い捨ての簡易モックに 5 軸のブリーフは不要ですが、実際に顧客へ公開するランディングページには必要です。
• チェックリストではありません。 このカタログは「すべての項目に当てはまれば合格」という基準ではありません。明確なスロップが 1 つあれば、境界線上のものが 5 つあるより重大です。レイヤー 3 の問題が 1 つ明確に見られたら、それを指摘して終了してください。見つけた V 層の一致をすべて挙げて、監査内容を水増ししないでください。

心に留めておく一文

目標は、AI の出力をより手作りらしく見せることではありません。このユーザー、この製品に固有の意図を、AI の出力に反映させることです。ブリーフが十分に具体的であれば、スロップのパターンは自然と現れなくなります。