frontend-design-deslop

質問： 環境の質問ツールを使ってユーザーに質問してください。質問を通常の文章として書いてはいけません。一度に1つの質問をし、タップできる選択肢を2〜4個提示して、回答を待ってください。環境に質問ツールがない場合は、同じ選択肢を提示しながら、通常の文章で一度に1つずつ質問してください。

フロントエンドデザインのスロップをなくす

AI が生成する UI がありきたりに見える理由は2つあります。

1. 制約がない。 モデルは、2019〜2024年のウェブコードの統計的な中央値をサンプリングします。Tailwind UI の bg-indigo-500、Inter、角丸のカード、柔らかな影などです。何もない状態をプロンプトだけで克服することはできません。
2. 何をデザインするのかを把握する前に、デザインを始めている。 企業のランディングページ、クリエイティブなポートフォリオ、開発者向けツールのランディングページ、分析ダッシュボード、EC の商品ページには、デザイン上の共通点がほとんどありません。成果物の役割にそぐわない美しい美学は、それ自体がスロップです。

解決策は、ブランドデザインから取り入れた規律です。戦略がデザインを導き、美学を先行させません。

1. まず言葉を決めます。これは何か、誰のためのものか、どのような印象を与えるべきかを表す形容詞は何か。
2. その言葉をタイポグラフィと配色のシステムに落とし込みます。
3. トークンを使って構築します。
4. 仕上げのレイヤーを適用します（レイアウト、コンポーネント、モーション、アイコン、画像、ダークモード、アクセシビリティ）。
5. 監査します。

固定された禁止リストではなく、収束の仕組みを対象にしてください。スロップの特徴は時間とともに変化します（2022年は紫のグラデーション、2026年はクリーム色の背景とイタリック体のセリフ書体を使ったヒーロー）。

このスキルは2つの役割を同時に果たします。AI のデフォルトの見た目からスロップをなくすことと、優れたアプリケーションをデザインすることです。雑なコンポーネント、弱いレイアウト、考えの足りないモーションの上に独自のテーマを載せても、素人っぽさは残ります。あらゆる選択の根拠となる仕組みは references/design-theory.md にあります（階層、ゲシュタルト、CRAP、シグナル対ノイズ、アフォーダンス、インタラクションの法則）。一度読めば、残りはルールに従うのではなく、理由を考えられるようになります。

質問をする（重要）

ユーザーへの質問はすべて、質問ツールを通じて行ってください（上記の 質問： の指示を参照）。通常の文章として質問してはいけません。質問項目は豊富に用意されていますが、選んで尋ねてください。詰問してはいけません。

• 関連する質問をまとめ、それぞれに具体的な選択肢を2〜4個提示します。
• デザインシステムを変える、重要度の高い質問だけを尋ねます。
• まず文脈から推測し、もう一度尋ねるのではなく、推測した内容を確認します。

フェーズ 0：言葉を見つけ、方向性を固める（コードを書く前に、まず実施）

コードを書く前に、プロジェクトのルートと docs/ などの一般的な場所に、既存の DESIGN.md があるか確認してください。

• 存在する場合 — 内容を読み、そこで定められたトークンを尊重し、すでに答えがある質問は省き、最初からやり直すのではなく内容を拡張してください。
• 見つからない場合 — 以下の3項目を、ピクセルに取りかかる前に決めてください。全手順、質問集、パーソナリティからトークンへの変換表については references/discovery.md を、タイプごとの優先事項については references/artifact-types.md を読んでください。

