مقدمة

معظم نماذج الذكاء الاصطناعي (LLMs) اتعلمت من قوالب جاهزة ومتكررة، عشان كده لما تطلب منها تصميم، دايمًا النتائج شبه بعض:

- خط Inter

- تدرجات بنفسجي

- كروت (Cards) جوه كروت

Impeccable مش مجرد أداة، هي "مجموعة مهارات" (Skills) بتعيد توجيه الـ AI عشان يفكر بعقلية مصمم واجهات محترف، ويتجنب الأخطاء التقليدية اللي بيعملها AI بدون توجيه.

 أولاً: المهارات السبعة الأساسية (The 7 Skills)

الأداة بتغذي الـ AI بـ7 ملفات مرجعية تغطي كل جوانب التصميم:

1. Typography (فن الخطوط)

- اختيار الخطوط اللي تليق على بعضها.

- ضبط أحجام النصوص (Modular Scales) عشان الكلام يبقى واضح ومريح.

2. Color & Contrast (الألوان والتباين)

- استخدام نظام ألوان متقدم (OKLCH) لراحة العين.

- دعم خاص للـ Dark Mode.

3. Spatial Design (التوزيع المكاني)

- تنظيم المسافات (Spacing) والشبكات (Grids) عشان التصميم "يتنفس".

4. Motion Design (الحركة)

- إضافة Animations ناعمة وهادفة، مش مجرد شكل.

5. Interaction Design (التفاعل)

- تحسين الفورمز (Forms)، حالة الأزرار عند الضغط، وأنماط التحميل (Loading patterns).

6. Responsive Design (التصميم المتجاوب)

- تفكير Mobile-first واستخدام تقنيات حديثة زي Container Queries.

7. UX Writing (كتابة المحتوى)

- تحسين نصوص المستخدم مثل رسائل الخطأ وأسماء الأزرار لجعلها واضحة ومباشرة.

ثانياً: الأوامر السحرية (The 20 Commands)

الأوامر دي بتتحط للـ AI جوه الـ Editor (Cursor أو VS Code)، كل أمر له وظيفة محددة:

| الأمر | الوظيفة بالعربي |

|-------|----------------|

| /teach-impeccable | إعداد أولي: تعريف الـ AI على نظام التصميم وحفظه في الإعدادات |

| /audit | فحص شامل: مشاكل الأداء، الاستجابة، وإمكانية الوصول بدون تعديل الكود |

| /critique | مراجعة UX: تقييم وضوح ومريحة التصميم للمستخدم |

| /normalize | توحيد العناصر: أزرار، مسافات، ألوان على Design System واحد |

| /polish | لمسات نهائية قبل النشر (Shipping) |

| /distill | إزالة التعقيد والازدحام في التصميم |

| /clarify | تحسين النصوص لجعلها أوضح |

| /optimize | تحسين أداء الصفحة أو التطبيق |

| /harden | تقوية النظام: التعامل مع الأخطاء وEdge cases ودعم لغات متعددة |

| /animate | إضافة حركات ذكية لتوضيح التفاعل |

| /colorize | إدخال ألوان استراتيجية تخدم التصميم |

| /bolder | جعل التصميم أكثر جرأة وحيوية لو ممل أو باهت |

| /quieter | تهدئة التصميم لو صارخ أو مزدحم |

| /delight | إضافة لمسات ممتعة للمستخدم (Micro-interactions) |

| /extract | تحويل عناصر للتكرار واستخدامها كـ Components |

| /adapt | ضبط التصميم لجميع الأجهزة (Responsive) |

| /onboard | تصميم تجربة Onboarding للمستخدم الجديد |

| /typeset | ضبط الخطوط، الأحجام، والهيكلية |

| /arrange | ترتيب العناصر، المسافات، والتناسق البصري |

| /overdrive | إضافة تأثيرات متقدمة جدًا (Wow factor) |

 ثالثاً: الـ Workflow الصح (تمشي إزاي؟)

لو عندك مشروع شغال فعلاً، أفضل ترتيب لتطبيق الأوامر هو:

1. /audit ← تعرف العيوب والمشاكل أولًا.
2. /normalize ← توحيد المقاسات، الألوان، وإلغاء "العك" البصري.
3. /polish ← ضبط التفاصيل الصغيرة قبل النشر.

