/ الدليل / الملعب / Claude Design Auditor
← كل الخوادم ↗ GitHub
● مجتمع Ashutos1997 ⚡ فوري

Claude Design Auditor

بواسطة Ashutos1997 · Ashutos1997/claude-design-auditor-skill

مراجعة التصميم المنهجية - الطباعة، والتباين، والتباعد، وa11y، والحركة، والوضع الداكن، والرموز المميزة، والأنماط الداكنة - سجلت 0-100 مع الكود قبل/بعد.

تصميمات تدقيق claude-design-auditor-skill عبر التنسيقات (Figma وHTML/CSS وReact/Vue ولقطات الشاشة والإطارات السلكية والأوصاف النثرية) مقابل 18 قاعدة احترافية. النتيجة هي درجة من 0 إلى 100 مع مشكلات مصنفة حسب الخطورة، وإمكانية وصول منفصلة + درجات أخلاقية، قبل/بعد إصلاحات التعليمات البرمجية، وتقارير قابلة للتصدير (Markdown، Canva، dev handoff). استخدمه لاختبار الضغط على التصميم قبل تسليم التطوير، أو لفرض شريط الجودة في العلاقات العامة، أو لفرز قائمة أولويات إعادة التصميم.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

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 نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

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
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "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

متى تستخدمه: تم "إتمام" التصميم وتريد إجراء عملية مسح نهائية قبل أن يبدأ المطورون في استنساخه.

المتطلبات الأساسية
  • تم تثبيت المهارة — استنساخ بوابة https://github.com/Ashutos1997/claude-design-auditor-skill ~/.claude/skills/
الخطوات
  1. استدعاء المدقق
    قم بمراجعة رابط الشكل هذا: <url>. النطاق: كامل.✓ تم النسخ
    → النتيجة + المشكلات المرتبة مع الإشارة إلى القواعد الـ 18
  2. إصلاح الحرجة
    قم بتطبيق أعلى 5 إصلاحات عالية الخطورة في Figma؛ عرض قبل/بعد.✓ تم النسخ
    → قبل/بعد المعاينات لكل إصلاح
  3. تصدير التسليم
    قم بتصدير علامة dev-handoff مع الرموز المميزة والملاحظات a11y.✓ تم النسخ
    → تخفيض السعر جاهز للإسقاط في التذكرة

النتيجة: يصل التصميم إلى مرحلة التطوير مع إغلاق مشكلاته الرئيسية بالفعل.

المزالق
  • التعامل مع النتيجة على أنها هدف — النتيجة تقيس الالتزام بالقواعد، وليس الذوق. استخدم قائمة النتائج، وليس الرقم فقط
اجمعها مع: claude-code-design-skills

إمكانية الوصول - التحقق من أحد المكونات

👤 يقوم مهندسو الواجهة الأمامية بشحن مكون جديد ⏱ ~20 min beginner

متى تستخدمه: لقد أنشأت عنصر تحكم في مربع الحوار/القائمة/النموذج وتريد اكتشاف المشكلات في وقت مبكر.

الخطوات
  1. الصق مصدر المكون
    قم بتدقيق مكون React Dialog، النطاق: إمكانية الوصول + الحركة.✓ تم النسخ
    → تستشهد النتائج بمعايير WCAG مع الخطوط الدقيقة التي يجب تغييرها
  2. تطبيق الإصلاحات
    تصحيح المكون بالإصلاحات المقترحة؛ إبقاء API دون تغيير.✓ تم النسخ
    → يحترم الفرق واجهة برمجة التطبيقات الحالية

النتيجة: مكون ينجو من مراجعة إمكانية الوصول.

المزالق
  • تجاوز المدقق في الذوق (على سبيل المثال، أسلوب الأخطاء في الوضع a11y) — تقييد النطاق بشكل صريح على a11y +motion
اجمعها مع: motion-dev-animations-skill

فرز واجهة المستخدم القديمة لإعادة تصميم الأولويات

