Communitygithub.com

Calm, Dense Design(落ち着きのある密度の高いデザイン)

情報量を減らさず、ノイズを増やさない——LinearとThings 3から学んだ、落ち着きと密度を両立させるAIエージェント向けデザインスキル。

Calm, Dense Design(落ち着きのある密度の高いデザイン) とは?

このスキルは、AIコーディングエージェント(Claude Code、Cursor、Codexなど)がUIデザインの判断を行う際に適用できる、プラットフォーム非依存のデザイン思想を提供します。Linearの「密度のあるノイズレス」、Things 3の「弱さのない落ち着き」という二つの教訓を核に、画面設計や批評を体系的に行うための5つの原則、タイポグラフィとモーションの指針、そして「ドラマテスト」と「落ち着きテスト」という二つの決断テストを含みます。エージェントはこれを参照することで、UIの密度を保ちながらユーザーの認知負荷を下げ、主要タスクを明確にするデザイン判断が可能になります。具体的な実装値やプラットフォーム固有のルールは別のスキルファイルに委ねられており、本スキルはあくまで汎用的な「味覚」とその適用プロセスを提供します。

対応✓Claude Code✓Codex CLI✓Cursor
npx skills add Binlogo/agent-skills

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Calm, Dense Design(落ち着きと密度のデザイン)

これは「味覚」であって「スキン」ではありません。LinearとThings 3は、判断のための参照です——多くの情報をノイズなく提示する方法、そして漠然とせずに落ち着きを保つ方法。ダークテーマやパープルのアクセントカラー、ブルー/グリーンのブランドカラーを借りることは、その味覚を借りることではありません。

二つの教訓がほとんどの価値を担います:

  • Linear —— ノイズのない密度。 抑制された階層で密度の高い作業を表示する。
  • Things —— 弱さのない落ち着き。 詳細が表示される価値を得るまでは隠すことで、メインの画面を落ち着かせる。画面を空にすることで実現しない。

原則

それぞれがルールと、それによって強制されるトレードオフです。画面を構築または批評するときに適用します。

  1. 獲得していない注意を奪い合わない。 クローム、区切り線、メタデータ、非アクティブなタブ、繰り返されるアイコンは後退し、メインコンテンツと唯一の主要アクションは叫ばずに最初に読まれる。
  2. 構造は感じられ、見えない。 視覚的な配置、一貫したスペーシングのリズム、0.5~1pxの区切り線、透明度の段階、グループ化された背景、タイポグラフィから階層を取得する——ではなく、太いボーダー、大きなシャドウ、装飾的なグラデーション、彩度の高いパネル、アイコンコンテナから取得する。
  3. 乱雑さのない密度。 予測可能な配置と段階的な詳細表示を備えたコンパクトな行。該当しないもの:小さく読めないテキスト、すべての行ですべてのコントロールを露出させること、「プレミアム」として販売される過剰なパディング。
  4. 明確にする落ち着き、隠す落ち着きではない。 落ち着きは、明確な階層とひとつの明白な次のアクションから生まれる——薄い余白、静かさを装った低コントラストのテキスト、装飾として使われる空の状態からではない。
  5. 抑制された意味的色。 アクセントは、選択、フォーカス、重要な状態、ポジティブ/完了状態を示す——決して装飾ではない。システムアクセントを尊重し、すべてをブランドカラーで塗り替えない。「完了の緑」は意味的な手がかりであり、アプリのプライマリカラーではない。

タイポグラフィとモーション

  • タイポグラフィ: 強い理由がない限りシステムフォントを使用。階層はサイズ、ウェイト、不透明度、配置から生まれる。方向:画面タイトル(明確で、大きすぎない)→ 行タイトル(中程度のウェイト)→ メタデータ(小さめ、低不透明度)→ ステータス(コンパクトで意味的、バッジ過多ではない)→ 本文(短く、読みやすい)。
  • モーション: 連続性や状態変化を説明する(コンポーザーが現れる、選択が移動する、インラインのステータス更新)。決して装飾的ではない。常に動きを抑えた設定を尊重する。

二つの決断テスト

  • ドラマテスト: ある装飾が視覚的なドラマを追加するが、方向性、速度、確信度、タスク完了を改善しない場合——削除する。
  • 落ち着きテスト: 「落ち着き」によって階層、密度、次のアクションが読み取りにくくなる場合——それは落ち着きではなく、漠然さだ。引き締める。

セルフチェック

次の項目に対して画面を確認する。「いいえ」は好みではなく発見事項である:

  • 主要タスクは一目で明らかで、目で探す必要がないか?
  • 二次的なクロームは後退しているか、それとも競合しているか?
  • 行/項目は予測可能なグリッドとベースラインに揃っているか?
  • 画面が密度が高いのは有益だからか——それとも余白が過剰なためにスカスラか?
  • 色は状態を伝えているか、それともブランドの装飾か?
  • 区切り線、シャドウ、グラデーション、アイコンコンテナを削除しても何も失わないか?

さらに深く

references/in-practice.md —— 具体的な(実例となる)値、拡張された「推奨/避ける」リスト、およびレビューパス中にこの味覚を適用する方法。

このスキルの役割外

これはプラットフォーム非依存の味覚です。プラットフォームの慣習、コントロール、アーキテクチャは別に存在します:

  • Apple(iOS/iPadOS/macOS)UI + HIG + SwiftUI/AppKit + ビジュアルQA → apple-app-design-guidelines。
  • クロスプラットフォームのネイティブ感覚デスクトップアーキテクチャ(シェル + WebView + IPC) → native-feel-desktop。

味覚とプラットフォームが競合する場合、プラットフォームが優先される——それらのスキルに従ってください。

関連スキル