إتقان كلود: مهارة برمجة واجهات مستخدم أمامية فريدة

Impeccable هو مهارة مفتوحة المصدر لـ Claude Code، طورها Paul Bakaus، وتهدف إلى معالجة "ركاكة الذكاء الاصطناعي" في مخرجات الواجهة الأمامية التي يولدها الذكاء الاصطناعي. توفر المهارة 20 أمر توجيه (مثل /audit و/polish و/critique وغيرها)، و7 ملفات مرجعية للتصميم حسب المجال، وأنماط مضادة محددة توجه النموذج بدقة لما يجب تجنبه. النتيجة: واجهات مستخدم تبدو مصممة فعليًا، وليست مجرد مخرجات مولدة عشوائيًا. جرب Apidog اليوم

لماذا تبدو كل واجهة أمامية مولدة بالذكاء الاصطناعي متشابهة

اطلب من أي مساعد برمجة يعمل بالذكاء الاصطناعي بناء لوحة تحكم أو صفحة هبوط أو لوحة إعدادات، وستحصل غالبًا على نفس التكوينات: خط Inter، تدرجات لونية من الأرجواني إلى الأزرق، بطاقات متداخلة، نص رمادي على خلفية ملونة، قسم رئيسي برقم كبير ولمسة "زجاجية" (glassmorphism). السبب أن نماذج الذكاء الاصطناعي مدربة على نفس القوالب العامة، فتنتج نفس المخرجات النمطية. هذه المخرجات تعمل، لكنها تفتقر للتميز.

Impeccable يكسر هذه الحلقة بإضافة خبرة أعمق، وتغطية أوسع، وقيود صارمة توجه الذكاء الاصطناعي بعيدًا عن الأنماط التقليدية.

💡قبل تشغيل /audit أو /polish أو /overdrive في Claude Code مع Impeccable، قم بتنزيل Apidog مجانًا. يمكنك اختبار وتصحيح أخطاء نقاط نهاية API بصريًا والتحقق من الحمولات ورموز المصادقة وأشكال الاستجابة والبيانات الوهمية في ثوانٍ. هذه الخطوة تمنع التحديات بين كود واجهة مستخدم مصقول وتكامل خلفية غير موثوق.

ما هو Impeccable في الواقع

Impeccable عبارة عن حزمة قابلة للتثبيت من التعليمات وملفات مرجعية وأوامر شرطية تعزز عمل Claude Code مع واجهات الاستخدام الأمامية. يتكون من:

مهارة frontend-design الموسعة في Impeccable

تحتوي على دليل تصميم عملي مقسم إلى سبعة ملفات مرجعية بحسب المجال:

كل ملف مرجعي يشرح تقنيات عملية، مثل كيفية ضبط الإيقاع الرأسي (vertical rhythm)، وأسباب حدوث FOUT وكيفية منعها، واختيار الطباعة المناسب. هذه الدقة تميز Impeccable عن الأدلة العامة.

بروتوكول Impeccable لجمع السياق

استعمل الأمر /teach-impeccable قبل أي عمل تصميمي. يطلب تحديد الجمهور المستهدف وحالات الاستخدام وشخصية العلامة التجارية، ويحفظها في .impeccable.md بجذر المشروع للتحميل التلقائي لاحقًا.

هذه الخطوة تمنع المخرجات العامة، وتجبر الذكاء الاصطناعي على إنتاج نتائج مناسبة لسياق مشروعك.

الأوامر العشرين لمعالجة مشاكل الواجهات الأمامية المولدة بالذكاء الاصطناعي

Impeccable يوفر 20 أمرًا لكل سيناريو شائع في الواجهات الأمامية المولدة بالذكاء الاصطناعي. استخدمها كأوامر شرطية داخل Claude Code:

/audit          # فحص الجودة: الوصول، الأداء، الاستجابة
/critique       # مراجعة تجربة المستخدم: التسلسل الهرمي، الوضوح، الرنين العاطفي
/polish         # الصقل الأخير: المحاذاة، التباعد، التفاصيل
/distill        # تجريد الواجهة لما هو جوهري
/normalize      # المواءمة مع معايير نظام التصميم
/animate        # إضافة حركة هادفة
/colorize       # إدخال لون استراتيجي
/bolder         # تضخيم التصاميم الهادئة
/quieter        # تخفيف حدة التصاميم العدوانية
/delight        # إضافة لحظات بهجة
/typeset        # إصلاح خيارات الخطوط والتسلسل الهرمي
/arrange        # إصلاح التخطيط والإيقاع البصري
/harden         # معالجة الأخطاء، i18n، الحالات الهامشية
/optimize       # تحسينات الأداء
/extract        # استخلاص المكونات القابلة لإعادة الاستخدام
/adapt          # التكيف مع الأجهزة المختلفة
/onboard        # تصميم تدفقات الإعداد والحالات الفارغة
/clarify        # تحسين نصوص تجربة المستخدم
/overdrive      # تأثيرات طموحة تقنيًا (تظليلات، فيزياء، إلخ)
/teach-impeccable # إعداد أولي لجمع وحفظ سياق التصميم

