ما بقى تطلب من الـ AI يصمّم لك موقع: السر اللي رح يغيّر كود الواجهات للأبد

إذا سبق وطلبت من ChatGPT، Claude، أو Cursor يبني لك واجهة موقع أو صفحة هبوط (Landing Page)، بتعرف الإحساس تماماً: الكود بيشتغل تقنياً، بس النتيجة البصرية؟ كارثة متوقعة.

🔗 رابط المهارة: ui-skills.com/skills/emilkowalski/apple-design

كل المواقع طالعة بتشبه بعضها:

• كروت رمادية بـ border-radius: 8px مملة.
• تباين ألوان ضعيف أو فاقع بشكل عشوائي.
• أزرار بلا روح، وهوامش (margins/paddings) بتخلي العناصر إما خانقة بعضها أو ضايعة بالصفحة.
• اختيارات خطوط وأحجام بتصرخ من بعيد: "هذا الموقع عمله روبوت ما بيفهم بالذوق!"

السبب بسيط: الذكاء الاصطناعي مبرمج ممتاز، لكنه ديزاينر فاشل إلا إذا فرضت عليه قواعد تصميم حقيقية وصارمة.

وهون بيجي الحل العملي اللي غيّر المعادلة.

المهارة السرية: apple-design من Emil Kowalski

المصمم ومطور الواجهات المعروف إميل كوالسكي (Emil Kowalski) — اللي الكل بيعرف شغله الاستثنائي بالـ Micro-interactions وهندسة الأنيميشن — جمع 17 قاعدة تصميم أساسية مستوحاة من فلسفة آبل وصاغها بملف مهارة ذكي (AI Skill/Prompt System) تحت اسم: apple-design.

الفكرة مش مجرد "برومبت لطيف"، بل نظام قيود وهندسة بصرية كاملة تُحقن داخل مساعد الكود تبعك.

شو اللي بيتغير لما تفعّل الـ Skill؟

بمجرد ما تضيف هذه المهارة لبيئة عملك (سواء كنت شغال على Cursor، Windsurf، أو Claude Code)، الـ AI بيبطل يخمّن ويبدأ يطبّق معايير هندسية دقيقة:

1. ضبط المسافات والشبكة (Spatial System & Rhythm)

بدل الأرقام العشوائية، بيلتزم بنظام تباعد متناسق (Spacing Tokens) بيعطي الصفحة نفس "التنفس" والراحة البصرية اللي بتشوفها بصفحات منتجات Apple الرسمية.

2. المنحنيات وزوايا العناصر (Continuous Curvature)

آبل ما بتستخدم زوايا دائرية عادية، بل بتعتمد على معادلات هندسية ناعمة (Squircle و Continuous Curves). المهارة بتجبر الـ AI يعتمد قيم مدروسة تمنع التنافر بين الكروت الداخلية والخارجية (Nested Border Radius Rule).

3. تراتبية الألوان والتباين (Typography & Contrast)

بدل ما يحط نصوص رمادية باهتة بتوجع العين، المهارة بتفرض تدرجات واضحة للتراتبية (Primary, Secondary, Tertiary labels) بنسب تباين عالية تحقق معايير الـ Accessibility وتمنح الموقع مظهر الـ High-End.

4. التفاعل والحركة (Micro-Interactions)

الأزرار والكروت ما بتعود جامدة؛ بتصير استجابتها للماوس (Hover/Active states) ناعمة ومدروسة كأنها جزء أصيل من نظام iOS أو macOS.

كيف تفعّلها وتجرّبها بمشاريعك؟

كل اللي عليك تعمله هو تحميل أو نسخ ملف المهارة وحقنه في محرر الكود أو الـ AI Assistant الخاص فيك:

🔗 رابط المهارة المباشر: ui-skills.com/skills/emilkowalski/apple-design

جرّب اطلب من الـ AI نفس التصميم قبل تفعيل المهارة وبعدها، وشوف الفرق الشاسع بين موقع طالع من قالب تجاري رخيص، وموقع كأنه مبني ومراجع من فريق تصميم محترف في كوبرتينو.