1. 成果物は何ですか？ 次のいずれかに分類してください：マーケティング／ランディングページ、料金ページ、SaaS アプリケーション、ダッシュボード／データツール、E コマース、マーケットプレイス、モバイルアプリ、AI 対話インターフェース、メール／ニュースレター、ブログ／エディトリアル出版物、オンボーディング／認証フロー、設定／管理／CMS、プレゼンテーション／スライド、ドキュメント／API リファレンス、ポートフォリオ／ブランドサイト、または references/artifact-types.md に記載されたその他のニッチなタイプ。タイプごとに最適化する要素が異なり、それぞれ固有のレイアウトの文法と情報密度があります。複合的な成果物（アプリを組み込んだマーケティングサイト、SaaS アプリ内の AI チャットなど）は、領域ごとに設計します。
2. 誰のために、何を実現しますか？ 対象者、ポジショニング（コーポレート、クリエイティブ、テクニカル、ラグジュアリー、遊び心のあるものなど）、そして最優先のアクションまたは成果を決めてください。
3. 言葉を固めます。 ビジュアルの検討に入る前に、ブランドを表す形容詞を3〜5個と、3語で表す美的なエッセンスを確定してください。これは最も効果の大きいインプットです。タイポグラフィ、色、情報密度、角丸、モーションを左右します。デザインではなく、戦略が方向性を決めます。

状況に応じて発見プロセスを進めてください。推測し、推測した内容を明示し、質問ツールを使って重要度の高い質問に絞って尋ね、1〜3件の参考例をもとに方向性を定めます。参考例が示されていない場合は、ウェブ検索で成果物のタイプとポジショニングが一致する質の高い最新事例を探し、それを発想の土台として応用してください。成果物のタイプ、ポジショニング、形容詞が確定するまで先へ進まないでください。一般的な依頼（ありふれた別のダッシュボードや SaaS のランディングページなど）で、そのカテゴリー自体に新しい示唆が少ない場合は、同カテゴリー内でさらに創造性を求めるのではなく、参考例の検索範囲を製品のカテゴリー外にも広げてください。詳しくは references/divergence.md を参照してください。

フェーズ 1：戦略をデザインシステムに落とし込む（ゲート）

以下のコミットメントを、簡潔に文章で示します。それぞれは直感ではなく、フェーズ 0 に基づく必要があります。

1. 美学のコミットメント。 成果物と形容詞に合う、明確な方向性を一つだけ選びます。汎用的であることは失敗につながります。references/aesthetics-library.md を参照してください。ユーザーがブランドや参考例を示している場合は、それを応用します。選択する前に、実際の候補を 2～3 個導き出します。視認性のために調整する前に、最終候補を完全に採用します。また、装飾された表面だけでなく、素の構造もカテゴリの既定値と照らし合わせます。これらが重要な理由と、同じパスで再検討せずに行う方法については、references/divergence.md を参照してください。

2. タイポグラフィ（ブランド優先）。 好みではなく、ブランドの個性に基づいて書体を選びます。形容詞に分類を合わせ、コンテンツに適したモジュラースケール比を選び、タイポグラフィが濁らないよう、ディスプレイ用と本文用をコントラストのある組み合わせにします。メイン書体に Inter／Roboto／Arial／system を使ってはいけません。references/typography.md を参照してください。

3. カラー（適切さと差別化）。 ブランドと対象ユーザーへの適合性に基づいて色を選び、次に他と競合しない領域を見つけます（AI UI ではインディゴ／バイオレット系がレッドオーシャンです。要件で求められている場合を除き、避けてください）。主役となる色を一つ、際立つアクセントカラーを一つ、中間色、セマンティックな状態色を用意し、おおむね 60-30-10 の比率で配分します。OKLCH で定義します。references/color-oklch.md を参照してください。

4. トークン表（コンポーネントより先に出力）。 ディスプレイ用と本文用のフォント、書体スケール（比率と基本サイズを明記し、6 段階）、スペーシングの基本単位、最大 2 種類の角丸、影の方式を一つ（明確な境界線か、柔らかな浮き上がりのどちらか。同じ要素に両方は使わない）、役割別のカラーパレット（bg、surface、fg、muted、border、accent、accent-fg、success、warning、error）を含めます。surface は省略不可です。明度差による階層化（references/dark-mode.md を参照）の基準となる色です。すべてをトークン参照にし、16 進数や px を散在させません。初期セットには references/token-sets.md を利用してください。

