ui-ux-design-system

UI UX デザインシステム

概要

落ち着きがあり、プレミアムで、システムを最優先するアプローチで、プロダクト UI を設計またはレビューする際にこのスキルを使用します。装飾的なコンセプトアートではなく、アプリケーション UI や実際のワークフロー画面を対象としています。

ワークフロー

1. 画面の目的、ユーザーの目標、主要なアクションを 1 つ定義します。
2. スタイリングの前にページ構成を決めます。
   • トップバーまたはコンテキスト行
   • イントロまたは概要
   • メインの作業領域
   • 補助パネル
   • 二次的な詳細
3. references/design-system-skills.md のデザインルールを適用します。
4. 再利用可能なコンポーネント、セマンティックトークン、レスポンシブレイアウト、実際の状態を使って実装します。
5. 画面を最終確認します。
   • 階層が明確である
   • アクセントが控えめである
   • カードに統一感がある
   • 空、読み込み中、エラーの各状態がある
   • モバイルレイアウトでも問題なく機能する

デフォルト

• ニュートラルを基本とするサーフェス
• プレミアムな SaaS プロダクトのトーン
• ダークモードを優先しつつ、ライトモードにも対応
• 明確な主要アクションを 1 つ
• その場しのぎの div の寄せ集めより、再利用可能なコンポーネントを優先
• セマンティックカラーはステータスにのみ使用

このスキルの用途

• 社内プロダクトのページ、ダッシュボード、ビルダー、設定、エディター、テーブル、モーダル、ドロワーを設計する
• UI の階層、余白、トークン、状態、レスポンシブ対応をレビューする
• 雑然とした、または一貫性のない UI を、統一感のあるシステムへリファクタリングする
• カード、タブ、チップ、アラート、テーブル、サイドパネルをいつ使うか判断する

リファレンス

システム全体が必要な場合は、references/design-system-skills.md を参照してください。

• デザイン哲学
• トークン
• 余白、角丸、シャドウ、タイポグラフィ
• デスクトップ、タブレット、モバイルのレイアウトルール
• コンポーネントルール
• AI プロダクトのパターン
• アクセシビリティとレスポンシブ対応

制約

• 既存のコードベースで作業する場合は、既存のプロダクトパターンを優先してください。
• 画面を「特別」に見せるためだけに、システムを損なう装飾的なスタイルを導入しないでください。
• 明示的に求められない限り、カラフルで雑然としたダッシュボードは避けてください。
• コンセプトアートではなく、本番環境で使える品質に仕上げてください。