mcpField
D
design-auditor

design-auditor

github.com/podoデザイン・UI29181 回インストール4 日前に更新
リポジトリ

design-auditor について

design-auditorは、19のデザインカテゴリにわたってインターフェースを評価し、0～100のスコアと深刻度順の問題一覧を出すスキルです。コードやスクリーンショットを監査でき、Figma MCPサーバー接続時はFigmaリンクも確認します。

主な機能

  1. 0119のデザインカテゴリを評価
  2. 02デザイン品質を0～100で採点
  3. 03問題を深刻度順に表示
  4. 04コードとスクリーンショットを監査
  5. 05Figma MCPでFigmaリンクに対応

活用シーン

  1. 01React画面のデザイン問題を確認
  2. 02スクリーンショットでアクセシビリティやレイアウトを確認
  3. 03Figma MCP接続時にFigmaデザインを監査

MCP 対応

Figma MCPサーバーに接続するとFigmaリンクを確認できます。未接続の場合はコードまたはスクリーンショットを監査します。

インストール

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

$npx skills add https://github.com/podo/design-agent-skills --skill design-auditor

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

同梱ファイルstub.yaml

詳細

design-auditor

カタログのスタブ — 完全版スキルはこちらです：Ashutos1997/claude-design-auditor-skill

判定ツリー

  1. 完全版スキルはすでにインストールされていますか？

    • グローバル：f=~/.agents/skills/design-auditor/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • プロジェクト：f=.agents/skills/design-auditor/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → スキルは design-auditor としてインストールされています。呼び出して続行してください
    • pointer → ステップ2に進んでください

  2. 適用範囲を検出してから、インストールします。

    [ -e ~/.agents/skills/design-auditor ] && echo "global" || echo "project"

    グローバル：

    npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -g -y

    プロジェクト：

    npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -y

    Claude Code： 会話を離れずにコマンドを実行するには、! で始まるコマンドをチャットメッセージとして送信してください。

注意事項

  • 必要条件： Figma MCP サーバー（任意。Figma のリンクを監査する場合のみ必要です。サーバーがない場合、スキルはスクリーンショットまたはコードを要求します）
  • ライセンス： リポジトリに LICENSE ファイルはありません

インストール後の呼び出し

  • スキル名：design-auditor
  • トリガーフレーズ：「design audit」、「design score」、「19 categories」、「design-auditor」、「design quality check」

機能

19の専門的なカテゴリ（タイポグラフィ、色とコントラスト、間隔、視覚的階層、一貫性、WCAG アクセシビリティ、フォーム、モーションとアニメーション、ダークモード、レスポンシブデザイン、読み込み状態、空の状態、エラー状態、マイクロコピー、i18n/RTL サポート、エレベーションとシャドウ、アイコノグラフィ、ナビゲーション、デザイントークン、倫理的なデザインとダークパターン、ニールセンのヒューリスティック）にわたってデザインを評価する、包括的なデザイン監査スキルです。0〜100のスコアを算出し、問題を重大度順に並べて、影響の大きい問題が最初に表示されるようにします。コード（HTML、CSS、React、Vue、Tailwind）とスクリーンショットを監査し、Figma MCP サーバーに接続されている場合は Figma のリンクも監査します。リクエストに合わせて英語または韓国語で応答します。上流の SKILL.md は大きなファイル（約160 KB）のため、呼び出し時に大量のコンテキストを消費します。

使用しないケース

  • アクセシビリティのみの監査 — WCAG に特化した監査には fixing-accessibility を使用してください
  • WCAG 固有のコンプライアンス文書 — wcag-audit-patterns を使用してください

コメント

Markdown 対応