رابعاً: كيف تبدأ؟ (Step-by-Step Guide)

عشان تشغل Impeccable عندك، الموضوع مش مجرد كود بتنسخه، دي خطوات محددة:

1. الحصول على الملفات

عندك طريقتين عشان تجيب الـ Skills دي:

• الطريقة الأولى:
•  تروح على الـ Repo وتعمل git pull أو download للملف مضغوط ZIP وتفكه.
• الطريقة الثانية: تدخل على الموقع الرسمي https://impeccable.style/ وتنزل الـ Bundle الجاهزة للأداة اللي بتستخدمها.

2. التركيب حسب الأداة (Installation)

بعد ما تفك الضغط، هتلاقي فولدرات بأسماء الأدوات (Cursor, Claude, VS Code, Gemini). خد الفولدر اللي يخص أداة شغلك وانقله لـ جذر المشروع (Project Root) عندك:

• Cursor: انقل فولدر .cursor للمشروع. (تأكد من تفعيل Agent Skills من إعدادات الـ Beta).
• Claude Code: انقل فولدر .claude.
• Gemini CLI: انقل فولدر .gemini.
• VS Code Copilot: انقل الملفات لمكان الـ Config المخصص لها.

3. طريقة الاستخدام الصح

بمجرد ما تفتح الـ Chat مع الـ AI Agent بتاعك، اكتب علامة السلاش / هتلاقي الـ 20 أمر ظهروا قدامك.

⚠️ ملحوظة تقنية مهمة:

 بلاش تكسل وتأخد محتوى الفولدر كله "Copy-Paste" في الشات مرة واحدة. لو عملت كدا، الـ AI مش هيقدر يستوعب كل القواعد وهيفقد أجزاء منها. الطريقة الصح هي استخدام الـ Commands (زي /audit أو /polish) لأن ده بيخلي الـ AI يستدعي "المهارة" المطلوبة بالظبط ويقرأ ملفاتها المرجعية بتركيز، وده بيضمن لك أعلى جودة للـ Prompt.

ليه Impeccable بيوفر وقتك؟

من غير الطريقة دي، أنت محتاج تكتب Prompt طويل جداً ومعقد كل مرة عشان تشرح للـ AI يبعد عن "العك البصري". مع Impeccable، القواعد دي بقت "مدمجة" في ذاكرة الـ AI. بمجرد ما بتكتب /normalize مثلاً، هو أوتوماتيكياً بيطبق قواعد الـ OKLCH والـ Spacing والـ Typography اللي موجودة في الـ Repo من غير ما تضطر تعيد شرحها.

خامساً: "المحرمات" في التصميم (Anti-Patterns)

Impeccable بتعلم الـ AI الحاجات اللي لازم تتجنبها عشان التصميم يبقى محترف:

- ممنوع استخدام الخطوط المستهلكة زي Arial وInter كافتراضي. 

- ممنوع نص رمادي على خلفيات ملونة (بتقلل الـ Contrast). 

- ممنوع استخدام الأسود الصريح #000 أو الرمادي الخالص، دايمًا ضيف لمسة لون. 

- ممنوع حشر كل حاجة جوه Cards فوق بعضها.

سادساً: أمثلة عملية وليه بيوفر وقتك؟

أمثلة:

• لفحص صفحة معينة: /audit blog
• لتوحيد أزرار معينة: /normalize buttons

القيمة الحقيقية: من غير Impeccable، أنت محتاج تكتب Prompt طويل ومعقد كل مرة. هنا القواعد بقت "مدمجة" في ذاكرة الـ AI، بمجرد ما بتكتب /normalize هو بيطبق كل القواعد أوتوماتيكياً.

روابط تهمك:

🔗 رابط الـ Repo الخاص بـ Impeccable:

 https://github.com/pbakaus/impeccable

📺 فيديو الشرح للمهندس أحمد نجدي (شرح ممتاز للـ Workflow):

 https://youtu.be/VSq3ofaxDTc?si=uNxtt1w91R3Whk0W

خاتمة

في النهاية، الـ AI أداة قوية، بس من غير "كتالوج" صح هيفضل يطلع نتائج مكررة. 

Impeccable هو الكتالوج ده اللي بيخليك تطلع شغل Frontend محترم، نظيف، وبلمسة Designer حقيقي.