mcpField
D
design-review

design-review

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

design-review について

画面やフローを体系的に評価するデザインレビュースキルです。6つの観点を重み付けして採点し、アクセシビリティとNielsenのヒューリスティックを確認して、優先度付きの指摘と具体的な修正案を提示します。

主な機能

  1. 016つの観点を重み付けして採点
  2. 02アクセシビリティとコントラストを確認
  3. 03Nielsenの10原則を適用
  4. 04重大度に応じて指摘を優先付け
  5. 05デザイントークンに沿った修正案

活用シーン

  1. 01単一画面やユーザーフローをレビュー
  2. 02デザインのアクセシビリティと使いやすさを評価
  3. 03UI問題の優先順位付き修正リストを作成

インストール

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

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

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

詳細

スキル：デザインレビュー

ステップ 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/design-review.md を読みます（評価基準、採点ガイド、Nielsen のヒューリスティック、プロセス）。
  2. コンテキストを収集します：画面／フロー、対象ユーザー、プラットフォーム、制約。
  3. 6 つの評価軸（視覚的階層 20%、一貫性 20%、アクセシビリティ 20%、使いやすさ 20%、レスポンシブ対応 10%、パフォーマンス 10%）を採点し、加重総合スコアを算出します。
  4. ${CLAUDE_SKILL_DIR}/../../../accessibility/wcag-checklist.md を使ってアクセシビリティの観点から確認します。色の組み合わせに疑問がある場合は ${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py を使います。
  5. ${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md の「アンチスロップ」の特徴（禁止されているデフォルト設定のチェックリスト）と照合します。
  6. Nielsen の 10 のヒューリスティックに照らして確認し、違反を番号で指摘します。

出力

  • 6 つの評価軸の採点表と総合スコア。
  • 優先順位を付けた指摘事項の表：# · 重大度（Critical → Major → Minor → Enhancement） · 指摘事項 · 推奨事項。
  • トークンを参照した具体的な修正案。

コメント

Markdown 対応