mcpField
H
heuristic

heuristic

github.com/educlopezデザイン・UI403888 回インストール1 週間前に更新
リポジトリ

heuristic について

heuristic は ui-craft のサブスキルで、Nielsen のヒューリスティクスと6つのデザイン法則に基づいて UI を評価します。具体的な指摘、影響度順の順位付け、評価値である UsabilityScore を含むレビューを出力します。

主な機能

  1. 01Nielsen のヒューリスティクス採点
  2. 026つのデザイン法則の監査
  3. 03ペルソナ別ウォークスルー
  4. 04影響度順の指摘事項
  5. 05UsabilityScore の算出

活用シーン

  1. 01リリース前の画面レビュー
  2. 02ユーザビリティ修正の優先順位付け
  3. 03指定ペルソナによる UI 評価

インストール

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

$npx skills add https://github.com/educlopez/ui-craft --skill heuristic

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

詳細

コンテキスト： このサブスキルは、より広範な ui-craft スキルを構成する視点のひとつです。ui-craft スキルもインストールされている場合は、まずその SKILL.md を読み、Discovery + Anti-Slop + Craft Test を確認してから、以下の特定の視点を適用してください。

$ARGUMENTS の UI を、Nielsen の 10 のヒューリスティックと 6 つのデザイン法則に照らして評価します。ui-craft スキルを読み込んでください。

ステップ 1 — 評価方法を読み込む。 references/heuristics.md を読み、評価基準、スコアの定義、デザイン法則の詳細、必須の出力形式を確認してください。新しい形式や尺度を作らないでください。

ステップ 2 — Nielsen の 10 のヒューリスティックを確認する。 評価基準に従い、それぞれ 1〜5 で採点します。

  • 1 ユーザーの操作を妨げる · 2 深刻な摩擦がある · 3 動作するが分かりにくい · 4 動作し、細かな改善点がある · 5 最高水準

各ヒューリスティックについて、具体的な指摘を書いてください。テキストを引用し、要素数を数え、問題のあるフローを特定してください。曖昧な指摘は受け付けられません。

ステップ 3 — 6 つのデザイン法則を監査する。 それぞれを、具体的な詳細とともに PASS / FAIL で評価してください。

  • Fitts's Law — タッチターゲットのサイズ、CTA の配置
  • Hick's Law — 選択肢の密度、ナビゲーションとセレクトのサイズ
  • Doherty Threshold — 体感レイテンシ、楽観的 UI
  • Cleveland-McGill — グラフのエンコーディングの選択
  • Miller's Law — ナビゲーションの深さ、フォームのセクション数
  • Tesler's Law — 複雑さがどこにあるか

ステップ 4 — ペルソナのウォークスルー（--persona= が指定されている場合）。 引数に --persona=<name> が含まれている場合は、references/personas.md を読み、該当するウォークスルーチェックリストを実行してください。対応している値：priya、jordan、adaeze、kwame、margo、all。ウォークスルーは | Checklist item | Pass/Fail | Finding | Impact | 形式の表で出力してください。フラグがない場合は、このステップを省略します。

ステップ 5 — 影響度タグで指摘を順位付けする。 影響度の順序：blocks-conversion > adds-friction > reduces-trust > minor-polish。順位付けリストに含める指摘は最大 5 件です。より影響度の高い指摘がない場合を除き、minor-polish の指摘は除外してください。

ステップ 6 — UsabilityScore を計算する。 評価表のスコアを、references/heuristics.md の UsabilityScore の計算式に従って、0〜100 のスコアとグレードにまとめます。heuristic_base = round(((mean(nielsen_scores) − 1) / 4) × 100) から 5 × (failed design laws) を引き、[0,100] の範囲に収めます。UICraftScore と同じ A/B/C/D/F の評価帯を使用してください。常に (judged) と表示してください。これは決定論的ではなく、CI のゲートに使ってはいけません。引数に --json が含まれている場合は、機械可読ブロックも出力してください。ユーザーが全体像を求めている場合は、決定論的な UICraftScore を取得して（node scripts/eval.mjs <path> --json または score_ui MCP ツール）、両方を並べた Extended quality report を作成してください。決して平均を取らないでください。

ステップ 7 — 出力する。 references/heuristics.md にある正確な評価表の形式を使ってください。

  1. ## Heuristic Scorecard の表
  2. ## Design Law Audit の表
  3. ## Persona Walkthrough の表（--persona= が指定された場合のみ）
  4. ## Top findings (ranked by impact) — 3〜5 件の番号付きリスト
  5. ## UsabilityScore ブロック — 0〜100 のスコア、グレード、内訳

ノブの考慮： ノブに依存しません。ユーザビリティはノブではありません。CRAFT_LEVEL が 3 でも 9 でも、2 は 2 です。CRAFT_LEVEL に応じてスコアを甘くしないでください。

出力要件：

  • このコマンドが生成するのはコードではなく、評価レポートです。ユーザーが後続の依頼で明示的に求めない限り、編集しないでください。
  • 評価表は機械で解析できる Markdown です。PM が任意の課題管理ツールに貼り付け、表の各行をチケットとして登録できます。前置きを付ける場合は、そのように説明してください。
  • 「第一印象」の段落、曖昧な表現、称賛の水増しは不要です。表と順位付きリストのみで構成してください。

コードを編集しないでください。これは採点付きの評価です。

次のステップ： 指摘を修正してから /finalize を実行してください。評価表は、リリースをゲートする工程（rung 3）への入力です。

コメント

Markdown 対応