mcpField
P
prototype

prototype

github.com/plugin87デザイン・UI3.1k502 回インストール2 日前に更新
リポジトリ

prototype について

prototypeは、検証したい問いに応じて、コンテンツ中心の案からコードまで5段階の忠実度を選ぶデザインスキルです。ユーザージャーニーの整理とユーザビリティ検証を導き、エッジケースやアクセシビリティも確認します。

主な機能

  1. 015段階の忠実度から選択
  2. 02ジャーニー・判断点・エラー経路の整理
  3. 03ユーザビリティタスクと成功基準の設定
  4. 04トークンとアクセシビリティの確認

活用シーン

  1. 01レイアウト作成前に情報ニーズを検討
  2. 02エッジケースを含むフローを計画
  3. 03測定可能な成果を定めたユーザビリティテストを準備

インストール

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

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill prototype

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

詳細

スキル：プロトタイプとリサーチ

ステップ 0：キットはありますか？ このスキルはキット内のファイルを読み込みます。一度だけ確認してください： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING KIT_MISSING の場合、インストールされているのはスキルフォルダーだけです。これは npx skills add の動作です。その旨を明確に伝え、ユーザーに npx ux-ui-agent-skills init またはプラグインのインストールを案内して、そこで終了してください。開けなかったファイルの内容を推測してはいけません。

適切な忠実度のレベルを選び、検証を行いながら作業を進めます。

手順

  1. ${CLAUDE_SKILL_DIR}/../../../workflows/prototyping.md を読み込みます（5 段階の忠実度レベル、ユーザージャーニーマップのテンプレート、ユーザビリティテストのスクリプト、サンプルデータ）。
  2. 現在のニーズを特定し、それに答えられる最低限の忠実度を選びます。レベルを飛ばしてはいけません：
    • コンテンツ優先（情報ニーズ）→ ワイヤーフレーム（レイアウト／ナビゲーション）→ 低忠実度（タスクの完了）→ 高忠実度（ビジュアル／アクセシビリティ）→ コード（実現可能性／パフォーマンス）。
  3. フローを扱う場合：判断ポイント、エラーパス、エッジケースを含むユーザージャーニーマップを作成します。
  4. 検証を行う場合：スクリプトを使ってユーザビリティテストを定義します（タスク、成功基準、5 人ルール）。
  5. 高忠実度／コードのステップでは、トークン（${CLAUDE_SKILL_DIR}/../../../tokens/*）、コンポーネント（${CLAUDE_SKILL_DIR}/../../../components/*）、テイスト（${CLAUDE_SKILL_DIR}/../../../taste/*）、アクセシビリティ（${CLAUDE_SKILL_DIR}/../../../accessibility/*）を参照します。

出力

選択した忠実度での成果物と、明示的な「次に何を検証するか」の計画。

完了前の検証

  • 忠実度が回答する質問に合っており、レベルが飛ばされていないこと。
  • フローにハッピーパスだけでなく、判断ポイント、エラーパス、エッジケース（空、読み込み中、オーバーフロー）が含まれていること。
  • 「後でテスト」ではなく、具体的な検証手順（タスク＋成功基準）が示されていること。
  • 高忠実度／コードの成果物が、design-code と同じトークンおよびアクセシビリティの基準（値のハードコードなし、コントラスト、状態）を満たしていること。

コメント

Markdown 対応