5. シグネチャームーブ。 UI を記憶に残る、明確に既定と異なるものにする要素を一つ挙げます。プロジェクトごとに一つです。

6. アダプター。 使用するスタックの構文として、プレーンな CSS カスタムプロパティ、Tailwind v4 @theme、shadcn セマンティックトークンのいずれかを選びます。references/adapters.md を参照してください。references/token-core.css はポータブルな信頼できる情報源です。

フェーズ 2：システムをインターフェースに適用する（クラフト層）

トークンは UI に一貫性をもたらし、クラフト層は UI の質を高めます。これはスキルの「アプリケーションをデザインする」部分であり、AI の出力で最も省略されがちな部分です。

以下の各項目を成果物に適用し、必要に応じて該当するリファレンスを参照してください。密度と強調の度合いは成果物の種類によって異なります（references/artifact-types.md を参照）。ダッシュボードとランディングページでは、適用方法が大きく異なります。

1. レイアウトと構成。 意図を持って空間を構成します。基本となるスペーシング単位を定め、グループ内は詰め、セクション間にはゆとりを持たせます。意図的なグリッド（12 カラム、モジュール型、またはコンテンツに実際のばらつきがある場合はベントー型）を採用し、少なくとも 1 つはブリーフ固有のレイアウト上の工夫を取り入れ、余白で自信を表現します。中央揃えの最大幅カラムに頼る習慣から脱却しましょう。references/layout.md を参照してください。

2. コンポーネントと状態。 すべてのインタラクティブコンポーネントについて、初期状態だけでなく、状態の全マトリクス（デフォルト、ホバー、アクティブ、フォーカス、無効、読み込み中、エラー、選択済み）を明確にします。ボタン（色の意味ではなく重要度順にランク付け）、フォーム（適切なラベルと型、入力内容を保持するインライン検証）、テーブル（テキストは左揃え、表形式の数値は tabular-nums で右揃え、区切り線は控えめに）、ナビゲーション、オーバーレイ、空・読み込み中・エラーの各状態を適切に設計します。references/components.md を参照してください。

3. モーション。 モーションはコミュニケーションとして扱い、期間とイージングのトークンスケールに従います。デフォルトでは 300ms 未満のイーズアウトを使い、transform と opacity のみをアニメーションさせ、ポップオーバーはトリガーを起点に拡大し、高頻度のアクションは決してアニメーションさせません。references/motion.md を参照してください。

4. アイコングラフィ。 セット全体でグリッド、ストローク、角丸を統一します。未変更のスターターキット標準アイコンセットに見た目を決めさせないでください。references/iconography.md を参照してください。

5. 画像とイラスト。 画像はシステムとしてアートディレクションします。ストック画像や抽象画像より、実際のプロダクトのビジュアルを優先してください。AI 生成やストック画像特有のパターン（ノートパソコンを指さす人物、グラデーションの塊、企業向けメンフィス風デザイン、Midjourney の標準的な作風）は避けます。テクスチャやグラフィック上の仕掛けを使い、平板で凡庸なデザインから脱却してください。references/imagery.md を参照してください。

6. ダークモードとテーマ設定。 ダークモードが対象範囲に含まれる場合は、単純に反転するのではなく、きちんとデザインします。純粋な黒ではなく黒に近い色、純粋な白ではなくオフホワイトを使い、明度でエレベーションを表現し、アクセントカラーの彩度を抑え、すべてをセマンティックトークンで制御します。references/dark-mode.md を参照してください。

7. 構築時からアクセシビリティに配慮する。 WCAG 2.2 AA に準拠します。視認できる適切なフォーカス、キーボード操作への対応、ラベル、24px 以上のターゲット、色に依存しない情報伝達、動きの抑制を確保します。後付けするのではなく、最初から組み込みます。references/accessibility.md を参照してください。

