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

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

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

اطلب من أي مساعد برمجة يعمل بالذكاء الاصطناعي أن يبني لك لوحة تحكم، أو صفحة هبوط، أو لوحة إعدادات. امنحه الحرية الكاملة. ماذا ستحصل عليه؟

خط Inter. تدرج لوني من الأرجواني إلى الأزرق. بطاقات متداخلة داخل بطاقات. نص رمادي على خلفية ملونة. قسم رئيسي (hero section) برقم كبير، وتسمية صغيرة، ولمسة لامعة. ربما بعض "الزجاجية" (glassmorphism) لإضافة "عمق".

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

تم إنشاء Impeccable خصيصًا لكسر هذه الدورة. فبينما أرست مهارة frontend-design الرسمية من Anthropic الأساس، يبني Impeccable عليها بخبرة أعمق، وتغطية أوسع للمجالات، وقيود صارمة توجه الذكاء الاصطناعي بعيدًا عن الأنماط المتوقعة المترسخة في أوزانه.

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

Impeccable هو مهارة في Claude Code - مجموعة قابلة للتثبيت من التعليمات، وملفات مرجعية، وأوامر الشرطة المائلة التي تعزز طريقة تعامل Claude Code مع أي مهمة واجهة أمامية.

في جوهرها، تأتي المهارة بثلاثة مكونات:

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

مهارة frontend-design داخل Impeccable هي دليل تصميم شامل مقسم إلى سبعة ملفات مرجعية خاصة بالمجال:

كل ملف مرجعي دقيق تقنيًا. دليل الطباعة، على سبيل المثال، يتجاوز "استخدام خطوط جيدة" ويشرح كيفية عمل الإيقاع الرأسي (vertical rhythm)، ولماذا تحدث FOUT (وميض النص غير المنسق) وكيفية منعها باستخدام تجاوزات size-adjust، ومتى يكون النوع السلس (fluid type) مع clamp() في الواقع خيارًا خاطئًا. هذا العمق هو ما يميز Impeccable عن دليل الأنماط العام.

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

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

إنه أمر بسيط يحدث فرقًا كبيرًا. مخرجات الواجهة الأمامية المولدة بالذكاء الاصطناعي عامة جزئيًا لأن النموذج لا يملك سياق المشروع - فهو يميل إلى الاختيارات الآمنة والمتوسطة. Impeccable يفرض تحديد هذا السياق أولاً.

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

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

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

تقبل معظم الأوامر وسيط نطاق اختياري. يقوم /audit header بتشغيل التدقيق فقط على شريط التنقل. يركز /polish checkout-form عملية الصقل على تدفق الدفع. هذا الاستهداف الدقيق يبقي Claude مركزًا ويمنعه من لمس أجزاء الواجهة الأمامية المولدة بالذكاء الاصطناعي التي تعمل بالفعل.

تأتي القوة الحقيقية من تسلسل الأوامر. قد يقوم سير العمل النموذجي بتشغيل /audit للكشف عن المشكلات، ثم /arrange لإصلاح مشاكل التخطيط، و/typeset لتنظيم التسلسل الهرمي للطباعة، وأخيرًا /polish كخطوة أخيرة قبل النشر، حيث تبني كل خطوة على سابقتها.

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

المساهمة الأكثر أصالة التي يقدمها Impeccable لمشكلة الواجهة الأمامية المولدة بالذكاء الاصطناعي ليست الأوامر، بل هي الأنماط المضادة (anti-patterns).

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

أنماط الطباعة المضادة:

• لا تستخدم خطوط Inter، Roboto، Arial، أو الخطوط الافتراضية للنظام (فهي تجعل التصميمات غير مرئية)
• لا تستخدم خطوط monospace كاختصار كسول لـ "أجواء المطورين"
• لا تضع أيقونات مستديرة كبيرة فوق كل عنوان، فهذا يبدو وكأنه قالب

أنماط الألوان المضادة:

• لا تستخدم النص الرمادي على خلفيات ملونة، فهذا يبدو باهتًا؛ استخدم درجة أغمق من لون الخلفية بدلاً من ذلك
• لا تستخدم "لوحة ألوان الذكاء الاصطناعي": الأزرق السماوي على الداكن، تدرجات الأرجواني إلى الأزرق، اللمسات النيون على الخلفيات الداكنة
• لا تستخدم الأسود النقي (#000) أو الأبيض النقي (#fff)، قم بتلوين ألوانك المحايدة

أنماط التخطيط المضادة:

• لا تغلف كل شيء في بطاقات، ليس كل عنصر يحتاج إلى حاوية
• لا تضع بطاقات متداخلة داخل بطاقات
• لا تستخدم شبكات بطاقات متطابقة (أيقونة + عنوان + نص، تتكرر إلى الأبد)
• لا توسّط كل شيء؛ فالنص المحاذى لليسار مع التخطيطات غير المتماثلة يبدو مصممًا

أنماط الحركة المضادة:

• لا تستخدم تأثيرات الارتداد (bounce) أو المرونة (elastic easing) فهي تبدو قديمة؛ الأجسام الحقيقية تتباطأ بسلاسة
• لا تحرك خصائص التخطيط مثل width، height، padding؛ استخدم transform وopacity فقط

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

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

Impeccable ليس مجرد ملف توجيه؛ إنه مشروع برمجي متكامل بنظام بناء، ومجموعة اختبارات وحدة، ودعم لمزودين متعددين.

نظام البناء

توجد ملفات مصدر المهارة في source/skills/ وتستخدم واجهة YAML غنية (وفقًا لـ مواصفات مهارات الوكيل). تقوم خطوة بناء واحدة بتحويلها إلى تنسيقات خاصة بالمزود لـ Cursor، وClaude Code، وOpenCode، وGemini CLI، وCodex CLI، وVS Code Copilot، وKiro، وPi:

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

يحصل كل مزود على اللهجة الصحيحة. يحصل Claude Code وOpenCode على بيانات وصفية كاملة بما في ذلك args وallowed-tools. يحصل Codex CLI على تنسيق argument-hint مع عناصر نائبة $ARGNAME. يحصل Gemini على بيانات وصفية دنيا (minimal frontmatter). يتعامل البناء مع كل هذا تلقائيًا من خلال بنية محول معيارية في scripts/lib/transformers/.

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

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

• اختبارات التنسيق تتحقق من استدعاء كل دالة محول بالوسيطات الصحيحة
• اختبارات التكامل تنشئ ملفات مصدر حقيقية في دليل مؤقت وتؤكد وجود ملفات الإخراج المتوقعة لكل مزود
• اختبارات صحة التحويل تتحقق من تحويلات محددة — مثل احتواء إخراج Gemini على {{args}}، واحتواء إخراج Codex على $TARGET، واحتواء إخراج Claude Code على user-invokable: true
• اختبارات الحالات الهامشية تتعامل مع قوائم المهارات الفارغة وتتحقق من عدم تعطل خط الأنابيب

تشغيل مجموعة اختبارات الوحدة يتم بأمر واحد:

bun test

هذه الاختبارات الوحدوية هي ما يجعل المساهمة في Impeccable آمنة. يمكنك تعديل محول، وتشغيل اختبارات الوحدة، ومعرفة على الفور ما إذا كان تغييرك قد أفسد المخرجات لأي من الأدوات الثماني المدعومة. هذا هو نوع الثقة الهندسية الذي يفصل مشاريع المصادر المفتوحة التي يتم صيانتها عن مجموعات التوجيه المهجورة.

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

يحل Impeccable مشكلة جودة الواجهة الأمامية المولدة بالذكاء الاصطناعي على طبقة واجهة المستخدم. ويحل Apidog هذه المشكلة على طبقة API.

عند بناء منتج حقيقي بمساعدة الذكاء الاصطناعي، تكون كلتا الطبقتين مهمتين. فواجهة أمامية مولدة بالذكاء الاصطناعي تبدو مصقولة ستظل تخيب آمال المستخدمين إذا كانت استدعاءات API التي تقوم بها موثقة بشكل سيئ، أو غير مختبرة، أو غير موثوقة. يمنحك Apidog نفس مستوى الدقة لواجهة API الخاصة بك الذي يمنحه لك Impeccable لواجهة المستخدم الخاصة بك.

مع Apidog، يمكنك:

• تصميم واجهات API بصريًا قبل كتابة سطر واحد من كود الواجهة الخلفية
• توليد خوادم وهمية (mock servers) تلقائيًا من مخطط 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 الرسمية من Anthropic؟ يبني Impeccable على مهارة Anthropic بـ 7 ملفات مرجعية خاصة بالمجال، و20 أمر توجيه، ومكتبة أنماط مضادة صريحة. المهارة الرسمية هي نقطة بداية؛ أما Impeccable فهو نظام تصميم شامل مبني عليها.

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

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

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

هل يمكن لـ Impeccable المساعدة في الواجهات الأمامية المعتمدة على API؟ يتعامل Impeccable مع جودة واجهة المستخدم. لطبقة API، قم بإقرانه مع Apidog، الذي يوفر تصميم API مرئيًا، واختبارًا آليًا، وتوليد خادم وهمي — كل ما تحتاجه لبناء واجهات خلفية موثوقة لواجهتك الأمامية المولدة بالذكاء الاصطناعي.

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