saas-product-ui-system

SaaS プロダクト UI システム

概要

本格的な SaaS プロダクトの開発では、このスキルをデフォルトの UI/UX およびフロントエンドデザインのワークフローとして使用します。ui-ux-design-system の洗練されたデザインシステムの考え方に、saas-ui-ux-designer-with-flex の優れたワークフロー、タイポグラフィ、柔軟性、ページ構成に関するガイダンスを組み合わせています。

このスキルの用途

• ダッシュボード、設定ページ、管理パネル、ランタイム／プロバイダー画面、エディター、ビルダー、請求、セキュリティ、データ量の多い一覧／詳細ページを設計または再設計する
• まとまりのない UI を、統一されたプロダクトシステムへリファクタリングする
• スタイリングの前にレイアウトの階層を決める
• タイポグラフィ、情報密度、間隔、レスポンシブ動作を改善する
• プロダクト品質で再利用可能な印象を目指すフロントエンドコードを実装またはレビューする
• カード、テーブル、フィルター、サイドパネル、ドロワー、ダイアログ、サマリーストリップに適した構成を選ぶ

このスキルを使用しないケース

• UI やプロダクトの表面に影響しない、バックエンドのみの作業
• 装飾的なコンセプトアートやポスタースタイルのデザインのみを行う場合
• すべてのトークンとコンポーネントがすでに定義されたデザインシステムを、ピクセル単位で厳密に模倣する場合
• SaaS のウェブパターンよりプラットフォームの慣習が重要な、ネイティブモバイル UI

ワークフロー

1. 画面の種類を分類します。
   • 一般公開向けのマーケティングページまたは信頼性を示すページ
   • 認証済みプロダクトのワークスペース
   • 管理または運用ページ
   • 設定またはランタイム構成
   • エディター、ビルダー、または執筆用ワークスペース
2. ユーザーの目標、現在の状態、主要なアクションを定義します。
3. レイアウトの前に情報密度を選びます。
   • オンボーディング、空の状態、信頼性が重視される画面には、ゆとりのある密度
   • ほとんどのプロダクトページには、バランスの取れた密度
   • 管理、レポート、データ量の多い運用画面には、コンパクトな密度
4. スタイリングの前に画面を構成します。
   • コンテキスト行またはページのイントロダクション
   • 現在の状態のサマリー
   • メインの作業領域
   • 補助パネルまたはサイドレール
   • 二次的な詳細情報
5. レイアウトの基本要素を意図的に選びます。
   • 配置をそろえたアクション、行、ツールバー、フィルター、コントロールグループには flex
   • サマリー、カードの集まり、分割レーン、複数列のフォームには grid
6. デザインシステム、タイポグラフィ、コンポーネント、ページパターンのリファレンスを適用します。
7. 実際の状態、レスポンシブ動作、明確な階層を備えた実装または批評を作成します。

デフォルト設定

• ニュートラルを基調とした画面
• 高品質な SaaS プロダクトのトーン
• ダークモードを優先し、ライトモードにも対応
• セクションごとに明確な主要アクションを 1 つ設定
• デフォルトではバランスの取れた情報密度
• タイポグラフィと間隔で階層を表現
• セマンティックカラーはステータス、フォーカス、主要なアクションにのみ使用
• 既存のプロダクトに取り組む場合は、新たな考案より既存のプロダクトパターンを優先

リファレンスの読み込み順

タスクに必要なものだけを読み込みます。ページ全体に関わる作業では、次の順序を使用します。

1. references/product-ui-principles.md 基本的な考え方、トークン、レイアウトルール、AI プロダクトのパターン、状態のルール、レスポンシブ対応、アクセシビリティ。
2. references/app-surface-patterns.md 設定、管理、ランタイム、エディター、テーブル、シェルの動作、情報密度の選択に関するアプリ向けのガイダンス。
3. references/typography-system.md タイポグラフィの階層、スケール、ウェイト、行の高さ、読みやすさに関するルール。
4. references/layout-flexibility.md レスポンシブレイアウト、flex/grid の使い分け、ブレークポイント、オーバーフロー処理、ストレステストのルール。
5. references/component-spec.md ボタン、入力欄、ナビゲーション、オーバーレイ、テーブル、フィードバック状態に関する共通コンポーネントの動作と要件。
6. references/page-blueprints.md 一般公開ページとプロダクト内部画面の構成パターン。
7. references/design-tokens.css 実装時にすぐに使える CSS 変数のベースが必要な場合に参照する、具体的なトークン値。

概念的なガイダンスだけでなく、スターター用のトークンファイルが必要な場合は、assets/default-product-tokens.css を使用します。

出力仕様

ユーザーがより限定的な内容を求めている場合を除き、以下を作成します。

1. プロダクトとユーザーに関する前提
2. サーフェスタイプと情報密度モード
3. ビジュアルの方向性
4. レイアウト構造
5. タイポグラフィとトークンの選択
6. コンポーネントと状態に関する判断
7. レスポンシブ対応とアクセシビリティに関する注記
8. 実装に関する注記またはレビューで見つかった問題

コードを求められた場合：

• まず既存のスタックとパターンに従います
• セマンティックトークンと再利用可能なコンポーネントを使用します
• 本番環境に対応した、ワークフローを重視するマークアップにします

レビューを求められた場合：

• まず階層構造、情報密度、状態、レスポンシブ対応の不足を特定します
• 装飾上の変更より先に、構造的な修正を提案します

制約

• 既存のアプリ内で作業する場合は、既存のプロダクトパターンとトークンを優先します。
• 1ページを個性的に見せるためだけに、デザインシステムを損なう装飾的なスタイルを導入しないでください。
• 管理画面と設定画面は、見せることを重視するのではなく、操作性を重視してください。
• 設定画面やランタイム画面の文言は短くし、UI の構造自体で内容が伝わるようにしてください。
• 該当する場合は、実際に機能する空、読み込み中、エラー、無効、選択済みの各状態を実装してください。
• 騒がしいグラデーション、散在するアクセントカラー、ページごとに異なる独自の装飾表現は避けてください。