構想をまとめ、デザインの方向性とクラフト上の判断が固まったら、具体的なアイデアやそのまま使える実装を探すために、関連性の高いデザインおよびコンポーネントカタログを厳選してユーザーに提案します。カタログはそのまま模倣するのではなく、確定したシステムを通して応用するためのインスピレーションとして紹介し、コンポーネントのライセンスを確認するよう促してください。リスト全体を一度に提示するのではなく、成果物の種類と段階に応じて選んでください。references/catalogs.md を参照してください。

フェーズ 3：DESIGN.md を作成する（永続的な成果物）

このスキルが生成するものはすべて、プロジェクトルートにある単一の DESIGN.md にまとめます。

• 発見したコンテキスト
• 確定した美的方向性と特徴的な工夫
• タイポグラフィとカラーのシステム
• トークン
• スペーシング、角丸、シャドウのルール
• クラフト層に関する判断（レイアウト、コンポーネント、モーション、アイコングラフィ、画像、ダークモード、アクセシビリティ）
• スロップ監査の結果

references/design-md.md のスキーマに従い、コンポーネントの構築前または構築と並行して作成、更新してください。DESIGN.md を唯一の信頼できる情報源とします。CSS、アダプター、コンポーネントが DESIGN.md と食い違う場合は、DESIGN.md を優先します。後続のセッションでは、フェーズ 0 で発見プロセスを再実行せず、このファイルを読み込みます。

トークン優先の生成ルール

• OKLCH の色：主役となる色に、シャープなアクセントを組み合わせます。均等に控えめな配色にしないでください。まずグレースケールで視覚的な階層を設計し、アクセントは最後に控えめに加えます。配分の目安は 60-30-10（ニュートラル／ブランド／アクセント）です。色付きの背景では、グレーに寄せるのではなく、同じ色相を暗く、彩度を下げて使います。セマンティックな状態色（成功、警告、エラー）を定義し、色だけで状態を伝えないでください。
• タイポグラフィ：個性のあるディスプレイ書体と洗練された本文書体を組み合わせ、比率を明示したモジュラースケールを使います。Fontshare／Google から選びます。書体ファミリーは 2〜3 種類に抑えます。
• 余白のリズム：関係性に応じて余白を変えます（グループ内は詰め、セクション間は広め）。どこでも均一な値を使うと、すぐに見抜かれます。
• 密度は成果物に合わせます。 ダッシュボードやプロ向けツールは高密度でも問題ありません。マーケティングやポートフォリオのページには余白が必要です。
• 実装の複雑さを美学に合わせます：マキシマリズムには凝ったディテールを、ミニマリズムには手抜きではなく、抑制と精密さを持たせます。

絶対に避けること（ネガティブプロンプト）

一般的な AI 生成風の美学は絶対に避けてください。使い古されたフォント（Inter、Roboto、Arial、プライマリ書体としての system-ui）、ありきたりな配色（特に白や暗色の背景に紫／インディゴ／バイオレットのグラデーション）、ヒーロー＋3 つの機能カード＋推薦文＋CTA だけの定型構成、見出しの上にアイコンタイルを置く機能カードのテンプレート、カードの側面にアクセント用の枠線を付けるデザイン、同じ要素に細い枠線とぼんやりしたドロップシャドウを重ねること、見出しや数値のグラデーションテキスト、装飾目的のグラスモーフィズム、小さなカードを過度に丸くすること（角丸半径が 16px を超える）、反射的にクリーム色／ベージュの背景を使うこと、バウンス／弾性イージングや何にでも付けるマイクロインタラクション、構造上の目的がない装飾的なグリッド線の背景や放射状のスポットライト状の光彩、実際にライブではないコンテンツにパルスするステータスドットや自動スクロールするマーキー、実際のイラストの代わりに手書きでコードした SVG マスコット。個性のあるフォント、一貫性のある意志の明確なパレットを使い、動きはインタラクションに役立つ場合にのみ取り入れてください。

