less-is-more-ui

Less Is More UI

このスキルは、普遍的なデザインの公理を適用することで、AI エージェントがすっきりと機能的で落ち着いたウェブインターフェースを設計できるよう支援します。

目標は、削減を最優先の価値とするインターフェースを作ることです。すべての要素には存在する理由が必要です。そうでなければ、取り除かなければなりません。

本質を支える柱

1. 基礎（起源）

ミニマリストデザインの哲学的なルーツを理解します。詳細は docs/principles.md と docs/design-manifesto.md を参照してください。

• ミースの明快さ：装飾的な要素をすべて取り除きます。コンテンツそのものに語らせます。
• サリヴァンの論理：形態は機能に従います。すべての要素に、その目的を反映させます。
• ヴィニェリの規律：グリッド、書体、スケール、配置を、ひとつの完全なビジュアルシステムとして使用します。
• ラムスの体系的な簡潔さ：優れたデザインは理解しやすく、目立ちません。

2. 方法論（公理）

これらの普遍的な法則（詳細は references/axioms.md）を、思考の指針として適用します。

1. 正当性：すべてのピクセルに、存在する価値が必要です。
2. タイポグラフィの優位性：タイポグラフィがインターフェースです。ボックスではなく、サイズとウェイトを使います。
3. 素材の誠実さ：偽りの奥行き、影、スキューモーフィズムは使いません。
4. 近接性と余白：ホワイトスペースは、最も強力な構造ツールです。
5. 静かなグリッド：配置によって、目に見える境界線なしに秩序を生み出します。
6. 選択のパラドックス：選択肢を制限することで、明快さと意図を高めます。

3. インターフェース（実装）

「削ぎ落とす工程」を実行し、docs/design-process.md に記載されたプロセスに従います。

1. ノイズを特定する：影、グラデーション、重複したアイコン、装飾的な境界線を探します。
2. 取り除いて再評価する：ノイズを削除します。インターフェースが引き続き機能するなら、取り除いたままにします。
3. タイポグラフィを洗練する：タイポグラフィの階層とホワイトスペースを改善して補います。

同梱リソース

• index.html：すべての原則を実際に紹介し、試せる「本質のミュージアム」。
• assets/css/reset.css：すべての CSS で必須となるモダニズムの基盤。
• assets/css/style.css：システムの美学を実現する中核的な実装。
• references/tokens.css：本質を捉えたデザインシステムのトークン。ハードコードした16進数の値や汎用単位ではなく、必ずこれらのセマンティック変数を使用してください。
• references/axioms.md：デザイン上の判断を支える論理的な基盤。
• references/case-studies.md：ノイズの多いパターンと本質的なパターンの例。
• references/components.md：本質を捉えたトークンを使用するミニマリストなコードスニペット。
• docs/principles.md：哲学的な基礎を詳しく解説します（ミース、サリヴァン、ヴィニェリ、ラムス）。
• docs/design-manifesto.md：落ち着きがあり理性的なインターフェースを実現するための全体的なビジョン。
• docs/design-process.md：ミニマリストな UI を構築するためのステップごとの方法論。
• docs/animations.md：控えめで機能的なマイクロインタラクションの基準。
• docs/accessibility.md：視覚的なノイズを増やさずに WCAG への準拠を維持する方法。
• docs/typography.md：システムフォントとオープンソースフォントのモダニズム的な組み合わせガイド。
• docs/responsive.md：積み重ねるのではなく、削減によって小さな画面に対応する方法。
• docs/anti-patterns.md：取り除くべき視覚的なノイズをすばやく確認するチェックリスト。
• docs/design-checklist.md：UI を提示する前の最終確認チェックリスト。

タスクに必要なリソースだけを読み込みます。思考の指針として references/axioms.md から始め、 CSS を記述する前に references/tokens.css を確認します。ボタン、フォーム、カード、ナビゲーションなどの インターフェースの基本要素を実装する前に references/components.md を確認してください。期待される 最終的なビジュアル品質の参考として index.html を使用します。

このスキルを使う場面

明快さ、抑制、プロフェッショナルな仕上がりが重要となる UI、フロントエンド、ウェブデザインのタスクで使用してください。特に次のような用途で効果を発揮します。

• ダッシュボード、社内ツール、またはデータ量の多い画面の構築。
• プロフェッショナルで、意図が明確で、落ち着いた印象を与えるランディングページの作成。
• 複雑なユーザーフローの簡素化や、既存の「ノイズの多い」コードベースのリファクタリング。
• 視覚的な装飾よりも明快さと速度を優先する、あらゆるレイアウトの設計。