/ ディレクトリ / プレイグラウンド / Claude Design Auditor
← 全サーバー ↗ GitHub
● コミュニティ Ashutos1997 ⚡ 即起動

Claude Design Auditor

作者 Ashutos1997 · Ashutos1997/claude-design-auditor-skill

体系的なデザインレビュー - タイポグラフィー、コントラスト、間隔、a11y、モーション、ダークモード、トークン、ダークパターン - 前後のコードで 0 ～ 100 点のスコアが付けられました。

claude-design-auditor-skill は、18 の専門的なルールに基づいて、さまざまな形式 (Figma、HTML/CSS、React/Vue、スクリーンショット、ワイヤーフレーム、散文説明) に基づいてデザインを監査します。 出力は、重大度ランク付けされた問題を含む 0 ～ 100 のスコア、個別のアクセシビリティ + 倫理スコア、コード修正前/修正後、およびエクスポート可能なレポート (Markdown、Canva、開発ハンドオフ) です。 これを使用して、開発の引き継ぎ前に設計をプレッシャーテストしたり、PR の品質基準を強制したり、再設計の優先順位リストを優先順位付けしたりできます。

▶ デモを見る 📦 インストール 💡 ユースケース

なぜ使うのか

主な機能

ライブデモ

実際の動作

claude-design-auditor-skill.replay ▶ 準備完了
0/0

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： Claude Design Auditor

エンジニアリング部門に出荷する前に設計を監査する

👤 開発の引き継ぎを準備する製品設計者 ⏱ ~30 min intermediate

使うタイミング： 設計は「完了」し、開発者がクローン作成を開始する前に最終的なスイープが必要になります。

フロー
  1. 監査人を呼び出す
    この Figma リンクを監査します: <url>。 範囲: フル。✓ コピーしました
    → 18 のルールを参照したスコアとランク付けされた問題
  2. クリティカルを修正する
    Figma で重大度の高い上位 5 つの修正を適用します。 前後を表示します。✓ コピーしました
    → 各修正の前後のプレビュー
  3. ハンドオフをエクスポートする
    トークンと a11y メモを含む開発ハンドオフ マークダウンをエクスポートします。✓ コピーしました
    → マークダウンをチケットにドロップする準備ができました

結果： 設計は、主要な問題がすでに解決された状態で開発に到着します。

注意点
  • スコアを目標として扱う — スコアは味ではなくルールの遵守を評価します。 番号だけでなく所見リストを使用する
組み合わせ： claude-code-design-skills

アクセシビリティ - コンポーネントのチェック

👤 新しいコンポーネントを出荷するフロントエンド エンジニア ⏱ ~20 min beginner

使うタイミング： ダイアログ/メニュー/フォーム コントロールを構築し、さまざまな問題を早期に発見したいと考えています。

フロー
  1. コンポーネントソースを貼り付けます
    この React Dialog コンポーネントを監査します。範囲: アクセシビリティ + モーション。✓ コピーしました
    → 調査結果では、WCAG の基準が引用されており、変更すべき内容が正確に示されています
  2. 修正を適用する
    提案された修正をコンポーネントにパッチします。 API は変更しないでください。✓ コピーしました
    → Diff は既存の API を尊重します

結果： アクセシビリティのレビューを経て生き残るコンポーネント。

注意点
  • 監査人が好みにこだわりすぎている（例: a11y モードでのスタイルの細かい指摘） — スコープを明示的に a11y + motion に制限する
組み合わせ： motion-dev-animations-skill

レガシー UI を優先順位付けして再設計する

👤 再設計を所有する設計リード ⏱ ~60 min advanced

使うタイミング： 再設計を計画していて、どこから始めるべきかについてのデータが必要です。

フロー
  1. フィード画面または URL
    app.<url> の上位 10 画面を監査します。 重大度別に調査結果を集計します。✓ コピーしました
    → ホットスポットのあるクロススクリーンロールアップ
  2. ピックシーケンス
    ルール カテゴリごとにグループ化された再設計順序計画を提案します。✓ コピーしました
    → 雰囲気ではなく発見に基づいた計画を立てる

結果： 具体的な欠陥に裏付けられた再設計計画。

組み合わせ

他のMCPと組み合わせて10倍の力を

claude-design-auditor-skill + claude-code-design-skills

監査 → Figma からコードへ → コードの再監査

Figma を監査し、React に変換してから、React を再監査してパリティを検証します。✓ コピーしました
claude-design-auditor-skill + motion-dev-animations-skill

モーションの専門家にアニメーションの追加/調整を依頼し、監査人のモーション スコープを実行させます。

motion-dev ごとにスプリング アニメーションを追加します。 次に、モーションとモーションを減らした動作を監査します。✓ コピーしました
claude-design-auditor-skill + figma

MCP 経由で Figma アセットをプルし、監査し、コメントを書き戻す

フラグが立てられたフレームごとに、結果を要約した Figma コメントを追加します。✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
design-audit (SKILL) asset (Figma URL / image / code) + optional scope ハンドオフ前、コードレビュー中、または再設計計画の一部として 0

コストと制限

運用コスト

APIクォータ
なし
呼び出しあたりのトークン
大規模 — スクリーンショットと長いコード ブロックが大半を占めます
金額
無料
ヒント
迅速な反復のために積極的にスコープを設定します (a11y のみ、またはタイポグラフィーのみ)。 完全な監査はトークンを大量に使用します。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： なし; Figma URL がプライベートの場合は、画像エクスポート経由で共有するか、適切な範囲で Figma MCP を使用してください。
データ送信先： スキルからのネットワーク出力はありません。 画像とコードはチャット内に残ります。

トラブルシューティング

よくあるエラーと対処法

監査人が明らかな問題を見逃している

入力サイズを増やすか、複数のビューポート/スクリーンショットを提供します。 ヒューリスティックはカバレッジを考慮した方が優れています。

確認： Re-run with extra screenshots
出力が多すぎることを警告するトークン

スコープを 18 のルールのサブセットに設定します。

確認： Ask for 'scope: typography + contrast + a11y' only
修正により既存の設計システムが破壊される

監査人にトークン セット内に留まるように指示します。 token.json を提供します。

確認： Before/after diffs reference token names

代替案

Claude Design Auditor 他との比較

代替案代わりに使う場面トレードオフ
claude-code-design-skills既存の作業を監査するのではなく、Figma からコードに移行したいパイプラインの反対側をカバーします
ai-friendly-web-design-skill厳格な監査人ではなく、広範な Web デザインのガイダンスが必要である構造化されていない出力
apple-hig-designer-skill特に Apple プラットフォーム向けに設計している場合ユニバーサルではなくプラットフォーム固有

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る