仕上げの段階で絶対に避けること：静止状態しかないコンポーネントを出荷しないでください。プレースホルダーテキストをラベルとして使わないでください。重要度ではなく意味に応じてボタンを色分けしないでください。表の数値列を中央揃えにしたり、数値に等幅数字以外を使ったりしないでください。変更していない shadcn／Tailwind のデフォルトアイコンセットに見た目を決めさせないでください。実際のプロダクトビジュアルが適切な場面で、ノートパソコンを指すストック写真の人物、グラデーションのブロブ、浮遊する球体、光沢のあるアイソメトリックなテックイラスト、企業風のメンフィス調人物、未加工のデフォルト Midjourney 画像を使わないでください。ライトパレットを反転させただけのダークモード、純粋な黒の背景、純粋な白のテキスト、反射的に色付きの光るボックスシャドウを使わないでください。レイアウト関連のプロパティ（width／height／top／left）をアニメーションさせたり、prefers-reduced-motion を無視したりしないでください。フォーカスアウトラインを代替手段なしに削除したり、色だけで意味を伝えたり、24px 未満のターゲットを出荷したりしないでください。

完成前のセルフ監査

生成した UI を references/slop-checklist.md に照らして実行し、スコアを付けます。

1. references/artifact-types.md に記載された成果物タイプの優先事項を満たしていることを確認します。ポートフォリオ作品としての印象がないダッシュボードや、明確な主要アクションがないランディングページは、どれほど美しくても不合格です。また、タイプと色の選択が、決定済みの形容詞に合っていることも確認します。
2. 仕上げの品質を確認します。コンポーネントにすべての状態を網羅した状態マトリクスがあること、レイアウトにリズムと意図的な変化があること、モーションが情報を伝え、動きを抑える設定に対応していること、アイコンが一貫したシステムに基づいていること、画像が既製素材や AI 生成の粗悪なものではないこと、ダークモード（ある場合）が単なる反転ではなく設計されていることを確認します。
3. references/accessibility.md のアクセシビリティゲート（フォーカス、キーボード操作、コントラスト、ターゲット、色への依存がないこと）を実行します。アクセシビリティは合否判定のゲートであり、あれば望ましいというものではありません。
4. DESIGN.md の美的なコミットメントを、実際のレンダリングと照らし合わせ、初めて見るかのように読み直します。また、references/divergence.md §6-7 の基本構造チェックを行います。個々の兆候をチェックリストで確認しただけでは、依然としてありきたりな出力が問題なく見えてしまうことがあります。
5. 兆候がひとつでも見られる場合、または適合性に問題がある場合は、提示する前にそのセクションを再生成します。
6. DESIGN.md の slop-audit セクションに結果を記録し、チェンジログを更新します。その際、使用した成果物タイプ、ポジショニング、形容詞、美的スタイル、タイポグラフィシステム、カラーパレット、特徴的な工夫を明記します。

すべてのチェック項目は、単一のビルド内で検出できます。モデルが検証できない世代間のルールを作り出さないでください。一部の項目はソースだけでなく、レンダリングされたページが必要です（references/slop-checklist.md の「レイアウトの欠陥」と「ビルドの正確性」のセクションを参照）。スクリーンショットまたはライブブラウザーを利用できる場合は、それらの項目も必ず実行してください。

参照ファイル

必要に応じて読み込みます。

基盤とインテーク：

