دليل قراءة متعدد اللغات للمهارة
frontend-designالغرض والاستخدام والمصدر
أنشئ واجهات أمامية مميزة وعالية الجودة، مصممة خصيصًا للاستخدام في بيئات الإنتاج. استخدم هذه المهارة عندما يطلب منك المستخدم إنشاء مكونات ويب، أو صفحات، أو عناصر، أو ملصقات، أو تطبيقات (مثل مواقع الويب، وصفحات الهبوط، ولوحات المعلومات، ومكونات React).HTML/CSSالتخطيطات، أو عندماstyling/beautifyingأي واجهة مستخدم ويب). يُولّد رمزًا برمجيًا متقنًا وتصميمًا لواجهة المستخدم يتجنب جماليات الذكاء الاصطناعي العامة.
تم استرجاع المصدر:
- مستودع المصدر
- vercel-labs/open-agents
- SKILL.md
.agents/skills/frontend-design/SKILL.md- نجوم المستودع
- 5,871
- آخر تحديث للمستودع
- 2026-08-29
- تصنيف القدرات
- تصميم
- وقت التجميع الأخير
الترخيص: MIT
مقتطفات سير العمل هي أدوات مساعدة للقراءة، وليست تعليمات تنفيذية من Codez. لم يتم تشغيل أي مهارة تابعة لجهة خارجية لإنتاج هذه الصفحة.
تُعدّ فقرات الغرض وسير العمل الواردة أدناه موادًا أساسية، مُنظّمة ومترجمة لتسهيل القراءة. وهي تختلف عن التحليل التحريري لـ Codez المُصنّف بشكل منفصل.
ما تفعله هذه المهارة
أنشئ واجهات أمامية مميزة وعالية الجودة، مصممة خصيصًا للاستخدام في بيئات الإنتاج. استخدم هذه المهارة عندما يطلب منك المستخدم إنشاء مكونات ويب، أو صفحات، أو عناصر، أو ملصقات، أو تطبيقات (مثل مواقع الويب، وصفحات الهبوط، ولوحات المعلومات، ومكونات React).HTML/CSSالتخطيطات، أو عندماstyling/beautifyingأي واجهة مستخدم ويب). يُولّد رمزًا برمجيًا متقنًا وتصميمًا لواجهة المستخدم يتجنب جماليات الذكاء الاصطناعي العامة.
طريقة الاستخدام وفق المستند الأصلي
ملخص
تُوجّه هذه المهارة عملية إنشاء واجهات أمامية مميزة وعالية الجودة، تتجنب المظهر العام المبتذل الذي يُوحي بالذكاء الاصطناعي. يتم تنفيذ كود برمجي حقيقي مع إيلاء اهتمام استثنائي للتفاصيل الجمالية والخيارات الإبداعية. يُقدّم المستخدم متطلبات الواجهة الأمامية: مُكوّن، أو صفحة، أو تطبيق، أو واجهة للبناء. وقد تتضمن هذه المتطلبات معلومات حول الغرض، أو الجمهور المستهدف، أو القيود التقنية.
مقتطف من المصدر · L6 ↗التفكير التصميمي
قبل البدء بالبرمجة، افهم السياق والتزم بتوجه جمالي جريء: الغرض: ما المشكلة التي تحلها هذه الواجهة؟ من يستخدمها؟
مقتطف من المصدر · L10 ↗إرشادات جماليات واجهة المستخدم
الطباعة: اختر خطوطًا جميلة وفريدة وجذابة. تجنب الخطوط الشائعة مثل Arial وInter، واختر بدلاً منها خطوطًا مميزة تُضفي جمالية على واجهة المستخدم؛ خطوطًا غير متوقعة وذات طابع مميز. اجمع بين خط عرض مميز وخط نص أنيق. الألوان والسمة: التزم بتناسق جمالي. استخدم متغيرات CSS لتحقيق الاتساق. الألوان السائدة ذات اللمسات الحادة تتفوق على الألوان الهادئة والمتساوية.
مقتطف من المصدر · L26 ↗المتطلبات والإعداد
لم يتم اختيار أي فقرة متطلبات مختصرة من هذا الملف. هذا لا يعني أن المهارة لا تعتمد على أي ملفات أخرى. راجع تعليمات إعداد المستودع والملفات المرجعية.
الحدود وفحوصات الجودة
لم يتم تحديد أي مقطع حدود منفصل من هذا الملف. هذا لا يعني أن المهارة آمنة لكل مدخلات أو بيئة. راجع المصدر بالكامل وتحقق من صحة النتيجة بنفسك.
ابدأ بتجربة آمنة
- تحقق من المضيف المدعوم وتعليمات تثبيت المستودع. احتفظ بمجلد المهارات والبرامج النصية والأصول والوثائق المشار إليها معًا؛SKILL.mdقد يؤدي وجود شخص واحد فقط إلى إغفال بعض التبعيات.
- زوّد البرنامج ببياناتك الفعلية، والمخرجات المطلوبة، ومعايير القبول. يعتمد بناء جملة الاستدعاء والأدوات المتاحة على النظام المضيف؛ ولا يفترض هذا الموقع وجود أمر تثبيت موحد.
- جرّب سير العمل الأصلي في مشروع مؤقت أو على نسخة احتياطية. راجع العمليات التي تُغيّر الملفات أو الخدمات البعيدة أو الموارد القابلة للفوترة قبل السماح بها.
- تحقق من صحة المخرجات بمقارنتها بفحوصات جودة المصدر ومتطلباتك الخاصة. لا يُعدّ نجاح عملية التشغيل أو ارتفاع عدد النجوم في المستودع دليلاً على صحة النتيجة.
اقرأ المزيد في المصدر
المهارات ذات الصلة
الترجمة والنطاق
يختار دليل القراءة هذا مقاطع من المصدر الرئيسي المثبتSKILL.mdهذه الترجمة مساعدة. وهي ليست دليلاً كاملاً ولا تضمن التوافق المُختَبَر. يُرجى قراءة النص الأصلي والملفات المُشار إليها قبل الاستخدام.
تشير هذه المقدمة إلى النسخة المثبتة أدناه؛ ويتم عرض نشاط المستودع الحالي ووقت التجميع بشكل منفصل.
- المصدر بإصدار ثابت
- اقرأ الأصل ↗
- تم استرجاع المصدر
- معرّف نسخة Git
cf865e94de7729751c747171785b6ce57e7b178c- المصدر SHA-256
1bb3263d490c2585bf64a4e399ab28650a5034d7705abdbbe82a5a9dce1e6873