/ ディレクトリ / プレイグラウンド / Claude Design Auditor
● コミュニティ 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

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "claude-design-auditor-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "claude-design-auditor-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Ashutos1997/claude-design-auditor-skill",
          "~/.claude/skills/claude-design-auditor"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add claude-design-auditor-skill -- git clone https://github.com/Ashutos1997/claude-design-auditor-skill ~/.claude/skills/claude-design-auditor

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方: Claude Design Auditor

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

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

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

前提条件
  • スキルがインストールされています — git clone https://github.com/Ashutos1997/claude-design-auditor-skill ~/.claude/skills/
フロー
  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を見る