• references/design-theory.md - あらゆる選択の背後にある仕組み：階層、ゲシュタルト、CRAP、シグナル対ノイズ、アフォーダンス、インタラクションの法則。早い段階で一度読みます。
• references/discovery.md - デザインのインテーク：質問とツールのプロトコル、言葉へのコミットメント、質問バンク、パーソナリティからトークンへの変換表。Phase 0 の開始時に読みます。
• references/design-md.md - DESIGN.md のスキーマと永続化の規約。このスキル全体の永続的な成果物です。Phase 0（既存ファイルの内容を取り込むため）と Phase 3（ファイルを書き込むため）に読みます。
• references/artifact-types.md - アーティファクトの分類：タイプごとの優先事項、レイアウトの文法、密度、配置のバリエーション、アンチパターン。Phase 0 の開始時に読みます。
• references/divergence.md - モデルが同じコンセプトに収束する理由と、本当の多様性を生み出す方法：自分で選ぶのではなく、導き出してから外部で選択する、借用した形を具体的に制作されたシステムに根付かせる、曖昧さを加える前に完全にコミットする、スタイルを適用した表面とは別に素の構造を確認する。design-theory.md とあわせて一度読みます。Phase 0／1 とセルフ監査で適用します。

システム（Phase 1）：

• references/typography.md - タイポグラフィ戦略の全容：ブランドを優先した選定、分類マトリクス、モジュラースケールの比率、組み合わせ、可変フォント、アクセシビリティ、質の低い生成物を避けるためのフォント調達と禁止リスト。
• references/color-oklch.md - カラー戦略の全容：適切さ、ブルーオーシャンによる差別化、調和のシステム、60-30-10、アーキタイプのマップ、OKLCH の基礎、Radix のロール、アクセシビリティ。
• references/aesthetics-library.md - 特徴的な特性を定義したスタイルファミリーと、ディスカバリーから独自のテーマを生み出す方法。
• references/token-sets.md - すぐに使える個性的なパレット。各パレットにシグネチャーとなる工夫と、共通のモーショントークンを含みます。
• references/token-core.css - モーショントークンを含む、フレームワークに依存しない OKLCH トークンのコア。
• references/adapters.md - Tailwind v4／shadcn／プレーン CSS のトークン構文。

仕上げ（Phase 2）：

• references/layout.md - 余白のリズム、グリッド（12 列、弁当箱型）、非対称、ホワイトスペース、スキャン、密度、レスポンシブ、レイアウトの参考例。
• references/components.md - ボタン、フォーム、テーブル、ナビゲーション、オーバーレイ、フィードバック、空／読み込み中／エラーの状態に関する状態マトリクスとパターン、およびコンポーネントの参考例。
• references/motion.md - 持続時間とイージングのスケール、スプリング、変形の原点、パフォーマンス、動きを抑える設定、モーショントークンと参考例。
• references/iconography.md - グリッド、線の太さ、角の丸み、視覚的なバランス、デフォルトのアイコンが質の低い生成物になるケース、差別化の方法、アイコンの参考例。
• references/imagery.md - アートディレクション、写真の方向性、AI／ストック画像の特徴、イラストのシステム、グラフィック要素とテクスチャ、画像の参考例。
• references/dark-mode.md - ダークモードを反転ではなく、デザインされたモードとして扱う方法：明度による奥行き、彩度を下げる、セマンティックトークンによるテーマ設定、ダーク／テーマトークン。
• references/accessibility.md - WCAG 2.2 AA の統合的なガイド：コントラスト、フォーカス、キーボード、ターゲットサイズ、フォーム、ARIA の基礎、動き、テスト。
• references/catalogs.md - コンポーネントカタログ（shadcn/ui、21st.dev、Magic UI、Aceternity、Origin、Cult、Kibo、shadcnblocks）と参考ギャラリー（Awwwards、Behance、Dribbble、Mobbin、Land-book、Page Collective、Godly、SaaS Landing Page、Lapa Ninja、Refero、Screenlane）。転用とライセンスに関する注意点も含みます。コンセプト策定の最後に、関連するものを絞って提案します。

監査：

• references/slop-checklist.md - セルフ監査（カタログの確認と品質ゲート）。UI を仕上げる前に読みます。