يمكنك تقييد الأمر على جزء معين مثل /audit header أو /polish checkout-form لتحسين التركيز. يفضل تسلسل الأوامر: ابدأ بـ/audit، ثم /arrange، و/typeset، وأخيرًا /polish لتحصل على أفضل نتيجة.

مكتبة الأنماط المضادة: تعليم الذكاء الاصطناعي ما لا يجب فعله

يميز Impeccable نفسه عبر مكتبة أنماط مضادة واضحة تمنع تكرار أخطاء الذكاء الاصطناعي الشائعة، مثل:

• عدم استخدام خطوط Inter وRoboto وArial أو الخطوط الافتراضية
• عدم استخدام خطوط monospace كاختصار "أجواء مطورين"
• عدم وضع أيقونات كبيرة فوق كل عنوان
• عدم استخدام نص رمادي على خلفيات ملونة
• عدم استخدام لوحة ألوان "الذكاء الاصطناعي" النمطية مثل الأزرق السماوي على الداكن أو التدرجات التقليدية
• عدم استخدام الأسود/الأبيض النقي، بل تلوين الألوان المحايدة
• عدم تغليف كل شيء في بطاقات وعدم التداخل غير المبرر
• عدم تحريك خصائص التخطيط مباشرة، بل استخدم transform وopacity

هذه الأنماط المضادة تلجم المخرجات النمطية وتفرض تميزًا بصريًا وعمليًا.

تحت الغطاء: نظام البناء، اختبارات الوحدة، ودعم الأدوات المتعددة

نظام البناء

مصدر المهارات في source/skills/ بصيغة YAML، وتحول تلقائيًا إلى تنسيقات مختلفة عبر أمر واحد:

bun run build      # تجميع جميع تنسيقات المزودات المدعومة
bun run rebuild    # تنظيف وإعادة البناء من الصفر

كل مزود يحصل على التنسيق المناسب تلقائيًا عبر النظام البرمجي.

مجموعة اختبارات الوحدة

Impeccable يأتي باختبارات وحدة تعتمد على Bun في tests/build.test.js، وتغطي كامل خط البناء والتحويل. شغل الاختبارات بالأمر:

bun test

هذه الاختبارات تضمن عدم كسر المخرجات عند التعديل على المحولات أو إضافة دعم جديد.

Impeccable + Apidog: الجمع بين جودة التصميم وجودة API

Impeccable يرفع جودة الواجهة الأمامية، و Apidog يرفع جودة الـAPI. في المشاريع الفعلية، تحتاج كلا الطبقتين.

مع Apidog يمكنك:

• تصميم واجهات API بصريًا قبل كتابة الكود
• توليد خوادم وهمية تلقائيًا من مخطط API
• تشغيل اختبارات API آلية لكل نقطة نهاية
• مشاركة توثيق API تفاعلي مع الفريق

استخدم Impeccable لجودة الواجهة الأمامية وApidog لجودة الـAPI. معًا تحصل على منتج مستقر واحترافي. جرب Apidog اليوم لتوليد خوادم وهمية وتوثيقات API لمشاريعك القادمة.

البدء باستخدام Impeccable

حمّل الحزمة الجاهزة من impeccable.style، اختر أداتك، واستخرجها.

لتثبيت Claude Code:

# تثبيت على مستوى المشروع
cp -r dist/claude-code/.claude your-project/

# أو التثبيت عالميًا لجميع المشاريع
cp -r dist/claude-code/.claude/* ~/.claude/

بعدها شغل /teach-impeccable مرة واحدة لحفظ سياق التصميم، ثم استخدم الأوامر العشرين حسب حاجتك.

الأسئلة الشائعة

ما الفرق بين Impeccable ومهارة frontend-design الرسمية؟ Impeccable يوسع مهارة Anthropic بملفات مرجعية أعمق، أوامر أكثر، وأنماط مضادة صريحة. هو نظام تصميم متكامل وليس مجرد دليل.

هل يعمل Impeccable مع أدوات أخرى غير Claude Code؟ نعم. يدعم Cursor، Claude Code، OpenCode، Gemini CLI، Codex CLI، VS Code Copilot، Kiro، وPi. البناء يجمع تنسيق مصدر واحد إلى جميع اللهجات المطلوبة.

ما فائدة أمر /overdrive؟ لإضافة تأثيرات طموحة تقنيًا مثل تظليلات WebGL أو جداول افتراضية عالية الأداء أو فيزياء على مربعات الحوار. استخدمه لتجربة مستخدم غير تقليدية.

كيف تُختبر التعديلات في Impeccable؟ اختبارات الوحدة مبنية على Bun وتغطي كامل خط الأنابيب. شغل bun test للتحقق من صحة النتائج بعد أي تعديل.

هل يدعم Impeccable مشاريع تعتمد على API؟ Impeccable يركز على جودة الواجهة الأمامية. لمستوى API استخدمه مع Apidog الذي يدعم التصميم والاختبار التلقائي وتوليد الخوادم الوهمية.

هل Impeccable مفتوح المصدر؟ نعم. مرخص Apache 2.0، والكود متاح عبر GitHub، والحزم عبر impeccable.style.