mcpField
P
product-design-and-ux

product-design-and-ux

github.com/magnus919デザイン・UI153180 回インストール1 日前に更新
リポジトリ

product-design-and-ux について

検証済みの根拠と承認済みの範囲を、観察・回復可能なインタラクションに落とし込むプロダクトデザインと UX のスキルです。タスクフロー、インターフェース契約、ユーザビリティ調査の計画、エンジニアリングへの引き継ぎを扱い、視覚表現やツールは指定しません。

主な機能

  1. 01設計判断を根拠に結び付ける
  2. 02タスク、役割、復旧をモデル化
  3. 03フレームワーク非依存の契約を作成
  4. 04許可されたユーザビリティ調査を計画
  5. 05エンジニアリングへの引き継ぎを準備

活用シーン

  1. 01承認済みの製品範囲を動作に変換
  2. 02中断、エラー、タスク復旧を整理
  3. 03エンジニアリングの受け入れ証拠を定義

インストール

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

$npx skills add https://github.com/magnus919/agent-skills --skill product-design-and-ux

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

同梱ファイル

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

README.md
evals/
business-app-rubric-challenges.md
evals.json
openai-reference-inputs.json
references/
ai-interaction-and-uncertainty.md
boundaries-and-traceability.md
content-and-cognitive-demand.md
embedded-business-agent.md
engineering-handoff.md
external-agent-interactions.md
information-architecture.md
interaction-pattern-selection.md
interface-contracts-and-responsive-behavior.md
scenario-probes.md
source-index.md
task-flows-and-state-models.md
usability-testing-and-privacy.md
templates/
ai-interaction-contract.md
engineering-handoff.md
external-agent-handoff.md
interface-contract.md
outcomes-to-design.md
screen-state-inventory.md
task-flow-state-model.md
usability-study.md

詳細

プロダクトデザインとUX

検証済みのエビデンスと決定したスコープを、ユーザーが完了でき、問題が起きても復旧できる、観察可能な振る舞いに落とし込みます。ブランド、ピクセル、CSS、コンポーネントの実装、特定のツールではなく、インタラクションを設計します。

開始前の確認

承認済みのスコープ、成果、ユーザーまたは役割、エビデンスへのリンク、制約、測定可能な体験目標、未決定のプロダクト上の判断を確認します。入力が足りない場合は、推測せず記録します。

ワークフロー

  1. 各成果と設計上の決定を、templates/outcomes-to-design.md を使って根拠に結び付けます。任意のペルソナやジョブを使う場合は、決定に影響を与え、根拠を引用する必要があります。装飾的な属性情報は作成しないでください。
  2. 目標、コンテンツオブジェクト、用語、権限、見つけやすさ、サービスのコンテキストに基づいて情報アーキテクチャを確立します。references/information-architecture.md を読みます。
  3. 重要なラベル、手順、ステータス、エラー、完了時のコンテンツを定義し、タスクにおける記憶、選択、切り替え、中断、復旧の要求を確認します。ヒューリスティックは、判定を下すためではなく、検証可能な質問を作成するために使います。references/content-and-cognitive-demand.md を読みます。
  4. 引き継ぎ後の受け取り側の作業も含め、関与するすべての役割にわたって重要なタスクをモデル化します。単なる送信、配信、または中間ステータスではなく、意図したユーザーの成果に達するまでを対象にします。判断、代替案、中断、再開、キャンセル、復旧、取り消し不能な操作、副作用、権限の変更、完了を示す証拠を含めます。references/task-flows-and-state-models.md を読み、templates/task-flow-state-model.md を使います。
  5. フロー、データ、権限、接続状況、リスクによって必要となる状態のみを一覧化します。リスクのある見落としを記録します。templates/screen-state-inventory.md を使います。
  6. コンテンツ、コントロール、アクセシブルなインタラクション要件、アクション、遷移、永続化、権限、レスポンシブ/リフロー動作、テレメトリー、未決事項について、フレームワークに依存しない契約を作成します。references/interface-contracts-and-responsive-behavior.md を読み、templates/interface-contract.md を使います。
  7. パターンは仮説として扱います。references/interaction-pattern-selection.md を使い、代替案、トレードオフ、根拠、仮説を否定する条件を比較します。
  8. 許可されたユーザビリティ調査のみを計画するか、結果を統合します。references/usability-testing-and-privacy.md を読み、templates/usability-study.md を使います。参加者、同意、観察内容、発言、結果を捏造しないでください。
  9. 観察可能な受け入れの根拠、依存関係、担当者、ゲート、デプロイ済みの境界での検証を含む、エンジニアリングへの引き継ぎ資料を作成します。references/engineering-handoff.md を読み、templates/engineering-handoff.md を使います。承認済みの動作を spec-driven-development に引き継ぎます。

