دليل قراءة متعدد اللغات للمهارة
emil-design-engالغرض والاستخدام والمصدر
تجسد هذه المهارة فلسفة إميل كوالسكي حول تحسين واجهة المستخدم، وتصميم المكونات، وقرارات الرسوم المتحركة، والتفاصيل غير المرئية التي تجعل البرامج تبدو رائعة.
تم استرجاع المصدر:
- مستودع المصدر
- vercel-labs/open-agents
- SKILL.md
.agents/skills/emil-design-eng/SKILL.md- نجوم المستودع
- 5,871
- آخر تحديث للمستودع
- 2026-08-29
- تصنيف القدرات
- سير عمل الوكيل
- وقت التجميع الأخير
الترخيص: MIT
مقتطفات سير العمل هي أدوات مساعدة للقراءة، وليست تعليمات تنفيذية من Codez. لم يتم تشغيل أي مهارة تابعة لجهة خارجية لإنتاج هذه الصفحة.
تُعدّ فقرات الغرض وسير العمل الواردة أدناه موادًا أساسية، مُنظّمة ومترجمة لتسهيل القراءة. وهي تختلف عن التحليل التحريري لـ Codez المُصنّف بشكل منفصل.
ما تفعله هذه المهارة
تجسد هذه المهارة فلسفة إميل كوالسكي حول تحسين واجهة المستخدم، وتصميم المكونات، وقرارات الرسوم المتحركة، والتفاصيل غير المرئية التي تجعل البرامج تبدو رائعة.
طريقة الاستخدام وفق المستند الأصلي
متى يتم استخدام النوابض
تفاعلات السحب مع الزخم، عناصر يجب أن تبدو "نابضة بالحياة" (مثل Dynamic Island من Apple)، إيماءات يمكن مقاطعتها أثناء الحركة، تفاعلات تتبع الماوس الزخرفية.
مقتطف من المصدر · L143 ↗هندسة التصميم
أنت مهندس تصميم يتمتع بحس حرفي رفيع. تبني واجهات مستخدم حيث تتكامل كل التفاصيل لتشكل تجربة استخدام مثالية. أنت تدرك أنه في عالمٍ تتشابه فيه برامج الجميع، يبقى الذوق هو العامل الحاسم.
مقتطف من المصدر · L6 ↗الذوق يُكتسب بالتدريب، وليس فطريًا.
الذوق الرفيع ليس مجرد تفضيل شخصي، بل هو غريزة مكتسبة: القدرة على رؤية ما وراء الظاهر وإدراك ما يرتقي بالتجربة. تنمي هذه المهارة بالاطلاع على أعمال مميزة، والتفكير ملياً في سرّ الشعور الجيد تجاه شيء ما، والممارسة الدؤوبة. عند تصميم واجهات المستخدم، لا تكتفِ بجعلها تعمل فحسب، بل ادرس جيداً أسباب شعور المستخدم بأفضل الواجهات. حلل الرسوم المتحركة، وتفحّص التفاعلات، وكن فضولياً.
مقتطف من المصدر · L12 ↗Before: transition: all 300ms
After: transition: transform 200ms ease-out
────────────────────────────
Before: scale(0)
After: scale(0.95)المتطلبات والإعداد
لم يتم اختيار أي فقرة متطلبات مختصرة من هذا الملف. هذا لا يعني أن المهارة لا تعتمد على أي ملفات أخرى. راجع تعليمات إعداد المستودع والملفات المرجعية.
الحدود وفحوصات الجودة
لا تقم بالتحريك من المقياس (0)
لا شيء في العالم الحقيقي يختفي ويظهر بشكل كامل. عناصر متحركة منscale(0)تبدو وكأنها تظهر من العدم. ابدأ منscale(0.9)أو أعلى، بالإضافة إلى الشفافية. حتى المقياس الأولي الذي بالكاد يُرى يجعل المدخل يبدو أكثر طبيعية، مثل بالون له شكل مرئي حتى عندما يكون منكمشًا.
ابدأ بتجربة آمنة
- تحقق من المضيف المدعوم وتعليمات تثبيت المستودع. احتفظ بمجلد المهارات والبرامج النصية والأصول والوثائق المشار إليها معًا؛SKILL.mdقد يؤدي وجود شخص واحد فقط إلى إغفال بعض التبعيات.
- زوّد البرنامج ببياناتك الفعلية، والمخرجات المطلوبة، ومعايير القبول. يعتمد بناء جملة الاستدعاء والأدوات المتاحة على النظام المضيف؛ ولا يفترض هذا الموقع وجود أمر تثبيت موحد.
- جرّب سير العمل الأصلي في مشروع مؤقت أو على نسخة احتياطية. راجع العمليات التي تُغيّر الملفات أو الخدمات البعيدة أو الموارد القابلة للفوترة قبل السماح بها.
- تحقق من صحة المخرجات بمقارنتها بفحوصات جودة المصدر ومتطلباتك الخاصة. لا يُعدّ نجاح عملية التشغيل أو ارتفاع عدد النجوم في المستودع دليلاً على صحة النتيجة.
اقرأ المزيد في المصدر
- هندسة التصميم
- الذوق يُكتسب بالتدريب، وليس فطريًا.
- تتراكم التفاصيل غير المرئية
- الجمال هو قوة دافعة
- نموذج المراجعة (مطلوب)
- إطار اتخاذ القرارات في مجال الرسوم المتحركة
- 1هل ينبغي تحريك هذا على الإطلاق؟
- 2ما هو الهدف؟
- 3ما هي طريقة التخفيف التي ينبغي استخدامها؟
- 4ما هي السرعة المطلوبة؟
- الأداء المُدرَك
- رسوم متحركة ربيعية
- متى يتم استخدام النوابض
- تفاعلات الفأر القائمة على الزنبرك
- تكوين الزنبرك
- ميزة قابلية المقاطعة
- يجب أن تكون الأزرار سريعة الاستجابة
- لا تقم بالتحريك من المقياس (0)
- اجعل الفطائر المنتفخة تراعي الأصل
- تلميحات الأدوات: تخطي التأخير عند التمريرات اللاحقة
- استخدم انتقالات CSS عبر الإطارات الرئيسية لواجهة مستخدم قابلة للمقاطعة
- استخدم التمويه لإخفاء الانتقالات غير المثالية
- قم بتحريك حالات الدخول باستخدام @starting-style
- ترجمة Y مع النسب المئوية
- دالة scale() تُغيّر حجم العناصر الفرعية أيضًا
- 3تحويلات D للعمق
- أصل التحويل
- مسار القص للرسوم المتحركة
- الشكل الداخلي
- علامات تبويب ذات انتقالات لونية مثالية
المهارات ذات الصلة
الترجمة والنطاق
يختار دليل القراءة هذا مقاطع من المصدر الرئيسي المثبتSKILL.mdهذه الترجمة مساعدة. وهي ليست دليلاً كاملاً ولا تضمن التوافق المُختَبَر. يُرجى قراءة النص الأصلي والملفات المُشار إليها قبل الاستخدام.
تشير هذه المقدمة إلى النسخة المثبتة أدناه؛ ويتم عرض نشاط المستودع الحالي ووقت التجميع بشكل منفصل.
- المصدر بإصدار ثابت
- اقرأ الأصل ↗
- تم استرجاع المصدر
- معرّف نسخة Git
cf865e94de7729751c747171785b6ce57e7b178c- المصدر SHA-256
9d261c73de2c2c4dc5662ab20117b8e045c7b71958f8042acf037325444ebe6b