mcpField
D
design-auditor

design-auditor

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

design-auditor について

Web UIやフロントエンドチーム向けの静的監査スキルです。デザイン品質、AI生成パターン、WCAGの色コントラスト、デザイントークン準拠を評価し、3種類の独立した評価とCI/CDゲートに対応します。

主な機能

  1. 0112カテゴリのデザイン評価
  2. 02HTML/CSSのAI生成パターン検出
  3. 03WCAG AA/AAAの色コントラスト確認
  4. 04CSSのデザイントークン準拠確認
  5. 05デザイン・AI Slop・アクセシビリティ評価
  6. 06CI/CDの最低スコアゲート

活用シーン

  1. 01Web UIの品質と独自性のレビュー
  2. 02ページの色コントラスト確認
  3. 03デザイントークンから外れたCSS値の特定
  4. 04最低適合スコアによるデプロイ制御

インストール

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

$npx skills add https://github.com/borghei/claude-skills --skill design-auditor

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

同梱ファイル

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

assets/
design_audit_template.md
sample_audit_data.json
references/
accessibility_checklist.md
ai_slop_patterns.md
audit-workflows-and-operations.md
design_audit_methodology.md
scripts/
ai_slop_detector.py
color_contrast_checker.py
design_scorer.py
design_system_validator.py

詳細

デザイン監査ツール

12カテゴリにわたる体系的な UI/UX 監査を実施し、AI 生成の粗雑なパターンを検出し、WCAG のカラーコントラストを検証して、デザインシステムのトークン準拠状況を確認します。デザイン（A～F）、AI 生成の粗雑さ（A～F）、アクセシビリティ（A～F）の3つの独立した評価を出力します。

主な機能

  • デザインの総合監査 — 5段階のパスで重み付けされた12カテゴリを採点し、優先度付きの推奨事項とベースラインとの比較を含むデザイン評価を出します。
  • AI 生成の粗雑さの検出 — HTML/CSS に含まれる視覚、コピー、構造上の粗雑なパターンを、信頼度スコアと各検出項目の修正方法とともに指摘します。
  • アクセシビリティ監査 — WCAG のカラーコントラスト（AA/AAA）をチェックし、準拠する最も近い色を提案します。
  • デザインシステムへの準拠 — トークンから逸脱したハードコードの色、間隔、フォント、角丸、影、z-index、トランジションを検出し、準拠率を報告します。
  • 3つの独立した評価 — デザイン（加重集計）、AI 生成の粗雑さ（反転評価）、アクセシビリティ（WCAG）をそれぞれA～Fで評価します。
  • 運用システム — 10のデザイン原則、リスク累積機能付きの修正セッションルール、CI/CD のゲート機能を備えています。

使用する場面

  • UI/UX デザインの品質、独自性、アクセシビリティを確認する場合。
  • HTML/CSS に含まれるAI生成の粗雑なパターンを検出する場合。
  • WCAG のカラーコントラストやデザイントークンへの準拠を検証する場合。
  • 最低準拠スコアを基準に、デプロイや PR の可否を判定する場合。

まず確認すること

監査を実行する前に、以下の入力内容を確認してください。不足している項目や曖昧な項目が結果に影響する場合は質問してください。影響しない場合は妥当な既定値を使用し、使用した値を明記してください。

  • 監査の種類： デザインの総合評価、AI生成の粗雑さの検出、コントラストチェック、トークン準拠チェックのいずれか（design_scorer.py、ai_slop_detector.py、color_contrast_checker.py、design_system_validator.py のいずれを使うかを決定します）。
  • 入力アーティファクト： 検出結果の JSON、HTML/CSS、色の組み合わせ、またはデザイントークンファイル（各ツールが必要とする入力）。
  • 適合レベル／しきい値： WCAG AA または AAA、粗雑さの信頼度しきい値、合格に必要な最低評価（--level、--threshold、ゲートの値を設定します）。

リスト全体ではなく、この依頼にとって最も重要な2～3項目について質問してください。ユーザーがすぐに結果を求めている場合は、前提を最初に明記して結果を出してください。

ツール

ツール用途コマンド
design_scorer.py12カテゴリの監査結果を3つの評価にまとめて採点python scripts/design_scorer.py --input findings.json --output report.json --verbose
ai_slop_detector.pyHTML/CSS 内のAI生成の粗雑さを検出python scripts/ai_slop_detector.py --input page.html --css styles.css --threshold 0.6
color_contrast_checker.pyWCAG のカラーコントラストをチェック（単一／一括）python scripts/color_contrast_checker.py --input color-pairs.json --level AA --suggest-fixes
design_system_validator.pyCSS とデザイントークンを照合python scripts/design_system_validator.py --tokens tokens.json --input src/styles/

すべてのツールで、--format json|text と、ファイルへの書き込みに使う --output を利用できます。

参考資料

タスクに合った参考資料を読み込んでください。このファイルは簡潔に保ち、必要に応じて詳細を参照してください。

  • references/audit-workflows-and-operations.md — クイックスタートコマンド、ツール概要表、3つのワークフロー（完全監査、スロップ検出、アクセシビリティ／トークン準拠）、評価表、10のデザイン原則、修正セッションのルール、CI/CD 統合、アンチパターン、トラブルシューティングが記載されています。監査を最初から最後まで実施する際に読んでください。
  • references/design_audit_methodology.md — 体系的な監査アプローチ、ヒューリスティック評価、ゲシュタルト原則、批評フレームワーク、アンチパターンが記載されています。評価パスを設計する際に読んでください。
  • references/ai_slop_patterns.md — AI 生成 UI パターンの包括的なカタログと改善ガイダンスが記載されています。独創性を評価する際に読んでください。
  • references/accessibility_checklist.md — POUR に基づいて整理された WCAG 2.1 レベル A／AA／AAA の完全なチェックリストと、テスト方法および修正方法が記載されています。アクセシビリティを監査する際に読んでください。

対象範囲と制限事項

Web UI（HTML/CSS）の静的なデザイン品質、AI スロップ、WCAG コントラスト、デザイントークン準拠の監査を対象とします。実ブラウザーの実行、レイアウトのレンダリングテスト、手動のユーザビリティ調査の代替は行いません。アクセシビリティの指摘事項が「低」優先度になることはありません。WCAG AA が最低基準です。

統合ポイント

スキル統合
senior-frontendビルド後のコンポーネントライブラリに対するデザイン監査
senior-qaQA パイプラインにおけるアクセシビリティとデザインのリグレッション
code-reviewerフロントエンドの PR レビューに監査結果を添付
senior-devops最低準拠スコアを満たさないデプロイをブロック
product-team/ux-researcherユーザビリティ調査の優先順位付けに監査結果を活用

最終更新日： 2026年6月
バージョン： 2.2.0

コメント

Markdown 対応