👤 يؤدي التصميم إلى امتلاك إعادة تصميم ⏱ ~60 min advanced

متى تستخدمه: أنت تخطط لإعادة التصميم وتحتاج إلى بيانات حول من أين تبدأ.

الخطوات
  1. شاشات التغذية أو عناوين URL
    قم بتدقيق أفضل 10 شاشات للتطبيق.<url>. النتائج الإجمالية حسب الخطورة.✓ تم النسخ
    → تراكمي عبر الشاشة مع النقاط الساخنة
  2. اختر التسلسل
    اقتراح خطة تسلسل إعادة التصميم مجمعة حسب فئة القاعدة.✓ تم النسخ
    → الخطة مرتبطة بالنتائج، وليس المشاعر

النتيجة: خطة إعادة تصميم مدعومة بالعيوب الخرسانية.

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

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

التدقيق → Figma-to-code → إعادة تدقيق الكود

قم بمراجعة Figma، ثم قم بتحويله إلى React، ثم أعد تدقيق React للتحقق من التكافؤ.✓ تم النسخ
claude-design-auditor-skill + motion-dev-animations-skill

اسمح لخبراء الحركة بإضافة/ضبط الرسوم المتحركة، ثم قم بتشغيل نطاق الحركة الخاص بالمدقق

إضافة الرسوم المتحركة الربيعية لكل عملية تطوير؛ ثم قم بمراجعة الحركة + سلوك الحركة المنخفضة.✓ تم النسخ
claude-design-auditor-skill + figma

اسحب أصول Figma عبر MCP، وقم بالتدقيق، ثم قم بكتابة التعليقات مرة أخرى

لكل إطار تم وضع علامة عليه، قم بإضافة تعليق Figma يلخص النتائج.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
design-audit (SKILL) asset (Figma URL / image / code) + optional scope قبل التسليم، أو أثناء مراجعة التعليمات البرمجية، أو كجزء من خطة إعادة التصميم 0

التكلفة والحدود

تكلفة التشغيل

حصة API
لا أحد
الرموز لكل استدعاء
كبيرة - تهيمن لقطات الشاشة وكتل التعليمات البرمجية الطويلة
التكلفة المالية
حر
نصيحة
نطاق بقوة (a11y فقط، أو الطباعة فقط) للتكرارات السريعة؛ عمليات التدقيق الكاملة ثقيلة الرمز.

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: لا أحد؛ إذا كانت عناوين URL الخاصة بـ Figma خاصة، فقم بمشاركتها عبر تصدير الصور أو استخدم Figma MCP بالنطاق المناسب.
نقل البيانات الخارجي: لا يوجد خروج من الشبكة من المهارة؛ تظل صورك ورمزك في الدردشة.

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

يفتقد المدقق المشكلات الواضحة

زيادة حجم الإدخال أو توفير إطارات عرض/لقطات شاشة متعددة؛ الاستدلال أفضل مع التغطية.

تحقق: Re-run with extra screenshots
الرموز المميزة للتحذير من وجود الكثير من المخرجات

اضبط النطاق على مجموعة فرعية من القواعد الـ 18.

تحقق: Ask for 'scope: typography + contrast + a11y' only
إصلاحات كسر نظام التصميم الحالي

اطلب من المدقق البقاء ضمن مجموعة الرموز المميزة الخاصة بك؛ توريد الرموز.json.

تحقق: Before/after diffs reference token names

البدائل

Claude Design Auditor مقابل البدائل

البديلمتى تستخدمهاالمقايضة
claude-code-design-skillsأنت تريد الانتقال من Figma إلى البرمجة، وليس تدقيق العمل الحالييغطي الجانب الآخر من خط الأنابيب
ai-friendly-web-design-skillأنت تريد إرشادات واسعة النطاق لتصميم الويب، وليس مدققًا صارمًامخرجات أقل تنظيماً
apple-hig-designer-skillأنت تصمم خصيصًا لمنصات Appleمنصة محددة وليس عالمية

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills