● مجتمع
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). استخدمه لاختبار الضغط على التصميم قبل تسليم التطوير، أو لفرض شريط الجودة في العلاقات العامة، أو لفرز قائمة أولويات إعادة التصميم.
لماذا تستخدمه
الميزات الأساسية
- 18 فئة تدقيق - الطباعة، التباين، التباعد، التسلسل الهرمي، الاتساق، a11y، النماذج، الحركة، الوضع المظلم، الاستجابة، الحالات، النسخ، i18n/RTL، الارتفاع، الأيقونية، التنقل، الرموز المميزة، الأخلاقيات
- تنسيقات إدخال متعددة: Figma، وHTML/CSS، وReact/Vue، ولقطات الشاشة، والإطارات السلكية، والنثر
- 0-100 درجة، تسميات الخطورة، منفصلة A11y + درجات الأخلاق
- قبل/بعد أمثلة التعليمات البرمجية لكل إصلاح
- الصادرات: Markdown، Canva، تسليم المطورين
عرض مباشر
كيف يبدو في الممارسة
claude-design-auditor-skill.replay
▶ جاهز
حالات الاستخدام
استخدامات عملية: Claude Design Auditor
متى تستخدمه: تم "إتمام" التصميم وتريد إجراء عملية مسح نهائية قبل أن يبدأ المطورون في استنساخه.
الخطوات
-
استدعاء المدقق
قم بمراجعة رابط الشكل هذا: <url>. النطاق: كامل.✓ تم النسخ
→ النتيجة + المشكلات المرتبة مع الإشارة إلى القواعد الـ 18
-
إصلاح الحرجة
قم بتطبيق أعلى 5 إصلاحات عالية الخطورة في Figma؛ عرض قبل/بعد.✓ تم النسخ
→ قبل/بعد المعاينات لكل إصلاح
-
تصدير التسليم
قم بتصدير علامة dev-handoff مع الرموز المميزة والملاحظات a11y.✓ تم النسخ
→ تخفيض السعر جاهز للإسقاط في التذكرة
النتيجة: يصل التصميم إلى مرحلة التطوير مع إغلاق مشكلاته الرئيسية بالفعل.
المزالق
- التعامل مع النتيجة على أنها هدف — النتيجة تقيس الالتزام بالقواعد، وليس الذوق. استخدم قائمة النتائج، وليس الرقم فقط
متى تستخدمه: لقد أنشأت عنصر تحكم في مربع الحوار/القائمة/النموذج وتريد اكتشاف المشكلات في وقت مبكر.
الخطوات
-
الصق مصدر المكون
قم بتدقيق مكون React Dialog، النطاق: إمكانية الوصول + الحركة.✓ تم النسخ
→ تستشهد النتائج بمعايير WCAG مع الخطوط الدقيقة التي يجب تغييرها
-
تطبيق الإصلاحات
تصحيح المكون بالإصلاحات المقترحة؛ إبقاء API دون تغيير.✓ تم النسخ
→ يحترم الفرق واجهة برمجة التطبيقات الحالية
النتيجة: مكون ينجو من مراجعة إمكانية الوصول.
المزالق
- تجاوز المدقق في الذوق (على سبيل المثال، أسلوب الأخطاء في الوضع a11y) — تقييد النطاق بشكل صريح على a11y +motion
متى تستخدمه: أنت تخطط لإعادة التصميم وتحتاج إلى بيانات حول من أين تبدأ.
الخطوات
-
شاشات التغذية أو عناوين URL
قم بتدقيق أفضل 10 شاشات للتطبيق.<url>. النتائج الإجمالية حسب الخطورة.✓ تم النسخ
→ تراكمي عبر الشاشة مع النقاط الساخنة
-
اختر التسلسل
اقتراح خطة تسلسل إعادة التصميم مجمعة حسب فئة القاعدة.✓ تم النسخ
→ الخطة مرتبطة بالنتائج، وليس المشاعر
النتيجة: خطة إعادة تصميم مدعومة بالعيوب الخرسانية.
التركيبات
اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10
التدقيق → Figma-to-code → إعادة تدقيق الكود
قم بمراجعة Figma، ثم قم بتحويله إلى React، ثم أعد تدقيق React للتحقق من التكافؤ.✓ تم النسخ
اسمح لخبراء الحركة بإضافة/ضبط الرسوم المتحركة، ثم قم بتشغيل نطاق الحركة الخاص بالمدقق
إضافة الرسوم المتحركة الربيعية لكل عملية تطوير؛ ثم قم بمراجعة الحركة + سلوك الحركة المنخفضة.✓ تم النسخ
claude-design-auditor-skill +
figmaاسحب أصول Figma عبر MCP، وقم بالتدقيق، ثم قم بكتابة التعليقات مرة أخرى
لكل إطار تم وضع علامة عليه، قم بإضافة تعليق Figma يلخص النتائج.✓ تم النسخ
التكلفة والحدود
تكلفة التشغيل
- حصة 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 | منصة محددة وليس عالمية |