必要に応じて読み込む

必要な内容読み込むもの
スコープの境界、トレーサビリティ、隣接するスキルへのルーティングreferences/boundaries-and-traceability.md
目標、ラベル、ナビゲーション、見つけやすさ、権限references/information-architecture.md
平易な言葉によるコンテンツ、ヒューリスティックレビュー、認知的負荷references/content-and-cognitive-demand.md
タスクの経路、状態の適用条件、復旧、副作用references/task-flows-and-state-models.md
インタラクション契約、またはインクルーシブなレスポンシブ動作references/interface-contracts-and-responsive-behavior.md
パターンの代替案と決定の根拠references/interaction-pattern-selection.md
ユーザビリティのプロトコル、結果の統合、同意、プライバシーreferences/usability-testing-and-privacy.md
引き継ぎ、受け入れ基準、またはデプロイ済みの状態での検証references/engineering-handoff.md
AI の不確実性、根拠付け、人間による制御、フィードバック、モデル変更の受け入れreferences/ai-interaction-and-uncertainty.md
人が製品の外部にいる自分のエージェントに作業を委任し、アプリの境界を越えて戻ってくる場合references/external-agent-interactions.md、templates/external-agent-handoff.md
合成フィクスチャを使った方法論の自己チェックreferences/scenario-probes.md
情報源の権威性、ステータス、例references/source-index.md

ガードレール

  • アクセシビリティは設計全体に組み込まれていますが、WCAG/ARIA/ネイティブセマンティクスへの準拠とテストの深度は、引き続き web-accessibility の担当範囲です。
  • 関連する幅、ズーム/リフロー、テキストの拡張/ローカライズ、向き、入力方式、動きを減らす設定、接続品質の低下、中断、再開時の動作を指定してください。デバイスのブレークポイントを設計モデルとして使用しないでください。
  • [email protected] や INV-DEMO-042 などの合成フィクスチャを使用してください。安全でないプロトタイプで、実際の認証情報、支払い、金融アクセス、秘密情報を求めないでください。
  • ユーザビリティ調査の結果は、範囲が限定されたエビデンスであり、アクセシビリティ適合性、母集団における有病率、分析結果、成果の証明ではありません。
  • AI の出力、信頼度、説明、引用、ユーザーフィードバックだけでは、正しさの証明になりません。エビデンスの境界を記録し、モデル品質や統計に関する質問は担当の専門家に引き継いでください。

完了条件

対象範囲内のすべての動作について、追跡可能なエビデンス、適用可能な状態/復旧モデル、観測可能な受け入れ基準がそろい、決定が解決済みであるか、担当者と解決ゲートが設定されるまで作業を続けてください。推測で不足を埋めず、制約と未テストのリスクを報告してください。

組み込み型業務アプリの例

既存のタスク画面内にエージェントを設計する場合は、設備貸出の実例を参照してください。この例では、推奨から確定した効果と復旧まで、既存の AI インタラクション、タスクフロー、エンジニアリングへの引き継ぎに関する契約を満たしています。受け入れプローブは合成設計フィクスチャとして扱い、観測済みのユーザビリティ結果として扱わないでください。

実行可能な AI の推奨については、実行時に権限、レコードのリビジョン、ポリシー、在庫、承認済みアクションダイジェストを再確認してください。承認時の確認だけでは不十分です。コマンドの実行結果が不確かな場合は、再試行する前に永続化されたコマンド ID を照会してください。新しい予約 ID を作成したり、確定済みの副作用を繰り返したりしないでください。部分的な効果は分けて表示してください。

コメント