お問い合わせ

ビジュアルデザイン監事 — クロード・スキル

開発者、非設計者、専門家の設計検証を要求しなくても、専門家の設計検証を要求する人のために構築された**19プロフェッショナルなデザインカテゴリに対する監査のスキル。

Figma file (Figma MCP 経由)、code (HTML/CSS/React/Vue)、screenshots、wireframes、および記述。 ※英語・韓国語対応

Claude、Manus、およびSKILL.mdベースのスキルをサポートする他のエージェントと互換性があります。

お問い合わせ

それが何をしているか

Figmaリンクをドロップし、CSSを貼り付け、スクリーンショットをアップロードしたり、ワイヤーフレームを共有したりします。 デザイン監査人は19のカテゴリのデザインルールにあなたの仕事をチェックし、あなたに与えます。

• 1カテゴリの内訳で100**の*score(行ごとのミニバーチャート付き)
• 別々のアクセシビリティスコア(Cat 2、6、7、15、16を渡るWCAGカバレッジ)
• 別々の倫理スコア(猫18を渡る暗いパターンと操作的設計)
• 別々のUsabilityのスコア (猫19 — H1/H2/H3/H6/H7/H10、NielsenとのH4/H5/H8/H9)のための相互参照
• 法的/コンプライアンス違反(WCAG AA、GDPR、PECR)のA のBlocker tier - クリティカルな問題とは別に

🇰🇷 한국어 버전 →

🎨 Design Auditor — Claude Skill

A Claude skill that audits designs against 19 professional design categories — built for developers, non-designers, and anyone who wants expert design validation without needing to know the rules themselves.

Works with Figma files (via Figma MCP), code (HTML/CSS/React/Vue), screenshots, wireframes, and written descriptions. Supports English and Korean.

Compatible with Claude, Manus, and other agents that support SKILL.md-based skills.

---

What It Does

Drop in a Figma link, paste your CSS, upload a screenshot, or share a wireframe — Design Auditor checks your work against 19 categories of design rules and gives you:

• A score out of 100 with per-category breakdown (with mini bar chart per row)
• A separate Accessibility Score (WCAG coverage across Cat 2, 6, 7, 15, 16)
• A separate Ethics Score (dark patterns and manipulative design across Cat 18)
• A separate Usability Score (Cat 19 — H1/H2/H3/H6/H7/H10, with Nielsen cross-reference for H4/H5/H8/H9)
• A 🚫 Blocker tier for legal/compliance violations (WCAG AA, GDPR, PECR) — separate from Critical issues
• Issues ranked by severity (🚫 Blocker / 🔴 Critical / 🟡 Warning / 🟢 Tip)
• Color blindness context — every failing color pair annotated with the affected blindness type
• SVG accessibility checks — decorative vs. meaningful SVG patterns, aria-hidden, role=“img”
• Design System detection — MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap (system-specific fixes)
• Figma Auto Layout scan — detects frames using manual positioning where Auto Layout should be used
• Plain-language explanations of why each rule matters
• “Teach Me” mode — explains the design principles behind your top 3 issues, not just the fixes
• An Issue Priority Matrix — every issue plotted by effort vs. impact
• Before/after code diffs when fixing issues in HTML/CSS/React/Vue
• Direct fixes in your Figma file via Figma MCP
• Figma Code Connect — detects design-to-code mapping gaps (get_code_connect_suggestions)
• Wireframe to Spec — converts wireframes into annotated dev-ready specs
• Visual audit report exportable to Canva for stakeholder sharing
• Developer handoff report — CSS spec table, a11y checklist, critical fixes
• Export report as Markdown — ready for Notion, GitHub, Linear, or Jira

---

The 19 Audit Categories