mcpField
U
ux-design-principles

ux-design-principles

github.com/blink-newデザイン・UI40 回インストール
リポジトリ

ux-design-principles について

ux-design-principles は、デザイナーやエンジニア向けの UI/UX リファレンスです。操作への反応や視覚的階層などを扱い、AI コーディングアシスタントに UI の変更を伝える用語と指針もまとめています。

主な機能

  1. 01操作フィードバックと状態の原則
  2. 02視覚的階層とレイアウトの指針
  3. 03タイポグラフィと色の原則
  4. 04ダークモード、シャドウ、オーバーレイ
  5. 05AI コーディングアシスタント向け UI 用語

活用シーン

  1. 01インターフェースの操作状態の確認
  2. 02フォント、色、余白の選定
  3. 03AI コーディングアシスタントへの UI 変更の説明

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/blink-new/claude --skill ux-design-principles

インストール後、Claude Code で/ux-design-principlesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

text/
affordances-signifiers.md
color-theory.md
dark-mode.md
engineering-rules.md
feedback-states.md
glossary.md
grids-layouts-spacing.md
icons-buttons.md
micro-interactions.md
overlays.md
shadows.md
typography.md
visual-hierarchy.md

詳細

UX デザインの原則

出典：「10分以内でわかる UI/UX のあらゆる概念」— Kole Jain（2026年3月、138K 回再生） Figma ファイル：https://www.kolejain.com/resources?scrollTo=every-ui-concept

すべてを支配する唯一のルール

「ユーザーが何かをしたら、必ず応答があるべきです。」

クリック、ホバー、フォーカス、エラー、読み込み、成功など、あらゆる操作に、目的のある視覚的な応答が必要です。これは、UI/UX デザインにおいて最も重要な原則です。

章の概要

章中心となる概念簡単なルール
アフォーダンスとシグニファイアUI は見た目を通じて、その仕組みを伝える優れた UI は使い方を自ら教えます
ビジュアルヒエラルキーサイズ、位置、色によって、ユーザーが最初に見るものを制御します最も重要なものほど、大きく、太字で、上に配置します
グリッド、レイアウト、余白構造とゆとり余白 > 固定的なグリッド
タイポグラフィフォントの選択、サイズ、文字間隔サンセリフフォントを1種類、サイズは最大6種類
色彩理論ブランドカラー＋意味を伝える色＋カラースケール装飾ではなく、目的を持って色を使います
ダークモード影ではなく、明るさで奥行きを表現暗い背景には、より明るいカードを配置します
シャドウライトモードで高さと奥行きを表現不透明度を低く、ぼかしを強くします
アイコンとボタンサイズ、パディング、ゴーストボタンアイコンのサイズを行の高さに合わせます
フィードバックと状態すべての要素に複数の状態が必要ですボタンには最低4つの状態を用意します
マイクロインタラクション動きで確信と喜びを生み出すアニメーションで操作を確認します
オーバーレイ画像にグラデーションとぼかしを重ねる線形グラデーションの後に段階的なぼかしを加えます

エンジニア向け：AI アシスタントへの伝え方

AI コーディングアシスタントに UI を説明するときは、正確な用語を使いましょう。

BAD:  "Make the button look better"
GOOD: "Add hover, active/pressed, and disabled states. Use ghost button style
       (transparent background, border only) as secondary CTA next to primary."

BAD:  "Fix the dark mode"
GOOD: "In dark mode: elevate card by lightening surface relative to background,
       remove box-shadow, lower border opacity, reduce chip saturation/brightness."

BAD:  "Add some animation"
GOOD: "Add micro-interaction on copy button: slide up a 'Copied!' chip on click
       that auto-dismisses after 1.5s. This confirms the action."

BAD:  "Fix the spacing"
GOOD: "Apply 4-point grid: all spacing values must be multiples of 4.
       32px between top-level sections, group related items with 8-16px."

簡易リファレンスの全内容は、text/engineering-rules.md をご覧ください。

10のデザイン原則

  1. あらゆる操作には応答が必要です — 状態が何も伝えずに変化することは決してありません
  2. コントラストがヒエラルキーを生み出します — 大きいものと小さいもの、鮮やかなものとグレーのもの、太字と通常の太さ
  3. 余白もデザインの一部です — 要素にゆとりを持たせます。セクション間の余白はデフォルトで32px
  4. 色は意味を伝えます — 青＝信頼、赤＝危険、黄＝警告、緑＝成功
  5. フォントは1種類で十分です — サンセリフを1種類選び、太さとサイズを変えます
  6. アイコンのサイズを行の高さに合わせます — 本文の行の高さが24pxなら、アイコンも24px
  7. 影が最初に目に入るなら、強すぎます
  8. 画像は常にヒエラルキーを向上させます — 色を加え、読み取りを助け、視線を引きつけます
  9. ダークモードでは、影ではなく、より明るい面で高さを表現します
  10. 単色のオーバーレイより線形グラデーションが優れています — 画像を保ち、テキストを読みやすくします

詳細解説

コメント

Markdown 対応